*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; background:var(--ns-bg); }
body { background:var(--ns-bg); color:var(--ns-text); font-family:var(--ns-font-body); font-size:var(--ns-text-size-md-lg); line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font-family:var(--ns-font-body); cursor:pointer; border:none; background:none; }
img { display:block; max-width:100%; }

@keyframes ns-pulse   { 0%,100%{opacity:1}  50%{opacity:.25} }
@keyframes ns-marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes ns-skeleton{ 0%,100%{opacity:.35} 50%{opacity:.65} }

.ns-page { display:flex; min-height:100vh; padding-left:var(--ns-sidebar-w); box-sizing:border-box; }

/* ── Sidebar ── */
.ns-sidebar { width:var(--ns-sidebar-w); background:var(--ns-bg-raised); border-right:1px solid var(--ns-border); display:flex; flex-direction:column; align-items:flex-start; padding:10px 0; gap:1px; position:fixed; top:0; left:0; height:100vh; overflow:hidden; z-index:100; transition:width var(--ns-ease-slow); }
.ns-sidebar:hover { width:190px; box-shadow:4px 0 20px rgba(0,0,0,0.35); }
.ns-sidebar__logo { width:100%; padding:6px 0 12px; border-bottom:1px solid var(--ns-border); margin-bottom:4px; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.ns-sidebar__logo img { height:20px; width:auto; object-fit:contain; display:block; }
.ns-sidebar__item { display:flex; align-items:center; width:100%; height:36px; color:var(--ns-text-3); position:relative; cursor:pointer; transition:background var(--ns-ease),color var(--ns-ease); text-decoration:none; padding:0 6px; }
.ns-sidebar__item:hover  { background:var(--ns-surface);   color:var(--ns-text); }
.ns-sidebar__item.active,.ns-sidebar__item--active { background:var(--ns-surface-2); color:var(--ns-text); }
.ns-sidebar__item i { font-size:var(--ns-text-size-xl); line-height:1; width:36px; height:36px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ns-sidebar__sep { width:calc(100% - 12px); height:1px; background:var(--ns-border); margin:3px 6px; }
.ns-sidebar__bottom { margin-top:auto; display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding-top:6px; border-top:1px solid var(--ns-border); width:100%; }
.ns-cart-badge { position:absolute; top:5px; right:5px; width:7px; height:7px; border-radius:50%; background:var(--ns-text-3); border:1.5px solid var(--ns-bg-raised); transition:background var(--ns-ease); }
.ns-sidebar__item.has-items .ns-cart-badge { background:var(--ns-accent); }
.ns-sidebar__lbl { font-family:var(--ns-font-display); font-size:var(--ns-text-size-tag); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:inherit; white-space:nowrap; opacity:0; transition:opacity var(--ns-ease); padding-left:2px; }
.ns-sidebar:hover .ns-sidebar__lbl { opacity:1; }


/* ── Main ── */
.ns-main { flex:1; min-width:0; }
.ns-divider { height:1px; background:var(--ns-border); }

/* ── Hero ── */
.ns-hero { padding:32px var(--ns-page-x) 28px; border-bottom:1px solid var(--ns-border); }
.ns-hero__brand { font-family:var(--ns-font-display); font-weight:700; font-size:clamp(36px,4.5vw,56px); line-height:.9; letter-spacing:-.01em; text-transform:uppercase; margin-bottom:14px; }
.ns-hero__stmt { font-size:var(--ns-text-size-md-lg); color:var(--ns-text-2); line-height:1.65; max-width:560px; margin-bottom:18px; }
.ns-hero__pills { display:flex; gap:7px; flex-wrap:wrap; }
.ns-pill { font-family:var(--ns-font-display); font-size:var(--ns-text-size-tag); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ns-text-3); border:1px solid var(--ns-border); padding:5px 10px; transition:border-color var(--ns-ease),color var(--ns-ease); }
.ns-pill:hover { border-color:var(--ns-border-2); color:var(--ns-text-2); }

/* ── Section header ── */
.ns-section-head { display:flex; align-items:center; justify-content:space-between; padding:16px var(--ns-page-x) 10px; }
.ns-section-head__title { font-family:var(--ns-font-display); font-size:var(--ns-text-size-sm); font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ns-text-3); }
.ns-section-head__link { font-family:var(--ns-font-display); font-size:var(--ns-text-size-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ns-text-2); transition:color var(--ns-ease); }
.ns-section-head__link:hover { color:var(--ns-text); }

/* ── Scroll ── */
.ns-scroll { display:flex; gap:10px; overflow-x:auto; padding:0 var(--ns-page-x) 16px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.ns-scroll::-webkit-scrollbar { display:none; }

/* ── Pack tile — consistent height via 1-line title clamp ── */
.ns-pack { flex:0 0 clamp(140px,15vw,200px); background:var(--ns-bg); border:1px solid var(--ns-border); cursor:pointer; transition:border-color var(--ns-ease); text-decoration:none; display:block; }
.ns-pack:hover { border-color:var(--ns-border-2); }
.ns-pack__art { width:100%; height:clamp(140px,15vw,200px); background:var(--ns-surface); overflow:hidden; flex-shrink:0; }
.ns-pack__art img { width:100%; height:100%; object-fit:cover; transition:opacity var(--ns-ease); }
.ns-pack:hover .ns-pack__art img { opacity:.85; }
.ns-pack__info { padding:8px 9px 10px; }
.ns-pack__artist { font-family:var(--ns-font-display); font-size:var(--ns-text-size-xs); letter-spacing:.07em; text-transform:uppercase; color:var(--ns-text-3); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ns-pack__title  { font-family:var(--ns-font-display); font-size:var(--ns-text-size-md); font-weight:700; color:var(--ns-text); line-height:1.3; margin-bottom:4px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ns-pack__price  { font-family:var(--ns-font-display); font-size:var(--ns-text-size-base-sm); font-weight:600; color:var(--ns-text); }
.ns-pack--skeleton .ns-pack__art { animation:ns-skeleton 1.4s ease infinite; }
.ns-pack--skeleton .ns-pack__artist,.ns-pack--skeleton .ns-pack__title,.ns-pack--skeleton .ns-pack__price { background:var(--ns-surface); border-radius:var(--ns-radius-sm); color:transparent; animation:ns-skeleton 1.4s ease infinite; }

/* ── Studio ── */
.ns-studio { background:var(--ns-bg); border-top:1px solid var(--ns-border); border-bottom:1px solid var(--ns-border); }
.ns-studio__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px var(--ns-page-x) 14px; border-bottom:1px solid var(--ns-border-subtle); }
.ns-studio__eyebrow { font-family:var(--ns-font-display); font-size:var(--ns-text-size-sm); font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--ns-accent-studio); margin-bottom:8px; }
.ns-studio__title { font-family:var(--ns-font-display); font-size:var(--ns-text-size-xl); font-weight:700; line-height:1.05; color:var(--ns-text); }
.ns-studio__by { font-size:var(--ns-text-size-base); color:var(--ns-text-3); margin-top:5px; }
.ns-studio__count { display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; }
.ns-studio__count-n { font-family:var(--ns-font-display); font-size:var(--ns-text-size-36); font-weight:700; color:var(--ns-accent-studio); line-height:1; }
.ns-studio__count-l { font-size:var(--ns-text-size-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ns-text-3); margin-top:2px; text-align:right; }
.ns-studio__live { display:flex; align-items:center; gap:5px; margin-top:6px; }
.ns-live-dot { width:6px; height:6px; border-radius:50%; background:var(--ns-accent-studio); animation:ns-pulse 2s ease-in-out infinite; flex-shrink:0; }
.ns-studio__live-label { font-family:var(--ns-font-display); font-size:var(--ns-text-size-tiny); letter-spacing:.12em; text-transform:uppercase; color:var(--ns-text-3); }
.ns-marquee { overflow:hidden; border-top:1px solid var(--ns-border-subtle); border-bottom:1px solid var(--ns-border-subtle); padding:8px 0; }
.ns-marquee__track { display:flex; width:max-content; animation:ns-marquee 26s linear infinite; }
.ns-marquee__item { font-family:var(--ns-font-display); font-size:var(--ns-text-size-xs); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ns-text-dim); padding:0 18px; border-right:1px solid var(--ns-border); white-space:nowrap; }

/* ── Tutorial tile ── */
.ns-tut { flex:0 0 clamp(190px,21vw,280px); background:var(--ns-bg); border:1px solid var(--ns-border); cursor:pointer; transition:border-color .2s; text-decoration:none; display:block; }
.ns-tut:hover { border-color:var(--ns-border-2); }
.ns-tut__thumb { width:100%; aspect-ratio:16/9; background:var(--ns-surface); overflow:hidden; }
.ns-tut__thumb img { width:100%; height:100%; object-fit:cover; }
.ns-tut__info { padding:9px 10px 11px; }
.ns-tut__tag { font-size:var(--ns-text-size-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ns-accent-studio); margin-bottom:4px; }
.ns-tut__title { font-size:var(--ns-text-size-md); color:var(--ns-text); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ns-studio__foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px var(--ns-page-x) 16px; border-top:1px solid var(--ns-border-subtle); flex-wrap:wrap; }
.ns-studio__foot-text { font-size:var(--ns-text-size-md); color:var(--ns-text-2); }

/* ── Buttons ── */
.ns-btn { font-family:var(--ns-font-display); font-size:var(--ns-text-size-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:10px 16px; border:1px solid; cursor:pointer; transition:background var(--ns-ease),color var(--ns-ease); white-space:nowrap; display:inline-block; }
.ns-btn--studio { color:var(--ns-accent-studio); border-color:var(--ns-accent-studio); background:transparent; }
.ns-btn--studio:hover { background:var(--ns-accent-studio); color:var(--ns-accent-on); }
.ns-btn--gate { color:var(--ns-accent-gate); border-color:var(--ns-accent-gate); background:transparent; }
.ns-btn--gate:hover { background:var(--ns-accent-gate); color:var(--ns-accent-on); }
.ns-btn--primary { color:#000; background:var(--ns-accent); border-color:var(--ns-accent); }
.ns-btn--primary:hover { opacity:.85; }

/* ── Gate — full width, 2x2 grid ── */
.ns-gate { background:var(--ns-bg); border-top:1px solid var(--ns-border); border-bottom:1px solid var(--ns-border); }
.ns-gate__head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:22px var(--ns-page-x) 20px; border-bottom:1px solid var(--ns-border); flex-wrap:wrap; }
.ns-gate__head-left { flex:1; min-width:0; max-width:700px; }
.ns-gate__eyebrow { font-family:var(--ns-font-display); font-size:var(--ns-text-size-sm); font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--ns-accent-gate); margin-bottom:9px; }
.ns-gate__title { font-family:var(--ns-font-display); font-size:var(--ns-text-size-xl-lg); font-weight:700; line-height:1.05; color:var(--ns-text); margin-bottom:10px; }
.ns-gate__sub { font-size:var(--ns-text-size-md); color:var(--ns-text-2); line-height:1.6; }
.ns-gate__grid { display:grid; grid-template-columns:1fr 1fr; }
.ns-gate__point { display:flex; align-items:flex-start; gap:12px; padding:18px var(--ns-page-x); font-size:var(--ns-text-size-md); color:var(--ns-text-2); line-height:1.55; border-bottom:1px solid var(--ns-border-faint); }
.ns-gate__point:nth-child(odd)  { border-right:1px solid var(--ns-border-faint); }
.ns-gate__point:nth-child(3),
.ns-gate__point:nth-child(4)    { border-bottom:none; }
.ns-gate__point-arrow { color:var(--ns-accent-gate); font-weight:700; font-size:var(--ns-text-size-base-sm); flex-shrink:0; margin-top:2px; }
.ns-gate__point strong { color:var(--ns-text); font-weight:600; }

/* ── Vinyl — horizontal scroll ── */
.ns-vinyl-grid { display:flex; gap:10px; overflow-x:auto; padding:0 var(--ns-page-x) 16px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.ns-vinyl-grid::-webkit-scrollbar { display:none; }
.ns-vinyl-tile { flex:0 0 clamp(140px,15vw,200px); background:var(--ns-bg); border:1px solid var(--ns-border); cursor:pointer; transition:border-color var(--ns-ease); text-decoration:none; display:block; }
.ns-vinyl-tile:hover { border-color:var(--ns-border-2); }
.ns-vinyl-tile__art { width:100%; height:clamp(140px,15vw,200px); background:var(--ns-surface); overflow:hidden; flex-shrink:0; }
.ns-vinyl-tile__art img { width:100%; height:100%; object-fit:cover; }
.ns-vinyl-tile__artist { font-size:var(--ns-text-size-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--ns-text-3); padding:8px 9px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ns-vinyl-tile__title  { font-size:var(--ns-text-size-base); color:var(--ns-text); line-height:1.3; padding:3px 9px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ns-vinyl-tile__price  { font-family:var(--ns-font-display); font-size:var(--ns-text-size-base-sm); font-weight:600; color:var(--ns-text); padding:4px 9px 11px; display:block; }

/* ── Culture — square ── */
.ns-culture-tile { flex:0 0 clamp(170px,19vw,250px); cursor:pointer; transition:opacity var(--ns-ease); text-decoration:none; display:block; }
.ns-culture-tile:hover { opacity:.8; }
.ns-culture-tile__thumb { width:100%; aspect-ratio:1; background:var(--ns-surface); overflow:hidden; }
.ns-culture-tile__thumb img { width:100%; height:100%; object-fit:cover; }
.ns-culture-tile__meta { padding:9px 0 2px; }
.ns-culture-tile__tag { font-size:var(--ns-text-size-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ns-text-3); margin-bottom:4px; }
.ns-culture-tile__title { font-size:var(--ns-text-size-md); color:var(--ns-text); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── Footer ── */
.ns-footer { padding:14px var(--ns-page-x); border-top:1px solid var(--ns-border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.ns-footer__links { display:flex; gap:18px; }
.ns-footer__link { font-family:var(--ns-font-display); font-size:var(--ns-text-size-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ns-text-3); transition:color var(--ns-ease); }
.ns-footer__link:hover { color:var(--ns-text-2); }
.ns-footer__copy { font-size:var(--ns-text-size-xs); color:var(--ns-text-faint); }

/* ── Responsive ── */

.ns-mobile-nav { display:none; position:fixed; bottom:0; left:0; right:0; height:56px; background:var(--ns-bg-raised); border-top:1px solid var(--ns-border); align-items:center; justify-content:space-around; z-index:100; }
.ns-mobile-nav__item { display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--ns-text-3); font-family:var(--ns-font-display); font-size:var(--ns-text-size-tiny); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; padding:4px 8px; transition:color var(--ns-ease); text-decoration:none; }
.ns-mobile-nav__item.active { color:var(--ns-text); }
.ns-mobile-nav__item i { font-size:var(--ns-text-size-xl-lg); }

/* ── Charts page ────────────────────────────────────────────────────────────── */
.ns-charts-head { display:flex; align-items:flex-start; justify-content:space-between; padding:32px var(--ns-page-x) 18px; border-bottom:1px solid var(--ns-border); flex-wrap:wrap; gap:12px; }
.ns-charts-head__title { font-family:var(--ns-font-display); font-weight:800; font-size:var(--ns-text-size-3xl); line-height:1; letter-spacing:.04em; text-transform:uppercase; }
.ns-charts-head__date { font-family:var(--ns-font-display); font-size:var(--ns-text-size-xs); font-weight:600; letter-spacing:.16em; color:var(--ns-text-3); margin-top:9px; }
.ns-charts-sorts { display:flex; gap:4px; align-self:flex-end; padding-bottom:2px; }
.ns-charts-sort { font-family:var(--ns-font-display); font-size:var(--ns-text-size-tag); font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:7px 14px; border:1px solid var(--ns-border); color:var(--ns-text-3); background:transparent; cursor:pointer; transition:all var(--ns-ease); }
.ns-charts-sort.is-active { border-color:var(--ns-text); color:var(--ns-text); }
.ns-charts-sort:hover:not(.is-active) { color:var(--ns-text-2); border-color:var(--ns-border-2); }

.ns-charts-genres { display:flex; gap:6px; padding:12px var(--ns-page-x); overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--ns-border); }
.ns-charts-genres::-webkit-scrollbar { display:none; }
.ns-charts-genre { font-family:var(--ns-font-display); font-size:var(--ns-text-size-tag); font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:5px 11px; border:1px solid var(--ns-border); color:var(--ns-text-3); background:transparent; cursor:pointer; white-space:nowrap; transition:all var(--ns-ease); flex-shrink:0; }
.ns-charts-genre:hover:not(.is-active) { color:var(--ns-text-2); border-color:var(--ns-border-2); }
.ns-charts-genre.is-active { color:var(--ns-text); border-color:var(--ns-text); }
.ns-charts-genre.is-empty { opacity:.4; }

.ns-charts-list { display:flex; flex-direction:column; }
.ns-chart-row { display:flex; align-items:center; gap:14px; padding:10px var(--ns-page-x); border-bottom:1px solid var(--ns-border); text-decoration:none; transition:background var(--ns-ease); cursor:pointer; }
.ns-chart-row:hover { background:var(--ns-surface); }
.ns-chart-row__rank { font-family:var(--ns-font-display); font-size:var(--ns-text-size-base); font-weight:700; color:var(--ns-text-3); width:28px; flex-shrink:0; text-align:right; }
.ns-chart-row__art { width:52px; height:52px; flex-shrink:0; background:var(--ns-surface); overflow:hidden; }
.ns-chart-row__art img { width:100%; height:100%; object-fit:cover; }
.ns-chart-row__meta { flex:1; min-width:0; }
.ns-chart-row__title { font-size:var(--ns-text-size-md); color:var(--ns-text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; }
.ns-chart-row__sub { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ns-chart-row__artist { font-size:var(--ns-text-size-base-sm); color:var(--ns-text-2); }
.ns-chart-row__genre { font-family:var(--ns-font-display); font-size:var(--ns-text-size-tiny); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ns-text-3); border:1px solid var(--ns-border); padding:2px 6px; }
.ns-chart-row__new { font-family:var(--ns-font-display); font-size:var(--ns-text-size-tiny); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ns-accent-gate); border:1px solid var(--ns-accent-gate-border); padding:2px 6px; }
.ns-chart-row__play { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid var(--ns-border); color:var(--ns-text-3); background:transparent; cursor:pointer; transition:all var(--ns-ease); flex-shrink:0; }
.ns-chart-row__play:hover { border-color:var(--ns-accent-gate); color:var(--ns-accent-gate); }
.ns-chart-row__play.is-playing { border-color:var(--ns-accent-gate); color:var(--ns-accent-gate); background:var(--ns-accent-gate-fade); }

.ns-charts-pagination { display:flex; align-items:center; justify-content:space-between; padding:14px var(--ns-page-x); border-top:1px solid var(--ns-border); }
.ns-charts-pagination__info { font-size:var(--ns-text-size-base-sm); color:var(--ns-text-3); }
.ns-charts-pagination__btns { display:flex; align-items:center; gap:12px; }
.ns-charts-pagination__btns button { font-family:var(--ns-font-display); font-size:var(--ns-text-size-base); padding:6px 14px; border:1px solid var(--ns-border); color:var(--ns-text-2); background:transparent; cursor:pointer; transition:all var(--ns-ease); }
.ns-charts-pagination__btns button:hover:not(:disabled) { border-color:var(--ns-border-2); color:var(--ns-text); }
.ns-charts-pagination__btns button:disabled { opacity:.3; cursor:default; }
.ns-charts-pagination__btns span { font-family:var(--ns-font-display); font-size:var(--ns-text-size-sm); color:var(--ns-text-3); letter-spacing:.06em; }

.ns-charts-loading,.ns-charts-empty,.ns-charts-error { padding:48px var(--ns-page-x); font-size:var(--ns-text-size-md); color:var(--ns-text-3); }


/* Charts — top 3 rank accent + download button + CTA banner */
.ns-chart-row--top3 .ns-chart-row__rank { color:var(--ns-accent-gate); }
.ns-chart-row__actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.ns-chart-row__download { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid var(--ns-border); color:var(--ns-text-3); background:transparent; cursor:pointer; transition:all var(--ns-ease); flex-shrink:0; text-decoration:none; }
.ns-chart-row__download:hover { border-color:var(--ns-accent-gate); color:var(--ns-accent-gate); }

.ns-charts-cta { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px var(--ns-page-x); background:var(--ns-accent-gate-fade); border-bottom:1px solid var(--ns-accent-gate-border); flex-wrap:wrap; }
.ns-charts-cta__eye { font-family:var(--ns-font-display); font-size:var(--ns-text-size-tag); font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--ns-accent-gate); margin-bottom:3px; }
.ns-charts-cta__text { font-size:var(--ns-text-size-base); color:var(--ns-text-2); }

/* ── Community ──────────────────────────────────────────────────────────────── */
.cm-head { display:flex; align-items:flex-end; justify-content:space-between; padding:28px var(--ns-page-x) 16px; border-bottom:1px solid var(--ns-border); flex-wrap:wrap; gap:12px; }
.cm-title { font-family:var(--ns-font-display); font-weight:800; font-size:var(--ns-text-size-3xl); line-height:1; letter-spacing:.04em; text-transform:uppercase; }
.cm-subtitle { font-family:var(--ns-font-display); font-size:var(--ns-text-size-tag); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ns-text-3); margin-top:8px; }
.cm-nav { display:flex; gap:4px; }
.cm-nav-btn { font-family:var(--ns-font-display); font-size:var(--ns-text-size-tag); font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:6px 12px; border:1px solid var(--ns-border); color:var(--ns-text-3); background:transparent; cursor:pointer; display:flex; align-items:center; gap:5px; transition:all var(--ns-ease); }
.cm-nav-btn:hover { color:var(--ns-text-2); }
.cm-nav-btn.active { border-color:var(--ns-text); color:var(--ns-text); }
.cm-nav-btn i { font-size:var(--ns-text-size-base); }

.cm-ann { display:flex; align-items:flex-start; gap:10px; padding:12px var(--ns-page-x); background:var(--ns-accent-studio-fade); border-bottom:1px solid var(--ns-accent-studio-border); }
.cm-ann-label { font-family:var(--ns-font-display); font-size:var(--ns-text-size-tiny); font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ns-accent-studio); margin-bottom:3px; }
.cm-ann-text { font-size:var(--ns-text-size-base); color:var(--ns-text-2); line-height:1.5; }

.cm-prompt { display:flex; align-items:center; gap:10px; padding:10px var(--ns-page-x); border-bottom:1px solid var(--ns-border); background:var(--ns-surface); }
.cm-prompt-dot { width:6px; height:6px; border-radius:50%; background:var(--ns-accent-studio); flex-shrink:0; animation:ns-pulse 2s ease-in-out infinite; }
.cm-prompt-text { font-size:var(--ns-text-size-base); color:var(--ns-text-2); line-height:1.4; transition:opacity .3s ease, transform .3s ease; }
.cm-prompt-text strong { color:var(--ns-text); }

.cm-login-nudge { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px var(--ns-page-x); background:var(--ns-surface); border-bottom:1px solid var(--ns-border); flex-wrap:wrap; }
.cm-login-nudge p { font-size:var(--ns-text-size-base); color:var(--ns-text-2); }

.cm-setup { padding:20px var(--ns-page-x); border-bottom:1px solid var(--ns-border); max-width:480px; }
.cm-setup-title { font-family:var(--ns-font-display); font-size:var(--ns-text-size-xs); font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ns-text); margin-bottom:16px; }
.cm-setup-row { margin-bottom:14px; }
.cm-setup-label { font-family:var(--ns-font-display); font-size:var(--ns-text-size-tag); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ns-text-2); display:block; margin-bottom:6px; }
.cm-setup-input { width:100%; background:transparent; border:none; border-bottom:1px solid var(--ns-border); color:var(--ns-text); font-size:var(--ns-text-size-md); font-family:var(--ns-font-body); padding:6px 0; transition:border-color var(--ns-ease); resize:none; }
.cm-setup-input:focus { outline:none; border-bottom-color:var(--ns-accent-studio); }
.cm-setup-input::placeholder { color:var(--ns-text-3); }
.cm-setup-hint { font-size:var(--ns-text-size-sm); color:var(--ns-text-3); margin-top:4px; }

