/* =============================================================================
   ezmuze central — design layer
   =============================================================================

   Loaded AFTER site.css, which is the original Blazor site's stylesheet (1931
   lines of w3-css-style utilities). This file does not replace it: it restyles
   the handful of classes the pages actually use, so every page gets the new
   look without being rewritten one at a time.

   WHERE THE VALUES COME FROM. Not invented — they are ezmuze studio's own
   tokens, from design-guide.md in the studio repo (§1 colour, §2 typography,
   §3 spacing, §4 corner radius, §5 motion). The site fronts the app, so it
   should look like it was designed by whoever designed the app, rather than
   like a different product from a different decade.

   WHAT MADE IT LOOK "METRO", and what each is replaced with:

     body { font-weight: 100 }        hairline type at every size
       -> 400 body / 600 headings, a real weight hierarchy

     rgba(200,200,200,.7) slabs       full-bleed light-grey and black bands,
     rgba(0,0,0,.7)                   alternating, no edges, no depth
       -> the app's dark surface family, 1px bordered, blurred over the video

     padding: 128px                   fixed slabs that overflow a phone
       -> a fluid clamp() scale, and content capped at a readable measure

     ALL-CAPS NAV                     Windows-8 chrome
       -> sentence case, which is design-guide.md §2's app-wide rule

   CORNER RADIUS IS DELIBERATELY 0. design-guide.md §4 locks the app to hard
   edges everywhere except knobs and switches, on the grounds that hard-edged
   chrome is the DAW convention (Ableton, Reaper). Rounding the website would
   have made it look less like the thing it is selling, not more modern. The
   modern feeling here is meant to come from type, spacing, borders, depth and
   motion instead. Easy to revisit: change --radius.
   ========================================================================== */

:root {
  /* -- surfaces: design-guide.md §1.1 dark palette ------------------------ */
  --backdrop:      #0d0d11;   /* SurfaceBackdrop (13,13,17)  */
  --panel:         #16161c;   /* SurfacePanel    (22,22,28)  */
  --header:        #1e1e26;   /* SurfaceHeader   (30,30,38)  */
  --raised:        #282833;   /* SurfaceRaised   (40,40,51)  */
  --border:        #3c3c4a;   /* SurfaceBorder   (60,60,74)  */

  /* Panels sit over a looping background video, so they are translucent and
     blurred rather than opaque — the video is the site's one piece of motion
     and covering it flat would waste it. */
  --panel-a:       rgba(22, 22, 28, 0.82);
  --raised-a:      rgba(40, 40, 51, 0.78);
  --header-a:      rgba(16, 16, 21, 0.86);

  /* -- text -------------------------------------------------------------- */
  --text:          #e9e9f0;
  --text-dim:      #a6a6b6;
  --text-faint:    #7c7c8c;

  /* -- accents ----------------------------------------------------------- */
  --brand:         #ff00d8;   /* .ezmuzePurple, and the logo's magenta       */
  --brand-soft:    #ff78a8;   /* AccentModNegative — brand pink, easier on   */
  --green:         #60e0a0;   /* AccentModPositive — the logo's green        */
  --blue:          #96c8ff;   /* AccentSelection — focus rings, links        */
  --amber:         #ffc440;   /* AccentLiveAutomation                        */

  --positive:      #3a6c4a;   --positive-hover: #4a8a5e;  --positive-press: #60a874;
  --neutral:       #34343c;   --neutral-hover:  #42424c;  --neutral-press:  #50505c;
  --negative:      #783a3a;   --negative-hover: #9e4848;

  /* -- geometry: §3 base grid is 12px, §4 hard edges --------------------- */
  --u: 12px;
  --radius: 0px;
  --measure: 68ch;            /* readable line length for body copy          */
  --page: 1220px;             /* content cap; the video still runs edge to edge */

  /* -- motion: §5, 100-150ms, ease-out in ------------------------------- */
  --t: 140ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* =============================================================== typography */

/* site.css sets font-weight:100 on body AND every heading, which is where most
   of the thin, washed-out feeling came from. */
body, h1, h2, h3, h4, h5, h6, .button, input, select, textarea, button {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
}

body, html {
  line-height: 1.55;                 /* was 1.8 — airy to the point of loose */
  color: var(--text);
  background: var(--backdrop);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 calc(var(--u) * 0.75);
  color: var(--text);
}

/* Fluid, so a phone gets a proportionate headline rather than a desktop one
   that wraps four times. */
h1 { font-size: clamp(28px, 3.4vw, 42px); }
h2 { font-size: clamp(22px, 2.6vw, 30px); }
h3 { font-size: clamp(19px, 1.9vw, 23px); letter-spacing: -0.01em; }
h4 { font-size: clamp(16px, 1.5vw, 18px); font-weight: 500; color: var(--text-dim); }

p  { margin: 0 0 var(--u); max-width: var(--measure); color: var(--text-dim); }
p:last-child { margin-bottom: 0; }

b, strong { font-weight: 600; }   /* colour inherits: see hero buttons */
hr { border: 0; border-top: 1px solid var(--border); margin: calc(var(--u) * 2.5) 0; }

.jumbo {
  font-size: clamp(44px, 8.5vw, 84px) !important;
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.02;
  display: inline-block;
}
.xxlarge { font-size: clamp(32px, 7vw, 44px) !important; font-weight: 300; letter-spacing: -0.03em; }

.ezmuzePurple { color: var(--brand); }

a { color: var(--blue); text-decoration: none; transition: color var(--t) var(--ease); }
a:hover { color: #c2ddff; text-decoration: underline; text-underline-offset: 3px; }

/* ================================================================= surfaces */

/* The three alternating band classes. All three are now dark: the light-grey
   band was the single most dated element on the site, and losing it costs
   nothing because the alternation survives as panel-vs-raised. */
.light-greyalpha, .light-grayalpha,
.hover-light-greyalpha:hover, .hover-light-grayalpha:hover {
  background-color: var(--raised-a) !important;
  color: var(--text) !important;
}

.light-blackalpha, .hover-light-blackalpha:hover {
  background-color: var(--panel-a) !important;
  color: var(--text) !important;
}

/* Kept tinted, because the brand hue earning a place on the page is the point
   of having one — but at a fraction of rgba(100,0,200,.6). */
.light-purplealpha, .hover-light-purplealpha:hover,
.lighter-purplealpha, .hover-lighter-purplealpha:hover {
  background-color: rgba(58, 22, 74, 0.72) !important;
  color: var(--text) !important;
}

.container, .slimcontainer, .light-greyalpha, .light-blackalpha, .light-purplealpha {
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Fluid padding, and a cap on measure so body copy does not run the full width
   of a 27" display. The video still fills the viewport behind it. */
.container, .slimcontainer {
  width: auto !important;
  max-width: none;
  padding: clamp(20px, 4.5vw, 60px) clamp(16px, 5vw, 64px) !important;
  margin-bottom: 4px;
  box-sizing: border-box;
}

.container > .row,
.container > .row-padding,
.slimcontainer > .row-padding,
.slimcontainer > .row {
  max-width: var(--page);
  margin-inline: auto;
}

/* ================================================================== buttons */

/* No !important on the colours: several pages still pass an inline
   backgroundColor for primary/destructive intent, and an !important here would
   flatten all of them into one grey. Shape, motion and focus are safe to force;
   colour is not. */
.button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  min-height: 42px;                  /* comfortably tappable */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--neutral);
  color: var(--text);
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--t) var(--ease),
              border-color var(--t) var(--ease),
              color var(--t) var(--ease),
              transform var(--t) var(--ease);
}

