/* Sonlibra theme, variant B "Editorial": white paper, black ink, one blue accent,
   Archivo (wide, extra bold) for headings, Inter for text. Square corners, rules instead of shadows.
   Loaded after hybrid.css; only tokens and the store's pages are restyled, the XFS core is untouched.
   Rules that must beat the catalogue's inline <style> (_catalog_css.html) start with body.sb-root. */

:root{
  --sl-ink:#111111;--sl-paper:#FFFFFF;--sl-ac:#2B3BFF;--sl-act:#1F2BD1;--sl-acb:#ECEEFF;--sl-hot:#FF5A1F;
  --sl-rule:#111111;--sl-line:#DADCE0;--sl-t2:#3C4043;--sl-t3:#5F6368;--sl-grp:#F3F3F1;
  --sl-display:Archivo,"Arial Black",system-ui,sans-serif;
  --font-sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --hy-font:Inter,system-ui,sans-serif;

  /* the panel (My music, playlists, balance, account; and the admin panel) */
  --hy-bg:#F6F6F4;--hy-sf:#FFFFFF;--hy-bd:#E2E2DF;--hy-tx:#111111;--hy-t2:#3C4043;--hy-t3:#5F6368;
  --hy-ac:#2B3BFF;--hy-ac2:#AEB4FF;--hy-acb:#ECEEFF;--hy-act:#1F2BD1;--hy-sel:#F0F1FF;--hy-tg:#D4D4D0;
  --hy-bar:#111111;--hy-barb:#333333;--hy-barf:#FFFFFF;--hy-grp:#F8F8F6;
  --radius-sm:2px;--radius-md:3px;--radius-lg:4px;
}
:root[data-theme="dark"]{
  --sl-ink:#F2F2EF;--sl-paper:#0E0E10;--sl-ac:#7C86FF;--sl-act:#B3B9FF;--sl-acb:#1D2050;--sl-hot:#FF7A45;
  --sl-rule:#F2F2EF;--sl-line:#2C2C30;--sl-t2:#C4C4BF;--sl-t3:#9A9A95;--sl-grp:#1C1C1F;
  --hy-bg:#0E0E10;--hy-sf:#161618;--hy-bd:#2C2C30;--hy-tx:#F2F2EF;--hy-t2:#C4C4BF;--hy-t3:#9A9A95;
  --hy-ac:#7C86FF;--hy-ac2:#353C8A;--hy-acb:#1D2050;--hy-act:#B3B9FF;--hy-sel:#1A1C3A;--hy-tg:#3A3A3F;
  --hy-bar:#1C1C1F;--hy-barb:#3A3A3F;--hy-grp:#141416;
}