.cm-compose { padding:14px var(--ns-page-x); border-bottom:1px solid var(--ns-border); }
.cm-compose-row { display:flex; align-items:flex-start; gap:10px; }
.cm-av { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:var(--ns-text-size-xs); font-weight:700; text-transform:uppercase; flex-shrink:0; }
.cm-av-sm { width:26px; height:26px; font-size:var(--ns-text-size-tag); flex-shrink:0; }
.cm-compose-body { flex:1; min-width:0; }
.cm-compose-ta { width:100%; background:transparent; border:none; border-bottom:1px solid var(--ns-border); color:var(--ns-text); font-size:var(--ns-text-size-md); font-family:var(--ns-font-body); padding:4px 0 8px; resize:none; line-height:1.6; transition:border-color var(--ns-ease); }
.cm-compose-ta:focus { outline:none; border-bottom-color:var(--ns-accent-studio); }
.cm-compose-ta::placeholder { color:var(--ns-text-3); }
.cm-sc-embed { margin-top:8px; border:1px solid var(--ns-border); overflow:hidden; }
.cm-sc-embed iframe { display:block; }
.cm-compose-foot { display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:10px; flex-wrap:wrap; }
.cm-compose-foot-left { display:flex; align-items:center; gap:8px; }
.cm-compose-foot-right { display:flex; align-items:center; gap:10px; }
.cm-cat-label { font-family:var(--ns-font-display); font-size:var(--ns-text-size-tiny); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ns-text-3); }
.cm-cat-current { font-family:var(--ns-font-display); font-size:var(--ns-text-size-tiny); font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:var(--ns-radius-pill); border:1px solid; cursor:pointer; display:flex; align-items:center; gap:4px; background:transparent; transition:all var(--ns-ease); }
.cm-char { font-size:var(--ns-text-size-sm); color:var(--ns-text-3); }
.cm-err { font-size:var(--ns-text-size-sm); color:var(--ns-error); margin-top:5px; min-height:14px; }

/* Category dropdown */
.cm-cat-dropdown { position:absolute; background:var(--ns-bg-raised); border:1px solid var(--ns-border-2); border-radius:var(--ns-radius); padding:4px; z-index:500; min-width:160px; }
.cm-cat-opt { display:block; width:100%; text-align:left; font-family:var(--ns-font-display); font-size:var(--ns-text-size-tag); font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:7px 12px; border-radius:var(--ns-radius-pill); border:1px solid transparent; cursor:pointer; background:transparent; margin-bottom:3px; transition:all .12s; }
.cm-cat-opt:last-child { margin-bottom:0; }

/* Category colours */
.cc-gen { border-color:var(--ns-cat-gen-border)!important; color:var(--ns-cat-gen-color)!important; }
.cc-gen:hover,.cc-gen.sel { background:var(--ns-cat-gen-bg)!important; border-color:var(--ns-cat-gen-border-act)!important; color:var(--ns-cat-gen-color-act)!important; }
.cc-pro { border-color:var(--ns-cat-pro-border)!important; color:var(--ns-cat-pro-color)!important; }
.cc-pro:hover,.cc-pro.sel { background:var(--ns-accent-studio-fade)!important; border-color:var(--ns-accent-studio)!important; color:var(--ns-accent-studio)!important; }
.cc-tf  { border-color:var(--ns-cat-tf-border)!important; color:var(--ns-cat-tf-color)!important; }
.cc-tf:hover,.cc-tf.sel  { background:var(--ns-cat-tf-bg)!important; border-color:var(--ns-cat-tf-border-act)!important; color:var(--ns-cat-tf-color-act)!important; }
.cc-id  { border-color:var(--ns-cat-id-border)!important; color:var(--ns-cat-id-color)!important; }
.cc-id:hover,.cc-id.sel  { background:var(--ns-cat-id-bg)!important; border-color:var(--ns-cat-id-border-act)!important; color:var(--ns-cat-id-color-act)!important; }
.cc-ot  { border-color:var(--ns-cat-ot-border)!important; color:var(--ns-cat-ot-color)!important; }
.cc-ot:hover,.cc-ot.sel  { background:var(--ns-cat-ot-bg)!important; border-color:var(--ns-cat-ot-border-act)!important; color:var(--ns-cat-ot-color-act)!important; }

/* Category badges on posts */
.cm-badge { display:inline-block; font-family:var(--ns-font-display); font-size:var(--ns-text-size-tiny); font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:2px 8px; border-radius:var(--ns-radius-pill); border:1px solid; margin-bottom:8px; }
.cb-gen { background:var(--ns-cat-gen-badge-bg); color:var(--ns-cat-gen-badge-color); border-color:var(--ns-cat-gen-badge-border); }
.cb-pro { background:var(--ns-accent-studio-fade); color:var(--ns-accent-studio); border-color:var(--ns-accent-studio-border); }
.cb-tf  { background:var(--ns-cat-tf-bg); color:var(--ns-cat-tf-badge-color); border-color:var(--ns-cat-tf-badge-border); }
.cb-id  { background:var(--ns-cat-id-bg); color:var(--ns-cat-id-badge-color); border-color:var(--ns-cat-id-badge-border); }
.cb-ot  { background:var(--ns-cat-ot-bg); color:var(--ns-cat-ot-badge-color); border-color:var(--ns-cat-ot-badge-border); }

/* Feed divider */
.cm-feed-divider { display:flex; align-items:center; gap:12px; padding:10px var(--ns-page-x); }
.cm-feed-divider-line { flex:1; height:1px; background:var(--ns-border); }
.cm-feed-divider-label { font-family:var(--ns-font-display); font-size:var(--ns-text-size-tag); font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ns-text-3); }

/* Filter pills — square/rectangular, distinct from compose selector */
.cm-filters { display:flex; gap:6px; flex-wrap:wrap; padding:0 var(--ns-page-x) 12px; }
.cm-fil { font-family:var(--ns-font-display); font-size:var(--ns-text-size-tag); font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:5px 12px; border:1px solid var(--ns-border); color:var(--ns-text-3); background:transparent; cursor:pointer; transition:all var(--ns-ease); }
.cm-fil.active,.cm-fil:hover { border-color:var(--ns-text); color:var(--ns-text); }
.cm-fil-gen.active { color:var(--ns-cat-gen-color-act); border-color:var(--ns-cat-gen-border-act); }
.cm-fil-pro.active { color:var(--ns-accent-studio); border-color:var(--ns-accent-studio); background:var(--ns-accent-studio-fade); }
.cm-fil-tf.active  { color:var(--ns-cat-tf-color-act);    border-color:var(--ns-cat-tf-border-act);    background:var(--ns-cat-tf-bg); }
.cm-fil-id.active  { color:var(--ns-cat-id-color-act);  border-color:var(--ns-cat-id-border-act);  background:var(--ns-cat-id-bg); }
.cm-fil-ot.active  { color:var(--ns-cat-ot-color-act);  border-color:var(--ns-cat-ot-border-act);  background:var(--ns-cat-ot-bg); }

/* Posts */
.cm-post { padding:14px var(--ns-page-x); border-bottom:1px solid var(--ns-border); transition:background var(--ns-ease); }
.cm-post:hover { background:var(--ns-surface-hover); }
.cm-post.pinned { background:var(--ns-accent-studio-fade); border-left:2px solid var(--ns-accent-studio-border); }
.cm-pin-label { font-family:var(--ns-font-display); font-size:var(--ns-text-size-tiny); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ns-accent-studio); margin-bottom:8px; display:flex; align-items:center; gap:5px; }
.cm-post-head { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.cm-post-name { font-size:var(--ns-text-size-base); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ns-text); }
.cm-you { font-size:var(--ns-text-size-tiny); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ns-accent-studio); border:1px solid var(--ns-accent-studio-border); padding:1px 5px; border-radius:var(--ns-radius-pill); margin-left:6px; vertical-align:middle; }
.cm-post-time { font-size:var(--ns-text-size-sm); color:var(--ns-text-3); margin-top:1px; }
.cm-post-body { font-size:var(--ns-text-size-md); color:var(--ns-text-2); line-height:1.65; margin-bottom:10px; word-break:break-word; white-space:pre-wrap; }
.cm-post-foot { display:flex; align-items:center; gap:14px; padding-top:9px; border-top:1px solid var(--ns-border-subtle); flex-wrap:wrap; }
.cm-action { background:none; border:none; color:var(--ns-text-3); font-size:var(--ns-text-size-sm); font-weight:600; letter-spacing:.07em; text-transform:uppercase; cursor:pointer; font-family:var(--ns-font-display); display:inline-flex; align-items:center; gap:5px; padding:0; transition:color var(--ns-ease); }
.cm-action:hover { color:var(--ns-accent-studio); }
.cm-action.liked { color:var(--ns-accent-studio); }
.cm-action i { font-size:var(--ns-text-size-base); }
.cm-del    { background:none; border:none; color:var(--ns-error-del); font-size:var(--ns-text-size-xs); font-weight:600; letter-spacing:.07em; text-transform:uppercase; cursor:pointer; font-family:var(--ns-font-display); padding:0; }
.cm-report { background:none; border:none; color:var(--ns-text-faint); font-size:var(--ns-text-size-xs); font-weight:600; letter-spacing:.07em; text-transform:uppercase; cursor:pointer; font-family:var(--ns-font-display); padding:0; margin-left:auto; }
.cm-report.reported { color:var(--ns-error-fade); cursor:default; }

/* Edit */
.cm-edit-wrap { margin-bottom:10px; }
.cm-edit-ta { width:100%; background:var(--ns-surface); border:1px solid var(--ns-border); color:var(--ns-text); font-size:var(--ns-text-size-md); font-family:var(--ns-font-body); padding:10px 12px; resize:none; line-height:1.6; transition:border-color var(--ns-ease); box-sizing:border-box; }
.cm-edit-ta:focus { outline:none; border-color:var(--ns-accent-studio); }
.cm-edit-foot { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.cm-edit-save   { font-family:var(--ns-font-display); font-size:var(--ns-text-size-tag); font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:var(--ns-accent-studio); color:#000; border:none; padding:6px 14px; cursor:pointer; }
.cm-edit-cancel { font-family:var(--ns-font-display); font-size:var(--ns-text-size-tag); font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:transparent; color:var(--ns-text-2); border:1px solid var(--ns-border); padding:6px 14px; cursor:pointer; }

/* Replies */
.cm-replies-wrap { padding-left:42px; padding-top:10px; border-top:1px solid var(--ns-border-subtle); margin-top:10px; }
.cm-reply { display:flex; gap:8px; margin-bottom:10px; }
.cm-reply-name { font-size:var(--ns-text-size-sm); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ns-text-2); margin-bottom:2px; }
.cm-reply-name span { color:var(--ns-text-3); font-weight:400; text-transform:none; letter-spacing:0; }
.cm-reply-text { font-size:var(--ns-text-size-base); color:var(--ns-text-2); line-height:1.5; }
.cm-reply-row { display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--ns-border-faint); }
.cm-reply-input { flex:1; min-width:0; background:transparent; border:none; border-bottom:1px solid var(--ns-border); color:var(--ns-text); font-size:var(--ns-text-size-base); font-family:var(--ns-font-body); padding:5px 0; transition:border-color var(--ns-ease); }
.cm-reply-input:focus { outline:none; border-bottom-color:var(--ns-accent-studio); }
.cm-reply-input::placeholder { color:var(--ns-text-3); }
.cm-reply-btn { font-family:var(--ns-font-display); font-size:var(--ns-text-size-tag); font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:none; border:none; color:var(--ns-text-3); cursor:pointer; padding:0; transition:color var(--ns-ease); white-space:nowrap; }
.cm-reply-btn:hover { color:var(--ns-accent-studio); }

/* States */
.cm-state-msg { padding:48px var(--ns-page-x); font-family:var(--ns-font-display); font-size:var(--ns-text-size-xs); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ns-text-3); text-align:center; }
.cm-spinner { width:16px; height:16px; border:1px solid var(--ns-surface-2); border-top-color:var(--ns-accent-studio); border-radius:50%; animation:ns-pulse .7s linear infinite; margin:0 auto 12px; }
.cm-load-more { width:100%; background:transparent; border:1px solid var(--ns-border); color:var(--ns-text-2); font-family:var(--ns-font-display); font-size:var(--ns-text-size-tag); font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:12px; cursor:pointer; transition:all var(--ns-ease); }
.cm-load-more:hover { border-color:var(--ns-border-2); color:var(--ns-text); }

/* Profile */
.cm-profile { padding:28px var(--ns-page-x) 0; }
.cm-profile-av { width:52px; height:52px; border-radius:50%; background:var(--ns-accent-studio); color:#000; font-size:var(--ns-text-size-md-lg); font-weight:700; display:flex; align-items:center; justify-content:center; text-transform:uppercase; margin-bottom:16px; }

/* Toast */
.cm-toast { position:fixed; bottom:24px; right:24px; background:var(--ns-bg-raised); border:1px solid var(--ns-accent-studio-border); color:var(--ns-accent-studio); font-family:var(--ns-font-display); font-size:var(--ns-text-size-tag); font-weight:700; letter-spacing:.15em; text-transform:uppercase; padding:10px 16px; opacity:0; transition:opacity .25s; z-index:9999; pointer-events:none; }
.cm-toast.show { opacity:1; }

/* ── Product page ──────────────────────────────────────────────────────────────────────── */
.pd-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:var(--ns-sp-3);font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ns-text-3)}
.pd-spinner{width:16px;height:16px;border:1px solid var(--ns-surface-2);border-top-color:var(--ns-accent);border-radius:50%;animation:ns-pulse .7s linear infinite}
#pd-content{padding:0 var(--ns-page-x)}
.pd-back{display:inline-flex;align-items:center;gap:var(--ns-sp-1);font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ns-text-3);text-decoration:none;margin-bottom:var(--ns-sp-6);transition:color var(--ns-ease);align-self:flex-start}
.pd-back:hover{color:var(--ns-text-2)}
.pd-back i{font-size:var(--ns-text-size-base-sm)}
.pd-header{display:flex;align-items:center;gap:var(--ns-sp-5);padding-bottom:var(--ns-sp-6);border-bottom:1px solid var(--ns-border);margin-bottom:var(--ns-sp-6)}
.pd-art{width:80px;height:80px;flex-shrink:0;overflow:hidden;background:var(--ns-surface)}
.pd-art img{width:100%;height:100%;object-fit:cover;display:block}
.pd-meta{flex:1;min-width:0}
.pd-eyebrow{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ns-text-3);margin-bottom:var(--ns-sp-1)}
.pd-title{font-family:var(--ns-font-display);font-weight:800;font-size:clamp(18px,2.5vw,28px);line-height:1.05;color:var(--ns-text);letter-spacing:-.01em;margin:0}
.pd-buy-col{flex-shrink:0;text-align:right}
.pd-price{font-family:var(--ns-font-display);font-weight:800;font-size:clamp(28px,3.5vw,40px);color:var(--ns-text);line-height:1;letter-spacing:-.02em;margin-bottom:var(--ns-sp-2)}
.pd-actions{display:flex;gap:var(--ns-sp-2);justify-content:flex-end;flex-wrap:wrap}
.pd-btn-cart{background:var(--ns-accent)!important;color:var(--ns-accent-on)!important;border-color:var(--ns-accent)!important;font-size:var(--ns-text-size-tag)!important;letter-spacing:.1em!important;padding:10px 18px!important;display:flex!important;align-items:center;gap:var(--ns-sp-2);font-weight:700!important}
.pd-btn-cart i{font-size:var(--ns-text-size-base)}
.pd-btn-cart:disabled{opacity:.5;cursor:default}
.pd-btn-buy{color:var(--ns-text-2)!important;border-color:var(--ns-text-3)!important;font-size:var(--ns-text-size-tag)!important;letter-spacing:.1em!important;padding:10px 16px!important}
.pd-btn-buy:hover:not(:disabled){color:var(--ns-text)!important;border-color:var(--ns-text-2)!important}
.pd-btn-buy:disabled{opacity:.5;cursor:default}
.pd-preview{background:var(--ns-bg-raised);border:1px solid var(--ns-border);border-radius:var(--ns-radius);padding:var(--ns-sp-4) var(--ns-sp-5);margin-bottom:var(--ns-sp-6)}
.pd-preview-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--ns-sp-3)}
.pd-preview-lbl{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ns-text-3)}
.pd-preview-tag{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ns-text-faint)}
.pd-player{display:flex;align-items:center;gap:var(--ns-sp-3)}
.pd-play-btn{width:32px;height:32px;background:var(--ns-accent);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ns-accent-on);transition:opacity var(--ns-ease)}
.pd-play-btn:hover{opacity:.85}
.pd-waveform{flex:1;display:flex;align-items:center;gap:1.5px;height:36px;cursor:pointer}
.pd-wf-bar{width:3px;flex-shrink:0;border-radius:var(--ns-radius-sm);background:var(--ns-surface-2);transition:background var(--ns-ease)}
.pd-wf-bar.played{background:var(--ns-accent)}
.pd-time{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:600;letter-spacing:.04em;color:var(--ns-text-3);flex-shrink:0;min-width:32px;text-align:right}
.pd-desc-wrap{padding-bottom:var(--ns-sp-6);border-bottom:1px solid var(--ns-border);margin-bottom:var(--ns-sp-6)}
.pd-desc{font-size:var(--ns-text-size-md);line-height:1.8;color:var(--ns-text-2);margin:0;max-width:560px}
.pd-related-hd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--ns-sp-4)}
.pd-related-lbl{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ns-text-3)}
.pd-related-all{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ns-text-3);text-decoration:none;display:inline-flex;align-items:center;gap:5px;transition:color var(--ns-ease)}
.pd-related-all:hover{color:var(--ns-text-2)}
.pd-related-all i{font-size:var(--ns-text-size-sm)}
.pd-related-grid{display:flex;gap:var(--ns-sp-2);overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.pd-related-grid::-webkit-scrollbar{display:none}
.pd-related-item{overflow:hidden;cursor:pointer;text-decoration:none;display:block}
.pd-related-art{aspect-ratio:1;background:var(--ns-surface);overflow:hidden}
.pd-related-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--ns-ease-slow)}
.pd-related-item:hover .pd-related-art img{transform:scale(1.03)}
.pd-related-info{padding:var(--ns-sp-2);border:1px solid var(--ns-border);border-top:none}
.pd-related-name{font-family:var(--ns-font-display);font-size:var(--ns-text-size-xs);font-weight:700;color:var(--ns-text-2);margin-bottom:2px;line-height:1.3;transition:color var(--ns-ease)}
.pd-related-item:hover .pd-related-name{color:var(--ns-accent)}
.pd-related-px{font-family:var(--ns-font-display);font-size:var(--ns-text-size-xs);font-weight:600;color:var(--ns-text-3)}
.pd-buy-note{font-size:var(--ns-text-size-sm);color:var(--ns-text-3);margin-top:var(--ns-sp-4)}
.pd-added{display:flex;align-items:center;gap:var(--ns-sp-2);font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ns-accent);margin-top:var(--ns-sp-3)}
.pd-added i{font-size:var(--ns-text-size-lg)}
.pd-added a{color:var(--ns-text-2);text-decoration:none;border-bottom:1px solid var(--ns-border);padding-bottom:1px;transition:color var(--ns-ease)}
.pd-added a:hover{color:var(--ns-text)}