.button:hover, .btn:hover {
  background-color: var(--neutral-hover);
  border-color: #55556a;
  color: var(--text) !important;     /* site.css forces #000 on hover */
  text-decoration: none;
}
.button:active, .btn:active { transform: translateY(1px); background-color: var(--neutral-press); }

.button:focus-visible, .btn:focus-visible,
a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Intent classes, so pages can stop hand-colouring buttons inline. */
.btn--primary  { background-color: var(--positive); border-color: #4d7f61; color: #eafff2; }
.btn--primary:hover  { background-color: var(--positive-hover); border-color: #61a179; }
.btn--primary:active { background-color: var(--positive-press); }

.btn--ghost { background-color: rgba(255,255,255,0.04); }
.btn--ghost:hover { background-color: rgba(255,255,255,0.09); }

.btn--danger { background-color: var(--negative); border-color: #8f4b4b; color: #ffecec; }
.btn--danger:hover { background-color: var(--negative-hover); }

/* =================================================================== navbar */

.bar {
  background: var(--header-a) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 24px rgba(0, 0, 0, 0.45);
}

.bar .bar-item.button {
  min-height: 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  padding: 10px 14px;
  border-radius: var(--radius);
}
.bar .bar-item.button:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text) !important;
}

/* The wordmark. */
.bar .bar-item-black {
  background: transparent !important;
  color: var(--text) !important;
  letter-spacing: 0.34em;
  font-size: 15px;
  border: 0;
}

/* site.css swaps the desktop links for a burger at its own 601px breakpoint,
   which leaves 600-900px rendering a row of links with no room for them. */
@media (max-width: 900px) {
  .bar .right.hide-small { display: none !important; }
  .bar .fakeClick.hide-large.hide-medium { display: inline-block !important; }
  .bar .bar-item-player { display: none !important; }
}

/* ==================================================================== forms */

input[type="text"], input[type="password"], input[type="email"],
input[type="date"], input[type="number"], select, textarea, .input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  min-height: 42px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 15px;
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: #4d4d5f; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); background: rgba(0, 0, 0, 0.55); }
::placeholder { color: var(--text-faint); }

/* =================================================================== tables */

table.table, table.table-dark {
  width: 100%;
  border-collapse: collapse;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid var(--border);
}
table.table th, table.table-dark th {
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-dim);
  background: var(--header-a);
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
}
table.table td, table.table-dark td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(60, 60, 74, 0.5);
}
table.table tbody tr:hover td { background: rgba(255, 255, 255, 0.035); }

/* A data table cannot reflow, so on a phone it scrolls inside its own box
   instead of pushing the whole page sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ================================================================= sections */

/* The home page's feature rows. Were layout <table>s, which cannot stack —
   on a phone they squeezed a screenshot and a paragraph into two columns of
   nothing. Grid, so they become one column when there is no room for two. */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(20px, 3.5vw, 48px);
  align-items: center;
  max-width: var(--page);
  margin: 0 auto calc(var(--u) * 3);
}
.feature:last-child { margin-bottom: 0; }
.feature__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  background: var(--backdrop);
}
.feature--flip .feature__media { order: -1; }

@media (max-width: 860px) {
  .feature { grid-template-columns: minmax(0, 1fr); gap: var(--u); }
  .feature--flip .feature__media { order: 0; }
  .feature__media { margin-top: 4px; }
}

/* A row of actions that wraps instead of overflowing. */
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ============================================================ housekeeping */

img, video { max-width: 100%; }

/* site.css floats .col; without this the page can scroll sideways on a phone. */
html, body { overflow-x: hidden; }

.bgvideo {
  /* Dimmed so panel text stays readable over it, but not so far that the site
     looks like a flat black page with a video tag it never uses. */
  filter: saturate(0.9) brightness(0.62);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .bgvideo { display: none; }
}

/* ============================================================= mobile menu */

/* The old sheet was <h2> links with hand-placed margins, absolutely positioned
   at top:64 with a hardcoded white background — and two of its entries pointed
   at routes that do not exist. This is a real sheet: full width, scrollable if
   the list outgrows the screen, and tappable at 48px a row. */