/* The public pages (the store) share the same tokens */
.hw,.hh,.hf{--bg:var(--sl-paper);--sf:var(--sl-paper);--bd:var(--sl-line);--tx:var(--sl-ink);--t2:var(--sl-t2);--t3:var(--sl-t3);
  --ac:var(--sl-ac);--acb:var(--sl-acb);--act:var(--sl-act);--grp:var(--sl-grp);--ft:#111111;--ftt:#BDC1C6}
:root[data-theme="dark"] .hw,:root[data-theme="dark"] .hh,:root[data-theme="dark"] .hf{--bg:var(--sl-paper);--sf:var(--sl-paper);--bd:var(--sl-line);--tx:var(--sl-ink);
  --t2:var(--sl-t2);--t3:var(--sl-t3);--ac:var(--sl-ac);--acb:var(--sl-acb);--act:var(--sl-act);--grp:var(--sl-grp);--ft:#000000}
body.sb-pub{background:var(--sl-paper)}
.hw{font-size:15px}
.hw h1,.hw h2,.hw h3{font-family:var(--sl-display)}

/* The wordmark replaces the logo picture */
.sl-wm{font-family:var(--sl-display);font-stretch:125%;font-weight:800;letter-spacing:-.04em;text-transform:lowercase;line-height:1;color:var(--sl-ink)}
.sb-root a.sl-wm,.sb-root a.sl-wm:hover{color:var(--sl-ink);text-decoration:none}

/* ---------- Public header: a masthead strip in ink on paper, no gradient ---------- */
.hw-band,.hw-band.hero{background:var(--sl-paper);position:relative;z-index:5;--topline-fg:var(--sl-ac)}
.hw.hw-hero .hw-main{margin-top:0}
.hw-hdr,.hw-hdr.home{height:auto;min-height:60px;flex-wrap:wrap;gap:8px 22px;padding:10px calc(var(--gut) + 32px);color:var(--sl-ink);border-bottom:1px solid var(--sl-rule);font-weight:500}
.hw-hdr .sl-wm{font-size:26px;margin-right:6px}
.sb-root .hw-hdr a,.hw-hdr button{color:var(--sl-ink)}
.sb-root .hw-hdr a:hover,.hw-hdr button:hover{color:var(--sl-ac)}
.sb-root .hw-hdr .on{color:var(--sl-ink);font-weight:600;border-bottom:2px solid var(--sl-ac);padding-bottom:2px}
.sb-root .hw-hdr .hw-reg,.sb-root .hw-hdr.home .hw-reg,.sb-root .hw-hdr .sl-bal{background:var(--sl-ink);color:var(--sl-paper);border-radius:0;padding:8px 14px;font-weight:600}
.sb-root .hw-hdr .hw-reg:hover,.sb-root .hw-hdr .sl-bal:hover{background:var(--sl-ac);color:#fff}
.hw-hdr .hw-av{width:36px;height:36px;border-radius:50%;background:var(--sl-paper);color:var(--sl-ink);border:1.5px solid var(--sl-ink)}
.hw-hdr .hw-av:hover,.hw-hdr .hw-av[aria-expanded="true"]{background:var(--sl-ink);color:var(--sl-paper)}
.hw-menu{border-radius:0;border-color:var(--sl-rule);box-shadow:6px 6px 0 rgba(17,17,17,.12)}
.hw-menu .r.cur{background:var(--sl-acb);color:var(--sl-act)}
@media (max-width:767px){ .hw-hdr .hw-nv:not(.hw-lang){display:inline} .hw-hdr .hw-nv.sl-mm{display:none} }
@media (max-width:600px){ .hw-hdr,.hw-hdr.home{padding:10px 16px} .hw-hdr .hw-nv:not(.hw-lang){font-size:14px} }

/* ---------- Public footer ---------- */
.hw-foot{background:#111111;color:#BDC1C6;border-top:6px solid var(--sl-ac)}
.hw-foot .sl-wm{color:#fff;font-size:28px;display:block;margin-bottom:8px}
.hw-foot b{font-family:var(--sl-display)}

/* ---------- Store pages (.hc): paper instead of the gradient top, flat sections ---------- */
.hc .hc-top{background:var(--sl-paper);color:var(--sl-ink);padding-top:0;padding-bottom:0;border-bottom:1px solid var(--sl-rule);--topline-fg:var(--sl-ac)}
.hc .hc-hi{padding:28px calc(var(--gut) + 32px) 24px}
.hc .hc-ttl h1{color:var(--sl-ink);font-family:var(--sl-display);font-stretch:112%;font-weight:800;font-size:48px;line-height:1;letter-spacing:-.03em}
.hc .hc-search{border-radius:0;background:var(--sl-paper);border:1.5px solid var(--sl-ink);box-shadow:none;color:var(--sl-t3);height:46px}
.hc .hc-search input[type=text]{color:var(--sl-ink)}
.hc .hc-go{border-radius:0;background:var(--sl-ink);color:var(--sl-paper)}
.hc .hc-go:hover{background:var(--sl-ac);color:#fff}
.hc .hc-main{max-width:1280px;margin:0 auto;padding:0 32px 64px}
.hc .hc-card{background:transparent;border:0;border-radius:0;box-shadow:none;padding-bottom:0}
.hc .hc-bar{padding:16px 0;border-bottom:1px solid var(--sl-line)}
.hc .hc-chip{border-radius:0;border-color:var(--sl-ink);background:transparent;font-weight:500}
.hc .hc-chip.on,.sb-root .hc a.hc-chip.on{background:var(--sl-ink);border-color:var(--sl-ink);color:var(--sl-paper)}
.hc .hc-seg{border-radius:0;background:transparent;border:1px solid var(--sl-ink);padding:0;gap:0}
.hc .hc-seg a,.hc .hc-seg button{border-radius:0;height:32px}
.hc .hc-seg .on,.sb-root .hc .hc-seg a.on{background:var(--sl-ink);color:var(--sl-paper);box-shadow:none}
.hc .hc-btn{border-radius:0;border-color:var(--sl-ink)}
.hc .hc-empty{border-top:0}

body.sb-root .ct .ct-tabs{padding:0 calc(var(--gut) + 32px) 16px}
body.sb-root .ct .ct-tabs a{color:var(--sl-ink);border-radius:0;border:1px solid var(--sl-ink)}
body.sb-root .ct .ct-tabs a.on{background:var(--sl-ink);color:var(--sl-paper)}
body.sb-root .ct .ct-add,body.sb-root .ct a.ct-add{background:transparent;border:1.5px solid var(--sl-ink);color:var(--sl-ink);border-radius:0}
body.sb-root .ct .ct-selects select{border-radius:0;border-color:var(--sl-ink)}
body.sb-root .ct .ct-genres{border-bottom:1px solid var(--sl-line)}
body.sb-root .ct .ct-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:36px 24px;padding:28px 0 16px}
body.sb-root .ct .ct-cover{border-radius:0;box-shadow:none;margin-bottom:10px}
body.sb-root .ct .ct-card:hover .ct-cover img{transform:none}
body.sb-root .ct .ct-card:hover .ct-title{color:var(--sl-ac)}
body.sb-root .ct .ct-title{font-family:var(--sl-display);font-weight:800;font-size:18px;line-height:1.15}
body.sb-root .ct .ct-sub{font-size:14px;color:var(--sl-t2)}
body.sb-root .ct .ct-rating{border-radius:0;background:var(--sl-ink)}

/* Album page */
body.sb-root .ct .cti{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:48px;padding:40px 0;border-bottom:1px solid var(--sl-rule)}
body.sb-root .ct .cti-cover{border-radius:0;box-shadow:none}
body.sb-root .ct .cti-head h1{font-family:var(--sl-display);font-stretch:112%;font-weight:800;font-size:48px;line-height:1.02;letter-spacing:-.03em}
body.sb-root .ct .cti-head h1 span{color:var(--sl-t3);font-weight:500}
body.sb-root .ct .cti-tags a,body.sb-root .ct .cti-tags span{border-radius:0;background:transparent;border:1px solid var(--sl-ink);font-weight:500}
body.sb-root .ct .cti-tags a:hover{background:var(--sl-ink);color:var(--sl-paper)}
body.sb-root .ct .cti-meta{padding-top:12px;border-top:1px solid var(--sl-line)}
body.sb-root .ct .cti-buy{border-radius:0;background:transparent;border-top:6px solid var(--sl-ink);border-bottom:1px solid var(--sl-ink);padding:16px 0}
body.sb-root .ct .cti-price b{font-family:var(--sl-display);font-weight:800;font-size:28px}
body.sb-root .ct .hd-btn-sm,body.sb-root .ct a.hd-btn-sm{border-radius:0;background:var(--sl-ac);color:#fff;height:44px;padding:0 20px}
body.sb-root .ct .hd-btn-sm:hover{background:var(--sl-act)}
body.sb-root .ct .ct-edit{border-radius:0;border-color:var(--sl-ink)}
body.sb-root .ct .cti-play{padding:32px 0;gap:40px}
body.sb-root .ct .cti-audio{border-radius:0;border:0;border-top:6px solid var(--sl-ink);background:transparent;padding:16px 0}
body.sb-root .ct .cti-player{border-radius:0}
body.sb-root .ct .cti-files h3{font-family:var(--sl-display);font-size:13px;color:var(--sl-ink);letter-spacing:.08em}
body.sb-root .ct .cti-file{border-radius:0;border-top:1px solid var(--sl-line);padding:12px 6px}
body.sb-root .ct .cti-file.on{background:var(--sl-acb);color:var(--sl-act)}
body.sb-root .ct .cti-single{border-radius:0;border-color:var(--sl-ink)}
body.sb-root .ct .cti-section{padding:32px 0}
body.sb-root .ct .cti-section > h2{font-family:var(--sl-display);font-weight:800;font-size:28px}
body.sb-root .ct .cti-cmts{padding:0 0 8px}
body.sb-root .ct .cti-none,body.sb-root .ct .cti-alert{border-radius:0;margin-left:0;margin-right:0}
body.sb-root .ct .cti-prevtag{border-radius:0;background:var(--sl-hot);color:#111}
body.sb-root .ct .cti-fmt{border-radius:0;border-color:var(--sl-ink);color:var(--sl-ink)}
body.sb-root .ct .cti-fmt:hover{background:var(--sl-ink);color:var(--sl-paper)}
body.sb-root .ct .cti-proc{border-radius:0}
body.sb-root .ct .cti-owned,body.sb-root .ct .cti-own{color:var(--sl-ac)}
@media (max-width:720px){
  .hc .hc-hi{padding:20px 16px}
  .hc .hc-ttl h1{font-size:34px}
  .hc .hc-main{padding:0 16px 48px}
  body.sb-root .ct .ct-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:28px 16px;padding:20px 0}
  body.sb-root .ct .cti{grid-template-columns:minmax(0,1fr);gap:24px;padding:24px 0}
  body.sb-root .ct .cti-cover{max-width:none}
  body.sb-root .ct .cti-head h1{font-size:34px}
  body.sb-root .ct .cti-play{padding:24px 0}
}

/* ---------- Panel: the same type and accent; the store's wordmark in the top bar ---------- */
.hy-tb .hy-lg.sl-wm{font-size:22px;gap:10px}
.hy-tb .hy-lg.sl-wm .sb-badge{font-family:var(--font-sans);font-stretch:100%;letter-spacing:0;text-transform:none}
.hy-top{border-bottom:1px solid var(--hy-tx)}
.sb-ph h1,.hy-fr h1{font-family:var(--sl-display);font-weight:800;letter-spacing:-.02em}
.sb-root .hy-it.on{background:var(--hy-acb);color:var(--hy-act);box-shadow:inset 3px 0 0 var(--hy-ac)}

/* ---------- The user's pages in the store's layout: My music, My playlists, Balance (.su-*) ---------- */
.su-page{max-width:1280px;margin:0 auto;padding:0 32px 72px;color:var(--sl-ink)}
.sb-root .su-page a{color:inherit;text-decoration:none}
.su-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.su-top{padding-top:28px}
.su-kick{display:inline-block;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--sl-ac)}
.sb-root .su-page a.su-kick{color:var(--sl-ac)}
.su-top h1{margin:6px 0 18px;font-family:var(--sl-display);font-stretch:112%;font-weight:800;font-size:clamp(40px,6vw,72px);line-height:.98;letter-spacing:-.035em;color:var(--sl-ink);overflow-wrap:anywhere}
.su-tabs{display:flex;flex-wrap:wrap;gap:4px 28px;padding:10px 0;border-top:6px solid var(--sl-rule);border-bottom:1px solid var(--sl-rule);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.sb-root .su-tabs a{color:var(--sl-ink);padding:6px 0}
.sb-root .su-tabs a:hover{color:var(--sl-ac)}
.sb-root .su-tabs a.on{color:var(--sl-ac);box-shadow:inset 0 -2px 0 var(--sl-ac)}
.su-top .su-acts{padding:12px 0;border-top:6px solid var(--sl-rule);border-bottom:1px solid var(--sl-rule)}
.su-acts{display:flex;flex-wrap:wrap;gap:10px}
.su-page .su-h2{margin:0 0 16px;font-family:var(--sl-display);font-weight:800;font-size:26px;letter-spacing:-.01em;color:var(--sl-ink)}
.su-sec{padding:32px 0;border-bottom:1px solid var(--sl-rule)}
.su-sec:last-child{border-bottom:0}
.su-cols{display:flex;flex-wrap:wrap;gap:0 64px;border-bottom:1px solid var(--sl-rule)}
.su-cols > .su-sec{flex:1 1 360px;min-width:0;border-bottom:0}
.su-label{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--sl-t3);margin:0 0 6px}
.su-big{font-family:var(--sl-display);font-stretch:112%;font-weight:800;font-size:clamp(56px,8vw,96px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.su-note{margin:8px 0 0;color:var(--sl-t2);font-size:14px}
.su-count{margin:20px 0 0;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--sl-t3)}

/* buttons and fields: square, ink */
.su-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1.5px solid var(--sl-ink);background:transparent;color:var(--sl-ink);font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.sb-root .su-page a.su-btn{color:var(--sl-ink)}
.su-btn:hover,.sb-root .su-page a.su-btn:hover{background:var(--sl-ink);color:var(--sl-paper)}
.su-btn.pri,.sb-root .su-page a.su-btn.pri,.su-btn.on{background:var(--sl-ac);border-color:var(--sl-ac);color:#fff}
.su-btn.pri:hover,.sb-root .su-page a.su-btn.pri:hover{background:var(--sl-act);border-color:var(--sl-act);color:#fff}
.su-btn.danger{border-color:#C5221F;color:#C5221F}
.su-btn.danger:hover{background:#C5221F;color:#fff}
:root[data-theme="dark"] .su-btn.danger{border-color:#FF8A80;color:#FF8A80}
.su-btn:disabled{opacity:.4;cursor:default}
.su-btn small{opacity:.75;font-weight:500}
.su-btn i{font-size:18px}
.su-input{display:block;width:100%;height:48px;padding:0 14px;border:1.5px solid var(--sl-ink);border-radius:0;background:var(--sl-paper);color:var(--sl-ink);font:inherit;font-size:16px;outline:0}
.su-input:focus{border-color:var(--sl-ac);box-shadow:0 0 0 3px var(--sl-acb)}
.su-form{display:flex;gap:0;max-width:640px;margin:28px 0 8px}
.su-form .su-input{flex:1;min-width:0;border-right:0}
.su-presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.su-empty{padding:48px 0;border-bottom:1px solid var(--sl-rule);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.su-empty b{font-family:var(--sl-display);font-weight:800;font-size:32px;line-height:1.1}
.su-empty p{margin:0 0 8px;color:var(--sl-t2);max-width:560px}

/* My music: one album per row */
.su-album{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;padding:32px 0;border-bottom:1px solid var(--sl-rule)}
.su-acover img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--sl-grp)}
.su-abody{min-width:0}
.su-ahead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.su-kind{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--sl-t3)}
.su-atitle{display:block;font-family:var(--sl-display);font-weight:800;font-size:30px;line-height:1.05;letter-spacing:-.02em;margin:4px 0 2px}
.sb-root .su-page a.su-atitle:hover{color:var(--sl-ac)}
.su-artist{font-size:16px;color:var(--sl-t2)}
.su-zips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.su-tracks,.su-list,.su-ptracks{list-style:none;margin:18px 0 0;padding:0}
.su-tracks li{display:flex;align-items:center;gap:14px;padding:10px 0;border-top:1px solid var(--sl-line);min-height:44px}
.su-tracks .n{width:28px;flex:none;font-family:var(--sl-display);font-weight:800;font-size:18px;font-variant-numeric:tabular-nums}
.su-tracks .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.sb-root .su-page .su-tracks a.t:hover{color:var(--sl-ac)}
.su-tracks .len,.su-ptracks .len{flex:none;color:var(--sl-t3);font-size:14px;font-variant-numeric:tabular-nums}
.su-fmts{display:flex;gap:6px;flex:none}
.su-fmt{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:30px;padding:0 8px;border:1px solid var(--sl-ink);font-size:11px;font-weight:700;letter-spacing:.04em}
.sb-root .su-page a.su-fmt:hover{background:var(--sl-ink);color:var(--sl-paper)}

/* My playlists: a numbered list like the home page's chart */
.su-list{margin-top:8px}
.su-list li a{display:flex;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid var(--sl-line);min-height:44px}
.su-list .n{width:48px;flex:none;font-family:var(--sl-display);font-weight:800;font-size:32px;font-variant-numeric:tabular-nums}
.su-list .t{flex:1;min-width:0;display:flex;flex-direction:column}
.su-list .t b{font-family:var(--sl-display);font-weight:800;font-size:22px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-list .t small{color:var(--sl-t3);font-size:14px}
.su-list i{font-size:22px;color:var(--sl-t3)}
.sb-root .su-page .su-list a:hover b,.sb-root .su-page .su-list a:hover i{color:var(--sl-ac)}

/* one playlist: the player and its tracks */
.su-player{margin-top:24px;padding:16px 20px;background:#111111;color:#fff;display:flex;flex-direction:column;gap:12px}
.su-now{display:flex;align-items:center;gap:14px}
.su-now img{width:56px;height:56px;object-fit:cover;flex:none}
.su-now small{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#AEB4FF}
.su-now b{display:block;font-family:var(--sl-display);font-weight:800;font-size:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-now span{display:block;color:#BDC1C6;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-player audio{width:100%}
.su-prev{flex:none;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;background:var(--sl-hot);color:#111}
.su-ptracks{margin-top:12px}
.su-ptracks li{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--sl-line)}
.su-ptracks li.on .t b{color:var(--sl-ac)}
.su-play{width:44px;height:44px;flex:none;border-radius:50%;border:1.5px solid var(--sl-ink);background:transparent;color:var(--sl-ink);display:grid;place-items:center;cursor:pointer;font-size:18px}
.su-play:hover,.su-ptracks li.on .su-play{background:var(--sl-ac);border-color:var(--sl-ac);color:#fff}
.su-play:disabled{opacity:.35;cursor:default}
.su-ptracks .cv{width:48px;height:48px;object-fit:cover;flex:none;background:var(--sl-grp)}
.su-ptracks .t{flex:1;min-width:0;display:flex;flex-direction:column}
.su-ptracks .t b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-ptracks .t small{color:var(--sl-t3);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-root .su-page .su-ptracks small a{text-decoration:underline;text-underline-offset:2px}
.su-tacts{display:flex;flex:none}
.su-tacts button{width:44px;height:44px;border:0;background:none;color:var(--sl-t2);cursor:pointer;font-size:18px;display:grid;place-items:center}
.su-tacts button:hover{color:var(--sl-ink);background:var(--sl-grp)}
.su-tacts button:disabled{opacity:.3;cursor:default;background:none}

/* Balance: history table */
.su-tscroll{overflow-x:auto}
.su-table{width:100%;border-collapse:collapse;font-size:14px}
.su-table th{text-align:left;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--sl-t3);padding:0 16px 10px 0;border-bottom:1px solid var(--sl-rule)}
.su-table td{padding:12px 16px 12px 0;border-bottom:1px solid var(--sl-line);vertical-align:top}
.su-table .r{text-align:right;padding-right:0}
.su-table .nw{white-space:nowrap}
.su-table .mu{color:var(--sl-t3)}
.su-table b{font-weight:600}
.su-table .plus{color:#137333}
:root[data-theme="dark"] .su-table .plus{color:#81C995}

@media (max-width:720px){
  .su-page{padding:0 16px 56px}
  .su-album{grid-template-columns:88px minmax(0,1fr);gap:16px;padding:24px 0}
  .su-atitle{font-size:22px}
  .su-ahead{flex-direction:column;gap:12px}
  .su-tracks .len,.su-ptracks .cv,.su-ptracks .len{display:none}
  .su-tacts button{width:36px}
  .su-cols{gap:0}
}

/* ---------- Account settings (/account/) in the store's layout: the XFS form blocks in variant B ---------- */
.su-subbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:16px 0;border-bottom:1px solid var(--sl-line)}
.su-sub{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto}
.sb-root .su-page .su-sub a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--sl-ink);font-weight:600;font-size:14px;color:var(--sl-ink)}
.sb-root .su-page .su-sub a:hover{background:var(--sl-grp)}
.sb-root .su-page .su-sub a.on{background:var(--sl-ink);color:var(--sl-paper)}
.su-subbar .acts{display:flex;gap:8px}
.su-meta{margin:16px 0 0;color:var(--sl-t2)}
.su-acc .sb-account.sb-account-tab{gap:0}
.su-acc .sb-alert{border-radius:0;margin:20px 0 0;border-color:var(--sl-ink)}
/* sections: a rule and a big heading instead of a card */
.su-acc .sb-section{background:transparent;border:0;border-top:1px solid var(--sl-rule);border-radius:0;margin-top:32px}
.su-acc .sb-section:first-of-type,.su-acc .sc-sum + .sb-section,.su-acc .sc-sum + template + .sb-section{margin-top:32px}
.su-acc .sb-section>header{padding:20px 0 14px;border-bottom:0;flex-wrap:wrap}
.su-page .sb-section>header h2{font-family:var(--sl-display);font-weight:800;font-size:24px;letter-spacing:-.01em;line-height:1.15;color:var(--sl-ink)}
.su-acc .sb-section>header p{font-size:14px;color:var(--sl-t2);margin-top:4px}
.su-acc .sb-section>.bd{padding:0 0 8px}
/* fields */
.su-acc .sb-form{gap:22px 24px}
.su-acc .sb-field{gap:8px}
.su-acc .sb-field>label,.su-acc .sb-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--sl-t3)}
.su-acc .sb-field .help{font-size:13px;color:var(--sl-t2)}
.su-acc .sb-input{height:48px;border:1.5px solid var(--sl-ink);border-radius:0;background:var(--sl-paper)}
.su-acc .sb-input:hover{border-color:var(--sl-ink)}
.su-acc .sb-input:focus-within{border-color:var(--sl-ac);box-shadow:0 0 0 3px var(--sl-acb)}
.su-acc .sb-input input,.su-acc .sb-input select{padding:0 14px;font-size:15px;font-weight:500;color:var(--sl-ink)}
.su-acc .sb-input select{padding-right:32px;background-position:right 12px center}
.su-acc .sb-input.disabled{background:var(--sl-grp);border-color:var(--sl-line)}
.su-acc .sb-input .pre,.su-acc .sb-input .suf{background:var(--sl-grp);color:var(--sl-t2)}
.su-acc textarea.sb-textarea{border:1.5px solid var(--sl-ink);border-radius:0;font-size:15px}
.su-acc .sb-toggle .trk{width:40px;height:24px;border-radius:12px;background:var(--sl-line)}
.su-acc .sb-toggle .trk:after{width:20px;height:20px;top:2px;left:2px}
.su-acc .sb-toggle.on .trk{background:var(--sl-ac)}
.su-acc .sb-toggle.on .trk:after{transform:translateX(16px)}
.su-acc .sb-checkline{font-size:14px}
/* buttons and badges */
.su-acc .sb-btn{height:auto;min-height:44px;padding:0 18px;border-radius:0;border:1.5px solid var(--sl-ink);background:transparent;color:var(--sl-ink);font-size:14px;font-weight:600}
.su-acc .sb-btn:hover{background:var(--sl-ink);color:var(--sl-paper)}
.su-acc .sb-btn.primary{background:var(--sl-ac);border-color:var(--sl-ac);color:#fff}
.su-acc .sb-btn.primary:hover{background:var(--sl-act);border-color:var(--sl-act)}
.su-acc .sb-btn.ghost{border-color:transparent;color:var(--sl-t2)}
.su-acc .sb-btn.ghost:hover{background:var(--sl-grp);color:var(--sl-ink)}
.su-acc .sb-btn.danger-ghost{border-color:#C5221F;color:#C5221F}
.su-acc .sb-btn.danger-ghost:hover{background:#C5221F;color:#fff}
.su-acc .sb-btn.sm{min-height:36px;padding:0 12px;font-size:13px}
.su-acc .sb-badge{height:24px;padding:0 9px;border-radius:0;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
/* the security summary */
.su-acc .sc-sum{margin-top:28px;border:1.5px solid var(--sl-ink);border-radius:0;background:transparent}
.su-acc .sc-score{background:transparent}
.su-acc .sc-score b{font-family:var(--sl-display);font-weight:800;font-size:18px}
.su-acc .sc-score .bar{border-radius:0;width:22px}
.su-acc .sc-chk{border-left:1px solid var(--sl-line)}
.su-acc .sc-chk .ic{border-radius:0}
.su-acc .pd-hero{border-radius:0;margin-top:28px}
/* tables (devices, premium payments) */
.su-acc .sb-twrap{border:0;border-radius:0;box-shadow:none;margin-top:16px}
.su-acc .sb-table{font-size:14px}
.su-acc .sb-table th{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--sl-t3);background:transparent;border-bottom:1px solid var(--sl-rule)}
.su-acc .sb-table td{border-bottom:1px solid var(--sl-line)}
@media (max-width:720px){
  .su-acc .sb-form{grid-template-columns:minmax(0,1fr)}
  .su-acc .sb-form .span-2{grid-column:auto}
  .su-subbar .acts{width:100%}
  .su-subbar .acts .su-btn{flex:1}
}

/* The track's own artist (compilations, "feat."): after the title, quieter */
body.sb-root .ct .cti-file .nm .cti-artist,.su-tracks .su-tartist{font-weight:400;font-size:.92em;color:var(--sl-t2)}
body.sb-root .ct .cti-file.on .nm .cti-artist{color:inherit}