/* ── Studio page ──────────────────────────────────────────────────────────────────────── */
.st-header{display:flex;align-items:flex-end;justify-content:space-between;padding:28px var(--ns-page-x) 16px;border-bottom:1px solid var(--ns-border)}
.st-title{font-family:var(--ns-font-display);font-size:var(--ns-text-size-3xl);font-weight:800;color:var(--ns-text);line-height:1;letter-spacing:.04em;text-transform:uppercase}
.ns-gate-cta-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--ns-font-display);font-size:var(--ns-text-size-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ns-accent-gate);border:1px solid var(--ns-accent-gate);padding:8px 14px;text-decoration:none;transition:all var(--ns-ease)}
.ns-gate-cta-link:hover{background:var(--ns-accent-gate);color:var(--ns-accent-on)}
.ns-gate-cta-link i{font-size:var(--ns-text-size-base-sm)}
.st-cta-link{display:inline-flex;align-items:center;gap:var(--ns-sp-2);background:var(--ns-accent-studio-fade);border:1px solid var(--ns-accent-studio-border);padding:var(--ns-sp-2) var(--ns-sp-4);text-decoration:none;transition:all var(--ns-ease)}
.st-cta-link span{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ns-accent-cta)}
.st-cta-link i{font-size:var(--ns-text-size-sm);color:var(--ns-accent-cta)}
.st-member{display:inline-flex;align-items:center;gap:var(--ns-sp-2);background:var(--ns-accent-studio-fade);border:1px solid var(--ns-accent-studio-border);padding:var(--ns-sp-2) var(--ns-sp-3)}
.st-member-dot{width:6px;height:6px;border-radius:50%;background:var(--ns-accent-studio);flex-shrink:0}
.st-member span{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ns-accent-studio)}
.st-controls{display:flex;gap:var(--ns-sp-2);align-items:center;padding:14px var(--ns-page-x);border-bottom:1px solid var(--ns-border)}
.st-search-wrap{flex:1;position:relative}
.st-search-wrap i{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:var(--ns-text-size-base);color:var(--ns-text-3);pointer-events:none}
.st-search{width:100%;background:var(--ns-surface);border:1px solid var(--ns-border-2);color:var(--ns-text-2);font-family:var(--ns-font-display);font-size:var(--ns-text-size-sm);font-weight:400;padding:9px 12px 9px 32px;outline:none;box-sizing:border-box;letter-spacing:0;transition:border-color var(--ns-ease)}
.st-search:focus{border-color:var(--ns-border-2)}
.st-select-wrap{position:relative;flex:0 0 200px}
.st-sort-wrap{position:relative;flex:0 0 140px}
.st-select-wrap i,.st-sort-wrap i{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:var(--ns-text-size-base-sm);color:var(--ns-text-3);pointer-events:none}
.st-select,.st-sort{width:100%;appearance:none;background:var(--ns-surface);border:1px solid var(--ns-border-2);color:var(--ns-text-2);font-family:var(--ns-font-display);font-size:var(--ns-text-size-sm);font-weight:400;letter-spacing:0;padding:9px 32px 9px 12px;outline:none;cursor:pointer;transition:border-color var(--ns-ease)}
.st-select:focus,.st-sort:focus{border-color:var(--ns-border-2)}
.st-cw{border-bottom:1px solid var(--ns-border);padding:14px 0}
.st-cw-hd{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;padding:0 var(--ns-page-x)}
.st-cw-left{display:flex;align-items:center;gap:var(--ns-sp-2)}
.st-cw-lbl{font-family:var(--ns-font-display);font-size:var(--ns-text-size-micro);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ns-text-3)}
.st-cw-count{font-family:var(--ns-font-display);font-size:var(--ns-text-size-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--ns-surface-2);border:1px solid var(--ns-border-2);color:var(--ns-text-3);padding:2px 8px}
.st-cw-right{display:flex;align-items:center;gap:var(--ns-sp-1)}
.st-cw-right span{font-family:var(--ns-font-display);font-size:var(--ns-text-size-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ns-text-3)}
.st-cw-right i{font-size:var(--ns-text-size-base);color:var(--ns-text-3);transition:transform var(--ns-ease)}
.st-cw-body{overflow:hidden;transition:max-height .3s ease,margin-top .3s ease}
.st-cw-row{display:flex;gap:var(--ns-sp-2);overflow-x:auto;scrollbar-width:none;padding:0 var(--ns-page-x) 4px}
.st-cw-row::-webkit-scrollbar{display:none}
.st-cw-card{flex:0 0 200px;overflow:hidden;cursor:pointer;text-decoration:none;display:block}
.st-art{background:var(--ns-surface);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;aspect-ratio:16/9}
.st-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--ns-ease-slow)}
.st-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--ns-surface-2)}
.st-progress-fill{height:100%;background:var(--ns-accent-studio)}
.st-dur{position:absolute;bottom:6px;right:7px;font-size:var(--ns-text-size-tiny);font-weight:700;font-family:var(--ns-font-display);color:var(--ns-text-3);background:rgba(0,0,0,0.55);padding:2px 6px}
.st-badge-new{position:absolute;top:7px;left:7px;font-family:var(--ns-font-display);font-size:var(--ns-text-size-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--ns-accent-studio-fade);border:1px solid var(--ns-accent-studio-border);color:var(--ns-accent-studio);padding:2px 7px}
.st-play{border-radius:50%;background:var(--ns-surface-2);border:1px solid var(--ns-border-2);display:flex;align-items:center;justify-content:center;transition:all var(--ns-ease);flex-shrink:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.st-play i{color:var(--ns-text-2);transition:color var(--ns-ease)}
.st-play-md{width:30px;height:30px}
.st-play-md i{font-size:var(--ns-text-size-base-sm);margin-left:2px}
.st-play-lg{width:36px;height:36px}
.st-play-lg i{font-size:var(--ns-text-size-md);margin-left:2px}
.st-card-info{padding:var(--ns-sp-2);border:1px solid var(--ns-border);border-top:none;flex:1}

.st-card-labels{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:5px}
.st-pill{display:inline-flex;align-items:center;font-size:var(--ns-text-size-tag);font-weight:600;letter-spacing:.06em;padding:2px 7px;border-radius:var(--ns-radius-tag);white-space:nowrap}
.st-pill--series{background:var(--ns-accent-studio-fade);color:var(--ns-accent-studio);border:1px solid var(--ns-accent-studio-border)}
.st-pill--genre{background:var(--ns-surface-2);color:var(--ns-text-3);border:1px solid var(--ns-border)}
.st-pill--new{background:var(--ns-accent-studio-fade);color:var(--ns-accent-studio);border:1px solid var(--ns-accent-studio-border)}

.st-series{font-family:var(--ns-font-display);font-size:var(--ns-text-size-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ns-accent-studio);margin-bottom:4px}
.st-card-title{font-family:var(--ns-font-display);font-size:var(--ns-text-size-sm);font-weight:700;color:var(--ns-text-2);line-height:1.3}
.st-genre{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ns-text-3);margin-top:4px}
.st-section{padding:18px var(--ns-page-x);border-bottom:1px solid var(--ns-border)}
.st-section-lbl{font-family:var(--ns-font-display);font-size:var(--ns-text-size-micro);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ns-text-3);margin-bottom:10px}
.st-feat{display:flex;gap:var(--ns-sp-4);align-items:center;background:var(--ns-surface);border:1px solid var(--ns-border);border-radius:var(--ns-radius);padding:var(--ns-sp-4);cursor:pointer;text-decoration:none;transition:border-color var(--ns-ease)}
.st-feat:hover{border-color:var(--ns-border-2)}
.st-feat-art{flex:0 0 220px}
.st-feat-meta{flex:1;min-width:0}
.st-feat-badges{display:flex;align-items:center;gap:var(--ns-sp-2);margin-bottom:var(--ns-sp-2)}
.st-feat-series{font-family:var(--ns-font-display);font-size:var(--ns-text-size-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ns-accent-studio)}
.st-feat-new{font-family:var(--ns-font-display);font-size:var(--ns-text-size-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--ns-accent-studio-fade);border:1px solid var(--ns-accent-studio-border);color:var(--ns-accent-studio);padding:2px 7px}
.st-feat-title{font-family:var(--ns-font-display);font-size:var(--ns-text-size-xl);font-weight:800;color:var(--ns-text);line-height:1.1;margin-bottom:var(--ns-sp-2);letter-spacing:-.01em}
.st-feat-desc{font-size:var(--ns-text-size-base-sm);color:var(--ns-text-2);line-height:1.6}
.st-feat-genre{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ns-text-3);margin-top:var(--ns-sp-2)}
.st-card:hover{border-color:var(--ns-border-2);background:var(--ns-surface)}
.st-feat:hover .st-play,.st-card:hover .st-play{background:var(--ns-accent-studio);border-color:var(--ns-accent-studio)}
.st-feat:hover .st-play i,.st-card:hover .st-play i{color:var(--ns-accent-on)}

.st-grid-wrap{padding:18px var(--ns-page-x) 40px}
.st-count{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ns-text-3);margin-bottom:14px}
.st-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ns-sp-2)}

.st-card{overflow:hidden;cursor:pointer;text-decoration:none;display:flex;flex-direction:column}
.st-card-thumb{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--ns-surface);flex-shrink:0}
.st-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.st-card-lock{position:absolute;bottom:5px;right:6px;font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(0,0,0,.65);color:var(--ns-text-3);padding:2px 6px;display:flex;align-items:center;gap:3px}
.st-card-lock i{font-size:var(--ns-text-size-tag)}
.st-empty{text-align:center;padding:60px var(--ns-page-x);font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ns-text-3)}


/* ── Tutorial page ────────────────────────────────────────────────────────────────────── */
.tu-header{display:flex;align-items:center;justify-content:space-between;padding:16px var(--ns-page-x);border-bottom:1px solid var(--ns-border)}
.tu-title{padding:20px var(--ns-page-x) 16px}
.tu-badges{display:flex;align-items:center;gap:var(--ns-sp-2);margin-bottom:10px}
.tu-series{font-family:var(--ns-font-display);font-size:var(--ns-text-size-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ns-accent-studio)}
.tu-badge-new{font-family:var(--ns-font-display);font-size:var(--ns-text-size-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--ns-accent-studio-fade);border:1px solid var(--ns-accent-studio-border);color:var(--ns-accent-studio);padding:2px 7px}
.tu-h1{font-family:var(--ns-font-display);font-size:var(--ns-text-size-2xl);font-weight:800;color:var(--ns-text);margin:0 0 10px;line-height:1.05;letter-spacing:-.01em}
.tu-meta{display:flex;align-items:center;gap:14px}
.tu-meta-item{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ns-text-3)}
.tu-meta-sep{color:var(--ns-border-2)}
.tu-speed{position:relative;display:inline-block}
.tu-speed select{appearance:none;background:var(--ns-surface-2);border:1px solid var(--ns-border-2);color:var(--ns-text-3);font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:3px 22px 3px 8px;outline:none}
.tu-speed i{position:absolute;right:5px;top:50%;transform:translateY(-50%);font-size:var(--ns-text-size-tiny);color:var(--ns-text-3);pointer-events:none}
.tu-player-outer{margin:0 var(--ns-page-x);border:1px solid var(--ns-border);overflow:hidden}
.tu-player-wrap{position:relative;aspect-ratio:16/9;background:var(--ns-bg-raised)}
.tu-stream{position:absolute;inset:0;width:100%;height:100%;border:none}
.tu-locked{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,10,10,0.8)}
.tu-locked-inner{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:0 40px}
.tu-lock-icon{width:40px;height:40px;border-radius:50%;background:var(--ns-accent-studio-fade);border:1px solid var(--ns-accent-studio-border);display:flex;align-items:center;justify-content:center}
.tu-lock-icon i{font-size:var(--ns-text-size-xl);color:var(--ns-accent-studio)}
.tu-locked-label{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ns-text-3);margin-bottom:5px}
.tu-locked-msg{font-family:var(--ns-font-display);font-size:var(--ns-text-size-base);font-weight:700;color:var(--ns-text-2);line-height:1.5}
.tu-locked-cta{display:inline-flex;align-items:center;gap:var(--ns-sp-2);background:var(--ns-accent-studio);padding:10px 22px;text-decoration:none;transition:opacity var(--ns-ease)}
.tu-locked-cta:hover{opacity:.88}
.tu-locked-cta span{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ns-accent-on)}
.tu-locked-cta i{font-size:var(--ns-text-size-base-sm);color:var(--ns-accent-on)}
.tu-locked-browse{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ns-text-3);text-decoration:none;transition:color var(--ns-ease)}
.tu-locked-browse:hover{color:var(--ns-text-2)}
.tu-progress-bar{height:3px;background:var(--ns-surface-2);cursor:pointer;position:relative}
.tu-progress-fill{height:100%;background:var(--ns-accent-studio);position:relative;transition:width .1s}
.tu-progress-thumb{width:10px;height:10px;border-radius:50%;background:var(--ns-accent-studio);position:absolute;right:-5px;top:-3.5px}
.tu-ch-dot{position:absolute;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--ns-text);border:1px solid var(--ns-bg);pointer-events:none;transform:translateX(-50%)}
.tu-controls{display:flex;align-items:center;gap:10px;padding:9px 14px;background:var(--ns-bg-elevated)}
.tu-ctrl-btn{background:none;border:none;cursor:pointer;display:flex;align-items:center;padding:0;color:var(--ns-text-2)}
.tu-ctrl-btn i{font-size:var(--ns-text-size-lg)}
.tu-vol{display:flex;align-items:center;gap:var(--ns-sp-1)}
.tu-vol i{font-size:var(--ns-text-size-base);color:var(--ns-text-3)}
.tu-vol-track{width:52px;height:3px;background:var(--ns-surface-2);border-radius:var(--ns-radius-sm);cursor:pointer}
.tu-vol-fill{height:100%;background:var(--ns-text-3);border-radius:var(--ns-radius-sm);width:70%}
.tu-cc-btn{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.08em;color:var(--ns-text-3);background:var(--ns-surface-2);border:1px solid var(--ns-border-2);padding:3px 8px;cursor:pointer;transition:all var(--ns-ease)}
.tu-cc-btn.on{color:var(--ns-accent-studio);border-color:var(--ns-accent-studio-border);background:var(--ns-accent-studio-fade)}
.tu-chapters{margin:0 var(--ns-page-x);border:1px solid var(--ns-border);border-top:none}
.tu-ch-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;cursor:pointer;user-select:none;border-top:1px solid var(--ns-border-subtle)}
.tu-ch-hd-lbl{font-family:var(--ns-font-display);font-size:var(--ns-text-size-micro);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ns-text-3)}
.tu-ch-hd i{font-size:var(--ns-text-size-base-sm);color:var(--ns-text-3);transition:transform var(--ns-ease)}
.tu-ch-body{overflow:hidden;transition:max-height .25s ease}
.tu-ch-grid{display:grid;grid-template-columns:1fr 1fr}
.tu-ch-row{display:flex;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid var(--ns-border-faint);cursor:pointer;transition:background var(--ns-ease)}
.tu-ch-row:hover{background:var(--ns-surface-hover)}
.tu-ch-row.active{background:var(--ns-accent-studio-fade)}
.tu-ch-row:nth-child(odd){border-right:1px solid var(--ns-border-faint)}
.tu-ch-time{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;color:var(--ns-text-3);min-width:30px}
.tu-ch-row.active .tu-ch-time{color:var(--ns-accent-studio)}
.tu-ch-name{font-family:var(--ns-font-display);font-size:var(--ns-text-size-xs);font-weight:700;color:var(--ns-text-3)}
.tu-ch-row.active .tu-ch-name{color:var(--ns-text-2)}
.tu-desc{padding:20px var(--ns-page-x) 0}
.tu-section-lbl{font-family:var(--ns-font-display);font-size:var(--ns-text-size-micro);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ns-text-3);margin-bottom:10px}
.tu-desc-text{font-size:var(--ns-text-size-base);color:var(--ns-text-2);line-height:1.8;margin:0 0 20px}
.tu-track-preview{background:var(--ns-surface);border:1px solid var(--ns-border);padding:12px 16px;margin-bottom:20px}
.tu-preview-player{display:flex;align-items:center;gap:var(--ns-sp-3);margin-top:10px;min-width:0}
.tu-preview-play{width:28px;height:28px;background:var(--ns-accent-studio);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity var(--ns-ease)}
.tu-preview-play:hover{opacity:.85}
.tu-preview-play i{font-size:var(--ns-text-size-sm);color:var(--ns-accent-on)}
.tu-waveform{flex:1;display:flex;align-items:center;gap:1.5px;height:30px;cursor:pointer;overflow:hidden;min-width:0}
.tu-wf-bar{flex:1;max-width:3px;min-width:1.5px;border-radius:var(--ns-radius-sm);background:var(--ns-surface-2);transition:background var(--ns-ease)}
.tu-wf-bar.played{background:var(--ns-accent-studio)}
.tu-preview-time{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:600;color:var(--ns-text-3);min-width:28px;text-align:right;letter-spacing:.04em}
.tu-related{padding:18px var(--ns-page-x) 40px;border-top:1px solid var(--ns-border)}
.tu-related-row{display:flex;gap:var(--ns-sp-2);overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.tu-related-row::-webkit-scrollbar{display:none}
.tu-related-card{flex:0 0 180px;overflow:hidden;cursor:pointer;text-decoration:none;display:block}
.tu-related-art{aspect-ratio:16/9;background:var(--ns-surface);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.tu-related-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--ns-ease-slow)}
.tu-related-card:hover .tu-related-art img{transform:scale(1.03)}
.tu-related-info{padding:var(--ns-sp-2);border:1px solid var(--ns-border);border-top:none}
.tu-related-series{font-family:var(--ns-font-display);font-size:var(--ns-text-size-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ns-accent-studio);margin-bottom:4px}
.tu-related-title{font-family:var(--ns-font-display);font-size:var(--ns-text-size-xs);font-weight:700;color:var(--ns-text-2);line-height:1.3}