.mobile-menu {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  z-index: 10000;
  background: var(--header-a);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  padding: 8px 0 12px;
}

.mobile-menu__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px clamp(16px, 5vw, 28px);
  min-height: 48px;
  font-size: 17px;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid rgba(60, 60, 74, 0.45);
}
.mobile-menu__item:last-child { border-bottom: 0; }
.mobile-menu__item:hover, .mobile-menu__item:active {
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}
.mobile-menu__item i { width: 22px; text-align: center; color: var(--text-faint); }

/* ===================================================================== hero */

/* Two columns on a desktop, one on a phone. The old hero left the right-hand
   half of a widescreen empty: copy capped at a readable measure and nothing
   beside it. The browser screenshot goes there, which also lets the page prove
   its own headline -- "make music in your browser" next to a picture of exactly
   that. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  max-width: var(--page);
  margin: 0 auto;
}

.hero__copy .jumbo { margin-bottom: 2px; }

.hero__badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: calc(var(--u) * 1.5);
}
.hero__badge b { color: var(--brand-soft); letter-spacing: 0.02em; }

/* The page's real headline, so it outranks the section h1s below it. */
.hero__tagline {
  font-size: clamp(24px, 3vw, 34px) !important;
  font-weight: 500;
  margin-bottom: var(--u);
}

.hero__fineprint { font-size: 14px; color: var(--text-faint); margin-top: var(--u); }
.hero__fineprint a { color: var(--brand-soft); }
.hero__fineprint a:hover { color: #ffa8c8; }

.hero__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--u); }
  .hero__media { margin-top: 8px; }
}

.button__note { color: var(--text-faint); font-weight: 400; }

/* The download row is secondary to the green browser CTA above it. */
.actions .btn--ghost { font-size: 14px; }

/* Breathing room between the hero and the section that follows it inside the
   same container -- they were running together with only a paragraph's margin. */
.hero + .row { margin-top: calc(var(--u) * 4); }
.hero + .row > h1 { margin-top: 0; }

/* A history entry: prose beside its cover. The cover is art, not a screenshot,
   so it gets a column of its own rather than half the width. */
.feature--history { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); align-items: start; }
.feature__media--case { display: flex; justify-content: center; }
.feature__media--case .caseHolder { max-width: 100%; }

@media (max-width: 860px) {
  .feature--history { grid-template-columns: minmax(0, 1fr); }
  /* The cover leads on a phone: it is the most recognisable thing about an
     entry, and scrolling past four paragraphs to reach it is backwards. */
  .feature--history .feature__media { order: -1; margin-bottom: 8px; }
}

/* ============================================================== the lockup */

/* The mark plus the wordmark, as the app draws it.
   - the mark is public/img/ezmuze-mark.svg, generated from LogoMark.cs's own 26
     control points, so the site and the app draw the same curve
   - "ezmuze" is Comfortaa Bold and "studio" Comfortaa Light, which is what
     GustUI's Theme.WordmarkFont / WordmarkLightFont name
   - "studio" is the app's brand magenta (249,0,183), not the site's older
     #FF00D8 -- the lockup should match the product, not the stylesheet */
.lockup { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px); }

.lockup__mark {
  width: clamp(54px, 7vw, 86px);
  height: auto;
  flex: 0 0 auto;
}

