/* My Nexus (2026 rebuild): a calm dashboard of everything a member has saved. */
.mb .mb-main.nx { width: min(1480px, calc(100% - 64px)); --line: rgba(255,255,255,.07); --line2: rgba(255,255,255,.12); --card: rgba(255,255,255,.035); --mut: #a1a1aa; --dim: #71717a; --acc: 167, 139, 250; --ease: cubic-bezier(.22, 1, .36, 1); }
.nx { color: #e4e4e7; }
.nx svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nx svg.fill { fill: currentColor; stroke: none; }
.nx a { color: inherit; text-decoration: none; }
.nx .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Loading skeleton */
.nx-loading { display: grid; gap: 18px; }
.sk { border-radius: 16px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.08), rgba(255,255,255,.04)) 0 0 / 300% 100%; animation: skShine 1.4s ease-in-out infinite; }
.sk-hero { height: 86px; width: min(520px, 100%); }
.sk-bar { height: 54px; }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.sk-grid .sk { height: 180px; }
@keyframes skShine { to { background-position: -300% 0; } }

/* Greeting */
.nx-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; animation: nxIn .6s var(--ease) both; }
.nx-me { display: flex; align-items: center; gap: 18px; min-width: 0; }
.nx-av { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #8b5cf6, #22d3ee); color: #fff; font: 800 26px Outfit, Inter, sans-serif; box-shadow: 0 0 0 3px rgba(255,255,255,.06), 0 12px 30px -10px rgba(139,92,246,.7); }
.nx-av img { width: 100%; height: 100%; object-fit: cover; }
.nx-hero h1 { margin: 0; color: #fff; font: 800 clamp(26px, 3vw, 38px)/1.1 Outfit, Inter, sans-serif; letter-spacing: -.02em; }
.nx-hero p { margin: 4px 0 0; color: var(--mut); font-size: 15px; }
.nx-links { display: flex; flex-wrap: wrap; gap: 8px; }
.nx-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 999px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line2); color: #d4d4d8; font-size: 13px; font-weight: 600; transition: background .2s; }
.nx-chip:hover { background: rgba(255,255,255,.08); }
.nx-chip svg { width: 15px; height: 15px; }
.nx-chip.on svg { color: #8b95ff; }
.nx-chip.off { color: var(--mut); }

/* Search everything */
.nx-search { position: relative; display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 16px 0 18px; margin-bottom: 26px; border-radius: 16px; background: rgba(10,10,16,.7); box-shadow: inset 0 0 0 1px var(--line2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: box-shadow .2s; animation: nxIn .6s var(--ease) both .05s; }
.nx-search:focus-within { box-shadow: inset 0 0 0 1px rgba(var(--acc), .7), 0 0 0 4px rgba(var(--acc), .12); }
.nx-search svg { color: var(--dim); }
.nx-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: #fff; font-size: 16px; outline: none; }
.nx-search input::placeholder { color: #5f5f6b; }
.nx-search kbd { padding: 2px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line2); color: var(--dim); font: 600 12px Inter, sans-serif; }

/* Layout: side menu + content */
.nx-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 34px; align-items: start; }
.nx-nav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; animation: nxIn .6s var(--ease) both .1s; }
.nx-nav h4 { margin: 18px 12px 6px; color: #5f5f6b; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.nx-nav h4:first-child { margin-top: 0; }
.nx-nav button { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 11px; background: none; color: var(--mut); font: 600 14px Inter, sans-serif; text-align: left; cursor: pointer; transition: background .2s, color .2s; }
.nx-nav button:hover { background: rgba(255,255,255,.04); color: #fff; }
.nx-nav button[aria-current="true"] { background: rgba(var(--acc), .13); color: #fff; }
.nx-nav button[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: rgb(var(--acc)); }
.nx-nav button svg { width: 18px; height: 18px; }
.nx-nav button[aria-current="true"] svg { color: rgb(var(--acc)); }
.nx-nav em { margin-left: auto; color: #5f5f6b; font-style: normal; font-size: 12px; font-variant-numeric: tabular-nums; }
.nx-views { min-width: 0; }
.nx-view { animation: nxView .45s var(--ease) both; }
@keyframes nxView { from { opacity: 0; transform: translateY(10px); } }
@keyframes nxIn { from { opacity: 0; transform: translateY(14px); } }

/* Headings */
.nx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.nx-head h2 { margin: 0; color: #fff; font: 800 28px/1.1 Outfit, Inter, sans-serif; letter-spacing: -.02em; }
.nx-head p { margin: 6px 0 0; color: var(--mut); font-size: 14.5px; }
.nx-sec-h { display: flex; align-items: center; justify-content: space-between; margin: 34px 0 14px; }
.nx-sec-h:first-child { margin-top: 0; }
.nx-sec-h h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: #fff; font: 700 17px Outfit, Inter, sans-serif; }
.nx-sec-h h3 small { color: var(--dim); font: 500 13px Inter, sans-serif; }
.nx-foot { margin: 22px 0 0; color: var(--dim); font-size: 13px; line-height: 1.6; }
.nx-foot a { color: #c4b5fd; }
.nx-foot b { color: #d4d4d8; font-weight: 600; }

/* Buttons and controls */
.nx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px; border: 0; border-radius: 11px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line2); color: #e4e4e7; font: 600 13.5px Inter, sans-serif; cursor: pointer; white-space: nowrap; transition: background .2s, transform .15s; }
.nx-btn:hover { background: rgba(255,255,255,.1); }
.nx-btn:active { transform: scale(.98); }
.nx-btn.primary { background: #e7e7ea; box-shadow: none; color: #0b0b10; }
.nx-btn.primary:hover { background: #f4f4f5; }
.nx-btn.danger { color: #fca5a5; box-shadow: inset 0 0 0 1px rgba(239,68,68,.4); }
.nx-btn.discord { background: #5865f2; box-shadow: none; color: #fff; }
.nx-btn.discord:hover { background: #4752c4; }
.nx-btn:disabled { opacity: .5; cursor: default; }
.nx-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line); }
.nx-seg button, .nx-seg label span { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border: 0; border-radius: 9px; background: none; color: var(--mut); font: 600 13px Inter, sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.nx-seg.small button, .nx-seg.small label span { height: 28px; padding: 0 11px; font-size: 12.5px; }
.nx-seg button[aria-pressed="true"], .nx-seg label input:checked + span { background: rgba(255,255,255,.1); color: #fff; }
.nx-seg label input { position: absolute; opacity: 0; pointer-events: none; }
.nx-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.nx-mini-search { display: flex; align-items: center; gap: 9px; flex: 1; max-width: 360px; height: 40px; padding: 0 12px; border-radius: 11px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--line); }
.nx-mini-search svg { width: 16px; height: 16px; color: var(--dim); }
.nx-mini-search input { flex: 1; min-width: 0; border: 0; background: none; color: #fff; font-size: 14px; outline: none; }
.nx-more { display: block; margin: 18px auto 0; height: 38px; padding: 0 18px; border: 0; border-radius: 99px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line2); color: #d4d4d8; font: 600 13px Inter, sans-serif; cursor: pointer; }
.nx-banner { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 16px; padding: 14px 16px; border: 0; border-radius: 14px; background: linear-gradient(90deg, rgba(var(--acc), .1), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(var(--acc), .25); color: #e4e4e7; font: 600 14px Inter, sans-serif; text-align: left; cursor: pointer; }
.nx-banner > svg:last-child { margin-left: auto; color: var(--dim); }
.sp-dot { width: 10px; height: 10px; border-radius: 50%; background: #1db954; box-shadow: 0 0 10px #1db954; flex: none; }

/* At a glance (quiet numbers) */
.nx-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 34px; }
.nx-glance button { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: #e4e4e7; text-align: left; cursor: pointer; transition: background .2s, transform .2s var(--ease), box-shadow .2s; }
.nx-glance button:hover { background: rgba(255,255,255,.06); transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line2); }
.nx-glance i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(var(--c), .14); color: rgb(var(--c)); font-style: normal; }
.nx-glance b { display: block; color: #fff; font: 700 19px Outfit, Inter, sans-serif; font-variant-numeric: tabular-nums; }
.nx-glance small { color: var(--dim); font-size: 12px; }

/* Card grid */
.nx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.nx-grid.songs { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.nx-grid.photos, .nx-grid.lists { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.nx-card { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; animation: cardIn .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms); transition: transform .25s var(--ease), box-shadow .25s, background .25s; }
.nx-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line2), 0 18px 40px -22px rgba(0,0,0,.9); }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.nx-card .pad { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 14px 16px 14px; min-width: 0; }
.nx-card .top { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--dim); font-size: 12px; }
.nx-card .top span:not(.tag) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-card .fav { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 6px; background: hsl(var(--h, 260) 50% 40%); color: #fff; font: 800 11px Inter, sans-serif; overflow: hidden; }
.nx-card .fav img { width: 16px; height: 16px; }
.nx-card .tag { margin-left: auto; padding: 2px 8px; border-radius: 99px; background: rgba(255,255,255,.06); color: var(--mut); font-size: 11px; font-weight: 600; white-space: nowrap; }
.nx-card h4 { margin: 0; color: #fff; font: 600 15px/1.35 Inter, sans-serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.nx-card h4 a:hover { text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); }
.nx-card .ex { margin: 0; padding-left: 11px; border-left: 2px solid rgba(var(--acc), .5); color: #b4b4bd; font-size: 13.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.nx-card .ex.plain { padding-left: 0; border: 0; }
.nx-card .sub { color: var(--mut); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-card .bot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; color: #5f5f6b; font-size: 12px; }
.nx-card .acts { display: flex; gap: 2px; margin-left: auto; opacity: 0; transition: opacity .2s; }
.nx-card:hover .acts, .nx-card:focus-within .acts { opacity: 1; }
@media (hover: none) { .nx-card .acts { opacity: 1; } }
.nx-ic { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 9px; background: none; color: var(--mut); cursor: pointer; transition: background .2s, color .2s; }
.nx-ic:hover { background: rgba(255,255,255,.08); color: #fff; }
.nx-ic.del:hover { background: rgba(239,68,68,.14); color: #fca5a5; }
.nx-ic svg { width: 16px; height: 16px; }
/* Media cards: picture on top */
.nx-card .media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--bg, linear-gradient(135deg, #27214a, #13182b)); overflow: hidden; }
.photos .nx-card .media { aspect-ratio: 4 / 3; }
.lists .nx-card .media { aspect-ratio: 1; }
.nx-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.nx-card:hover .media img { transform: scale(1.04); }
.nx-card .media > svg { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; color: rgba(255,255,255,.35); }
.nx-card .media .play { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; opacity: 0; transform: translateY(6px); transition: .25s var(--ease); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.nx-card:hover .media .play { opacity: 1; transform: none; }
.nx-card .media .play svg { width: 16px; height: 16px; fill: currentColor; stroke: none; margin-left: 2px; }
.nx-card .badge { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 99px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 700; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.badge.yt { box-shadow: inset 0 0 0 1px rgba(255,0,51,.5); } .badge.sp { box-shadow: inset 0 0 0 1px rgba(29,185,84,.6); }
.nx-card .row { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.nx-card .row .nx-btn { height: 34px; padding: 0 13px; font-size: 13px; }
/* X cards */
.nx-card.xk .top svg { width: 14px; height: 14px; color: #e4e4e7; }
.nx-card.xk .ex { border-left-color: rgba(255,255,255,.25); }
/* Note cards */
.nx-notes { columns: 4 260px; column-gap: 14px; }
.nx-notes .nx-card { break-inside: avoid; margin-bottom: 14px; background: linear-gradient(160deg, hsl(var(--h) 45% 16% / .9), hsl(var(--h) 35% 10% / .9)); box-shadow: inset 0 0 0 1px hsl(var(--h) 60% 60% / .16); }
.nx-notes .nx-card p { margin: 0; color: #e9e9ef; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.nx-compose { margin-bottom: 20px; padding: 14px 16px 12px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line2); transition: box-shadow .2s; }
.nx-compose:focus-within { box-shadow: inset 0 0 0 1px rgba(var(--acc), .6), 0 0 0 4px rgba(var(--acc), .1); }
.nx-compose textarea { display: block; width: 100%; min-height: 52px; border: 0; background: none; color: #fff; font: 15px/1.55 Inter, sans-serif; resize: vertical; outline: none; }
.nx-compose-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; color: var(--dim); font-size: 12px; }
/* Playlist add */
.nx-add { display: flex; gap: 10px; margin-bottom: 18px; }
.nx-add input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--line2); color: #fff; font-size: 14.5px; outline: none; }
.nx-add input:focus { box-shadow: inset 0 0 0 1px rgba(var(--acc), .6); }
.nx-add .nx-btn { height: 44px; }
/* Empty states */
.nx-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 46px 20px; border-radius: 18px; background: rgba(255,255,255,.02); box-shadow: inset 0 0 0 1px var(--line); color: var(--mut); font-size: 14px; text-align: center; }
.nx-empty i { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 16px; background: rgba(var(--acc), .1); color: #c4b5fd; font-style: normal; }
.nx-empty i svg { width: 24px; height: 24px; }
.nx-empty b { color: #fff; font-size: 16px; }
.nx-empty .nx-btn { margin-top: 8px; }
/* Shortcuts */
.nx-shortcuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.nx-shortcuts a { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, transform .2s var(--ease); }
.nx-shortcuts a:hover { background: rgba(255,255,255,.06); transform: translateY(-2px); }
.nx-shortcuts i { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: rgba(var(--c), .14); color: rgb(var(--c)); font-style: normal; }
.nx-shortcuts b { display: block; color: #fff; font-size: 14px; }
.nx-shortcuts small { color: var(--dim); font-size: 12.5px; }
.nx-shortcuts a > svg:last-child { margin-left: auto; color: #5f5f6b; }
/* Search results */
.nx-group + .nx-group { margin-top: 30px; }
/* Betting */
.nx-money { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 14px; }
.nx-money > div { padding: 18px 20px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.nx-money > div:first-child { background: linear-gradient(135deg, rgba(34,197,94,.12), rgba(255,255,255,.02)); }
.nx-money span { color: var(--dim); font-size: 12.5px; font-weight: 600; }
.nx-money b { display: block; margin-top: 4px; color: #fff; font: 800 26px Outfit, Inter, sans-serif; font-variant-numeric: tabular-nums; }
.nx-money > div:first-child b { font-size: 34px; }
.nx-money b.pos { color: #4ade80; } .nx-money b.neg { color: #f87171; }
.nx-money small { color: var(--dim); font-size: 12px; }
/* Smart Nexus */
.nx-preview { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(90deg, rgba(88,101,242,.14), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(88,101,242,.3); }
.nx-preview b { color: #a5b4fc; font-size: 13px; }
.nx-preview p { margin: 2px 0 0; color: #fff; font-size: 15px; transition: opacity .16s; }
.nx-preview p.swap { opacity: 0; }
.nx-block { margin-bottom: 16px; padding: 20px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.nx-block h3 { margin: 0 0 14px; color: #fff; font: 700 16px Outfit, Inter, sans-serif; }
.nx-block h3 small { color: var(--dim); font: 500 13px Inter, sans-serif; }
.nx-tones { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-bottom: 14px; }
.nx-tones label { position: relative; cursor: pointer; }
.nx-tones input { position: absolute; opacity: 0; }
.nx-tones span { display: block; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, box-shadow .2s; }
.nx-tones b { display: block; color: #fff; font-size: 14px; }
.nx-tones small { color: var(--dim); font-size: 12px; }
.nx-tones input:checked + span { background: rgba(var(--acc), .12); box-shadow: inset 0 0 0 1px rgba(var(--acc), .6); }
.nx-tones input:focus-visible + span { outline: 2px solid #67e8f9; outline-offset: 2px; }
.nx-rows { display: grid; }
.nx-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); }
.nx-row:first-child { border-top: 0; }
.nx-row b { display: block; color: #fff; font-size: 14px; font-weight: 600; }
.nx-row span { color: var(--dim); font-size: 13px; }
.nx-sw { position: relative; flex: none; width: 44px; height: 26px; cursor: pointer; }
.nx-sw input { position: absolute; opacity: 0; }
.nx-sw i { position: absolute; inset: 0; border-radius: 99px; background: rgba(255,255,255,.12); transition: background .2s; }
.nx-sw i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); }
.nx-sw input:checked + i { background: rgb(var(--acc)); }
.nx-sw input:checked + i::after { transform: translateX(18px); }
.nx-sw input:disabled + i { opacity: .4; }
.nx-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.nx-field { display: flex; flex-direction: column; gap: 6px; }
.nx-field.full { grid-column: 1 / -1; }
.nx-field > span { color: var(--mut); font-size: 12.5px; font-weight: 600; }
.nx-field input, .nx-field textarea, .nx-field select, .nx-bday select { width: 100%; height: 42px; padding: 0 12px; border: 0; border-radius: 11px; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 1px var(--line2); color: #fff; font-size: 14px; outline: none; }
.nx-field textarea { height: auto; padding: 10px 12px; resize: vertical; }
.nx-field :focus, .nx-bday select:focus { box-shadow: inset 0 0 0 1px rgba(var(--acc), .7); }
.nx-bday { display: flex; gap: 8px; }
.nx-savebar { position: sticky; bottom: 14px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 12px 14px 12px 18px; border-radius: 14px; background: rgba(12,12,18,.92); box-shadow: inset 0 0 0 1px var(--line2), 0 16px 40px -18px #000; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--dim); font-size: 13px; transition: box-shadow .2s; }
.nx-savebar.dirty { box-shadow: inset 0 0 0 1px rgba(var(--acc), .6), 0 16px 40px -18px #000; color: #ddd6fe; }
.nx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nx-chips em { padding: 4px 10px; border-radius: 99px; background: rgba(34,197,94,.12); color: #bbf7d0; font-style: normal; font-size: 12px; }
.nx-chips em.no { background: rgba(239,68,68,.12); color: #fecaca; }
.nx-note { margin: 0 0 12px; color: var(--dim); font-size: 13px; }
.nx-voicebar { margin-bottom: 12px; max-width: 320px; }
.nx-voices { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.nx-voice { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 13px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--line); }
.nx-voice.on { box-shadow: inset 0 0 0 1px rgba(var(--acc), .6); background: rgba(var(--acc), .08); }
.nx-voice b { display: block; color: #fff; font-size: 14px; }
.nx-voice small { color: var(--dim); font-size: 12px; }
.nx-voice > div { flex: 1; min-width: 0; }
.nx-voice-play { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }
.nx-voice-play svg { width: 14px; height: 14px; fill: currentColor; stroke: none; margin-left: 2px; }
.nx-voice-play.playing { background: rgb(var(--acc)); }
.nx-voice .nx-btn { height: 32px; padding: 0 12px; font-size: 12.5px; }
.nx-tag { padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.06); color: var(--mut); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
/* Toast */
.nx-toast { position: fixed; left: 50%; bottom: 24px; z-index: 3000; display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px); padding: 12px 14px 12px 18px; border-radius: 14px; background: #15151d; box-shadow: inset 0 0 0 1px var(--line2), 0 20px 50px -20px #000; color: #f4f4f5; font: 600 14px Inter, sans-serif; transform: translateX(-50%); animation: toastIn .35s var(--ease) both; }
.nx-toast.bad { box-shadow: inset 0 0 0 1px rgba(239,68,68,.5), 0 20px 50px -20px #000; }
.nx-toast button { border: 0; border-radius: 9px; padding: 7px 12px; background: rgba(var(--acc), .2); color: #ddd6fe; font: 700 13px Inter, sans-serif; cursor: pointer; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } }

/* Tablets and phones */
@media (max-width: 1080px) {
  .nx-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .nx-nav { position: sticky; top: 76px; z-index: 20; flex-direction: row; gap: 6px; margin: 0 -4px; padding: 6px 4px; overflow-x: auto; scrollbar-width: none; background: linear-gradient(#04040a 70%, rgba(4,4,10,0)); }
  .nx-nav::-webkit-scrollbar { display: none; }
  .nx-nav h4 { display: none; }
  .nx-nav button { flex: none; width: auto; height: 38px; padding: 0 14px; border-radius: 99px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line); }
  .nx-nav button[aria-current="true"]::before { display: none; }
  .nx-nav button[aria-current="true"] { box-shadow: inset 0 0 0 1px rgba(var(--acc), .6); }
  .nx-nav em { margin-left: 2px; }
  .nx-money { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .mb .mb-main.nx { width: calc(100% - 24px); }
  .nx-hero { margin-bottom: 16px; }
  .nx-av { width: 52px; height: 52px; font-size: 21px; }
  .nx-search { height: 50px; margin-bottom: 14px; }
  .nx-search kbd { display: none; }
  .nx-glance { grid-template-columns: 1fr 1fr; }
  .nx-grid, .nx-grid.photos, .nx-grid.lists { grid-template-columns: 1fr 1fr; gap: 10px; }
  .nx-grid:not(.songs):not(.photos):not(.lists) { grid-template-columns: 1fr; }
  .nx-card .pad { padding: 12px; }
  .nx-head h2 { font-size: 24px; }
  .nx-notes { columns: 1; }
  .nx-money { grid-template-columns: 1fr 1fr; }
  .nx-money > div:first-child { grid-column: 1 / -1; }
  .nx-add { flex-direction: column; }
  .nx-tools .nx-mini-search { max-width: none; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .nx *, .nx-toast { animation: none !important; transition: none !important; } }

/* Home note cards share the sticky-note look */
.nx-card.notecard { background: linear-gradient(160deg, hsl(var(--h) 45% 16% / .9), hsl(var(--h) 35% 10% / .9)); box-shadow: inset 0 0 0 1px hsl(var(--h) 60% 60% / .16); }
.nx-card.notecard p, .nx-notes .nx-card p { margin: 0; color: #e9e9ef; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.nx-link { border: 0; background: none; color: #c4b5fd; font: 600 13px Inter, sans-serif; cursor: pointer; }
.nx-link:hover { color: #fff; }

/* Usage meters: thin bars, no boxes */
.nx-meters { display: grid; }
.nx-meter { display: grid; grid-template-columns: 40px minmax(0, 1fr) 150px; align-items: center; gap: 16px; padding: 16px 4px; border-top: 1px solid var(--line); animation: cardIn .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
.nx-meter:first-child { border-top: 0; }
.nx-meter > i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(var(--mc), .13); color: rgb(var(--mc)); font-style: normal; }
.nx-meter .lab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.nx-meter .lab span { color: #fff; font-size: 14.5px; font-weight: 600; }
.nx-meter .lab small { color: var(--dim); font-size: 12.5px; }
.nx-meter .bar { position: relative; height: 8px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.nx-meter .bar span { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, rgba(var(--mc), .55), rgb(var(--mc))); box-shadow: 0 0 14px rgba(var(--mc), .45); animation: barGrow 1.1s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + 150ms); }
@keyframes barGrow { from { width: 0; } }
.nx-meter .val { text-align: right; }
.nx-meter .val b { display: block; color: #fff; font: 700 16px Outfit, Inter, sans-serif; }
.nx-meter .val small { color: var(--dim); font-size: 12px; }
.nx-meter.ok { --mc: 52, 211, 153; } .nx-meter.mid { --mc: 250, 204, 21; } .nx-meter.low { --mc: 248, 113, 113; }
.nx-meter.inf { --mc: 167, 139, 250; } .nx-meter.inf .bar span { background: linear-gradient(90deg, #8b5cf6, #22d3ee, #8b5cf6); background-size: 200% 100%; animation: barGrow 1.1s var(--ease) both, infFlow 3s linear infinite; }
@keyframes infFlow { to { background-position: -200% 0; } }
.nx-meter.lock { --mc: 113, 113, 122; } .nx-meter.lock .lab span { color: var(--mut); }
.nx-meters.compact .nx-meter { padding: 12px 4px; }
.nx-plan { padding: 6px 13px; border-radius: 99px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line2); color: #e4e4e7; font: 700 12.5px Inter, sans-serif; }
.nx-plan.plus { background: rgba(34,211,238,.12); box-shadow: inset 0 0 0 1px rgba(34,211,238,.45); color: #a5f3fc; }
.nx-plan.vip { background: rgba(250,204,21,.12); box-shadow: inset 0 0 0 1px rgba(250,204,21,.5); color: #fde68a; }
.nx-nudge { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding: 18px 20px; border-radius: 18px; background: linear-gradient(110deg, rgba(139,92,246,.18), rgba(34,211,238,.08) 60%, rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(167,139,250,.3); animation: cardIn .6s var(--ease) both .3s; }
.nx-nudge > div { flex: 1; min-width: 0; }
.nx-nudge b { color: #fff; font: 700 16px Outfit, Inter, sans-serif; }
.nx-nudge p { margin: 4px 0 0; color: #c4c4cc; font-size: 13.5px; line-height: 1.55; }
@media (max-width: 640px) {
  .nx-meter { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .nx-meter > i { width: 34px; height: 34px; }
  .nx-meter .val { grid-column: 2; text-align: left; display: flex; align-items: baseline; gap: 8px; margin-top: -4px; }
  .nx-meter .val b { font-size: 14px; }
  .nx-nudge { flex-direction: column; align-items: flex-start; }
}
.nx-card .media img { position: relative; z-index: 1; }
.nx-card .media .badge, .nx-card .media .play { z-index: 2; }
.nx-glance { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1280px) { .nx-glance { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .nx-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mb .mb-main.nx { padding-top: 92px; } }

/* Your tokens (shop goods) */
.nx-tokens-h { margin-top: 40px; }
.nx-tokens-h p a { color: #c4b5fd; }
.nx-tokens { display: grid; gap: 10px; }
.nx-token-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(2, 160px); align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.025); box-shadow: inset 0 0 0 1px var(--line); animation: cardIn .45s var(--ease) both; }
.nx-token-row:first-child { grid-template-columns: minmax(0, 1fr) 160px; }
.nx-token-who b { display: block; color: #fff; font-size: 14.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-token-who small { color: #8a8d9b; font-size: 12px; }
.nx-token { --rgb: 167,139,250; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 9px 12px; border-radius: 12px; background: rgba(var(--rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--rgb), .22); color: inherit; text-decoration: none; transition: background .2s, transform .2s; }
.nx-token:hover { background: rgba(var(--rgb), .15); transform: translateY(-1px); }
.nx-token.turbo { --rgb: 251,191,36; } .nx-token.smart { --rgb: 56,189,248; }
.nx-token-ic { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(var(--rgb), .16); color: rgb(var(--rgb)); }
.nx-token-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nx-token b { color: #fff; font-size: 16px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.nx-token small { color: #8a8d9b; font-size: 11px; font-weight: 600; }
.nx-token-hint { margin: 4px 2px 0; color: #8a8d9b; font-size: 13px; }
@media (max-width: 700px) { .nx-token-row, .nx-token-row:first-child { grid-template-columns: 1fr 1fr; } .nx-token-who { grid-column: 1 / -1; } }
.nx-token small { white-space: nowrap; }

/* Desktop: the left list matches the Settings sidebar (plain list, divider on the right, green marker on the open item) */
@media (min-width: 1081px) {
  .nx-nav { gap: 2px; padding-right: 20px; box-shadow: inset -1px 0 0 rgba(255,255,255,.07); }
  .nx-nav button { gap: 10px; height: auto; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; }
  .nx-nav button svg { width: 16px; height: 16px; }
  .nx-nav button:hover { background: rgba(255,255,255,.04); color: #fff; }
  .nx-nav button[aria-current="true"] { background: rgba(0,255,157,.08); color: #fff; box-shadow: inset 2px 0 0 #00ff9d; }
  .nx-nav button[aria-current="true"]::before { display: none; }
  .nx-nav button[aria-current="true"] svg { color: inherit; }
}

/* ---------- Desktop refresh (6 Oct 2026) ---------- */
@media (min-width: 1081px) {
  /* Search sits in the header, a sensible width */
  .nx-hero .nx-search { flex: 0 1 440px; height: 48px; margin: 0; }
  /* White sidebar icons, like the account drawer */
  .nx-nav button svg, .nx-nav button[aria-current="true"] svg { color: #fff; }
  /* Numbers bar: one borderless strip like the Profit Tracker, icon over number over label, thin dividers */
  .nx-glance { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin-bottom: 34px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .nx-glance button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px; border-radius: 0; background: none; box-shadow: inset 1px 0 0 var(--line); text-align: center; transform: none; }
  .nx-glance button:first-child { box-shadow: none; }
  .nx-glance button:hover { background: rgba(255,255,255,.03); box-shadow: inset 1px 0 0 var(--line); transform: none; }
  .nx-glance button:first-child:hover { box-shadow: none; }
  .nx-glance i { width: auto; height: auto; background: none; color: #fff; }
  .nx-glance i svg { width: 20px; height: 20px; }
  .nx-glance b { font: 800 clamp(1.35rem, 2.2vw, 1.8rem) "Plus Jakarta Sans", Outfit, Inter, sans-serif; letter-spacing: -.02em; }
  .nx-glance small { color: var(--mut); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  /* Shortcuts: one centred row of cards */
  .nx-shortcuts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
  .nx-shortcuts a { flex-direction: column; justify-content: center; gap: 8px; padding: 22px 12px 20px; border-radius: 16px; text-align: center; background: linear-gradient(180deg, rgba(var(--c), .07), rgba(255,255,255,.015)); box-shadow: inset 0 0 0 1px var(--line); }
  .nx-shortcuts a:hover { background: linear-gradient(180deg, rgba(var(--c), .14), rgba(255,255,255,.03)); box-shadow: inset 0 0 0 1px rgba(var(--c), .35); transform: translateY(-3px); }
  .nx-shortcuts i { width: 46px; height: 46px; margin-bottom: 4px; border-radius: 14px; }
  .nx-shortcuts i svg { width: 22px; height: 22px; }
  .nx-shortcuts b { font-size: 14px; }
  .nx-shortcuts small { font-size: 12px; line-height: 1.4; }
}
/* Web saves table (like the Oddsmatcher) */
.nx-tablewrap { overflow-x: auto; }
.nx-table { width: 100%; border-collapse: collapse; }
.nx-table th { padding: 12px 10px; border-bottom: 1px solid var(--line2); color: var(--mut); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.nx-table td { padding: 11px 10px; border-bottom: 1px solid rgba(255,255,255,.05); color: #d6d8e0; font-size: 13.5px; font-weight: 600; vertical-align: middle; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nx-table tbody tr { transition: background .25s; }
.nx-table tbody tr:nth-of-type(even) { background: linear-gradient(90deg, transparent, rgba(255,255,255,.028) 20%, rgba(255,255,255,.028) 80%, transparent); }
.nx-table tbody tr:hover { background: linear-gradient(90deg, transparent, rgba(34,211,238,.06) 20%, rgba(34,211,238,.06) 80%, transparent); }
.nx-table tr.in { animation: nxIn .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 24ms); }
.nx-table .dt { color: #fff; }
.nx-table .tm { color: var(--mut); }
.nx-table .ttl { width: 46%; max-width: 0; }
.nx-table .ttl { display: table-cell; }
.nx-table .ttl > span:last-child { display: inline-flex; flex-direction: column; min-width: 0; max-width: calc(100% - 42px); vertical-align: middle; }
.nx-table .ttl b { overflow: hidden; color: #fff; font-weight: 700; text-overflow: ellipsis; }
.nx-table .ttl small { overflow: hidden; color: var(--dim); font-size: 12px; font-weight: 500; text-overflow: ellipsis; }
.nx-table .fav { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 10px; overflow: hidden; border-radius: 8px; background: hsl(var(--h), 55%, 30%); color: #fff; font-size: 13px; font-weight: 800; vertical-align: middle; }
.nx-table .fav img { width: 18px; height: 18px; }
.nx-url { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; height: 32px; padding: 0 10px; overflow: hidden; border: 0; border-radius: 9px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line2); color: #c4b5fd; font: 600 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.nx-url:hover { background: rgba(167,139,250,.12); color: #fff; }
.nx-url svg { flex: none; width: 13px; height: 13px; }
.nx-table .go { text-align: right; }
.nx-table .go .nx-btn.sm { height: 32px; padding: 0 14px; font-size: 12.5px; }
.nx-table .go .nx-ic { display: inline-grid; margin-left: 4px; vertical-align: middle; }
.nx-dim { color: var(--dim); }
.nx-links[hidden] { display: none !important; }
@media (min-width: 1081px) { .nx-glance small { letter-spacing: .06em; white-space: nowrap; } }

/* Desktop: avatar the same size as the Profile page's */
@media (min-width: 1081px) { .nx-av { width: 76px; height: 76px; font-size: 30px; } }

/* Desktop: left menu and content line up exactly with Settings and Profile */
@media (min-width: 1081px) { .nx-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 40px; } .nx-nav button { width: 240px; } }

/* Music: one filter bar on the header row, and compact song cards (or a list) */
.nx-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 14px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--line); }
.nx-filter .nx-seg { padding: 0; background: none; box-shadow: none; }
.nx-filter [hidden] { display: none !important; }
.nx-filter .nx-mini-search { flex: 0 1 230px; width: 230px; height: 32px; padding: 0 10px; border-radius: 9px; background: rgba(255,255,255,.04); box-shadow: none; }
.nx-filter .nx-mini-search input { font-size: 13px; }
.nx-fdiv { width: 1px; height: 20px; margin: 0 2px; background: var(--line2); }
.nx-icseg button { justify-content: center; width: 32px; padding: 0 !important; }
.nx-icseg svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1081px) { [data-view="music"] > .nx-head { align-items: center; } }
.nx-songs { display: grid; gap: 10px; }
.nx-songs > :not(.nx-song):not(.nx-song-h) { grid-column: 1 / -1; }
.nx-songs.cards { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.nx-song { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 12px 10px 10px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, box-shadow .2s, transform .25s var(--ease); animation: nxIn .5s var(--ease) both calc(var(--i, 0) * 25ms); }
.nx-songs.cards .nx-song:hover { background: rgba(255,255,255,.055); box-shadow: inset 0 0 0 1px var(--line2); transform: translateY(-1px); }
.nx-song .art { position: relative; display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: 10px; background: var(--bg, linear-gradient(135deg, #27214a, #13182b)); }
.nx-song .art > svg { width: 22px; height: 22px; color: rgba(255,255,255,.35); }
.nx-song .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nx-song .meta { min-width: 0; }
.nx-song .t { display: block; overflow: hidden; color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.nx-song .a { display: block; margin-top: 2px; overflow: hidden; color: var(--mut); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.nx-song .info { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--dim); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.nx-song em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; }
.nx-song em.l:empty { display: none; }
.nx-songs.cards .nx-song em.l:not(:empty)::before, .nx-songs.cards .nx-song em.d:not(:empty)::before { content: "·"; margin-right: 0; color: var(--dim); }
.nx-song .dot { width: 7px; height: 7px; border-radius: 50%; background: #8b8b98; }
.nx-song .dot.yt { background: #ff3b3b; }
.nx-song .dot.sp { background: #1ed760; }
.nx-song .dot.sc { background: #ff7a00; }
.nx-song .acts { display: flex; align-items: center; gap: 2px; }
.nx-song .nx-ic.play { margin-right: 2px; background: rgba(88,101,242,.16); color: #c7cbff; }
.nx-song .nx-ic.play:hover { background: #5865f2; color: #fff; }
.nx-song .nx-ic.play svg { margin-left: 2px; fill: currentColor; stroke: none; }
.nx-song .nx-ic.del { color: #f87171; }
.nx-song .nx-ic.del:hover { background: rgba(239,68,68,.16); color: #fca5a5; }
/* List view: a clean table with alternating rows */
.nx-songs.list { gap: 0; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.nx-songs.list .nx-song, .nx-song-h { grid-template-columns: 40px minmax(0, 1.5fr) minmax(0, 1fr) 120px 70px 110px 112px; gap: 14px; padding: 8px 14px; border-radius: 0; background: none; box-shadow: none; }
.nx-song-h { display: grid; padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid var(--line); color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nx-songs.list .nx-song:nth-child(odd) { background: rgba(255,255,255,.025); }
.nx-songs.list .nx-song:hover { background: rgba(255,255,255,.055); }
.nx-songs.list .art { width: 40px; height: 40px; border-radius: 8px; }
.nx-songs.list .meta, .nx-songs.list .info { display: contents; }
.nx-songs.list .a { margin: 0; }
.nx-songs.list .info em { overflow: hidden; color: var(--mut); font-size: 12.5px; font-weight: 500; }
.nx-songs.list em.l:empty { display: inline-flex; }
.nx-songs.list em.l:empty::after { content: "—"; color: var(--dim); }
.nx-songs.list .acts { justify-content: flex-end; }
@media (max-width: 900px) {
  .nx-songs.list .nx-song, .nx-song-h { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .nx-songs.list .a, .nx-songs.list em { display: none !important; }
  .nx-song-h { display: none; }
}
@media (max-width: 640px) {
  .nx-filter { width: 100%; }
  .nx-filter .nx-mini-search { flex: 1 1 100%; width: auto; order: 9; }
  .nx-filter .nx-fdiv:nth-of-type(1) { display: none; }
  .nx-songs.cards { grid-template-columns: minmax(0, 1fr); }
  .nx-song { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; }
  .nx-song .art { width: 56px; height: 56px; }
}

/* Background refresh: swap content in place, no entrance animations or count-ups replaying */
.nx-quiet .nx-views *, .nx-quiet .nx-nav * { animation: none !important; transition: none !important; }

/* Playlists: the same cards, with a 2x2 of covers and a small playlist badge */
.nx-songs.cards .nx-song em.d:empty { display: none; }
.nx-song .art .mos { position: absolute; inset: 0; display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 1px; background: #000; }
.nx-song .art .mos img { position: static; width: 100%; height: 100%; object-fit: cover; }
.nx-song .pl-badge { position: absolute; right: 3px; bottom: 3px; z-index: 2; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: rgba(0,0,0,.72); color: #fff; }
.nx-song .pl-badge svg { width: 11px; height: 11px; }
.nx-song .nx-ic.save { color: #6ee7b7; }
.nx-song .nx-ic.save:hover { background: rgba(16,185,129,.16); color: #a7f3d0; }
.nx-song .nx-ic.save svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
#listsBox .nx-add { margin-bottom: 14px; }
#spBlock { margin-top: 26px; }
.nx-song.pl .a:empty::after { content: "Playlist"; }
.nx-songs.list .nx-song.pl .a:empty::after { content: "—"; color: var(--dim); }

/* Notes: a slim composer, coloured-edge note cards (or a list) */
[data-view="notes"] > .nx-head { align-items: center; }
.nt-compose { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 8px 8px 8px 14px; border-radius: 14px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, background .2s; }
.nt-compose:focus-within { background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.nt-pen { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.06); color: var(--mut); }
.nt-pen svg, .nt-note svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nt-compose textarea { flex: 1; min-width: 0; min-height: 24px; max-height: 220px; padding: 6px 0; border: 0; outline: none; resize: none; background: none; color: #fff; font: 14.5px/1.5 Inter, sans-serif; }
.nt-compose textarea::placeholder { color: var(--dim); }
.nt-len { flex: none; color: var(--dim); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.nt-notes { display: grid; gap: 12px; }
.nt-notes > :not(.nt-note) { grid-column: 1 / -1; }
.nt-notes.cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.nt-note { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 140px; padding: 16px 16px 12px 20px; overflow: hidden; border-radius: 14px; background: linear-gradient(160deg, hsla(var(--h), 70%, 60%, .07), rgba(255,255,255,.02) 55%); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, transform .25s var(--ease); animation: nxIn .5s var(--ease) both calc(var(--i, 0) * 25ms); }
.nt-note::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: hsl(var(--h), 75%, 62%); }
.nt-notes.cards .nt-note:hover { box-shadow: inset 0 0 0 1px var(--line2); transform: translateY(-2px); }
.nt-body { flex: 1; margin: 0; color: #ececf1; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.nt-foot { display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: 11.5px; font-weight: 600; }
.nt-src { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 99px; background: rgba(255,255,255,.05); color: var(--mut); }
.nt-src svg { width: 12px; height: 12px; }
.nt-acts { display: flex; gap: 2px; margin-left: auto; opacity: .55; transition: opacity .2s; }
.nt-note:hover .nt-acts, .nt-note:focus-within .nt-acts { opacity: 1; }
.nt-note .nx-ic.del { color: #f87171; }
.nt-note .nx-ic.del:hover { background: rgba(239,68,68,.16); color: #fca5a5; }
.nt-edit textarea { width: 100%; min-height: 60px; padding: 10px 12px; border: 0; border-radius: 10px; outline: none; resize: none; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); color: #fff; font: 14px/1.5 Inter, sans-serif; }
.nt-edit div { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
/* List view */
.nt-notes.list { gap: 0; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.nt-notes.list .nt-note { flex-direction: row; align-items: center; min-height: 0; padding: 10px 14px 10px 18px; border-radius: 0; background: none; box-shadow: none; }
.nt-notes.list .nt-note:nth-child(odd) { background: rgba(255,255,255,.025); }
.nt-notes.list .nt-note:hover { background: rgba(255,255,255,.055); }
.nt-notes.list .nt-body { -webkit-line-clamp: 1; font-size: 14px; }
.nt-notes.list .nt-foot { flex: none; }
.nt-notes.list .nt-edit { flex: 1; }
@media (max-width: 640px) {
  .nt-compose { flex-wrap: wrap; }
  .nt-compose textarea { flex-basis: calc(100% - 44px); }
  .nt-len { margin-left: 42px; }
  .nt-compose .nx-btn { margin-left: auto; }
  .nt-notes.list .nt-note { flex-direction: column; align-items: stretch; }
  .nt-acts { opacity: 1; }
}
.nt-src, .nt-date { white-space: nowrap; }
.nt-notes.cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* Recipes: wider photo cards with just name, time and difficulty (or a list) */
[data-view="recipes"] > .nx-head { align-items: center; }
.rc-grid { display: grid; gap: 14px; }
.rc-grid > :not(.rc-card):not(.rc-head) { grid-column: 1 / -1; }
.rc-grid.cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.rc-card { overflow: hidden; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, transform .25s var(--ease); animation: nxIn .5s var(--ease) both calc(var(--i, 0) * 25ms); }
.rc-grid.cards .rc-card:hover { box-shadow: inset 0 0 0 1px var(--line2); transform: translateY(-2px); }
.rc-pic { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #78350f, #1c1006); }
.rc-pic > svg { width: 30px; height: 30px; color: rgba(255,255,255,.35); }
.rc-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.rc-card:hover .rc-pic img { transform: scale(1.04); }
.rc-body { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px 10px; padding: 12px 12px 12px 16px; }
.rc-name { grid-column: 1 / -1; overflow: hidden; color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.rc-time, .rc-diff { display: inline-flex; align-items: center; gap: 6px; color: var(--mut); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.rc-time:empty, .rc-diff:empty { display: none; }
.rc-body svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rc-diff { padding: 2px 8px; border-radius: 99px; background: rgba(255,255,255,.05); }
.rc-diff.easy { color: #6ee7b7; background: rgba(16,185,129,.12); }
.rc-diff.medium { color: #fcd34d; background: rgba(245,158,11,.12); }
.rc-diff.hard { color: #fca5a5; background: rgba(239,68,68,.12); }
.rc-acts { display: flex; justify-content: flex-end; gap: 2px; grid-column: 3; }
.rc-card .nx-ic.del { color: #f87171; }
.rc-card .nx-ic.del:hover { background: rgba(239,68,68,.16); color: #fca5a5; }
/* List view */
.rc-grid.list { gap: 0; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.rc-grid.list .rc-card, .rc-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) 120px 120px 80px; align-items: center; gap: 14px; padding: 8px 14px; border-radius: 0; background: none; box-shadow: none; }
.rc-head { padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rc-grid.list .rc-card:nth-child(odd) { background: rgba(255,255,255,.025); }
.rc-grid.list .rc-card:hover { background: rgba(255,255,255,.055); }
.rc-grid.list .rc-pic { width: 56px; aspect-ratio: 4 / 3; border-radius: 8px; }
.rc-grid.list .rc-pic > svg { width: 18px; height: 18px; }
.rc-grid.list .rc-body { display: contents; }
.rc-grid.list .rc-name { grid-column: auto; font-size: 14px; }
.rc-grid.list .rc-time:empty, .rc-grid.list .rc-diff:empty { display: block; }
.rc-grid.list .rc-time:empty::after, .rc-grid.list .rc-diff:empty::after { content: "—"; color: var(--dim); }
.rc-grid.list .rc-diff { justify-self: start; }
.rc-grid.list .rc-acts { grid-column: auto; }
@media (max-width: 760px) {
  .rc-grid.list .rc-card, .rc-head { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .rc-head, .rc-grid.list .rc-time, .rc-grid.list .rc-diff { display: none !important; }
  .nx-filter #recipeTime, .nx-filter #recipeDiff { order: 8; }
}

/* Smart Nexus: folding sections, save button at the bottom */
.nx-fold > h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 0 !important; cursor: pointer; user-select: none; }
.nx-fold > h3::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--mut); border-bottom: 2px solid var(--mut); transform: rotate(45deg); transition: transform .3s var(--ease); }
.nx-fold.open > h3::after { transform: rotate(-135deg); }
.nx-fold.open > h3 { margin-bottom: 16px !important; }
.nx-fold:not(.open) > :not(h3) { display: none !important; }
.nx-savebar.end { position: static; margin: 18px 0 0; }

/* Soundboards: picture cards with name, sound count, visibility and edit / share / delete (or a list) */
[data-view="sound"] > .nx-head { align-items: center; }
.sb-grid { display: grid; gap: 14px; }
.sb-grid > :not(.sb-card):not(.sb-head) { grid-column: 1 / -1; }
.sb-grid.cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sb-card { overflow: hidden; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, transform .25s var(--ease); animation: nxIn .5s var(--ease) both calc(var(--i, 0) * 25ms); }
.sb-grid.cards .sb-card:hover { box-shadow: inset 0 0 0 1px var(--line2); transform: translateY(-2px); }
.sb-pic { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(120% 120% at 20% 10%, hsla(var(--h), 70%, 45%, .55), #0b0a1f 70%); }
.sb-pic > svg { width: 34px; height: 34px; color: rgba(255,255,255,.45); }
.sb-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.sb-card:hover .sb-pic img { transform: scale(1.04); }
.sb-body { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px 10px; padding: 12px 12px 12px 16px; }
.sb-name { grid-column: 1 / -1; overflow: hidden; color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.sb-count { display: inline-flex; align-items: center; gap: 6px; color: var(--mut); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.sb-count svg { width: 14px; height: 14px; }
.sb-vis { justify-self: start; padding: 2px 8px; border-radius: 99px; background: rgba(255,255,255,.06); color: var(--mut); font-size: 11.5px; font-weight: 700; }
.sb-vis.pub { background: rgba(16,185,129,.12); color: #6ee7b7; }
.sb-acts { display: flex; justify-content: flex-end; gap: 2px; grid-column: 3; }
.sb-acts svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sb-card .nx-ic.del { color: #f87171; }
.sb-card .nx-ic.del:hover { background: rgba(239,68,68,.16); color: #fca5a5; }
.sb-grid.list { gap: 0; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.sb-grid.list .sb-card, .sb-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) 120px 110px 110px; align-items: center; gap: 14px; padding: 8px 14px; border-radius: 0; background: none; box-shadow: none; }
.sb-head { padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sb-grid.list .sb-card:nth-child(odd) { background: rgba(255,255,255,.025); }
.sb-grid.list .sb-card:hover { background: rgba(255,255,255,.055); }
.sb-grid.list .sb-pic { width: 56px; aspect-ratio: 4 / 3; border-radius: 8px; }
.sb-grid.list .sb-pic > svg { width: 18px; height: 18px; }
.sb-grid.list .sb-body { display: contents; }
.sb-grid.list .sb-name { grid-column: auto; font-size: 14px; }
.sb-grid.list .sb-acts { grid-column: auto; }
@media (max-width: 760px) {
  .sb-grid.list .sb-card, .sb-head { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .sb-head, .sb-grid.list .sb-count, .sb-grid.list .sb-vis { display: none !important; }
}

/* X saves: post-style cards (or a list) */
[data-view="x"] > .nx-head { align-items: center; }
.xs-grid { display: grid; gap: 12px; }
.xs-grid > :not(.xs-card):not(.xs-head) { grid-column: 1 / -1; }
.xs-grid.cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.xs-card { --t: 229,231,235; display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 10px 16px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, transform .25s var(--ease); animation: nxIn .5s var(--ease) both calc(var(--i, 0) * 25ms); }
.xs-card.video { --t: 96,165,250; } .xs-card.thread { --t: 167,139,250; } .xs-card.ratio { --t: 251,146,60; } .xs-card.quote { --t: 52,211,153; }
.xs-grid.cards .xs-card:hover { box-shadow: inset 0 0 0 1px var(--line2); transform: translateY(-2px); }
.xs-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.xs-av { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, hsl(var(--h), 60%, 45%), hsl(calc(var(--h) + 40), 60%, 30%)); color: #fff; font: 800 15px Outfit, Inter, sans-serif; }
.xs-who { display: grid; min-width: 0; }
.xs-who b { overflow: hidden; color: #fff; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.xs-who small { overflow: hidden; color: var(--dim); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.xs-tag { flex: none; margin-left: auto; padding: 3px 9px; border-radius: 99px; background: rgba(var(--t), .12); color: rgb(var(--t)); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.xs-text { flex: 1; margin: 0; color: #e4e4e7; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.xs-foot { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 12px; font-weight: 600; }
.xs-x svg { width: 13px; height: 13px; }
.xs-acts { display: flex; gap: 2px; margin-left: auto; }
.xs-acts svg { width: 16px; height: 16px; }
.xs-card .nx-ic.del { color: #f87171; }
.xs-card .nx-ic.del:hover { background: rgba(239,68,68,.16); color: #fca5a5; }
.xs-grid.list { gap: 0; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.xs-grid.list .xs-card, .xs-head { display: grid; grid-template-columns: 36px minmax(0, .8fr) minmax(0, 1.6fr) 100px 100px 140px; align-items: center; gap: 14px; padding: 8px 14px; border-radius: 0; background: none; box-shadow: none; }
.xs-head { padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.xs-grid.list .xs-card:nth-child(odd) { background: rgba(255,255,255,.025); }
.xs-grid.list .xs-card:hover { background: rgba(255,255,255,.055); }
.xs-grid.list .xs-top, .xs-grid.list .xs-foot { display: contents; }
.xs-grid.list .xs-av { width: 32px; height: 32px; font-size: 13px; }
.xs-grid.list .xs-tag { order: 4; justify-self: start; margin: 0; }
.xs-grid.list .xs-text { order: 3; -webkit-line-clamp: 1; font-size: 13.5px; }
.xs-grid.list .xs-x { display: none; }
.xs-grid.list .xs-date { order: 5; }
.xs-grid.list .xs-acts { order: 6; justify-content: flex-end; }
@media (max-width: 760px) {
  .xs-grid.cards { grid-template-columns: minmax(0, 1fr); }
  .xs-grid.list .xs-card, .xs-head { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .xs-head, .xs-grid.list .xs-text, .xs-grid.list .xs-tag, .xs-grid.list .xs-date { display: none !important; }
}