/* ── Login page ──────────────────────────────────────────────────────────────────────── */
.lg-wrap{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 40px);padding:40px var(--ns-page-x)}
.lg-card{width:100%;max-width:400px}
.lg-eyebrow{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ns-text-3);margin-bottom:var(--ns-sp-3)}
.lg-heading{font-family:var(--ns-font-display);font-size:var(--ns-text-size-26);font-weight:800;color:var(--ns-text);letter-spacing:.04em;text-transform:uppercase;line-height:1;margin-bottom:var(--ns-sp-3)}
.lg-desc{font-size:var(--ns-text-size-base);color:var(--ns-text-2);line-height:1.7;margin-bottom:var(--ns-sp-8)}
.lg-field{position:relative;margin-bottom:var(--ns-sp-3)}
.lg-input{width:100%;background:var(--ns-surface);border:1px solid var(--ns-border-2);color:var(--ns-text);font-family:var(--ns-font-body);font-size:var(--ns-text-size-md);padding:12px var(--ns-sp-4);outline:none;box-sizing:border-box;transition:border-color var(--ns-ease)}
.lg-input::placeholder{color:var(--ns-text-3)}
.lg-input:focus{border-color:var(--ns-accent)}
.lg-input.error{border-color:var(--ns-error)}
.lg-err-msg{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:600;letter-spacing:.1em;color:var(--ns-error);margin-top:var(--ns-sp-2);display:none}
.lg-err-msg.visible{display:block}
.lg-btn{width:100%;background:var(--ns-accent);color:var(--ns-accent-on);border:none;font-family:var(--ns-font-display);font-size:var(--ns-text-size-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:13px var(--ns-sp-4);cursor:pointer;transition:opacity var(--ns-ease);display:flex;align-items:center;justify-content:center;gap:var(--ns-sp-2)}
.lg-btn:hover{opacity:.88}
.lg-btn:disabled{opacity:.45;cursor:default}
.lg-btn i{font-size:var(--ns-text-size-md)}
.lg-sent{text-align:center}
.lg-sent-icon{width:48px;height:48px;border-radius:50%;background:var(--ns-surface);border:1px solid var(--ns-border-2);display:flex;align-items:center;justify-content:center;margin:0 auto var(--ns-sp-6)}
.lg-sent-icon i{font-size:var(--ns-text-size-2xl);color:var(--ns-accent)}
.lg-sent-heading{font-family:var(--ns-font-display);font-size:var(--ns-text-size-xl-lg);font-weight:800;color:var(--ns-text);letter-spacing:.04em;text-transform:uppercase;margin-bottom:var(--ns-sp-3)}
.lg-sent-to{font-size:var(--ns-text-size-base);color:var(--ns-text-2);margin-bottom:var(--ns-sp-2);line-height:1.6}
.lg-sent-email{color:var(--ns-text);font-weight:600}
.lg-sent-note{font-size:var(--ns-text-size-sm);color:var(--ns-text-3);margin-bottom:var(--ns-sp-6)}
.lg-reset{background:none;border:none;font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ns-text-3);cursor:pointer;transition:color var(--ns-ease);padding:0}
.lg-reset:hover{color:var(--ns-text-2)}
.lg-divider{border:none;border-top:1px solid var(--ns-border);margin:var(--ns-sp-8) 0}
.lg-note{font-size:var(--ns-text-size-sm);color:var(--ns-text-3);text-align:center;line-height:1.7}

.lg-logo{height:32px;width:auto;object-fit:contain;display:block;margin-bottom:var(--ns-sp-8)}

/* ── Mobile nav ──────────────────────────────────────────────────────────────────────── */
.ns-mob-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:58px;background:var(--ns-bg-raised);border-top:1px solid var(--ns-border);z-index:200;align-items:stretch}
.ns-mob-nav__item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ns-text-3);text-decoration:none;background:none;border:none;cursor:pointer;padding:6px 0;transition:color var(--ns-ease);font-family:var(--ns-font-display);font-size:var(--ns-text-size-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;-webkit-tap-highlight-color:transparent}
.ns-mob-nav__item:hover,.ns-mob-nav__item.active{color:var(--ns-text-2)}
.ns-mob-nav__item i{font-size:var(--ns-text-size-19);line-height:1}
.ns-mob-drawer{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:300;align-items:flex-end}
.ns-mob-drawer.open{display:flex}
.ns-mob-drawer__panel{width:100%;background:var(--ns-bg-raised);border-top:1px solid var(--ns-border);border-radius:12px 12px 0 0;padding:10px 0 calc(env(safe-area-inset-bottom) + 20px)}
.ns-mob-drawer__grip{width:36px;height:4px;background:var(--ns-border-2);border-radius:var(--ns-radius-sm);margin:0 auto 14px}
.ns-mob-drawer__item{display:flex;align-items:center;gap:16px;padding:13px 24px;color:var(--ns-text-2);text-decoration:none;font-family:var(--ns-font-display);font-size:var(--ns-text-size-sm);font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:color var(--ns-ease)}
.ns-mob-drawer__item:hover{color:var(--ns-text)}
.ns-mob-drawer__item i{font-size:var(--ns-text-size-xl);width:22px;flex-shrink:0}
.ns-mob-drawer__sep{height:1px;background:var(--ns-border);margin:6px 24px}


/* ── Cart page ──────────────────────────────────────────────────────────────────────── */
.ca-header{display:flex;align-items:center;justify-content:space-between;gap:var(--ns-sp-3);padding:28px var(--ns-page-x) 16px;border-bottom:1px solid var(--ns-border);margin-bottom:var(--ns-sp-6)}
.ca-title{font-family:var(--ns-font-display);font-size:var(--ns-text-size-3xl);font-weight:800;color:var(--ns-text);letter-spacing:.04em;text-transform:uppercase;line-height:1}
.ca-count{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ns-text-3)}
.ca-empty{padding:60px var(--ns-page-x);text-align:center}
.ca-empty-msg{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ns-text-3);margin-bottom:var(--ns-sp-5)}
.ca-empty-link{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ns-text-2);text-decoration:none;border-bottom:1px solid var(--ns-border);padding-bottom:2px;transition:color var(--ns-ease)}
.ca-empty-link:hover{color:var(--ns-text)}
.ca-layout{display:grid;grid-template-columns:1fr 300px;gap:var(--ns-sp-8);align-items:start;padding:0 var(--ns-page-x) 60px}
.ca-items{display:flex;flex-direction:column;gap:0}
.ca-item{display:flex;align-items:center;gap:var(--ns-sp-4);padding:var(--ns-sp-4) 0;border-bottom:1px solid var(--ns-border)}
.ca-art{width:56px;height:56px;flex-shrink:0;overflow:hidden}
.ca-art img{width:100%;height:100%;object-fit:cover;display:block}
.ca-info{flex:1;min-width:0}
.ca-artist{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ns-text-3);margin-bottom:4px}
.ca-name{font-family:var(--ns-font-display);font-size:var(--ns-text-size-base);font-weight:700;color:var(--ns-text);line-height:1.2}
.ca-item-price{font-family:var(--ns-font-display);font-size:var(--ns-text-size-md);font-weight:700;color:var(--ns-text);flex-shrink:0}
.ca-remove{background:none;border:none;color:var(--ns-text-3);cursor:pointer;padding:var(--ns-sp-1);transition:color var(--ns-ease);display:flex;align-items:center}
.ca-remove:hover{color:var(--ns-text)}
.ca-remove i{font-size:var(--ns-text-size-lg)}
.ca-summary{background:var(--ns-surface);border:1px solid var(--ns-border);border-radius:var(--ns-radius);padding:var(--ns-sp-5);position:sticky;top:var(--ns-sp-5)}
.ca-summary-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--ns-sp-5);padding-bottom:var(--ns-sp-5);border-bottom:1px solid var(--ns-border)}
.ca-summary-lbl{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ns-text-3)}
.ca-summary-total{font-family:var(--ns-font-display);font-size:var(--ns-text-size-2xl);font-weight:800;color:var(--ns-text);letter-spacing:-.01em}
.ca-checkout-btn{width:100%;background:var(--ns-accent);color:var(--ns-accent-on);border:none;font-family:var(--ns-font-display);font-size:var(--ns-text-size-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:13px;cursor:pointer;transition:opacity var(--ns-ease);margin-bottom:var(--ns-sp-3);display:flex;align-items:center;justify-content:center;gap:var(--ns-sp-2)}
.ca-checkout-btn:hover{opacity:.88}
.ca-checkout-btn:disabled{opacity:.45;cursor:default}
.ca-checkout-btn i{font-size:var(--ns-text-size-md)}
.ca-continue{display:block;text-align:center;font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ns-text-3);text-decoration:none;margin-bottom:var(--ns-sp-5);transition:color var(--ns-ease)}
.ca-continue:hover{color:var(--ns-text-2)}
.ca-note{font-size:var(--ns-text-size-xs);color:var(--ns-text-3);text-align:center;line-height:1.6}


/* ── Sample Packs browse ──────────────────────────────────────────────────── */
.sp-head{padding:28px var(--ns-page-x) 16px;border-bottom:1px solid var(--ns-border);display:flex;align-items:baseline;gap:var(--ns-sp-3)}
.sp-page-title{font-family:var(--ns-font-display);font-size:var(--ns-text-size-3xl);font-weight:800;color:var(--ns-text);letter-spacing:.04em;text-transform:uppercase;line-height:1}
.sp-count{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ns-text-3)}
.sp-controls{display:flex;align-items:center;gap:var(--ns-sp-2);padding:14px var(--ns-page-x);border-bottom:1px solid var(--ns-border)}
.sp-search-wrap{position:relative;flex:1}
.sp-search-wrap i{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:var(--ns-text-size-base);color:var(--ns-text-3);pointer-events:none}
.sp-search{width:100%;background:var(--ns-surface);border:1px solid var(--ns-border-2);color:var(--ns-text-2);padding:9px 12px 9px 32px;font-family:var(--ns-font-display);font-size:var(--ns-text-size-sm);font-weight:400;letter-spacing:0;outline:none;box-sizing:border-box;transition:border-color var(--ns-ease)}
.sp-search:focus{border-color:var(--ns-border-2)}
.sp-search::placeholder{color:var(--ns-text-3)}
.sp-select-wrap{position:relative;flex:0 0 200px}
.sp-select-wrap>i,.sp-sort-wrap>i{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:var(--ns-text-size-base-sm);color:var(--ns-text-3);pointer-events:none}
.sp-select,.sp-sort{width:100%;appearance:none;-webkit-appearance:none;background:var(--ns-surface);border:1px solid var(--ns-border-2);color:var(--ns-text-2);padding:9px 32px 9px 12px;font-family:var(--ns-font-display);font-size:var(--ns-text-size-sm);font-weight:400;letter-spacing:0;cursor:pointer;outline:none;transition:border-color var(--ns-ease)}
.sp-select:focus,.sp-sort:focus{border-color:var(--ns-border-2)}
.sp-sort-wrap{position:relative;flex:0 0 140px}
.sp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ns-bg)}
.sp-no-results{grid-column:1/-1;padding:60px var(--ns-page-x);text-align:center;font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ns-text-3);background:var(--ns-bg)}
.sp-card{display:block;text-decoration:none;background:var(--ns-bg);min-width:0}
.sp-card:hover{background:var(--ns-surface)}
.sp-card:hover .sp-card-img{transform:none}
.sp-card:hover .sp-card-add{opacity:1}
.sp-card-art{aspect-ratio:1;overflow:hidden;position:relative;background:var(--ns-bg-elevated)}
.sp-card-art::before{display:none}
.sp-card-art-bg{position:absolute;inset:0}
.sp-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.sp-card-info{padding:11px 12px 13px;background:transparent}
.sp-card-primary{font-family:var(--ns-font-display);font-size:var(--ns-text-size-md);font-weight:800;color:var(--ns-text);line-height:1.2;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-card-sub{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.1em;color:var(--ns-text-3);margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:12px}
.sp-card-foot{display:flex;align-items:center;justify-content:space-between}
.sp-card-price{font-family:var(--ns-font-display);font-size:var(--ns-text-size-base);font-weight:800;color:var(--ns-text)}
.sp-card-add{background:var(--ns-accent);border:none;color:var(--ns-accent-on);width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.45;transition:opacity var(--ns-ease);flex-shrink:0}
.sp-card-add i{font-size:var(--ns-text-size-base)}




/* ── Track Services ──────────────────────────────────────────────────────────────────────── */
.svc-head{padding:28px var(--ns-page-x) 16px;border-bottom:1px solid var(--ns-border)}
.svc-title{font-family:var(--ns-font-display);font-size:var(--ns-text-size-3xl);font-weight:800;color:var(--ns-text);letter-spacing:.04em;text-transform:uppercase;line-height:1;margin-bottom:var(--ns-sp-3)}
.svc-subtitle{font-size:var(--ns-text-size-md);color:var(--ns-text-2);max-width:540px;line-height:1.6}
.svc-body{padding:24px var(--ns-page-x) 60px}
.svc-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--ns-border);border-radius:var(--ns-radius);overflow:hidden;margin-bottom:32px}
.svc-step-card{background:var(--ns-surface);padding:18px;display:flex;flex-direction:column;text-decoration:none;transition:background var(--ns-ease)}
.svc-step-card:hover{background:var(--ns-surface-2)}
.svc-step-n{font-family:var(--ns-font-display);font-size:var(--ns-text-size-xs);font-weight:800;color:var(--ns-accent-studio);opacity:.7;margin-bottom:6px;letter-spacing:.1em;text-transform:uppercase}
.svc-also{display:flex;flex-direction:column;gap:8px}
.svc-section-label{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ns-text-3);margin-bottom:10px;padding-top:28px;border-top:1px solid var(--ns-border);display:block}
.svc-section-label--first{border-top:none;padding-top:0}
.svc-journey{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ns-border-2);border-radius:var(--ns-radius);overflow:hidden;margin-bottom:var(--ns-sp-5)}
.svc-step{display:flex;flex-direction:column;text-decoration:none;background:var(--ns-bg);padding:var(--ns-sp-5) var(--ns-sp-4);transition:background var(--ns-ease)}
.svc-step:not(:last-child){border-right:1px solid var(--ns-border)}
.svc-step:hover{background:var(--ns-surface)}
.svc-step-icon{font-size:var(--ns-text-size-lg);color:var(--ns-accent-studio);opacity:.5;display:block;margin-bottom:10px}
.svc-step:hover .svc-step-icon{color:var(--ns-text-2)}
.svc-step-num{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ns-text-3);display:block;margin-bottom:var(--ns-sp-2)}
.svc-step-name{font-family:var(--ns-font-display);font-size:var(--ns-text-size-17);font-weight:800;color:var(--ns-text);line-height:1.1;margin-bottom:var(--ns-sp-3)}
.svc-step-desc{font-size:var(--ns-text-size-base);color:var(--ns-text-2);line-height:1.6;flex:1;margin-bottom:var(--ns-sp-5)}
.svc-step-foot{display:flex;align-items:center;justify-content:space-between;padding-top:var(--ns-sp-4);border-top:1px solid var(--ns-border);margin-top:auto}
.svc-step-price{font-family:var(--ns-font-display);font-size:var(--ns-text-size-xl);font-weight:800;color:var(--ns-text)}
.svc-step-add{background:none;color:var(--ns-text-3);border:1px solid var(--ns-border-2);font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;cursor:pointer;transition:all var(--ns-ease)}
.svc-step-add:hover{border-color:var(--ns-accent-studio);color:var(--ns-accent-studio)}
.svc-wide{display:flex;align-items:center;justify-content:space-between;gap:var(--ns-sp-6);background:var(--ns-bg);border:1px solid var(--ns-border-2);border-radius:var(--ns-radius);padding:var(--ns-sp-5);text-decoration:none;transition:background var(--ns-ease);margin-bottom:var(--ns-sp-3)}
.svc-wide:last-child{margin-bottom:0}
.svc-wide:hover{background:var(--ns-surface)}
.svc-wide__left{display:flex;align-items:flex-start;gap:var(--ns-sp-4);flex:1;min-width:0}
.svc-wide__icon{font-size:var(--ns-text-size-2xl);color:var(--ns-text-3);flex-shrink:0;margin-top:3px;transition:color var(--ns-ease)}
.svc-wide:hover .svc-wide__icon{color:var(--ns-text-2)}
.svc-wide__text{flex:1;min-width:0}
.svc-wide__tag{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ns-text-3);display:block;margin-bottom:var(--ns-sp-2)}
.svc-wide__name{font-family:var(--ns-font-display);font-size:var(--ns-text-size-xl-lg);font-weight:800;color:var(--ns-text);margin-bottom:var(--ns-sp-2)}
.svc-wide__desc{font-size:var(--ns-text-size-base);color:var(--ns-text-2);line-height:1.6}
.svc-wide__aside{display:flex;flex-direction:column;align-items:flex-end;gap:var(--ns-sp-3);flex-shrink:0}
.svc-wide__price{font-family:var(--ns-font-display);font-size:var(--ns-text-size-xl-lg);font-weight:800;color:var(--ns-text)}
.svc-wide__btn{background:var(--ns-accent);color:var(--ns-accent-on);border:none;font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:9px 16px;cursor:pointer;transition:opacity var(--ns-ease);white-space:nowrap}
.svc-wide__btn:hover{opacity:.85}
.svc-wide__cta{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ns-text-3);display:flex;align-items:center;gap:6px;transition:color var(--ns-ease)}
.svc-wide:hover .svc-wide__cta{color:var(--ns-text-2)}