.lockup__word {
  font-family: Comfortaa, system-ui, sans-serif;
  font-size: clamp(38px, 7vw, 72px);
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.lockup__word b { font-weight: 700; color: var(--text); }
.lockup__word span { font-weight: 300; color: #f900b7; }

/* ============================================================== previews */

.previews { display: grid; gap: var(--u); max-width: 720px; }
.preview {
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.35);
  padding: 12px 14px;
}
.preview__title { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.preview__title b { font-size: 15px; }
.preview__title span { font-size: 13px; color: var(--text-faint); }
.preview audio { width: 100%; height: 36px; display: block; }

/* ============================================================ pack notice */

/* The "your packs still work" panel. It is the single most reassuring thing on
   the page for anyone who spent money on ezmuze before, so it gets a surface of
   its own rather than being a sentence in a paragraph. */
.keepsake {
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  background: rgba(96, 224, 160, 0.05);
  padding: clamp(16px, 2.4vw, 26px);
  max-width: var(--page);
  margin: 0 auto calc(var(--u) * 2);
}
.keepsake h3 { margin-bottom: 8px; }
.keepsake p { max-width: none; }

/* ================================================================== store */

.storebar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.storebar__cats, .storebar__sort { display: flex; flex-wrap: wrap; gap: 8px; }
.storebar__sort { margin-left: auto; }

/* A fixed basis is the whole point: the search field must not be sized by the
   result list it is filtering. */
.storebar__search { flex: 0 1 300px; min-width: 200px; }
.storebar__search .searchbar { position: relative; margin: 0; }
.storebar__search .search_input {
  width: 100%;
  padding-right: 40px;
  margin: 0;
}
.storebar__search .search_icon {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 38px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint);
}
.storebar__search .search_icon:hover { color: var(--text); text-decoration: none; }

@media (max-width: 700px) {
  .storebar__sort { margin-left: 0; width: 100%; }
  .storebar__search { flex: 1 1 100%; }
}

/* ============================================== the legacy search bar, undone */

/* site.css made this an expanding search: the input is width:0 with a
   TRANSPARENT CARET, and only `.searchbar:hover > .search_input` gives it
   250px and a visible caret. So it collapsed the moment the pointer left,
   you could not see what you were typing, and the width animated under the
   cursor. That is the "barmy" behaviour, and it was never the flex layout.
   Specificity has to beat `.searchbar:hover > .search_input` (0,3,0). */
.storebar__search .searchbar,
.storebar__search .searchbar:hover {
  height: auto;
  background: none;
  border-radius: 0;
  padding: 0;
}
.storebar__search .searchbar > .search_input,
.storebar__search .searchbar:hover > .search_input {
  width: 100%;
  padding: 11px 40px 11px 13px;
  line-height: 1.2;
  caret-color: var(--text);
  color: var(--text);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.storebar__search .searchbar:hover > .search_icon { background: none; color: var(--text); }

/* ==================================================================== vault */

.vault {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(16px, 2.5vw, 32px);
  max-width: var(--page);
  margin: 0 auto;
}
@media (max-width: 820px) { .vault { grid-template-columns: minmax(0, 1fr); } }

.vault__pane {
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.28);
  padding: clamp(12px, 1.6vw, 18px);
  min-width: 0;
}
.vault__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.vault__head h3 { margin: 0; }
.vault__count {
  font-size: 12px;
  color: var(--text-faint);
  border: 1px solid var(--border);
  padding: 1px 7px;
}
.vault__pane .input { margin-bottom: 10px; }

/* Rows: design-guide.md §9.5 makes list rows a universal spec in the app --
   one height, hover, a selected state. These were bare <p> tags. */
.rowlist { list-style: none; margin: 0; padding: 0; }
.rowlist__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  min-height: 40px;
  color: var(--text);
  border-bottom: 1px solid rgba(60, 60, 74, 0.45);
  cursor: pointer;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.rowlist li:last-child .rowlist__row { border-bottom: 0; }
.rowlist__row:hover { background: rgba(255, 255, 255, 0.06); text-decoration: none; }
.rowlist__row.is-selected {
  background: rgba(150, 200, 255, 0.10);
  box-shadow: inset 2px 0 0 var(--blue);
  color: #fff;
}
.rowlist__row--play i { color: var(--text-faint); font-size: 11px; width: 14px; }
.rowlist__row--play:hover i, .rowlist__row--play.is-selected i { color: var(--green); }
.rowlist__row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowlist__empty { color: var(--text-faint); padding: 10px; }

.pager { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.pager span { font-size: 13px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.pager .button { min-height: 34px; padding: 6px 12px; }

/* ============================================================== store rows */

/* The compact list rows and the big cards both sat on the old alternating
   alpha slabs with no edge between them. */
.slimcontainer.light-purplealpha + .slimcontainer,
.storerow {
  border: 1px solid var(--border);
}

/* =============================================================================
   NEON PASS
   =============================================================================
   Taking the cues from the ezmuze studio box art rather than from the app's
   chrome: near-black ground, halftone dots, the green-to-magenta disc, colour
   coded sequencer rows, a spectrum curve running red through blue to green,
   and glowing wires over the top of it.

   This deliberately overrides the restraint above -- flat surfaces, hard
   edges, borders doing all the work. That read as tidy rather than as ezmuze.
   ========================================================================== */

:root {
  --neon-green:   #27f836;
  --neon-magenta: #ff05c7;
  --neon-cyan:    #5ad9ff;
  --neon-violet:  #a06bff;
  --grad-brand:   linear-gradient(120deg, var(--neon-green) 0%, var(--neon-cyan) 42%, var(--neon-magenta) 100%);
  --radius: 6px;                     /* the flat-0 decision is retired */
}

/* -- the ground: halftone, as on the art ---------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Faint, and fading from the top rather than concentrated there: at 0.055
     with a tight mask the only place the dots were NOT covered by a panel was
     the gap under the nav, so they read as a dotted band rather than as
     texture. */
  background-image: radial-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px);
  background-size: 5px 5px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
}
.top, .container, .slimcontainer, .mobile-menu { position: relative; z-index: 1; }

/* -- headings in the wordmark's own typeface ------------------------------ */
h1, h2, .jumbo, .xxlarge, .hero__tagline {
  font-family: Comfortaa, system-ui, sans-serif;
  letter-spacing: -0.02em;
}
h1 { font-weight: 700; }

/* A lit rule under the big section headings, the way the spectrum runs across
   the art. */
.row > h1, .container > h1 { position: relative; padding-bottom: 12px; }
.row > h1::after, .container > h1::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 116px; height: 2px;
  background: var(--grad-brand);
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(255, 5, 199, 0.55);
}

hr {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--border) 12%, var(--border) 88%, transparent);
}

/* -- surfaces get an edge that catches the light -------------------------- */
.container, .slimcontainer {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

.feature__media img,
.hero__media img,
.vault__pane,
.preview,
.keepsake {
  border-radius: var(--radius);
}

/* The screenshots are the best thing on the page: let them glow a little, and
   lift on hover the way the art's panels sit above their own reflections. */
.feature__media img, .hero__media img {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(255, 255, 255, 0.06),
              0 0 34px -12px rgba(90, 217, 255, 0.5);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.feature__media img:hover, .hero__media img:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.65),
              0 0 0 1px rgba(255, 255, 255, 0.10),
              0 0 44px -8px rgba(255, 5, 199, 0.45);
}

/* -- the mark, lit --------------------------------------------------------- */
.lockup__mark {
  filter: drop-shadow(0 0 26px rgba(39, 248, 54, 0.35))
          drop-shadow(0 0 34px rgba(255, 5, 199, 0.30));
}

/* -- buttons ---------------------------------------------------------------- */
.button, .btn { border-radius: var(--radius); }