.sp-logo-strip{width:300px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,black 12%,black 88%,transparent);mask-image:linear-gradient(90deg,transparent,black 12%,black 88%,transparent);flex-shrink:0}
.sp-logo-track{display:flex;align-items:center;gap:36px;width:max-content;animation:sp-logos 25s linear infinite}
.sp-logo-img{height:52px;width:auto;opacity:.45;filter:brightness(0) invert(1);flex-shrink:0}
@keyframes sp-logos{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── Contact page ─────────────────────────────────────────────────────── */
.ct-head{padding:28px var(--ns-page-x) 16px;border-bottom:1px solid var(--ns-border)}
.ct-title{font-family:var(--ns-font-display);font-size:var(--ns-text-size-3xl);font-weight:800;color:var(--ns-text);letter-spacing:.04em;text-transform:uppercase;line-height:1;margin-bottom:var(--ns-sp-3)}
.ct-subtitle{font-size:var(--ns-text-size-md);color:var(--ns-text-2);line-height:1.6}
.ct-body{padding:var(--ns-sp-6) var(--ns-page-x) 60px;display:grid;grid-template-columns:1fr 280px;gap:var(--ns-sp-10);align-items:start}
.ct-label{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ns-text-3);display:block;margin-bottom:var(--ns-sp-2)}
.ct-input,.ct-select,.ct-textarea{width:100%;background:var(--ns-surface);border:1px solid var(--ns-border);color:var(--ns-text);font-family:var(--ns-font-body);font-size:var(--ns-text-size-md);padding:10px 12px;outline:none;transition:border-color var(--ns-ease);margin-bottom:var(--ns-sp-4)}
.ct-input:focus,.ct-select:focus,.ct-textarea:focus{border-color:var(--ns-border-2)}
.ct-input::placeholder,.ct-textarea::placeholder{color:var(--ns-text-3)}
.ct-select{appearance:none;-webkit-appearance:none;cursor:pointer}
.ct-textarea{resize:vertical;min-height:140px;font-family:var(--ns-font-body);line-height:1.6}
.ct-submit{background:var(--ns-accent);color:var(--ns-accent-on);border:none;font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:12px 24px;cursor:pointer;transition:opacity var(--ns-ease)}
.ct-submit:hover{opacity:.85}
.ct-submit:disabled{opacity:.45;cursor:default}
.ct-msg{font-size:var(--ns-text-size-base);margin-top:var(--ns-sp-4);line-height:1.5}
.ct-msg--ok{color:var(--ns-accent-studio)}.ct-msg--err{color:var(--ns-error)}
.ct-aside-label{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ns-text-3);margin-bottom:var(--ns-sp-4);display:block}
.ct-socials{display:flex;flex-direction:row;gap:var(--ns-sp-4);margin-bottom:var(--ns-sp-6)}
.ct-social{display:flex;align-items:center;text-decoration:none;color:var(--ns-text-3);transition:color var(--ns-ease)}
.ct-social:hover{color:var(--ns-text-2)}
.ct-social i{font-size:var(--ns-text-size-24)}
.ct-email{display:flex;align-items:center;gap:var(--ns-sp-3);color:var(--ns-text-2);font-size:var(--ns-text-size-base);text-decoration:none;transition:color var(--ns-ease)}
.ct-email:hover{color:var(--ns-text)}
.ct-email i{font-size:var(--ns-text-size-xl);color:var(--ns-text-3)}


/* ── Doc pages (privacy, terms) ───────────────────────────────────────── */
.doc-head{padding:28px var(--ns-page-x) 16px;border-bottom:1px solid var(--ns-border)}
.doc-title{font-family:var(--ns-font-display);font-size:var(--ns-text-size-3xl);font-weight:800;color:var(--ns-text);letter-spacing:.04em;text-transform:uppercase;line-height:1;margin-bottom:var(--ns-sp-2)}
.doc-date{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ns-text-3)}
.doc-body{padding:var(--ns-sp-6) var(--ns-page-x) 60px;max-width:720px}
.doc-intro{font-size:var(--ns-text-size-md);color:var(--ns-text-2);line-height:1.7;margin-bottom:var(--ns-sp-8)}
.doc-section{margin-bottom:var(--ns-sp-8)}
.doc-h2{font-family:var(--ns-font-display);font-size:var(--ns-text-size-base);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ns-text);margin-bottom:var(--ns-sp-3);padding-bottom:var(--ns-sp-2);border-bottom:1px solid var(--ns-border)}
.doc-p{font-size:var(--ns-text-size-md);color:var(--ns-text-2);line-height:1.75;margin-bottom:var(--ns-sp-3)}
.doc-p:last-child{margin-bottom:0}
.doc-ul{list-style:none;padding:0;margin-bottom:var(--ns-sp-3)}
.doc-ul li{font-size:var(--ns-text-size-md);color:var(--ns-text-2);line-height:1.75;padding-left:var(--ns-sp-4);position:relative}
.doc-ul li::before{content:'—';position:absolute;left:0;color:var(--ns-text-3)}
.doc-strong{color:var(--ns-text);font-weight:600}


/* ── Account page ─────────────────────────────────────────────────────── */
.acc-head{padding:28px var(--ns-page-x) 16px;border-bottom:1px solid var(--ns-border)}
.acc-title{font-family:var(--ns-font-display);font-size:var(--ns-text-size-3xl);font-weight:800;color:var(--ns-text);letter-spacing:.04em;text-transform:uppercase;line-height:1;margin-bottom:var(--ns-sp-2)}
.acc-email{font-size:var(--ns-text-size-md);color:var(--ns-text-2)}
.acc-body{padding:var(--ns-sp-6) var(--ns-page-x) 60px}
.acc-section-label{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ns-text-3);margin-bottom:var(--ns-sp-4);display:block}
.acc-sub{border:1px solid var(--ns-border-2);border-radius:var(--ns-radius);background:var(--ns-bg);padding:var(--ns-sp-4) var(--ns-sp-5);display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--ns-sp-3)}
.acc-sub-name{font-family:var(--ns-font-display);font-size:var(--ns-text-size-md-lg);font-weight:800;color:var(--ns-text);margin-bottom:var(--ns-sp-1)}
.acc-sub-detail{font-size:var(--ns-text-size-base-sm);color:var(--ns-text-3)}
.acc-sub-badge{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border:1px solid}
.acc-sub-badge--active{color:var(--ns-accent-studio);border-color:var(--ns-accent-studio-border)}
.acc-sub-badge--canceled,.acc-sub-badge--cancelled{color:var(--ns-text-3);border-color:var(--ns-border)}
.acc-order{border:1px solid var(--ns-border);border-radius:var(--ns-radius);overflow:hidden;margin-bottom:var(--ns-sp-4)}
.acc-order-head{display:flex;align-items:center;justify-content:space-between;padding:var(--ns-sp-3) var(--ns-sp-4);border-bottom:1px solid var(--ns-border);background:var(--ns-bg-elevated)}
.acc-order-meta{display:flex;align-items:baseline;gap:var(--ns-sp-3)}
.acc-order-num{font-family:var(--ns-font-display);font-size:var(--ns-text-size-sm);font-weight:700;letter-spacing:.1em;color:var(--ns-text)}
.acc-order-date{font-size:var(--ns-text-size-sm);color:var(--ns-text-3)}
.acc-order-total{font-family:var(--ns-font-display);font-size:var(--ns-text-size-md-lg);font-weight:800;color:var(--ns-text)}
.acc-item{display:flex;align-items:center;gap:var(--ns-sp-4);padding:var(--ns-sp-4);border-bottom:1px solid var(--ns-border)}
.acc-item:last-child{border-bottom:none}
.acc-item-thumb{width:44px;height:44px;flex-shrink:0;overflow:hidden;position:relative}
.acc-item-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.acc-item-info{flex:1;min-width:0}
.acc-item-name{font-family:var(--ns-font-display);font-size:var(--ns-text-size-base);font-weight:700;color:var(--ns-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.acc-item-type{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ns-text-3)}
.acc-item-price{font-family:var(--ns-font-display);font-size:var(--ns-text-size-base);font-weight:700;color:var(--ns-text);flex-shrink:0}
.acc-download-btn{background:var(--ns-accent);color:var(--ns-accent-on);border:none;font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;cursor:pointer;display:flex;align-items:center;gap:6px;flex-shrink:0;transition:opacity var(--ns-ease)}
.acc-download-btn:hover{opacity:.85}
.acc-download-btn:disabled{opacity:.45;cursor:default}
.acc-download-btn i{font-size:var(--ns-text-size-base)}
.acc-empty{padding:60px var(--ns-page-x);text-align:center}
.acc-empty-msg{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ns-text-3);margin-bottom:var(--ns-sp-5)}
.acc-empty-link{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ns-text-2);text-decoration:none;border-bottom:1px solid var(--ns-border);padding-bottom:2px;transition:color var(--ns-ease)}
.acc-empty-link:hover{color:var(--ns-text)}
.acc-error{padding:var(--ns-sp-6) var(--ns-page-x);font-size:var(--ns-text-size-base);color:var(--ns-error)}

/* ── Releases page ────────────────────────────────────────────────────── */
.rl-head{padding:28px var(--ns-page-x) 16px;border-bottom:1px solid var(--ns-border)}
.rl-title{font-family:var(--ns-font-display);font-size:var(--ns-text-size-3xl);font-weight:800;color:var(--ns-text);letter-spacing:.04em;text-transform:uppercase;line-height:1;margin-bottom:var(--ns-sp-2)}
.rl-label{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ns-text-3)}
.rl-body{padding:var(--ns-sp-6) var(--ns-page-x) 60px}
.rl-section-label{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ns-text-3);margin-bottom:var(--ns-sp-4);display:block}
.rl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ns-bg);margin-bottom:var(--ns-sp-8)}
.rl-card{background:var(--ns-bg);text-decoration:none;display:block;transition:background var(--ns-ease);min-width:0}
.rl-card:hover{background:var(--ns-surface)}
.rl-card-art{aspect-ratio:1;overflow:hidden;position:relative;background:var(--ns-bg-elevated)}
.rl-card-art img{width:100%;height:100%;object-fit:cover;display:block}
.rl-card-info{padding:10px 12px 13px}
.rl-card-artist{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ns-text-3);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-card-name{font-family:var(--ns-font-display);font-size:var(--ns-text-size-md);font-weight:800;color:var(--ns-text);line-height:1.2;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-card-foot{display:flex;align-items:center;justify-content:space-between}
.rl-card-price{font-family:var(--ns-font-display);font-size:var(--ns-text-size-base);font-weight:800;color:var(--ns-text)}
.rl-card-buy{background:var(--ns-accent);color:var(--ns-accent-on);border:none;font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;cursor:pointer;opacity:.45;transition:opacity var(--ns-ease)}
.rl-card:hover .rl-card-buy{opacity:1}
.rl-card-stream{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ns-text-3);transition:color var(--ns-ease)}
.rl-card:hover .rl-card-stream{color:var(--ns-text-2)}
.rl-card-type{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ns-text-3)}
.rl-platforms{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ns-bg)}
.rl-platform{background:var(--ns-bg);border:1px solid var(--ns-border);padding:var(--ns-sp-5);text-decoration:none;display:flex;flex-direction:column;gap:var(--ns-sp-2);transition:background var(--ns-ease)}
.rl-platform:hover{background:var(--ns-surface)}
.rl-platform-name{font-family:var(--ns-font-display);font-size:var(--ns-text-size-base-sm);font-weight:800;color:var(--ns-text);letter-spacing:.04em}
.rl-platform-desc{font-size:var(--ns-text-size-base);color:var(--ns-text-2);line-height:1.5;flex:1}
.rl-platform-cta{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ns-text-3);transition:color var(--ns-ease)}
.rl-platform:hover .rl-platform-cta{color:var(--ns-text-2)}


/* ── Submit page ──────────────────────────────────────────────────────── */
.sub-body{padding:32px var(--ns-page-x) 60px;max-width:520px}
.sub-form{display:flex;flex-direction:column;gap:20px}
.sub-field{display:flex;flex-direction:column;gap:6px}
.sub-label{font-family:var(--ns-font-display);font-size:var(--ns-text-size-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ns-text-2)}
.sub-optional{color:var(--ns-text-3);font-weight:400;text-transform:none;letter-spacing:0}
.sub-input{background:var(--ns-surface);border:1px solid var(--ns-border-2);color:var(--ns-text);padding:10px 12px;font-family:var(--ns-font-display);font-size:var(--ns-text-size-base-sm);outline:none;transition:border-color var(--ns-ease);width:100%}
.sub-input:focus{border-color:var(--ns-border-2)}
.sub-textarea{resize:vertical;min-height:100px;line-height:1.5}
.sub-select-wrap{position:relative}
.sub-select-wrap i{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:var(--ns-text-size-base);color:var(--ns-text-3);pointer-events:none}
.sub-select{width:100%;appearance:none;-webkit-appearance:none;background:var(--ns-surface);border:1px solid var(--ns-border-2);color:var(--ns-text);padding:10px 32px 10px 12px;font-family:var(--ns-font-display);font-size:var(--ns-text-size-base-sm);cursor:pointer;outline:none;transition:border-color var(--ns-ease)}
.sub-select:focus{border-color:var(--ns-border-2)}
.sub-error{font-size:var(--ns-text-size-sm);color:#e25555;padding:8px 12px;border:1px solid rgba(226,85,85,.3);background:rgba(226,85,85,.06)}
.sub-submit{display:inline-flex;align-items:center;gap:8px;background:var(--ns-accent-studio);color:var(--ns-accent-on);border:none;font-family:var(--ns-font-display);font-size:var(--ns-text-size-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:12px 20px;cursor:pointer;transition:opacity var(--ns-ease);align-self:flex-start;margin-top:4px}
.sub-submit:hover{opacity:.85}
.sub-submit:disabled{opacity:.5;cursor:not-allowed}
.sub-success{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:32px 0}
.sub-success i{font-size:var(--ns-text-size-3xl);color:var(--ns-accent-studio)}
.sub-success-title{font-family:var(--ns-font-display);font-size:var(--ns-text-size-lg);font-weight:700;color:var(--ns-text)}
.sub-success-msg{font-size:var(--ns-text-size-base);color:var(--ns-text-3)}

/* ── Policy pages ─────────────────────────────────────────────────────── */
.pol-body{padding:32px var(--ns-page-x) 60px;max-width:680px}
.pol-intro{font-size:var(--ns-text-size-base);color:var(--ns-text-2);line-height:1.8;margin-bottom:32px}
.pol-h2{font-family:var(--ns-font-display);font-size:var(--ns-text-size-base-sm);font-weight:700;color:var(--ns-text);letter-spacing:.08em;text-transform:uppercase;margin:32px 0 10px;padding-top:24px;border-top:1px solid var(--ns-border)}
.pol-h3{font-family:var(--ns-font-display);font-size:var(--ns-text-size-xs);font-weight:700;color:var(--ns-text-2);letter-spacing:.06em;text-transform:uppercase;margin:20px 0 8px}
.pol-body p{font-size:var(--ns-text-size-base);color:var(--ns-text-2);line-height:1.8;margin-bottom:12px}
.pol-list{font-size:var(--ns-text-size-base);color:var(--ns-text-2);line-height:1.8;margin:0 0 12px 20px;display:flex;flex-direction:column;gap:4px}
.pol-link{color:var(--ns-accent-studio);text-decoration:none}
.pol-link:hover{text-decoration:underline}

/* ── Studio subscribe page ────────────────────────────────────────────── */
.stu-sub-body{padding:32px var(--ns-page-x) 60px;max-width:520px}
.stu-sub-intro{margin-bottom:32px}
.stu-sub-intro-text{font-size:var(--ns-text-size-base);color:var(--ns-text-2);line-height:1.8}
.stu-sub-plan{background:var(--ns-surface);border:1px solid var(--ns-border);border-radius:var(--ns-radius);padding:24px}
.stu-sub-plan-price{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
.stu-sub-plan-amount{font-family:var(--ns-font-display);font-size:var(--ns-text-size-display);font-weight:800;color:var(--ns-text)}
.stu-sub-plan-period{font-family:var(--ns-font-display);font-size:var(--ns-text-size-base-sm);color:var(--ns-text-3)}
.stu-sub-plan-note{font-size:var(--ns-text-size-sm);color:var(--ns-text-3);margin-bottom:20px}
.stu-sub-features{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--ns-border);padding-top:20px}
.stu-sub-feature{display:flex;align-items:flex-start;gap:10px;font-size:var(--ns-text-size-base-sm);color:var(--ns-text-2);line-height:1.5}
.stu-sub-feature i{font-size:var(--ns-text-size-md);color:var(--ns-accent-studio);flex-shrink:0;margin-top:1px}
.stu-sub-btn{display:inline-flex;align-items:center;gap:8px;background:var(--ns-accent-studio);color:var(--ns-accent-on);border:none;font-family:var(--ns-font-display);font-size:var(--ns-text-size-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:13px 22px;cursor:pointer;transition:opacity var(--ns-ease);width:100%;justify-content:center;margin-bottom:12px}
.stu-sub-btn:hover{opacity:.85}
.stu-sub-btn:disabled{opacity:.5;cursor:not-allowed}
.stu-sub-terms{font-size:var(--ns-text-size-sm);color:var(--ns-text-3);text-align:center;line-height:1.6}

/* ── Studio welcome modal ─────────────────────────────────────────────── */
.stu-welcome-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px}
.stu-welcome-modal{background:var(--ns-bg-raised);border:1px solid var(--ns-border);border-radius:var(--ns-radius);width:100%;max-width:460px;overflow:hidden}
.stu-welcome-topline{height:2px;background:var(--ns-accent-studio);width:100%}
.stu-welcome-inner{padding:24px;position:relative}
.stu-welcome-close{position:absolute;top:14px;right:14px;background:none;border:none;cursor:pointer;color:var(--ns-text-3);font-size:var(--ns-text-size-xl);line-height:1;transition:color var(--ns-ease)}
.stu-welcome-close:hover{color:var(--ns-text)}
.stu-welcome-eyebrow{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ns-accent-studio);margin-bottom:6px}
.stu-welcome-title{font-family:var(--ns-font-display);font-size:var(--ns-text-size-2xl);font-weight:800;color:var(--ns-text);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.stu-welcome-sub{font-size:var(--ns-text-size-base-sm);color:var(--ns-text-3);margin-bottom:16px;line-height:1.6}
.stu-welcome-thumb{width:100%;aspect-ratio:16/9;background:var(--ns-bg);border-radius:var(--ns-radius-tag);position:relative;overflow:hidden;cursor:pointer;margin-bottom:16px;border:1px solid var(--ns-border)}
.stu-welcome-thumb-label{position:absolute;top:8px;left:8px;font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--ns-accent-studio-fade);color:var(--ns-accent-studio);border:1px solid var(--ns-accent-studio-border);padding:2px 7px;z-index:1}
.stu-welcome-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--ns-accent-studio);display:flex;align-items:center;justify-content:center}
.stu-welcome-play i{font-size:var(--ns-text-size-lg);color:var(--ns-accent-on);margin-left:2px}
.stu-welcome-footer{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--ns-border)}
.stu-welcome-skip{background:none;border:none;font-family:var(--ns-font-display);font-size:var(--ns-text-size-xs);color:var(--ns-text-3);cursor:pointer;letter-spacing:.06em;transition:color var(--ns-ease)}
.stu-welcome-skip:hover{color:var(--ns-text)}
.stu-welcome-btn{display:inline-flex;align-items:center;gap:6px;background:var(--ns-accent-studio);color:var(--ns-accent-on);border:none;font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:10px 18px;cursor:pointer;transition:opacity var(--ns-ease)}
.stu-welcome-btn:hover{opacity:.85}
.stu-welcome-btn i{font-size:var(--ns-text-size-sm)}

/* ── Studio subscribe ─────────────────────────────────────────────────── */
.stu-sub-layout{display:grid;grid-template-columns:1fr 340px;gap:48px;padding:32px var(--ns-page-x) 60px;align-items:start;max-width:900px}
.stu-sub-intro-text{font-size:var(--ns-text-size-base);color:var(--ns-text-2);line-height:1.9;margin-bottom:32px}
.stu-sub-points{display:flex;flex-direction:column;gap:24px}
.stu-sub-point{display:flex;align-items:flex-start;gap:14px}
.stu-sub-point>i{font-size:var(--ns-text-size-xl);color:var(--ns-accent-studio);flex-shrink:0;margin-top:2px}
.stu-sub-point-title{font-family:var(--ns-font-display);font-size:var(--ns-text-size-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ns-text);margin-bottom:4px}
.stu-sub-point-text{font-size:var(--ns-text-size-base-sm);color:var(--ns-text-3);line-height:1.7}
.stu-sub-card{background:var(--ns-bg-raised);border:1px solid var(--ns-border);border-radius:var(--ns-radius);overflow:hidden}
.stu-sub-card-top{padding:20px 20px 0;border-bottom:1px solid var(--ns-border);margin-bottom:20px;padding-bottom:20px}
.stu-sub-eyebrow{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ns-accent-studio);margin-bottom:10px}
.stu-sub-price-row{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
.stu-sub-amount{font-family:var(--ns-font-display);font-size:var(--ns-text-size-36);font-weight:800;color:var(--ns-text)}
.stu-sub-period{font-family:var(--ns-font-display);font-size:var(--ns-text-size-base-sm);color:var(--ns-text-3)}
.stu-sub-billing{font-size:var(--ns-text-size-sm);color:var(--ns-text-3);margin-top:4px}
.stu-sub-features{list-style:none;padding:0 20px;margin:0 0 20px;display:flex;flex-direction:column;gap:11px}
.stu-sub-feature{display:flex;align-items:flex-start;gap:10px;font-size:var(--ns-text-size-base-sm);color:var(--ns-text-2);line-height:1.5}
.stu-sub-feature i{font-size:var(--ns-text-size-md);color:var(--ns-accent-studio);flex-shrink:0;margin-top:1px}
.stu-sub-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 40px);margin:0 20px 12px;background:var(--ns-accent-studio);color:var(--ns-accent-on);border:none;font-family:var(--ns-font-display);font-size:var(--ns-text-size-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:14px;cursor:pointer;transition:opacity var(--ns-ease)}
.stu-sub-btn:hover{opacity:.85}
.stu-sub-btn:disabled{opacity:.5;cursor:not-allowed}
.stu-sub-terms{font-size:var(--ns-text-size-sm);color:var(--ns-text-3);text-align:center;line-height:1.6;padding:0 20px 20px}


  .slp-tut-grid{grid-template-columns:repeat(2,1fr)}
  .slp-ben-grid{grid-template-columns:1fr}
  .slp-section-head{flex-direction:column}
}

  .slp-feat{border-right:none;border-bottom:1px solid var(--ns-border)}
  .slp-feat:last-child{border-bottom:none}
  .slp-ben-grid{grid-template-columns:1fr 1fr}
}