.btn--primary {
  background: linear-gradient(135deg, #2f7d52, #1f6a63);
  border-color: rgba(39, 248, 54, 0.45);
  color: #eafff2;
  box-shadow: 0 0 0 1px rgba(39, 248, 54, 0.10), 0 8px 24px -10px rgba(39, 248, 54, 0.55);
}
.btn--primary:hover {
  background: linear-gradient(135deg, #3a9a64, #268076);
  border-color: rgba(39, 248, 54, 0.75);
  box-shadow: 0 0 0 1px rgba(39, 248, 54, 0.18), 0 12px 30px -10px rgba(39, 248, 54, 0.7);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.14);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(90, 217, 255, 0.5);
  box-shadow: 0 0 22px -10px rgba(90, 217, 255, 0.8);
}

/* -- nav ------------------------------------------------------------------- */
.bar { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.bar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--grad-brand);
  opacity: 0.5;
}
.top .bar { position: relative; }
.bar .bar-item.button:hover { color: #fff !important; }

/* -- the packs panel, lit down its edge ------------------------------------ */
.keepsake {
  border-left: 0;
  background:
    linear-gradient(90deg, rgba(39, 248, 54, 0.09), rgba(255, 5, 199, 0.05) 42%, transparent 78%),
    rgba(0, 0, 0, 0.32);
  position: relative;
  overflow: hidden;
}
.keepsake::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--grad-brand);
  box-shadow: 0 0 18px rgba(39, 248, 54, 0.55);
}

/* -- previews, like the art's channel rows -------------------------------- */
.preview { position: relative; overflow: hidden; background: rgba(0, 0, 0, 0.34); }
.preview::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--neon-cyan);
  box-shadow: 0 0 16px rgba(90, 217, 255, 0.7);
}
.preview:nth-child(2)::before { background: var(--neon-magenta); box-shadow: 0 0 16px rgba(255, 5, 199, 0.7); }
.preview__title b { font-family: Comfortaa, system-ui, sans-serif; font-weight: 700; }

/* -- vault rows: a lit edge on the selected one --------------------------- */
.rowlist__row.is-selected {
  background: linear-gradient(90deg, rgba(90, 217, 255, 0.14), transparent 62%);
  box-shadow: inset 3px 0 0 var(--neon-cyan);
}
.rowlist__row--play:hover i, .rowlist__row--play.is-selected i {
  color: var(--neon-green);
  filter: drop-shadow(0 0 6px rgba(39, 248, 54, 0.8));
}

.vault__pane, .preview, .keepsake { border-color: rgba(255, 255, 255, 0.09); }

/* -- the brand pink, everywhere it was the older flat magenta -------------- */
.ezmuzePurple { color: var(--neon-magenta); text-shadow: 0 0 22px rgba(255, 5, 199, 0.45); }

/* ============================================================ store cards */

.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(392px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  max-width: var(--page);
  margin: 0 auto clamp(24px, 4vw, 56px);
  padding-inline: clamp(16px, 5vw, 64px);
}
@media (max-width: 420px) { .pgrid { grid-template-columns: minmax(0, 1fr); } }

.pcard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(58, 22, 74, 0.5), rgba(0, 0, 0, 0.4) 55%);
  color: var(--text);
  cursor: pointer;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.pcard:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 5, 199, 0.45);
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.8), 0 0 30px -14px rgba(255, 5, 199, 0.8);
  text-decoration: none;
}
.pcard__art { flex: 0 0 auto; }
.pcard__name {
  font-family: Comfortaa, system-ui, sans-serif;
  font-size: 19px;
  margin: 0 0 2px;
}
.pcard__by { font-size: 12px; color: var(--text-faint); margin-bottom: 8px; }
.pcard__pitch {
  font-size: 14px;
  color: var(--text-dim);
  margin: 0;
  max-width: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard__price {
  font-family: Comfortaa, system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}
.pcard__price.is-free {
  color: var(--neon-green);
  border-color: rgba(39, 248, 54, 0.45);
  box-shadow: 0 0 18px -8px rgba(39, 248, 54, 0.9);
}

/* The toolbar band was a full-bleed purple slab of its own. */
.slimcontainer.light-purplealpha:has(.storebar) {
  background: rgba(0, 0, 0, 0.35) !important;
  margin-bottom: clamp(16px, 2.5vw, 28px);
}

/* =============================================================== the player */

.playerbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9000;
  background: rgba(12, 12, 16, 0.92);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.55);
  padding-bottom: env(safe-area-inset-bottom);
}
/* The lit hairline the rest of the design uses for "this is ezmuze". */
.playerbar::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--grad-brand);
  opacity: 0.75;
}

.playerbar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(180px, 2fr) auto;
  align-items: center;
  gap: clamp(10px, 2vw, 26px);
  max-width: var(--page);
  margin: 0 auto;
  padding: 10px clamp(12px, 4vw, 28px);
}

.playerbar__meta { display: flex; align-items: center; gap: 12px; min-width: 0; }
.playerbar__text { min-width: 0; }
.playerbar__track {
  font-weight: 600; font-size: 14px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.playerbar__artist {
  font-size: 12px; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Four bars that dance while it plays and rest when it does not. */
.playerbar__eq { display: flex; align-items: flex-end; gap: 2px; height: 20px; flex: 0 0 auto; }
.playerbar__eq span {
  width: 3px; height: 4px; border-radius: 1px;
  background: var(--neon-green);
  box-shadow: 0 0 8px rgba(39, 248, 54, 0.8);
}
.playerbar__eq[data-on="true"] span { animation: eq 900ms ease-in-out infinite; }
.playerbar__eq span:nth-child(2) { animation-delay: 140ms; background: var(--neon-cyan);    box-shadow: 0 0 8px rgba(90, 217, 255, 0.8); }
.playerbar__eq span:nth-child(3) { animation-delay: 280ms; background: var(--neon-violet);  box-shadow: 0 0 8px rgba(160, 107, 255, 0.8); }
.playerbar__eq span:nth-child(4) { animation-delay: 420ms; background: var(--neon-magenta); box-shadow: 0 0 8px rgba(255, 5, 199, 0.8); }
@keyframes eq { 0%, 100% { height: 4px } 50% { height: 18px } }

.playerbar__controls { display: flex; align-items: center; gap: 6px; }
.playerbar__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--text-dim);
  cursor: pointer;
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.playerbar__btn:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, 0.09); }
.playerbar__btn:disabled { opacity: 0.3; cursor: default; }
.playerbar__btn--play {
  width: 44px; height: 44px;
  color: #06210f;
  background: linear-gradient(135deg, var(--neon-green), #12c9a0);
  box-shadow: 0 0 24px -6px rgba(39, 248, 54, 0.8);
}
.playerbar__btn--play:hover:not(:disabled) {
  color: #06210f;
  background: linear-gradient(135deg, #56ff62, #21e3b6);
  transform: scale(1.05);
}

.playerbar__seek { display: flex; align-items: center; gap: 10px; min-width: 0; }
.playerbar__time {
  font-size: 11px; color: var(--text-faint);
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}

/* One range style for both seek and volume, filled to --pct. */
.playerbar input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; padding: 0; min-height: 0;
  border: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--neon-cyan) var(--pct, 0%), rgba(255, 255, 255, 0.16) var(--pct, 0%));
  cursor: pointer;
}
.playerbar input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px rgba(90, 217, 255, 0.9);
}
.playerbar input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border: 0; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px rgba(90, 217, 255, 0.9);
}