/* ── Studio subscribe landing page ───────────────────────────────────── */










.slp-genres{border-bottom:1px solid var(--ns-border);height:52px;overflow:hidden}
.slp-genres-mask{overflow:hidden;padding:18px 0;-webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent)}
.slp-genres-track{display:flex;align-items:center;gap:40px;width:max-content;animation:slp-scroll 18s linear infinite}
.slp-genre{font-family:var(--ns-font-display);font-size:var(--ns-text-size-base);font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:rgba(255,255,255,.25);white-space:nowrap}
@keyframes slp-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.slp-feats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ns-border);border-bottom:1px solid var(--ns-border)}
.slp-feat{padding:14px var(--ns-page-x);border-right:1px solid var(--ns-border);display:flex;gap:12px;align-items:flex-start}
.slp-feat:last-child{border-right:none}
.slp-feat>i{font-size:var(--ns-text-size-lg);color:var(--ns-accent-studio);flex-shrink:0;margin-top:2px}
.slp-feat-title{font-family:var(--ns-font-display);font-size:var(--ns-text-size-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ns-text);margin-bottom:4px}
.slp-feat-body{font-size:var(--ns-text-size-sm);color:var(--ns-text-3);line-height:1.6}

.slp-logo-sec{padding:22px var(--ns-page-x) 0;border-bottom:1px solid var(--ns-border)}
.slp-sec-lbl{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ns-accent-studio);margin-bottom:5px}
.slp-sec-title{font-family:var(--ns-font-display);font-size:var(--ns-text-size-lg);font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ns-text);margin-bottom:0}
.slp-logo-mask{overflow:hidden;padding:18px 0;-webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent)}
.slp-logo-track{display:flex;align-items:center;gap:12px;width:max-content;animation:slp-logos 26s linear infinite}
.slp-logo-img{height:48px;width:auto;max-width:80px;object-fit:contain;filter:brightness(0) invert(1);opacity:.4;flex-shrink:0}
@keyframes slp-logos{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.slp-section{padding:22px var(--ns-page-x);border-bottom:1px solid var(--ns-border)}
.slp-inside-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.slp-count-pill{display:flex;align-items:center;gap:7px;background:var(--ns-accent-studio-fade);border:1px solid var(--ns-accent-studio-border);padding:7px 12px;flex-shrink:0}
.slp-count-dot{width:5px;height:5px;border-radius:50%;background:var(--ns-accent-studio);animation:slp-pulse 2s ease-in-out infinite}
.slp-count-n{font-family:var(--ns-font-display);font-size:var(--ns-text-size-lg);font-weight:800;color:var(--ns-accent-studio)}
.slp-count-lbl{font-size:var(--ns-text-size-xs);color:var(--ns-text-3)}
@keyframes slp-pulse{0%,100%{opacity:1}50%{opacity:.3}}

.slp-tut-scroll-wrap{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,black 85%,transparent);mask-image:linear-gradient(90deg,black 85%,transparent)}
.slp-tut-scroll-wrap::-webkit-scrollbar{display:none}
.slp-tut-scroll{display:flex;gap:8px;padding-bottom:2px}

.slp-ben-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:14px}
.slp-ben{background:var(--ns-bg-raised);border:1px solid var(--ns-border);padding:12px;display:flex;flex-direction:column;gap:6px}
.slp-ben>i{font-size:var(--ns-text-size-md);color:var(--ns-accent-studio)}
.slp-ben-title{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ns-text)}
.slp-ben-body{font-size:var(--ns-text-size-xs);color:var(--ns-text-3);line-height:1.5}

.slp-player{background:var(--ns-bg-raised);border:1px solid var(--ns-border);margin-top:14px}
.slp-player-now{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--ns-border)}
.slp-player-art{width:42px;height:42px;background:var(--ns-surface);flex-shrink:0;overflow:hidden}
.slp-player-art img{width:100%;height:100%;object-fit:cover;display:block}
.slp-player-info{flex:1;min-width:0}
.slp-player-title{font-family:var(--ns-font-display);font-size:var(--ns-text-size-sm);font-weight:700;color:var(--ns-text);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slp-player-artist{font-size:var(--ns-text-size-xs);color:var(--ns-text-3)}
.slp-player-btn{width:36px;height:36px;border-radius:50%;background:var(--ns-accent-studio);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:opacity var(--ns-ease)}
.slp-player-btn:hover{opacity:.85}
.slp-player-btn i{font-size:var(--ns-text-size-md);color:var(--ns-accent-on);margin-left:1px}
.slp-player-prog{padding:10px 12px 6px}
.slp-player-bar{height:2px;background:var(--ns-border);cursor:pointer;margin-bottom:5px;position:relative}
.slp-player-fill{height:100%;width:0%;background:var(--ns-accent-studio);transition:width .1s linear}
.slp-player-times{display:flex;justify-content:space-between;font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);color:var(--ns-text-3)}
.slp-player-list{border-top:1px solid var(--ns-border);max-height:260px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--ns-border) transparent}
.slp-player-list::-webkit-scrollbar{width:3px}
.slp-player-list::-webkit-scrollbar-thumb{background:var(--ns-border)}
.slp-player-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--ns-border);cursor:pointer;transition:background var(--ns-ease)}
.slp-player-row:hover{background:var(--ns-surface)}
.slp-player-row.slp-active{background:var(--ns-accent-studio-fade)}
.slp-player-row-art{width:30px;height:30px;background:var(--ns-surface);flex-shrink:0;overflow:hidden}
.slp-player-row-art img{width:100%;height:100%;object-fit:cover;display:block}
.slp-player-row-title{font-family:var(--ns-font-display);font-size:var(--ns-text-size-xs);font-weight:700;color:var(--ns-text-2);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slp-player-row.slp-active .slp-player-row-title{color:var(--ns-text)}
.slp-player-row-genre{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ns-text-3);flex-shrink:0}
.slp-player-row.slp-active .slp-player-row-genre{color:var(--ns-accent-studio)}

.slp-artist-wall{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px}
.slp-artist{font-size:var(--ns-text-size-base-sm);color:var(--ns-text-3);transition:color .4s;cursor:default}
.slp-artist.slp-artist--big{font-size:var(--ns-text-size-md-lg)}
.slp-artist.slp-artist--bright{color:var(--ns-text)}

.slp-bottom-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px var(--ns-page-x);background:var(--ns-surface-bar);border-top:1px solid var(--ns-border)}
.slp-bottom-cta-title{font-family:var(--ns-font-display);font-size:var(--ns-text-size-md);font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ns-text);margin-bottom:4px}
.slp-bottom-cta-note{font-size:var(--ns-text-size-sm);color:var(--ns-text-3)}



.slp-topbar{background:var(--ns-surface-bar);border-bottom:1px solid var(--ns-border);padding:12px var(--ns-page-x);display:flex;flex-direction:row;align-items:center}
.slp-topbar-price{display:flex;align-items:center;gap:8px;flex:1}
.slp-topbar-price strong{font-family:var(--ns-font-display);font-size:var(--ns-text-size-24);font-weight:800;color:var(--ns-text)}
.slp-topbar-price span{font-family:var(--ns-font-display);font-size:var(--ns-text-size-sm);color:var(--ns-text-3)}
.slp-topbar-btn{flex-shrink:0;display:flex;align-items:center;gap:7px;background:var(--ns-accent-studio);color:var(--ns-accent-on);border:none;font-family:var(--ns-font-display);font-size:var(--ns-text-size-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:11px 20px;cursor:pointer;transition:opacity var(--ns-ease)}
.slp-topbar-btn:hover{opacity:.85}
.slp-topbar-btn:disabled{opacity:.5;cursor:not-allowed}

.slp-bio{padding:24px var(--ns-page-x);border-bottom:1px solid var(--ns-border)}
.slp-bio-from{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ns-accent-studio);margin-bottom:12px}
.slp-bio-text{font-size:var(--ns-text-size-base);color:var(--ns-text-2);line-height:1.85;max-width:700px}
.slp-bio-text+.slp-bio-text{margin-top:10px}

/* ── Gate landing (gl-*) ─────────────────────────────────────────────── */
.gl-header-actions{display:flex;gap:8px;align-items:center}
.gl-cta-link{display:inline-flex;align-items:center;gap:var(--ns-sp-2);background:var(--ns-accent-gate-fade);border:1px solid var(--ns-accent-gate-border);padding:var(--ns-sp-2) var(--ns-sp-4);text-decoration:none;transition:all var(--ns-ease)}
.gl-cta-link span{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ns-accent-gate)}
.gl-cta-link i{font-size:var(--ns-text-size-sm);color:var(--ns-accent-gate)}
.gl-cta-link:hover{background:var(--ns-accent-gate-border)}
.gl-cta-link--ghost{background:none;border-color:var(--ns-border)}
.gl-cta-link--ghost span,.gl-cta-link--ghost i{color:var(--ns-text-3)}
.gl-cta-link--ghost:hover{border-color:var(--ns-border-2);background:var(--ns-surface)}

.gl-body{padding:24px var(--ns-page-x) 60px}

.gl-hero{margin-bottom:0;padding-bottom:28px}
.gl-hero-title{font-family:var(--ns-font-display);font-size:var(--ns-text-size-xl);font-weight:700;color:var(--ns-text);margin:0 0 10px;letter-spacing:.02em}
.gl-hero-lede{font-size:var(--ns-text-size-base);color:var(--ns-text-2);line-height:1.7;margin:0 0 8px;max-width:600px}
.gl-hero-stamp{font-size:var(--ns-text-size-sm);color:var(--ns-text-3);margin:0}

.gl-section-label{display:block;font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ns-text-3);margin-bottom:10px;padding-top:28px;border-top:1px solid var(--ns-border)}
.gl-section-lede{font-size:var(--ns-text-size-base);color:var(--ns-text-2);line-height:1.7;margin:0 0 16px;max-width:600px}

/* Preview */
.gl-preview{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start;margin-bottom:32px}
.gl-mock{background:var(--ns-surface);border:1px solid var(--ns-border);border-radius:10px;padding:14px}
.gl-mock-bar{font-family:var(--ns-font-display);font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ns-text-3);text-align:center;margin-bottom:10px}
.gl-mock-art{width:90px;height:90px;margin:0 auto 10px;border-radius:8px;overflow:hidden}
.gl-mock-art svg{width:100%;height:100%;display:block}
.gl-mock-track{text-align:center;margin-bottom:12px}
.gl-mock-track-name{font-size:var(--ns-text-size-base-sm);font-weight:600;color:var(--ns-text)}
.gl-mock-track-artist{font-size:var(--ns-text-size-sm);color:var(--ns-text-3);margin-top:2px}
.gl-mock-steps{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.gl-mock-step{display:flex;align-items:center;gap:8px;padding:7px 9px;background:var(--ns-bg);border:1px solid var(--ns-border);border-radius:5px}
.gl-mock-step--done{border-color:var(--ns-accent-gate-border)}
.gl-mock-n{font-size:var(--ns-text-size-tag);font-weight:700;color:var(--ns-text-3);width:12px;flex-shrink:0}
.gl-mock-step-body{flex:1;min-width:0}
.gl-mock-prov{font-size:var(--ns-text-size-tiny);font-weight:700;letter-spacing:.08em;color:var(--ns-text-3)}
.gl-mock-action{font-size:var(--ns-text-size-sm);font-weight:500;color:var(--ns-text)}
.gl-mock-pill{font-size:var(--ns-text-size-tag);font-weight:600;padding:2px 6px;border-radius:3px;background:var(--ns-surface-2);color:var(--ns-text-2);border:1px solid var(--ns-border);white-space:nowrap}
.gl-mock-pill--done{background:var(--ns-accent-gate-fade);color:var(--ns-accent-gate);border-color:var(--ns-accent-gate-border)}
.gl-mock-foot{display:flex;justify-content:space-between;font-size:var(--ns-text-size-tag);color:var(--ns-text-3);padding-top:8px;border-top:1px solid var(--ns-border)}
.gl-mock-foot-accent{color:var(--ns-accent-gate)}
.gl-preview-heading{font-size:var(--ns-text-size-md);font-weight:700;color:var(--ns-text);margin:0 0 8px}
.gl-preview-copy p{font-size:var(--ns-text-size-base);color:var(--ns-text-2);line-height:1.7;margin:0 0 14px}
.gl-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.gl-list li{display:flex;align-items:center;gap:8px;font-size:var(--ns-text-size-base-sm);color:var(--ns-text-2)}
.gl-list i{color:var(--ns-accent-gate);font-size:var(--ns-text-size-base);flex-shrink:0}

/* Cards */
.gl-cards{display:grid;gap:1px;background:var(--ns-border);border-radius:6px;overflow:hidden;margin-bottom:32px}
.gl-cards--4{grid-template-columns:repeat(4,1fr)}
.gl-card{background:var(--ns-surface);padding:16px}
.gl-card-icon{font-size:var(--ns-text-size-lg);color:var(--ns-accent-gate);display:block;margin-bottom:8px}
.gl-card-mark{font-size:var(--ns-text-size-md);color:var(--ns-accent-gate);margin-bottom:8px}
.gl-card-name{font-size:var(--ns-text-size-base-sm);font-weight:700;color:var(--ns-text);margin-bottom:5px}
.gl-card-text{font-size:var(--ns-text-size-sm);color:var(--ns-text-3);line-height:1.6;margin:0}

/* Moments */
.gl-moments{display:flex;flex-direction:column;gap:1px;background:var(--ns-border);border-radius:6px;overflow:hidden;margin-bottom:10px}
.gl-moment{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;background:var(--ns-surface);font-size:var(--ns-text-size-base);color:var(--ns-text-2);line-height:1.5}
.gl-moment strong{color:var(--ns-text)}
.gl-moment-glyph{flex-shrink:0;width:20px;text-align:center}
.gl-moments-note{font-size:var(--ns-text-size-sm);color:var(--ns-text-3);margin-bottom:32px}

/* How it works */
.gl-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ns-border);border-radius:6px;overflow:hidden;margin-bottom:32px}
.gl-step{background:var(--ns-surface);padding:18px}
.gl-step-n{font-family:var(--ns-font-display);font-size:var(--ns-text-size-2xl);font-weight:800;color:var(--ns-accent-gate);opacity:.6;margin-bottom:8px;letter-spacing:.04em}
.gl-step-name{font-size:var(--ns-text-size-base-sm);font-weight:700;color:var(--ns-text);margin-bottom:6px}
.gl-step-text{font-size:var(--ns-text-size-sm);color:var(--ns-text-3);line-height:1.6;margin:0}

/* Dashboard */
.gl-dash{background:var(--ns-surface);border:1px solid var(--ns-border);border-radius:6px;padding:16px;margin-bottom:32px}
.gl-dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ns-border);border-radius:4px;overflow:hidden;margin-bottom:16px}
.gl-stat{background:var(--ns-bg);padding:12px 14px}
.gl-stat-label{font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ns-text-3);margin-bottom:4px}
.gl-stat-value{font-size:var(--ns-text-size-xl);font-weight:700;color:var(--ns-text);margin-bottom:3px}
.gl-stat-delta{font-size:var(--ns-text-size-xs);color:var(--ns-accent-gate)}
.gl-dash-chart{margin-bottom:12px}
.gl-dash-chart svg{width:100%;height:90px;display:block}
.gl-legend{display:flex;gap:12px;margin-top:6px}
.gl-legend span{display:flex;align-items:center;gap:5px;font-size:var(--ns-text-size-xs);color:var(--ns-text-3)}
.gl-legend-views,.gl-legend-dl{width:16px;height:2px;border-radius:1px;display:inline-block}
.gl-legend-views{background:var(--ns-accent-gate)}
.gl-legend-dl{background:var(--ns-border-2)}
.gl-dash-lower{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ns-border);border-radius:4px;overflow:hidden;margin-bottom:12px}
.gl-dash-block{background:var(--ns-bg);padding:12px 14px}
.gl-dash-block-label{font-size:var(--ns-text-size-tag);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ns-text-3);margin-bottom:8px}
.gl-geo-row{display:grid;grid-template-columns:18px 1fr 28px 50px;gap:6px;align-items:center;margin-bottom:6px;font-size:var(--ns-text-size-sm)}
.gl-geo-name{color:var(--ns-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-geo-row span:nth-child(3){color:var(--ns-text);font-weight:600;text-align:right}
.gl-bar{height:3px;background:var(--ns-border);border-radius:2px;overflow:hidden}
.gl-bar div{height:100%;background:var(--ns-accent-gate);opacity:.6}
.gl-ref-row{display:flex;justify-content:space-between;font-size:var(--ns-text-size-sm);padding:4px 0;border-bottom:1px solid var(--ns-border)}
.gl-ref-row:last-child{border-bottom:none}
.gl-ref-row span:first-child{color:var(--ns-text-2)}
.gl-ref-row span:last-child{font-weight:600;color:var(--ns-text)}
.gl-step-row{display:grid;grid-template-columns:1fr 50px 26px;gap:6px;align-items:center;margin-bottom:6px;font-size:var(--ns-text-size-sm)}
.gl-step-row span:first-child{color:var(--ns-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-step-row span:last-child{font-weight:600;color:var(--ns-text);text-align:right}
.gl-dash-features{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding-top:12px;border-top:1px solid var(--ns-border)}
.gl-dash-feature{font-size:var(--ns-text-size-sm);color:var(--ns-text-3);line-height:1.5}
.gl-dash-feature span{color:var(--ns-accent-gate);margin-right:4px}

/* FAQ */
.gl-faq{display:flex;flex-direction:column;gap:1px;background:var(--ns-border);border-radius:6px;overflow:hidden;margin-bottom:32px}
.gl-faq-item{background:var(--ns-surface)}
.gl-faq-item[open]{background:var(--ns-surface)}
.gl-faq-item summary{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;font-size:var(--ns-text-size-base);font-weight:500;color:var(--ns-text);cursor:pointer;list-style:none;gap:16px}
.gl-faq-item summary::-webkit-details-marker{display:none}
.gl-faq-item summary span{font-size:var(--ns-text-size-md-lg);color:var(--ns-text-3);flex-shrink:0;transition:transform .2s}
.gl-faq-item[open] summary span{transform:rotate(45deg)}
.gl-faq-item p{padding:0 16px 13px;font-size:var(--ns-text-size-base-sm);color:var(--ns-text-3);line-height:1.7;margin:0}

/* CTA block */
.gl-cta-block{display:flex;align-items:center;justify-content:space-between;padding:20px;background:var(--ns-surface);border:1px solid var(--ns-accent-gate-border);border-radius:6px}
.gl-cta-price{font-size:var(--ns-text-size-xl);font-weight:700;color:var(--ns-text);margin-bottom:2px}
.gl-cta-note{font-size:var(--ns-text-size-sm);color:var(--ns-text-3)}

/* ── Gate dashboard ──────────────────────────────────────────────────── */
/* Gate-scoped accent aliases */
.gate-dash-page, #ns-dashboard {
  --ns-accent:        var(--ns-accent-gate);
  --ns-accent-subtle: var(--ns-accent-gate-fade);
  --ns-accent-border: var(--ns-accent-gate-border);
}

/* ---- Page shell ---- */
.gate-dash-page { background: var(--ns-bg); min-height: 100vh; }
.gate-dash-page #ns-dashboard { max-width: 960px; margin: 0 auto; padding: 0 24px 80px; }

/* ---- Skeleton ---- */
.ns-dash-skeleton { padding: 24px 0; }
.ns-dash-skeleton-topbar { height: 44px; background: var(--ns-surface); border-radius: 6px; margin-bottom: 16px; opacity: .4; }
.ns-dash-skeleton-tabs { height: 36px; background: var(--ns-surface); border-radius: 6px; margin-bottom: 24px; width: 240px; opacity: .3; }
.ns-dash-skeleton-card { height: 80px; background: var(--ns-surface); border-radius: 6px; margin-bottom: 12px; opacity: .2; }

/* ---- Topbar ---- */
.ns-dash-topbar { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 0; margin-bottom: 20px; }
.ns-dash-brand { font-size:var(--ns-text-size-base); font-weight: 600; letter-spacing: .05em; color: var(--ns-text); }
.ns-dash-brand-em { color: var(--ns-text-3); margin: 0 4px; }
.ns-dash-brand-product { color: var(--ns-accent-gate); }
.ns-dash-brand-scope { color: var(--ns-text-3); font-weight: 400; }
.ns-dash-user-email { font-size:var(--ns-text-size-base-sm); color: var(--ns-text-3); }

/* ---- Tabs ---- */
.ns-dash-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ns-border); margin-bottom: 32px; }
.ns-dash-tab { font-size:var(--ns-text-size-base); font-weight: 500; color: var(--ns-text-3); padding: 10px 16px; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.ns-dash-tab:hover { color: var(--ns-text); }
.ns-dash-tab[aria-current="page"] { color: var(--ns-text); border-bottom-color: var(--ns-accent-gate); }

/* ---- Section head ---- */
.ns-dash-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ns-dash-section-title { font-size:var(--ns-text-size-xl); font-weight: 600; color: var(--ns-text); margin: 0; }
.ns-dash-section-meta { font-size:var(--ns-text-size-base-sm); color: var(--ns-text-3); display: flex; align-items: center; gap: 6px; }

/* ---- Auth wall ---- */
.ns-dash-authwall { max-width: 400px; margin: 80px auto; text-align: center; padding: 40px 32px; background: var(--ns-surface); border-radius: 12px; }
.ns-dash-authwall-brand { font-size:var(--ns-text-size-sm); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ns-text-3); margin-bottom: 20px; }
.ns-dash-authwall-brand-product { color: var(--ns-accent-gate); }
.ns-dash-authwall-title { font-size:var(--ns-text-size-2xl); font-weight: 700; color: var(--ns-text); margin: 0 0 12px; }
.ns-dash-authwall-text { font-size:var(--ns-text-size-md); color: var(--ns-text-2); margin: 0 0 24px; line-height: 1.6; }

/* ---- Headline stats ---- */
.ns-headline-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ns-border); border-radius: 8px; overflow: hidden; margin-bottom: 28px; }
.ns-headline-stat { background: var(--ns-surface); padding: 16px 20px; }
.ns-headline-stat-label { display: block; font-size:var(--ns-text-size-sm); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ns-text-3); margin-bottom: 6px; }
.ns-headline-stat-value { display: block; font-size:var(--ns-text-size-26); font-weight: 700; color: var(--ns-text); }
.ns-headline-stat--accent .ns-headline-stat-value { color: var(--ns-accent-gate); }
.ns-headline-stat--loading .ns-headline-stat-value { opacity: .3; }

/* ---- Toolbar ---- */
.ns-dash-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.ns-dash-toolbar-search { position: relative; flex: 1; min-width: 200px; }
.ns-dash-toolbar-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ns-text-3); font-size:var(--ns-text-size-md-lg); pointer-events: none; }
.ns-dash-toolbar-search-input { width: 100%; padding-left: 32px !important; }
.ns-dash-toolbar-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.ns-dash-toolbar-pill { background: none; border: 1px solid var(--ns-border); color: var(--ns-text-3); font-size:var(--ns-text-size-base-sm); font-weight: 500; padding: 5px 10px; border-radius: 20px; cursor: pointer; transition: all .15s; white-space: nowrap; }
.ns-dash-toolbar-pill:hover { color: var(--ns-text); border-color: var(--ns-text-3); }
.ns-dash-toolbar-pill--active { background: var(--ns-surface); color: var(--ns-text); border-color: var(--ns-text-3); }
.ns-dash-toolbar-pill-count { opacity: .6; margin-left: 3px; }
.ns-dash-toolbar-sort { display: flex; align-items: center; gap: 8px; }
.ns-dash-toolbar-sort-label { font-size:var(--ns-text-size-base-sm); color: var(--ns-text-3); white-space: nowrap; }

/* ---- Gates list ---- */
.ns-dash-list { display: flex; flex-direction: column; gap: 1px; background: var(--ns-border); border-radius: 8px; overflow: hidden; }
.ns-gate-card { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center; padding: 14px 16px; background: var(--ns-surface); transition: background .15s; }
.ns-gate-card:hover { background: var(--ns-bg); }
.ns-gate-card__art { width: 56px; height: 56px; border-radius: 4px; overflow: hidden; background: var(--ns-border); flex-shrink: 0; position: relative; }
.ns-gate-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-gate-card__live-pill { position: absolute; bottom: 4px; left: 4px; font-size:var(--ns-text-size-tiny); font-weight: 700; letter-spacing: .08em; padding: 2px 5px; border-radius: 3px; }
.ns-gate-card__live-pill--published { background: var(--ns-success-bg); color: var(--ns-success); }
.ns-gate-card__live-pill--draft { background: var(--ns-surface-2); color: var(--ns-text-3); }
.ns-gate-card__live-pill--paused { background: var(--ns-warn-bg); color: var(--ns-warn); }
.ns-gate-card__title { font-size:var(--ns-text-size-md); font-weight: 600; color: var(--ns-text); margin-bottom: 2px; }
.ns-gate-card__meta { font-size:var(--ns-text-size-base-sm); color: var(--ns-text-3); }
.ns-gate-card__stats { display: flex; gap: 16px; margin-top: 6px; }
.ns-gate-card__stat { font-size:var(--ns-text-size-base-sm); color: var(--ns-text-3); }
.ns-gate-card__stat-num { font-weight: 600; color: var(--ns-text-2); margin-right: 2px; }
.ns-gate-card__actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ---- Empty states ---- */
.ns-dash-empty { text-align: center; padding: 60px 24px; }
.ns-dash-empty--ghost { opacity: .6; }
.ns-dash-empty--small { padding: 24px; }
.ns-dash-empty-title { font-size:var(--ns-text-size-lg); font-weight: 600; color: var(--ns-text); margin: 0 0 8px; }
.ns-dash-empty-text { font-size:var(--ns-text-size-base); color: var(--ns-text-3); margin: 0 0 20px; line-height: 1.6; }
.ns-dash-coming-soon { text-align: center; padding: 60px 24px; background: var(--ns-surface); border-radius: 8px; }
.ns-dash-coming-soon-title { font-size:var(--ns-text-size-lg); font-weight: 600; color: var(--ns-text); margin: 0 0 8px; }
.ns-dash-coming-soon-text { font-size:var(--ns-text-size-base); color: var(--ns-text-3); margin: 0; line-height: 1.6; }

/* ---- Buttons ---- */
.ns-btn { display: inline-flex; align-items: center; gap: 6px; font-size:var(--ns-text-size-base); font-weight: 500; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--ns-border); background: var(--ns-surface); color: var(--ns-text); cursor: pointer; text-decoration: none; transition: all .15s; white-space: nowrap; }
.ns-btn:hover { background: var(--ns-bg); }
.ns-btn--primary { background: var(--ns-accent-gate); border-color: var(--ns-accent-gate); color: var(--ns-bg); }
.ns-btn--primary:hover { opacity: .9; }
.ns-btn--ghost { background: none; border-color: transparent; color: var(--ns-text-3); }
.ns-btn--ghost:hover { color: var(--ns-text); background: var(--ns-surface); }
.ns-btn--danger { color: var(--ns-error); border-color: var(--ns-error-border); background: none; }
.ns-btn--danger:hover { background: var(--ns-error-bg); }
.ns-btn--sm { font-size:var(--ns-text-size-base-sm); padding: 5px 10px; }
.ns-btn:disabled { opacity: .4; pointer-events: none; }

/* ---- Toast ---- */
.ns-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 10px 20px; border-radius: 8px; font-size:var(--ns-text-size-base); font-weight: 500; z-index: 9999; animation: ns-toast-in .2s ease; box-shadow: 0 4px 20px var(--ns-shadow); }
.ns-toast--success { background: var(--ns-accent-gate); color: var(--ns-bg); }
.ns-toast--error { background: var(--ns-error); color: var(--ns-bg); }
@keyframes ns-toast-in { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ---- Spinner ---- */
.ns-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--ns-border); border-top-color: currentColor; border-radius: 50%; animation: ns-spin .6s linear infinite; }
@keyframes ns-spin { to { transform: rotate(360deg); } }

/* ---- Forms ---- */
.ns-form { max-width: 680px; }
.ns-form-section { margin-bottom: 20px; }
.ns-form-section--has-error .ns-form-label { color: var(--ns-error); }
.ns-form-label { display: block; font-size:var(--ns-text-size-base-sm); font-weight: 600; letter-spacing: .05em; color: var(--ns-text-2); margin-bottom: 6px; text-transform: uppercase; }
.ns-form-input { display: block; width: 100%; background: var(--ns-surface); border: 1px solid var(--ns-border); color: var(--ns-text); font-size:var(--ns-text-size-base); padding: 9px 12px; border-radius: 6px; box-sizing: border-box; transition: border-color .15s; font-family: inherit; }
.ns-form-input:focus { outline: none; border-color: var(--ns-accent-gate); }
.ns-form-input--error { border-color: var(--ns-error-border); }
.ns-form-select { appearance: none; cursor: pointer; }
.ns-form-field-error { font-size:var(--ns-text-size-base-sm); color: var(--ns-error); margin: 4px 0 0; }
.ns-form-help { font-size:var(--ns-text-size-base-sm); color: var(--ns-text-3); margin: 4px 0 0; line-height: 1.5; }
.ns-form-help--subtitle { color: var(--ns-text-2); }
.ns-form-help--mismatch { color: var(--ns-warn); }
.ns-form-help code { font-family: monospace; font-size:var(--ns-text-size-sm); opacity: .8; }
.ns-form-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ns-form-row-inline { display: flex; gap: 8px; }
.ns-form-row-inline .ns-form-input { flex: 1; }
.ns-form-inline-btn { flex-shrink: 0; }
.ns-form-head-left { display: flex; align-items: center; gap: 8px; }
.ns-gate-type-badge { font-size:var(--ns-text-size-sm); font-weight: 600; color: var(--ns-accent-gate); background: var(--ns-accent-subtle); padding: 3px 8px; border-radius: 4px; }
.ns-gate-type-badge-em { color: var(--ns-text-3); }
.ns-form-label-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ns-form-label-row .ns-form-label { margin-bottom: 0; }
.ns-form-tip-wrap { position: relative; }
.ns-form-tooltip { font-size:var(--ns-text-size-base-sm); color: var(--ns-text-3); cursor: help; }
.ns-form-tip-popup { display: none; position: absolute; left: 0; top: 22px; background: var(--ns-surface); border: 1px solid var(--ns-border); border-radius: 6px; padding: 8px 12px; font-size:var(--ns-text-size-base-sm); color: var(--ns-text-2); width: 260px; z-index: 10; line-height: 1.5; }
.ns-form-tip-wrap:hover .ns-form-tip-popup { display: block; }
.ns-form-fetchstatus { font-size:var(--ns-text-size-base-sm); padding: 8px 12px; border-radius: 6px; margin-bottom: 16px; }
.ns-form-fetchstatus--ok { background: var(--ns-success-bg); color: var(--ns-success); }
.ns-form-fetchstatus--partial { background: var(--ns-warn-bg); color: var(--ns-warn); }
.ns-form-fetchstatus--error { background: var(--ns-error-bg); color: var(--ns-error); }
.ns-form-linkbtn { background: none; border: none; color: var(--ns-accent-gate); font-size:var(--ns-text-size-base-sm); cursor: pointer; padding: 0; text-decoration: underline; }
.ns-form-actions { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--ns-border); }
.ns-form-actions-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.ns-form-actions-hint { font-size:var(--ns-text-size-base-sm); color: var(--ns-error); margin-top: 12px; }

/* ---- Artwork ---- */
.ns-form-artwork-row { display: flex; gap: 16px; align-items: flex-start; }
.ns-form-artwork-thumb { width: 72px; height: 72px; border-radius: 6px; overflow: hidden; background: var(--ns-surface); border: 1px solid var(--ns-border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ns-form-artwork-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ns-form-artwork-thumb--empty { color: var(--ns-text-3); font-size:var(--ns-text-size-xl-lg); }
.ns-form-artwork-right { flex: 1; min-width: 0; }

/* ---- Download ---- */
.ns-dl-toggle { display: flex; gap: 2px; background: var(--ns-border); border-radius: 6px; padding: 2px; width: fit-content; margin-bottom: 10px; }
.ns-dl-toggle-btn { font-size:var(--ns-text-size-base-sm); font-weight: 500; padding: 5px 12px; border-radius: 5px; border: none; background: none; color: var(--ns-text-3); cursor: pointer; transition: all .15s; }
.ns-dl-toggle-btn--active { background: var(--ns-surface); color: var(--ns-text); }
.ns-dl-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px; border: 1px dashed var(--ns-border); border-radius: 8px; cursor: pointer; transition: border-color .15s; text-align: center; }
.ns-dl-dropzone:hover { border-color: var(--ns-accent-gate); }
.ns-dl-dropzone-icon { font-size:var(--ns-text-size-24); color: var(--ns-text-3); }
.ns-dl-dropzone-text { font-size:var(--ns-text-size-base); color: var(--ns-text-2); font-weight: 500; }
.ns-dl-dropzone-hint { font-size:var(--ns-text-size-sm); color: var(--ns-text-3); }
.ns-dl-progress { display: flex; flex-direction: column; gap: 6px; }
.ns-dl-progress-track { height: 4px; background: var(--ns-border); border-radius: 2px; overflow: hidden; }
.ns-dl-progress-fill { height: 100%; background: var(--ns-accent-gate); border-radius: 2px; transition: width .2s; }
.ns-dl-progress-label { font-size:var(--ns-text-size-base-sm); color: var(--ns-text-3); display: flex; align-items: center; gap: 6px; }
.ns-dl-file-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--ns-surface); border: 1px solid var(--ns-border); border-radius: 6px; }
.ns-dl-file-info { min-width: 0; }
.ns-dl-file-name { display: block; font-size:var(--ns-text-size-base); font-weight: 500; color: var(--ns-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-dl-file-size { font-size:var(--ns-text-size-sm); color: var(--ns-text-3); }
.ns-dl-file-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ---- Steps builder ---- */
.ns-steps-builder { margin-top: 8px; }
.ns-steps-tabs { display: none; gap: 2px; margin-bottom: 16px; background: var(--ns-border); border-radius: 6px; padding: 2px; }
.ns-steps-tab { flex: 1; font-size:var(--ns-text-size-base); font-weight: 500; padding: 7px 12px; border-radius: 5px; border: none; background: none; color: var(--ns-text-3); cursor: pointer; }
.ns-steps-tab--active { background: var(--ns-surface); color: var(--ns-text); }
.ns-steps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ns-step-palette-section { margin-bottom: 16px; }
.ns-step-palette-section-label { font-size:var(--ns-text-size-sm); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ns-text-3); margin: 0 0 8px; }
.ns-step-palette-tiles { display: flex; flex-direction: column; gap: 4px; }
.ns-step-tile { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 12px; background: var(--ns-surface); border: 1px solid var(--ns-border); border-radius: 6px; font-size:var(--ns-text-size-base); color: var(--ns-text); cursor: pointer; text-align: left; transition: all .15s; }
.ns-step-tile:hover { background: var(--ns-bg); border-color: var(--ns-accent-gate); }
.ns-step-tile--strongest { border-color: var(--ns-accent-border); }
.ns-step-tile--coming-soon { opacity: .4; cursor: not-allowed; }
.ns-step-tile--coming-soon:hover { background: var(--ns-surface); border-color: var(--ns-border); }
.ns-step-tile-label { display: flex; align-items: center; gap: 6px; }
.ns-step-tile-plus { color: var(--ns-text-3); }
.ns-step-tile-badge { font-size:var(--ns-text-size-tag); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; }
.ns-step-tile-badge--strongest { background: var(--ns-accent-subtle); color: var(--ns-accent-gate); }
.ns-step-tile-badge--soon { background: var(--ns-surface-2); color: var(--ns-text-3); }
.ns-step-list-label { font-size:var(--ns-text-size-sm); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ns-text-3); margin: 0 0 8px; }
.ns-steps-empty { font-size:var(--ns-text-size-base); color: var(--ns-text-3); padding: 20px; border: 1px dashed var(--ns-border); border-radius: 6px; text-align: center; }
.ns-steps-empty--error { border-color: var(--ns-error-border); color: var(--ns-error); }
.ns-step { background: var(--ns-surface); border: 1px solid var(--ns-border); border-radius: 6px; margin-bottom: 8px; overflow: hidden; }
.ns-step-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--ns-border); }
.ns-step-num { font-size:var(--ns-text-size-sm); font-weight: 700; color: var(--ns-text-3); width: 16px; }
.ns-step-label { font-size:var(--ns-text-size-base); font-weight: 500; color: var(--ns-text); flex: 1; }
.ns-step-actions { display: flex; gap: 2px; }
.ns-step-iconbtn { background: none; border: none; color: var(--ns-text-3); font-size:var(--ns-text-size-base); padding: 4px 6px; cursor: pointer; border-radius: 4px; transition: all .15s; }
.ns-step-iconbtn:hover { color: var(--ns-text); background: var(--ns-border); }
.ns-step-iconbtn--danger:hover { color: var(--ns-error); }
.ns-step-iconbtn:disabled { opacity: .25; pointer-events: none; }
.ns-step-body { padding: 12px; }

/* ---- Gate type selector ---- */
.ns-gate-type-selector { max-width: 500px; }
.ns-gate-type-selector-sub { font-size:var(--ns-text-size-base); color: var(--ns-text-3); margin: 0 0 20px; line-height: 1.6; }
.ns-gate-type-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ns-gate-type-card { background: var(--ns-surface); border: 1px solid var(--ns-border); border-radius: 8px; padding: 20px; text-align: left; cursor: pointer; transition: all .15s; }
.ns-gate-type-card:hover { border-color: var(--ns-accent-gate); background: var(--ns-bg); }
.ns-gate-type-card__icon { color: var(--ns-accent-gate); margin-bottom: 12px; }
.ns-gate-type-card__label { font-size:var(--ns-text-size-md); font-weight: 600; color: var(--ns-text); margin: 0 0 6px; }
.ns-gate-type-card__desc { font-size:var(--ns-text-size-base-sm); color: var(--ns-text-3); margin: 0; line-height: 1.5; }

/* ---- Modal ---- */
.ns-modal-overlay { position: fixed; inset: 0; background: var(--ns-overlay); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px; }
.ns-modal { background: var(--ns-surface); border: 1px solid var(--ns-border); border-radius: 12px; padding: 28px; max-width: 440px; width: 100%; position: relative; }
.ns-modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: var(--ns-text-3); font-size:var(--ns-text-size-xl); cursor: pointer; padding: 4px 8px; line-height: 1; }
.ns-modal-close:hover { color: var(--ns-text); }
.ns-modal-title { font-size:var(--ns-text-size-xl); font-weight: 600; color: var(--ns-text); margin: 0 0 12px; }
.ns-modal-text { font-size:var(--ns-text-size-base); color: var(--ns-text-2); margin: 0 0 16px; line-height: 1.6; }
.ns-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