.playerbar__right { display: flex; align-items: center; gap: 8px; }
.playerbar__vol { width: 84px; }
.playerbar__vol-icon { color: var(--text-faint); font-size: 13px; width: 16px; text-align: center; }

/* On a phone: title and transport on one row, seek under it, and the volume
   slider dropped -- the hardware buttons already do that job. */
@media (max-width: 760px) {
  .playerbar__inner {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "meta controls close" "seek seek seek";
    gap: 6px 10px;
  }
  .playerbar__meta { grid-area: meta; }
  .playerbar__controls { grid-area: controls; }
  .playerbar__seek { grid-area: seek; }
  .playerbar__right { grid-area: close; }
  .playerbar__vol, .playerbar__vol-icon { display: none; }
}

/* Nothing hides behind the bar. */
body:has(.playerbar) { padding-bottom: 96px; }
@media (max-width: 760px) { body:has(.playerbar) { padding-bottom: 128px; } }

/* ============================================================ vault, again */

/* Both panes scroll instead of paging: 809 artists behind 81 pages of a single
   prev/next pair was the worst interaction on the site. */
.vault__scroll {
  max-height: min(58vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid rgba(60, 60, 74, 0.5);
  margin-top: 8px;
}
.vault__scroll::-webkit-scrollbar { width: 10px; }
.vault__scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.vault__scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.26);
  background-clip: padding-box;
}

.vault__head { flex-wrap: wrap; }
.vault__playall { margin-left: auto; min-height: 32px; padding: 6px 12px; font-size: 13px; }

/* A-Z jump. Letters with nobody under them stay put but dim, so the strip does
   not reflow while you filter. */
.azbar {
  /* 27 equal columns rather than flex-wrap: as a flex row the letters wrapped
     into a ragged second line whose items then stretched to fill it. */
  display: grid;
  grid-template-columns: repeat(27, minmax(0, 1fr));
  gap: 1px;
  margin: 8px 0 0;
}
.azbar__c {
  min-width: 0;
  padding: 3px 0;
  font-size: 11px;
  border: 0; border-radius: 3px;
  background: transparent; color: var(--text-dim);
  cursor: pointer;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.azbar__c:hover:not(:disabled) { background: rgba(90, 217, 255, 0.18); color: #fff; }
.azbar__c:disabled { color: rgba(255, 255, 255, 0.14); cursor: default; }

.rowlist__icon { width: 16px; text-align: center; color: var(--text-faint); font-size: 11px; flex: 0 0 auto; }
.rowlist__row--play:hover .rowlist__icon { color: var(--neon-green); }

/* The same dancing bars, smaller, on whichever row is playing. */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.eq span {
  width: 2px; height: 3px; border-radius: 1px;
  background: var(--neon-green);
  animation: eq 900ms ease-in-out infinite;
}
.eq span:nth-child(2) { animation-delay: 150ms; }
.eq span:nth-child(3) { animation-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .playerbar__eq span, .eq span { animation: none !important; height: 10px; }
}

/* ========================================================= vault, spotified */

.vaulthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: var(--page);
  margin: 0 auto clamp(18px, 3vw, 30px);
}
.vaulthead p { margin: 0; }
.vaulthead__search { max-width: 320px; margin: 0; }

.artistgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: clamp(10px, 1.6vw, 20px);
  max-width: var(--page);
  margin: 0 auto;
}

.artisttile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--t) var(--ease), transform var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.artisttile:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.09);
  transform: translateY(-2px);
}
.artisttile:hover .avatar {
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.85), 0 0 26px -8px rgba(90, 217, 255, 0.75);
}
.artisttile__name {
  font-size: 13px;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -- the avatar itself ---------------------------------------------------- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.92);
  font-family: Comfortaa, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.8);
  transition: box-shadow var(--t) var(--ease);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -- one artist ----------------------------------------------------------- */
.backlink {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 6px 0;
  color: var(--text-dim); font-size: 14px; cursor: pointer;
  transition: color var(--t) var(--ease);
}
.backlink:hover { color: #fff; }

.artisthead {
  display: flex;
  align-items: flex-end;
  gap: clamp(16px, 3vw, 32px);
  max-width: var(--page);
  margin: 8px auto clamp(20px, 3vw, 32px);
  flex-wrap: wrap;
}
.artisthead__kicker {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 4px;
}
.artisthead h1 {
  font-size: clamp(30px, 6vw, 64px);
  line-height: 1.02;
  margin: 0 0 6px;
  padding-bottom: 0;
}
/* The gradient rule under section headings would look odd under a name. */
.artisthead h1::after { display: none; }
.artisthead p { margin: 0 0 14px; }
.artisthead__play { min-width: 116px; }

.tracksearch { max-width: 340px; margin: 0 auto 12px; display: block; }

/* -- the track list ------------------------------------------------------- */
.tracklist {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--page);
}
.track {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--t) var(--ease);
}
.track:hover { background: rgba(255, 255, 255, 0.06); }
.track.is-playing { background: rgba(90, 217, 255, 0.10); color: #fff; }

.track__num {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-faint); font-size: 12px;
  font-variant-numeric: tabular-nums;
}
/* Number normally, play triangle on hover -- the convention every music app
   uses, and it saves a permanent column of icons. */