/* ---- Analytics ---- */
.ns-analytics-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.ns-analytics-head-h1 { font-size:var(--ns-text-size-xl); font-weight: 600; color: var(--ns-text); margin: 0; }
.ns-analytics-range { display: flex; gap: 2px; background: var(--ns-border); border-radius: 6px; padding: 2px; }
.ns-analytics-range-pill { font-size:var(--ns-text-size-base-sm); font-weight: 500; padding: 5px 12px; border-radius: 5px; border: none; background: none; color: var(--ns-text-3); cursor: pointer; transition: all .15s; }
.ns-analytics-range-pill--active { background: var(--ns-surface); color: var(--ns-text); }
.ns-analytics-hero { background: var(--ns-surface); border-radius: 10px; padding: 24px; margin-bottom: 16px; position: relative; }
.ns-analytics-hero--empty { opacity: .6; }
.ns-analytics-hero-eyebrow { font-size:var(--ns-text-size-sm); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ns-text-3); margin-bottom: 8px; }
.ns-analytics-hero-number { font-size:var(--ns-text-size-36); font-weight: 700; color: var(--ns-text); line-height: 1; margin-bottom: 6px; }
.ns-analytics-hero-subline { font-size:var(--ns-text-size-base); color: var(--ns-text-3); margin-bottom: 16px; }
.ns-analytics-hero-breakdown { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ns-analytics-hero-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--ns-surface-2); border-radius: 20px; padding: 5px 12px; font-size:var(--ns-text-size-base-sm); color: var(--ns-text-2); }
.ns-analytics-hero-chip svg { width: 14px; height: 14px; }
.ns-analytics-hero-chip-num { font-weight: 600; color: var(--ns-text); }
.ns-analytics-hero-actions { display: flex; gap: 6px; margin-bottom: 12px; }
.ns-analytics-hero-action { display: inline-flex; align-items: center; gap: 6px; font-size:var(--ns-text-size-base-sm); background: none; border: 1px solid var(--ns-border); color: var(--ns-text-3); padding: 5px 10px; border-radius: 5px; cursor: pointer; transition: all .15s; }
.ns-analytics-hero-action:hover { color: var(--ns-text); border-color: var(--ns-text-3); }
.ns-analytics-hero-action--active { border-color: var(--ns-accent-gate); color: var(--ns-accent-gate); }
.ns-analytics-hero-action-badge { font-size:var(--ns-text-size-xs); background: var(--ns-surface-2); padding: 1px 6px; border-radius: 3px; }
.ns-analytics-hero-quality { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size:var(--ns-text-size-base-sm); padding-top: 12px; border-top: 1px solid var(--ns-border); }
.ns-analytics-hero-quality-eyebrow { color: var(--ns-text-3); font-size:var(--ns-text-size-sm); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.ns-analytics-hero-quality-stat { display: flex; gap: 4px; align-items: baseline; }
.ns-analytics-hero-quality-num { font-weight: 600; color: var(--ns-text); font-size:var(--ns-text-size-base); }
.ns-analytics-hero-quality-num--accent { color: var(--ns-accent-gate); }
.ns-analytics-hero-quality-label { color: var(--ns-text-3); }
.ns-analytics-hero-quality-label--accent { color: var(--ns-accent-gate); opacity: .8; }
.ns-analytics-hero-quality-divider { color: var(--ns-border); }
.ns-analytics-hide-popover { position: absolute; top: 8px; left: 8px; background: var(--ns-surface); border: 1px solid var(--ns-border); border-radius: 8px; padding: 12px; min-width: 220px; z-index: 10; }
.ns-analytics-hide-popover-title { font-size:var(--ns-text-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ns-text-3); margin-bottom: 8px; }
.ns-analytics-hide-popover-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; }
.ns-analytics-hide-popover-row--off { opacity: .5; }
.ns-analytics-hide-popover-label { flex: 1; font-size:var(--ns-text-size-base); color: var(--ns-text); }
.ns-analytics-hide-popover-count { font-size:var(--ns-text-size-base-sm); color: var(--ns-text-3); }
.ns-analytics-hide-popover-footer { font-size:var(--ns-text-size-sm); color: var(--ns-text-3); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ns-border); }
.ns-analytics-toggle { width: 28px; height: 16px; background: var(--ns-border); border-radius: 8px; position: relative; flex-shrink: 0; transition: background .15s; }
.ns-analytics-toggle::after { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--ns-text-3); top: 3px; left: 3px; transition: transform .15s; }
.ns-analytics-toggle--on { background: var(--ns-accent-gate); }
.ns-analytics-toggle--on::after { transform: translateX(12px); background: var(--ns-bg); }
.ns-analytics-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.ns-analytics-section-eyebrow { display: flex; align-items: center; gap: 8px; margin: 24px 0 10px; }
.ns-analytics-section-eyebrow-label { font-size:var(--ns-text-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ns-text-3); }
.ns-analytics-section-eyebrow-tag { display: flex; align-items: center; gap: 4px; font-size:var(--ns-text-size-sm); color: var(--ns-text-3); background: var(--ns-surface); padding: 2px 8px; border-radius: 10px; }
.ns-analytics-section-eyebrow-tag-icon { color: var(--ns-accent-gate); font-size:var(--ns-text-size-tiny); }
.ns-analytics-divider { border: none; border-top: 1px solid var(--ns-border); margin: 28px 0; }
.ns-analytics-chart { background: var(--ns-surface); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.ns-analytics-chart-legend { display: flex; gap: 16px; margin-bottom: 16px; }
.ns-analytics-chart-legend-item { display: flex; align-items: center; gap: 6px; font-size:var(--ns-text-size-base-sm); color: var(--ns-text-3); }
.ns-analytics-chart-legend-swatch { width: 20px; height: 2px; border-radius: 1px; }
.ns-analytics-chart-legend-swatch--views { background: var(--ns-accent-gate); }
.ns-analytics-chart-legend-swatch--downloads { background: var(--ns-text-3); }
.ns-analytics-chart-legend-num { font-weight: 600; color: var(--ns-text); }
.ns-analytics-chart-canvas { height: 180px; }
.ns-analytics-chart-empty { text-align: center; padding: 40px; font-size:var(--ns-text-size-base); color: var(--ns-text-3); }
.ns-analytics-verified-share { background: var(--ns-surface); border-radius: 8px; padding: 16px 20px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; }
.ns-analytics-verified-share-eyebrow { font-size:var(--ns-text-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ns-text-3); margin-bottom: 4px; }
.ns-analytics-verified-share-num { font-size:var(--ns-text-size-display); font-weight: 700; color: var(--ns-accent-gate); line-height: 1; }
.ns-analytics-verified-share-pct { font-size:var(--ns-text-size-xl); }
.ns-analytics-verified-share-delta { display: flex; align-items: center; gap: 4px; font-size:var(--ns-text-size-base-sm); margin-top: 4px; }
.ns-analytics-verified-share-delta--up { color: var(--ns-success); }
.ns-analytics-verified-share-delta--down { color: var(--ns-error); }
.ns-analytics-verified-share-spark { flex: 1; min-width: 0; opacity: .7; }
.ns-analytics-top-gates { background: var(--ns-surface); border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
.ns-analytics-top-gates-empty { padding: 24px; text-align: center; font-size:var(--ns-text-size-base); color: var(--ns-text-3); }
.ns-analytics-top-gate { display: grid; grid-template-columns: 40px 1fr repeat(3, 80px); gap: 12px; align-items: center; padding: 12px 16px; text-decoration: none; border-bottom: 1px solid var(--ns-border); transition: background .15s; }
.ns-analytics-top-gate:last-child { border-bottom: none; }
.ns-analytics-top-gate:hover { background: var(--ns-bg); }
.ns-analytics-top-gate__art { width: 40px; height: 40px; border-radius: 4px; overflow: hidden; background: var(--ns-border); }
.ns-analytics-top-gate__art img { width: 100%; height: 100%; object-fit: cover; }
.ns-analytics-top-gate__title { font-size:var(--ns-text-size-base); font-weight: 500; color: var(--ns-text); display: flex; align-items: center; gap: 6px; }
.ns-analytics-top-gate__mixed-tag { font-size:var(--ns-text-size-xs); background: var(--ns-accent-subtle); color: var(--ns-accent-gate); padding: 1px 6px; border-radius: 3px; }
.ns-analytics-top-gate__meta { font-size:var(--ns-text-size-base-sm); color: var(--ns-text-3); margin-top: 2px; }
.ns-analytics-top-gate__meta-sep { opacity: .4; }
.ns-analytics-top-gate__verified-share { color: var(--ns-accent-gate); }
.ns-analytics-top-gate__stat { font-size:var(--ns-text-size-base-sm); color: var(--ns-text-3); text-align: right; }
.ns-analytics-top-gate__stat-num { display: block; font-size:var(--ns-text-size-md); font-weight: 600; color: var(--ns-text); }
.ns-analytics-countries, .ns-analytics-referrers { background: var(--ns-surface); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.ns-analytics-countries-empty, .ns-analytics-referrers-empty { font-size:var(--ns-text-size-base); color: var(--ns-text-3); padding: 8px; text-align: center; }
.ns-analytics-country { display: grid; grid-template-columns: 24px 1fr 40px 1fr; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--ns-border); }
.ns-analytics-country:last-child { border-bottom: none; }
.ns-analytics-country__flag { font-size:var(--ns-text-size-lg); }
.ns-analytics-country__name { font-size:var(--ns-text-size-base-sm); color: var(--ns-text-2); }
.ns-analytics-country__count { font-size:var(--ns-text-size-base-sm); font-weight: 600; color: var(--ns-text); text-align: right; }
.ns-analytics-country__bar { height: 4px; background: var(--ns-border); border-radius: 2px; overflow: hidden; }
.ns-analytics-country__bar-fill { height: 100%; background: var(--ns-accent-gate); opacity: .6; border-radius: 2px; }
.ns-analytics-countries-footer { font-size:var(--ns-text-size-sm); color: var(--ns-text-3); padding: 6px 0 0; text-align: center; }
.ns-analytics-referrer { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--ns-border); font-size:var(--ns-text-size-base-sm); }
.ns-analytics-referrer:last-child { border-bottom: none; }
.ns-analytics-referrer__source { color: var(--ns-text-2); font-weight: 500; text-transform: capitalize; }
.ns-analytics-referrer__share { font-weight: 600; color: var(--ns-text); }
.ns-analytics-callout { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 8px; font-size:var(--ns-text-size-base); margin-bottom: 12px; }
.ns-analytics-callout--ghost { background: var(--ns-surface-2); color: var(--ns-text-3); border: 1px dashed var(--ns-border); }
.ns-analytics-callout--mint { background: var(--ns-accent-subtle); color: var(--ns-text-2); border: 1px solid var(--ns-accent-border); }
.ns-analytics-callout--amber { background: var(--ns-warn-bg); color: var(--ns-text-2); border: 1px solid var(--ns-warn-border); }
.ns-analytics-callout-icon { flex-shrink: 0; }
.ns-analytics-callout-text { line-height: 1.5; }
.ns-analytics-highlight { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--ns-accent-subtle); border: 1px solid var(--ns-accent-border); border-radius: 8px; margin-bottom: 12px; }
.ns-analytics-highlight-icon { font-size:var(--ns-text-size-2xl); }
.ns-analytics-highlight-num { display: block; font-size:var(--ns-text-size-md); font-weight: 600; color: var(--ns-text); }
.ns-analytics-highlight-sub { font-size:var(--ns-text-size-base-sm); color: var(--ns-text-3); }
.ns-analytics-step-perf { background: var(--ns-surface); border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.ns-analytics-step-perf-empty { padding: 20px; text-align: center; font-size:var(--ns-text-size-base); color: var(--ns-text-3); }
.ns-analytics-step-perf-row { display: grid; grid-template-columns: 28px 1fr 100px 40px; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--ns-border); }
.ns-analytics-step-perf-row:last-child { border-bottom: none; }
.ns-analytics-step-perf-icon { color: var(--ns-text-3); }
.ns-analytics-step-perf-icon svg { width: 18px; height: 18px; }
.ns-analytics-step-perf-label { font-size:var(--ns-text-size-base); font-weight: 500; color: var(--ns-text); text-transform: capitalize; }
.ns-analytics-step-perf-sub { font-size:var(--ns-text-size-sm); color: var(--ns-text-3); margin-top: 2px; }
.ns-analytics-step-perf-bar { height: 4px; background: var(--ns-border); border-radius: 2px; overflow: hidden; }
.ns-analytics-step-perf-bar-fill { height: 100%; background: var(--ns-accent-gate); border-radius: 2px; }
.ns-analytics-step-perf-pct { text-align: right; }
.ns-analytics-step-perf-pct-num { font-size:var(--ns-text-size-md); font-weight: 600; color: var(--ns-text); }
.ns-analytics-step-perf-pct-sym { font-size:var(--ns-text-size-sm); color: var(--ns-text-3); }

/* ---- Audience ---- */
.ns-audience-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ns-audience-controls-search { position: relative; flex: 1; min-width: 200px; }
.ns-audience-controls-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ns-text-3); pointer-events: none; }
.ns-audience-controls-search-input { padding-left: 32px !important; width: 100%; }
.ns-audience-controls-summary { font-size:var(--ns-text-size-base); color: var(--ns-text-3); white-space: nowrap; }
.ns-audience-controls-summary-num { font-weight: 600; color: var(--ns-text); }
.ns-audience-controls-summary--empty { opacity: .5; }
.ns-audience-controls-download { display: inline-flex; align-items: center; font-size:var(--ns-text-size-base); font-weight: 500; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--ns-border); background: var(--ns-surface); color: var(--ns-text); cursor: pointer; transition: all .15s; white-space: nowrap; }
.ns-audience-controls-download:not(:disabled):hover { border-color: var(--ns-accent-gate); color: var(--ns-accent-gate); }
.ns-audience-controls-download:disabled { opacity: .4; cursor: not-allowed; }
.ns-audience-picker-header { display: grid; grid-template-columns: 32px 1fr 60px 80px; gap: 12px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--ns-border); }
.ns-audience-picker-header-label { font-size:var(--ns-text-size-base-sm); color: var(--ns-text-3); cursor: pointer; }
.ns-audience-picker-header-col { font-size:var(--ns-text-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ns-text-3); text-align: right; }
.ns-audience-checkbox { width: 14px; height: 14px; accent-color: var(--ns-accent-gate); cursor: pointer; }
.ns-audience-picker-row { display: grid; grid-template-columns: 32px 40px 1fr 60px 80px; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--ns-border); text-decoration: none; transition: background .15s; }
.ns-audience-picker-row:last-child { border-bottom: none; }
.ns-audience-picker-row:hover { background: var(--ns-bg); }
.ns-audience-picker-row-check { display: flex; align-items: center; }
.ns-audience-picker-row-last { font-size:var(--ns-text-size-base-sm); color: var(--ns-text-3); text-align: right; }
.ns-audience-empty { text-align: center; padding: 60px 24px; }
.ns-audience-empty-icon { font-size:var(--ns-text-size-display); margin-bottom: 16px; opacity: .4; }
.ns-audience-empty-title { font-size:var(--ns-text-size-lg); font-weight: 600; color: var(--ns-text); margin: 0 0 8px; }
.ns-audience-empty-text { font-size:var(--ns-text-size-base); color: var(--ns-text-3); margin: 0 0 20px; line-height: 1.6; max-width: 360px; margin-inline: auto; }
.ns-audience-footer-note { font-size:var(--ns-text-size-base-sm); color: var(--ns-text-3); text-align: center; margin-top: 12px; }

/* ---- Mobile ---- */

@media(max-width:768px){
  :root{
    /* Heading and display sizes scale down on mobile.
       Base text (13px) and below stay the same — already comfortable. */
    --ns-text-size-36:     28px;
    --ns-text-size-display: 24px;
    --ns-text-size-3xl:    22px;
    --ns-text-size-26:     20px;
    --ns-text-size-24:     18px;
    --ns-text-size-2xl:    18px;
    --ns-text-size-xl-lg:  16px;
    --ns-text-size-xl:     15px;
    --ns-text-size-19:     15px;
    --ns-text-size-17:     14px;
    --ns-text-size-lg:     14px;
    --ns-text-size-md-lg:  13px;
  }
}

/* ============================================================
   MOBILE — all responsive overrides in one place
   breakpoint: 768px (tablet), 640px (phone)
   ============================================================ */

@media (max-width:768px) {
  .ns-sidebar { display:none; }
  .ns-page { padding-left:0; }
  .ns-gate__grid { grid-template-columns:1fr; }
  .ns-gate__point:nth-child(odd) { border-right:none; }
  .ns-gate__point:nth-child(3) { border-bottom:1px solid var(--ns-border-faint); }
  .ns-mobile-nav { display:flex; }
  .ns-main { padding-bottom:80px; }
}

@media(max-width:768px){
  .pd-header{flex-wrap:wrap}
  .pd-buy-col{text-align:left;width:100%}
  .pd-actions{justify-content:flex-start}
  .pd-related-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:768px){.st-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(max-width:768px){
  
  .st-controls{flex-wrap:wrap}
  .st-search-wrap{flex:1 1 100%}
  .st-select-wrap,.st-sort-wrap{flex:1}
  .st-feat{flex-direction:column}
  .st-feat-art{flex:none;width:100%}
}

@media(max-width:768px){
  .tu-ch-grid{grid-template-columns:1fr}
  .tu-ch-row:nth-child(odd){border-right:none}
}

@media(max-width:768px){.ns-mob-nav{display:flex}}

@media(max-width:768px){.ca-layout{grid-template-columns:1fr;gap:var(--ns-sp-6)}.ca-summary{position:static}}

@media(max-width:768px){.sp-grid{grid-template-columns:repeat(2,1fr)}.sp-controls{flex-wrap:wrap}.sp-search-wrap{flex:1 1 100%}.sp-select-wrap,.sp-sort-wrap{flex:1}}

@media(max-width:768px){.svc-journey{grid-template-columns:1fr}.svc-step:not(:last-child){border-right:none;border-bottom:1px solid var(--ns-border)}.svc-wide{flex-direction:column;align-items:flex-start}.svc-wide__aside{align-items:flex-start}}

@media(max-width:768px){.ct-body{grid-template-columns:1fr}}

@media(max-width:768px){.rl-grid{grid-template-columns:repeat(2,1fr)}.rl-platforms{grid-template-columns:repeat(2,1fr)}}

@media(max-width:768px){.stu-sub-layout{grid-template-columns:1fr;gap:32px}}

@media(max-width:768px){
  .slp-feats{grid-template-columns:1fr}
  .slp-feat{border-right:none;border-bottom:1px solid var(--ns-border)}
  .slp-feat:last-child{border-bottom:none}
  .slp-ben-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:768px){
  .gl-preview{grid-template-columns:1fr}
  .gl-cards--4{grid-template-columns:1fr 1fr}
  .gl-dash-stats{grid-template-columns:1fr 1fr}
  .gl-dash-lower{grid-template-columns:1fr}
  .gl-steps{grid-template-columns:1fr}
  .gl-dash-features{grid-template-columns:1fr}
  .gl-cta-block{flex-direction:column;gap:14px;text-align:center}
  .gl-header-actions{flex-wrap:wrap}
}

@media (max-width: 640px) {
  .gate-dash-page #ns-dashboard { padding: 0 16px 60px; }
  .ns-headline-stats { grid-template-columns: 1fr; }
  .ns-form-two-col { grid-template-columns: 1fr; }
  .ns-steps-grid { grid-template-columns: 1fr; }
  .ns-steps-tabs { display: flex; }
  .ns-steps-grid-cell { display: none; }
  .ns-steps-grid-cell--active { display: block; }
  .ns-gate-type-cards { grid-template-columns: 1fr; }
  .ns-analytics-grid-2 { grid-template-columns: 1fr; }
  .ns-analytics-top-gate { grid-template-columns: 40px 1fr repeat(2, 60px); }
  .ns-analytics-top-gate__stat:last-child { display: none; }
  .ns-audience-picker-row { grid-template-columns: 32px 36px 1fr 50px; }
  .ns-audience-picker-row-last { display: none; }
  .ns-audience-picker-header { grid-template-columns: 32px 1fr 50px; }
  .ns-audience-picker-header-col:last-child { display: none; }
}