.track__play { display: none; font-size: 11px; }
.track:hover .track__i { display: none; }
.track:hover .track__play { display: inline; color: var(--neon-green); }
.track.is-playing .track__i { color: var(--neon-cyan); }

.track__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track__artist { color: var(--text-faint); font-size: 12px; white-space: nowrap; }
@media (max-width: 620px) { .track__artist { display: none; } }

/* ================================================= plays and star ratings */

.track {
  /* room for the stats column now */
  grid-template-columns: 34px minmax(0, 1fr) auto;
}
.track__stats { display: flex; align-items: center; gap: 14px; }
.track__plays {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.track__plays i { font-size: 9px; }

.stars { display: inline-flex; align-items: center; gap: 1px; }
.stars__s {
  background: none;
  border: 0;
  padding: 0 1px;
  font-size: 12px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: color var(--t) var(--ease), transform var(--t) var(--ease);
}
.stars__s.is-on { color: rgba(255, 255, 255, 0.45); }
/* Yours is the brand amber; everyone else's average stays neutral, so the two
   readings are never confused. */
.stars.is-mine .stars__s.is-on { color: var(--amber); filter: drop-shadow(0 0 5px rgba(255, 196, 64, 0.6)); }
.stars:not(.is-readonly) .stars__s:hover { transform: scale(1.22); }
.stars:not(.is-readonly):hover .stars__s.is-on { color: var(--amber); }
.stars.is-readonly .stars__s { cursor: default; }
.stars__count {
  font-size: 11px;
  color: var(--text-faint);
  margin-left: 5px;
  font-variant-numeric: tabular-nums;
}

/* The stars are fiddly at a phone's tap size and the row is the important
   target, so they only appear where there is room to hit them. */
@media (max-width: 620px) {
  .stars { display: none; }
  .track__stats { gap: 8px; }
}

/* ========================================================= gamertag claims */

.claimline { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 12px; }
.claimline i { color: var(--neon-green); }
.claimline__you { color: var(--text-faint); }

/* Only ever seen by the twenty-odd people whose username IS their gamertag,
   so it is worth making a moment of. */
.claimbox {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 14px 16px;
  margin: 0 0 14px;
  border: 1px solid rgba(39, 248, 54, 0.35);
  border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(39, 248, 54, 0.10), rgba(255, 5, 199, 0.05) 70%, transparent);
  box-shadow: 0 0 30px -14px rgba(39, 248, 54, 0.8);
}
.claimbox p { margin: 2px 0 0; font-size: 13px; }

/* ========================================================== claiming a tag */

.claimpanel {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(16px, 2.4vw, 26px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius);
  background:
    linear-gradient(120deg, rgba(39, 248, 54, 0.07), rgba(90, 217, 255, 0.04) 55%, transparent),
    rgba(0, 0, 0, 0.32);
}
.claimpanel h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.claimpanel h3 i { color: var(--neon-green); }
.claimpanel.is-done { background: rgba(0, 0, 0, 0.3); }
.claimpanel p { max-width: 70ch; }

.claimpanel__row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.claimpanel__row .input { max-width: 260px; margin: 0; }

/* The code is the whole point of the panel, so it is the loudest thing in it. */
.claimcode {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0;
  padding: 12px 16px;
  border: 1px solid rgba(39, 248, 54, 0.4);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.45);
  width: fit-content;
}
.claimcode code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: clamp(20px, 3vw, 28px);
  letter-spacing: 0.14em;
  color: var(--neon-green);
  text-shadow: 0 0 18px rgba(39, 248, 54, 0.55);
}

.claimsteps { margin: 0 0 12px; padding-left: 20px; color: var(--text-dim); font-size: 14px; }
.claimsteps li { margin-bottom: 5px; }

.claimpanel__hint  { font-size: 13px; color: var(--text-faint); margin-top: 12px; }
.claimpanel__error { font-size: 14px; color: #ff9a9a; margin-top: 12px; }
.claimpanel__warn  {
  font-size: 13px; color: var(--amber);
  display: flex; align-items: flex-start; gap: 8px; margin-top: 12px;
}

/* ======================================================= profile and vault */

/* A claimed artist is shown under their ezmuze name; the tick says the person
   behind it proved the gamertag is theirs. */
.artisttile { position: relative; }
.artisttile__claimed {
  position: absolute;
  top: 12px; right: 14px;
  font-size: 12px;
  color: var(--neon-green);
  filter: drop-shadow(0 0 6px rgba(39, 248, 54, 0.8));
}

.artisthead__gamertag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-faint);
  margin: 0 0 10px;
}
.artisthead__gamertag i { color: var(--neon-green); }

.artisthead__bio {
  max-width: 70ch;
  margin: 0 0 12px;
  color: var(--text-dim);
  white-space: pre-wrap;      /* keep the line breaks people type */
}

.claimline__hint { color: var(--text-faint); font-size: 13px; }
.claimline__hint i { color: var(--text-faint); }

/* ------------------------------------------------------------ edit panel */

.editprofile {
  max-width: var(--page);
  margin: 0 auto 16px;
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.32);
}
.editprofile h3 { margin-bottom: 14px; }

.editprofile__pic {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.editprofile__hint { font-size: 12px; color: var(--text-faint); margin: 8px 0 0; }
.editprofile__error { font-size: 14px; color: #ff9a9a; margin-top: 12px; }

.editprofile__bio { display: block; position: relative; margin-bottom: 14px; }
.editprofile__bio > span:first-child {
  display: block; font-size: 12px; opacity: 0.75; margin-bottom: 4px;
}
.editprofile__bio textarea {
  width: 100%; min-height: 96px; resize: vertical;
  font-family: inherit; font-size: 14px; line-height: 1.5;
}
.editprofile__count {
  position: absolute; right: 10px; bottom: 8px;
  font-size: 11px; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* ================================================== shared cloud songs */

.artisttile__meta { font-size: 11px; color: var(--text-faint); }

.sharedlist { max-width: var(--page); margin: clamp(20px, 3vw, 32px) auto 0; }
.sharedlist h3 { margin-bottom: 4px; }
.sharedlist__note { font-size: 13px; color: var(--text-faint); margin: 0 0 10px; max-width: 70ch; }

/* A project, not a recording: no hover-to-play, no pointer, and the row says
   what it is rather than offering a play button that would do nothing. */
.track.is-notplayable { cursor: default; opacity: 0.82; }
.track.is-notplayable:hover { background: transparent; }
.track.is-notplayable .track__num i { color: var(--neon-violet); font-size: 12px; }
.track.is-notplayable .track__plays {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 2px 8px;
}

/* ============================================== profile tabs and file lists */

.tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  max-width: var(--page);
  margin: clamp(16px, 2.5vw, 28px) auto 0;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.tabs__tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 14px;
  padding: 10px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.tabs__tab i { opacity: 0.75; margin-right: 4px; }
.tabs__tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.tabs__tab.is-active {
  color: var(--text);
  border-bottom-color: var(--neon-green);
}
.tabs__tab.is-active i { opacity: 1; color: var(--neon-green); }

.tabs__panel { max-width: var(--page); margin: 0 auto; }

.profilesection { margin: clamp(20px, 3vw, 32px) 0; }
.profilesection > h3 { margin-bottom: 6px; }

.productgrid { display: flex; flex-wrap: wrap; gap: 16px; }

/* ------------------------------------------------------------- file lists */

.cloudgroup { margin-bottom: clamp(24px, 3.5vw, 40px); }
.cloudgroup > h3 { margin-bottom: 4px; }
.cloudgroup__count {
  font-size: 12px;
  color: var(--text-faint);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
  vertical-align: middle;
}
.cloudgroup__note {
  font-size: 13px;
  color: var(--text-faint);
  margin: 0 0 12px;
  max-width: 76ch;
}

.filelist { list-style: none; margin: 0; padding: 0; }

.filerow {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.filerow:hover { background: rgba(255, 255, 255, 0.03); }

.filerow__main {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  min-height: 44px;
}

.filerow__play {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  cursor: pointer;
  font-size: 11px;
  display: grid; place-items: center;
}
.filerow__play:hover { background: var(--neon-green); color: #04140a; border-color: transparent; }

.filerow__name {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}
.filerow__name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filerow__name > i { font-size: 10px; color: var(--text-faint); flex: none; width: 10px; }
.filerow__name--static { cursor: default; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filerow__icon { color: var(--neon-violet); font-size: 12px; margin-right: 2px; }

.filerow__rename { flex: 1 1 auto; min-width: 0; font-size: 14px; padding: 4px 8px; }

.filerow__facts {
  display: flex;
  gap: 10px;
  flex: none;
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.filerow__actions { display: flex; gap: 6px; flex: none; flex-wrap: wrap; }

.btn--small { font-size: 12px; padding: 5px 10px; }
.btn--danger {
  border-color: rgba(255, 120, 120, 0.5);
  color: #ffb3b3;
  background: rgba(255, 70, 70, 0.10);
}
.btn--danger:hover { background: rgba(255, 70, 70, 0.22); color: #fff; }

.studiolink i { font-size: 10px; }

/* ----------------------------------------------------------- the expansion */

.filerow__detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 24px;
  margin: 0;
  padding: 4px 10px 16px 32px;
}
.filerow__detail > div { min-width: 0; }
.filerow__detail dt {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 2px;
}
.filerow__detail dd { margin: 0; font-size: 13px; color: var(--text-dim); }
.filerow__detail .filerow__uid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.filerow__blurb { grid-column: 1 / -1; }
.filerow__blurb dd { white-space: pre-wrap; }

@media (max-width: 720px) {
  /* The actions wrap under the name rather than squeezing it to nothing. */
  .filerow__main { flex-wrap: wrap; row-gap: 8px; }
  .filerow__name, .filerow__name--static, .filerow__rename { flex: 1 1 100%; }
  .filerow__actions { flex: 1 1 100%; }
  .filerow__detail { padding-left: 10px; }
  .tabs { gap: 0; }
  .tabs__tab { padding: 10px 12px; font-size: 13px; }
}

.filerow__formats { grid-column: 1 / -1; }
.filerow__formats dd { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-dim);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

/* --------------------------------------------------- which studio to open */

.buildpick { border: 0; margin: 0 0 16px; padding: 0; }
.buildpick legend { font-size: 12px; opacity: 0.75; padding: 0; margin-bottom: 4px; }
.buildpick .editprofile__hint { margin: 0 0 8px; }

.buildpick__opt {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius);
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.buildpick__opt:hover { background: rgba(255, 255, 255, 0.04); }
.buildpick__opt.is-on { border-color: var(--neon-green); background: rgba(39, 248, 54, 0.06); }
.buildpick__opt input { accent-color: var(--neon-green); }
.buildpick__opt span { font-size: 14px; }
.buildpick__opt small { font-size: 12px; color: var(--text-faint); margin-left: auto; }