@charset "UTF-8";
/* Artwork One — the base: fonts, tokens, the ground, the blurred cover behind every screen.
   The selectors keep the theme's names (body#artwork, the same classes) so the design's rules
   port one to one; there is no Bootstrap and no inherited theme underneath any more. */
:root {
  /* ground & ink (spec §3.1) */
  --ground:#0a0c0e;
  --ground-deep:#080a0c;
  --card-flat:#141414;
  --ink:#ffffff;
  --ink-1:#f2f3f5;
  --ink-2:#e4e7ea;
  --ink-3:#c2c8cd;
  --ink-muted:#a7adb3;
  --ink-dim:#8c9298;
  --ink-faint:#71777d;
  /* glass (spec §3.2) */
  --glass-1-fill:rgba(8,10,13,.42);
  --glass-1-blur:30px;
  --glass-1-border:rgba(255,255,255,.07);
  --rail-fill:rgba(8,10,13,.42);
  --wash-opacity:.9;
  --wash-saturate:1.6;
  /* Volumio ships its source icons as white glyphs: on paper they have to turn over */
  --icon-invert:0;
  /* how much of the ground sampled from the cover the scrim carries */
  --art-mix-1:58%;
  --art-mix-2:86%;
  --glass-2-fill:rgba(255,255,255,.10);
  --glass-2-border:rgba(255,255,255,.13);
  --glass-2-hover:rgba(255,255,255,.16);
  --glass-3-fill:rgba(0,0,0,.28);
  --glass-3-blur:34px;
  --glass-3-border:rgba(255,255,255,.14);
  --hairline:rgba(255,255,255,.14);
  --hairline-soft:rgba(255,255,255,.08);
  /* Overlay scale (the theme's white veils, from barely-there to prominent). These carry the
     polarity of the interface: in a light theme they become dark veils on a light ground, so
     every surface, hover and hairline in the theme is written in terms of these, never as a
     literal rgba(255,255,255,…). */
  --fill-04:rgba(255,255,255,.04);
  --fill-05:rgba(255,255,255,.05);
  --fill-06:rgba(255,255,255,.06);
  --fill-07:rgba(255,255,255,.07);
  --fill-08:rgba(255,255,255,.08);
  --fill-09:rgba(255,255,255,.09);
  --fill-10:rgba(255,255,255,.10);
  --fill-11:rgba(255,255,255,.11);
  --fill-12:rgba(255,255,255,.12);
  --fill-13:rgba(255,255,255,.13);
  --fill-14:rgba(255,255,255,.14);
  --fill-16:rgba(255,255,255,.16);
  --fill-18:rgba(255,255,255,.18);
  --fill-20:rgba(255,255,255,.20);
  --fill-30:rgba(255,255,255,.30);
  /* the ground seen through a veil: scrims and the darkening under sticky bars */
  --shade-28:rgba(0,0,0,.28);
  --shade-40:rgba(0,0,0,.40);
  --shade-50:rgba(0,0,0,.50);
  --shade-55:rgba(0,0,0,.55);
  --shade-60:rgba(0,0,0,.60);
  --shade-80:rgba(0,0,0,.80);
  --shade-90:rgba(0,0,0,.90);
  /* text that sits on an ink-coloured surface (the play button's glyph, an active pill) */
  --on-ink:#0d0e10;
  /* the veils the artwork is seen through: the full-frame scrim, the tint under a sticky head,
     and the bars (mini player, side panels) */
  --art-veil-1:rgba(6,10,13,.40);
  --art-veil-2:rgba(6,10,13,.72);
  --art-veil-3:rgba(6,10,13,.94);
  --head-tint-1:rgba(0,0,0,.50);
  --head-tint-2:rgba(0,0,0,.36);
  --bar-fill:rgba(8,10,13,.55);
  --bar-solid:rgba(8,10,13,.86);
  --bar-veil:rgba(8,10,13,.45);
  /* the album page's own backdrop, a shade lighter than the full-frame scrim */
  --cover-veil-1:rgba(8,10,12,.55);
  --cover-veil-2:rgba(8,10,12,.86);
  /* panels that float over the page (the queue, the sheets) and the scrim behind them */
  --panel-fill:rgba(13,15,18,.86);
  --panel-deep:rgba(0,0,0,.9);
  --panel-sheet:rgba(13,15,18,.92);
  --scrim-page:rgba(5,6,8,.5);
  --menu-fill:rgba(255,255,255,.09);
  --menu-bright:.72;
  /* the row that plays, and the row under the pointer */
  --row-fill:rgba(255,255,255,.12);
  --row-hover:rgba(255,255,255,.07);
  --warn-ink:#e8c76a;
  --warn-wash:rgba(232,199,106,.14);
  --warn-line:rgba(232,199,106,.30);
  --shade-05:rgba(0,0,0,.05);
  --err-line:rgba(224,69,58,.45);
  --err-wash:rgba(224,69,58,.12);
  --err-deep-soft:rgba(176,30,33,.6);
  /* the steps between the named inks: the ramp the components actually reach for */
  --ink-25:#d6dade;
  --ink-35:#cfd4d8;
  --ink-45:#b6bcc2;
  --ink-55:#a2a8ae;
  --ink-65:#9aa0a8;
  --ink-75:#5f6669;
  /* signal (spec §3.3) */
  --ok:#7de3b4;
  --ok-alt:#5fd35f;
  --warn:#e07b2c;
  --err:#e0453a;
  --err-soft:#ff8f8f;
  --err-deep:#b01e21;
  /* the bit-perfect chip: a wash, a line and its own ink */
  --ok-wash:rgba(125,227,180,.10);
  --ok-line:rgba(125,227,180,.26);
  --ok-ink:#a8ecce;
  /* shadows: a dark theme can drop a hard shadow, a light one cannot */
  --shadow-soft:rgba(0,0,0,.55);
  --shadow-strong:rgba(0,0,0,.8);
  --shadow-deep:rgba(0,0,0,.9);
  --shadow-cover:0 44px 90px -24px rgba(0,0,0,.9);
  /* quality badges (handoff 8a): only Hi-Res and DSD carry colour; lossless is ink, lossy muted */
  --q-hires-ink:#8ab6ff;
  --q-hires-wash:rgba(92,140,255,.16);
  --q-hires-line:rgba(138,182,255,.32);
  --q-dsd-ink:#c9a0ff;
  --q-dsd-wash:rgba(201,160,255,.14);
  --q-dsd-line:rgba(201,160,255,.30);
  --q-lossless-num:#e4e7ea;
  --q-lossless-unit:#c2c8cd;
  --q-lossless-wash:rgba(255,255,255,.10);
  --q-lossless-line:rgba(255,255,255,.13);
  --q-lossy-ink:#a7adb3;
  --q-lossy-wash:rgba(255,255,255,.06);
  --q-lossy-line:rgba(255,255,255,.10);
  --q-radio-ink:#e4e7ea;
  --q-radio-line:rgba(255,255,255,.26);
  /* a plain surface a step off the ground (inherited panels that are not glass) */
  --surface-2:#333333;
  /* radius / space / rail (spec §3.4) */
  --r-frame:18px;
  --r-panel:16px;
  --r-card:14px;
  --r-cover:6px;
  --r-control:12px;
  --r-pill:999px;
  /* fluid sizes: mockup values are the upper bound (1440px frame), they scale down with the viewport
     (rail 76 → 56, screen padding 52 → 16, mini player 98 → 76, display type 70 → 34) */
  --rail-w-closed: clamp(56px, 4.6vw, 76px);
  --rail-w-open: clamp(200px, 15vw, 232px);
  --rail-w: var(--rail-w-closed);
  --rail-item: clamp(40px, 3vw, 46px);
  --gap-shelf:22px;
  --gap-row:2px;
  --pad-screen: clamp(16px, 3.6vw, 52px);
  --pad-top: clamp(18px, 3.4vh, 34px);
  --mini-h: clamp(76px, 10.5vh, 98px);
  --t-display: clamp(34px, 4.86vw, 70px);
  --t-h1: clamp(28px, 3.2vw, 46px);
  --t-h1-lg: clamp(30px, 3.6vw, 52px);
  --t-h1-xl: clamp(34px, 4.4vw, 64px);
}

/* sampled palette ground (spec §4.3).
   NOTE: @property registration (for smooth crossfade interpolation, §7.1) is
   deferred to Plan 2 — the legacy gulp-csso minifier cannot parse @property,
   so it must be injected outside the SCSS→CSSO pipeline when we add palette
   sampling. Until then these are plain (snap-on-change) custom properties. */
:root {
  --art-1:#1a1c1e;
  --art-2:#141618;
}

/* ============================================================
   Light theme (paper under the cover). The artwork stays where it is — blurred, behind
   everything — but the veil over it turns to paper, the veils that were white become ink and
   the ink becomes near-black. A light ground needs a heavier veil than a dark one: white type
   on a bright cover fails long before dark type on a pale one does, so --art-veil-* carries
   more weight here than its dark counterpart.
   ============================================================ */
:root[data-aw-theme=light] {
  /* Daylight — the light theme from the design handoff. Same geometry, same type, same motion
     as the dark build; only the colour layer turns over. The ground is warm paper, never white,
     and the shadows are warm with it. Glass stops being a dark wash and becomes a white one.
     Values are the handoff's, verified for contrast against #faf8f5. */
  --ground:#faf8f5;
  --ground-deep:#faf8f5;
  --card-flat:#fcfbf9;
  --surface-2:#e9e6e0;
  /* ink: nothing lighter than #676d74 may carry text (4.5:1 is the floor here) */
  --ink:#14161a;
  --ink-1:#14161a;
  --ink-2:#2c3036;
  --ink-3:#555c65;
  --ink-muted:#555c65;
  --ink-dim:#555c65;
  --ink-faint:#596069; /* the floor, measured against the live wash, not bare paper */
  --ink-25:#2c3036;
  --ink-35:#3d434a;
  --ink-45:#5e646c;
  --ink-55:#5e646c;
  --ink-65:#596069;
  --ink-75:#596069;
  --on-ink:#faf8f5;
  /* glass, three tiers: the rail and the bars, then pills and chips, then the drawers */
  --glass-1-fill:rgba(255,255,255,.60);
  --glass-1-border:rgba(20,22,26,.08);
  --glass-2-fill:rgba(255,255,255,.82);
  --glass-2-border:rgba(20,22,26,.10);
  --glass-2-hover:rgba(255,255,255,.92);
  --glass-3-fill:rgba(252,251,249,.90);
  --glass-3-border:rgba(20,22,26,.10);
  --rail-fill:rgba(255,255,255,.60);
  --bar-fill:rgba(255,255,255,.60);
  --bar-solid:rgba(252,251,249,.90);
  --bar-veil:rgba(255,255,255,.72);
  --panel-fill:rgba(252,251,249,.90);
  --panel-deep:rgba(252,251,249,.96);
  --panel-sheet:rgba(252,251,249,.97);
  --scrim-page:rgba(24,20,14,.28);
  --menu-fill:rgba(252,251,249,.88);
  --menu-bright:1.04;
  /* on paper no row carries a panel of its own, the playing one included: the bars and the bold
     title mark it. Only the row under the pointer tints (the handoff's .055) */
  --row-fill:transparent;
  --row-hover:rgba(20,22,26,.055);
  --warn-ink:#8a6a12;
  --warn-wash:rgba(176,132,26,.12);
  --warn-line:rgba(176,132,26,.30);
  /* the tint ladder: hover .055, row .07, active .09, then the seek track and its buffer */
  --fill-04:rgba(20,22,26,.04);
  --fill-05:rgba(20,22,26,.05);
  --fill-06:rgba(20,22,26,.055);
  --fill-07:rgba(20,22,26,.06);
  --fill-08:rgba(20,22,26,.065);
  --fill-09:rgba(20,22,26,.07);
  --fill-10:rgba(20,22,26,.075);
  --fill-11:rgba(20,22,26,.08);
  --fill-12:rgba(20,22,26,.09);
  --fill-13:rgba(20,22,26,.095);
  --fill-14:rgba(20,22,26,.11);
  --fill-16:rgba(20,22,26,.12);
  --fill-18:rgba(20,22,26,.14);
  --fill-20:rgba(20,22,26,.16);
  --fill-30:rgba(20,22,26,.22);
  --hairline:rgba(20,22,26,.09);
  --hairline-soft:rgba(20,22,26,.07);
  --shade-05:rgba(20,22,26,.04);
  --shade-28:rgba(255,255,255,.60);
  --shade-40:rgba(255,255,255,.70);
  --shade-50:rgba(255,255,255,.78);
  --shade-55:rgba(255,255,255,.82);
  --shade-60:rgba(255,255,255,.86);
  --shade-80:rgba(250,248,245,.94);
  --shade-90:rgba(250,248,245,.97);
  /* the scrim runs up to paper instead of down to black */
  /* the cover is allowed further forward than the handoff's .62/.90: the wash carries the
     record, and the ground stays paper where the text lives */
  --art-veil-1:rgba(250,248,245,.62);
  --art-veil-2:rgba(250,248,245,.88);
  --art-veil-3:rgba(250,248,245,.98);
  --cover-veil-1:rgba(250,248,245,.64);
  --cover-veil-2:rgba(250,248,245,.90);
  --head-tint-1:rgba(250,248,245,.90);
  --head-tint-2:rgba(250,248,245,.62);
  /* the cover itself steps back: it is a wash behind the text, not a competitor */
  --wash-opacity:.72;
  --wash-saturate:1.55;
  --icon-invert:1;
  /* paper first: the cover tints the ground, it does not set it */
  --art-mix-1:66%;
  --art-mix-2:80%;
  /* semantic: the hues darken for a light ground, they do not change meaning */
  --ok:#1f9b6b;
  --ok-wash:rgba(31,155,107,.10);
  --ok-line:rgba(31,155,107,.30);
  --ok-ink:#15704d;
  --err:#a8231c;
  --err-soft:#a8231c;
  --err-deep:#8e1b1e;
  --err-wash:rgba(179,38,30,.07);
  --err-line:rgba(179,38,30,.30);
  --err-deep-soft:rgba(179,38,30,.10);
  /* shadows stay warm — a neutral black shadow on paper reads as dirt */
  --shadow-soft:rgba(24,20,14,.28);
  --shadow-strong:rgba(24,20,14,.50);
  --shadow-deep:rgba(24,20,14,.55);
  --shadow-cover:0 44px 90px -24px rgba(24,20,14,.55);
  --q-hires-ink:#1d4ed8;
  --q-hires-wash:rgba(29,78,216,.08);
  --q-hires-line:rgba(29,78,216,.22);
  --q-dsd-ink:#6b3fa0;
  --q-dsd-wash:rgba(107,63,160,.08);
  --q-dsd-line:rgba(107,63,160,.24);
  --q-lossless-num:#14161a;
  --q-lossless-unit:#5e646c;
  --q-lossless-wash:rgba(255,255,255,.70);
  --q-lossless-line:rgba(20,22,26,.12);
  --q-lossy-ink:#5e646c;
  --q-lossy-wash:rgba(20,22,26,.04);
  --q-lossy-line:rgba(20,22,26,.10);
  --q-radio-ink:#14161a;
  --q-radio-line:rgba(20,22,26,.26);
  --art-1:#fbf9f6;
  --art-2:#f6f3ef;
  --aw-band:#faf8f5;
}

@media (prefers-color-scheme: light) {
  /* "System" follows the device. Before the script runs there is no attribute yet, and the page
     stays dark: dark is the default, and a kiosk display that knows no dark mode must not flash
     paper at every start */
  :root[data-aw-theme=system] {
    /* Daylight — the light theme from the design handoff. Same geometry, same type, same motion
       as the dark build; only the colour layer turns over. The ground is warm paper, never white,
       and the shadows are warm with it. Glass stops being a dark wash and becomes a white one.
       Values are the handoff's, verified for contrast against #faf8f5. */
    --ground:#faf8f5;
    --ground-deep:#faf8f5;
    --card-flat:#fcfbf9;
    --surface-2:#e9e6e0;
    /* ink: nothing lighter than #676d74 may carry text (4.5:1 is the floor here) */
    --ink:#14161a;
    --ink-1:#14161a;
    --ink-2:#2c3036;
    --ink-3:#555c65;
    --ink-muted:#555c65;
    --ink-dim:#555c65;
    --ink-faint:#596069; /* the floor, measured against the live wash, not bare paper */
    --ink-25:#2c3036;
    --ink-35:#3d434a;
    --ink-45:#5e646c;
    --ink-55:#5e646c;
    --ink-65:#596069;
    --ink-75:#596069;
    --on-ink:#faf8f5;
    /* glass, three tiers: the rail and the bars, then pills and chips, then the drawers */
    --glass-1-fill:rgba(255,255,255,.60);
    --glass-1-border:rgba(20,22,26,.08);
    --glass-2-fill:rgba(255,255,255,.82);
    --glass-2-border:rgba(20,22,26,.10);
    --glass-2-hover:rgba(255,255,255,.92);
    --glass-3-fill:rgba(252,251,249,.90);
    --glass-3-border:rgba(20,22,26,.10);
    --rail-fill:rgba(255,255,255,.60);
    --bar-fill:rgba(255,255,255,.60);
    --bar-solid:rgba(252,251,249,.90);
    --bar-veil:rgba(255,255,255,.72);
    --panel-fill:rgba(252,251,249,.90);
    --panel-deep:rgba(252,251,249,.96);
    --panel-sheet:rgba(252,251,249,.97);
    --scrim-page:rgba(24,20,14,.28);
    --menu-fill:rgba(252,251,249,.88);
    --menu-bright:1.04;
    /* on paper no row carries a panel of its own, the playing one included: the bars and the bold
       title mark it. Only the row under the pointer tints (the handoff's .055) */
    --row-fill:transparent;
    --row-hover:rgba(20,22,26,.055);
    --warn-ink:#8a6a12;
    --warn-wash:rgba(176,132,26,.12);
    --warn-line:rgba(176,132,26,.30);
    /* the tint ladder: hover .055, row .07, active .09, then the seek track and its buffer */
    --fill-04:rgba(20,22,26,.04);
    --fill-05:rgba(20,22,26,.05);
    --fill-06:rgba(20,22,26,.055);
    --fill-07:rgba(20,22,26,.06);
    --fill-08:rgba(20,22,26,.065);
    --fill-09:rgba(20,22,26,.07);
    --fill-10:rgba(20,22,26,.075);
    --fill-11:rgba(20,22,26,.08);
    --fill-12:rgba(20,22,26,.09);
    --fill-13:rgba(20,22,26,.095);
    --fill-14:rgba(20,22,26,.11);
    --fill-16:rgba(20,22,26,.12);
    --fill-18:rgba(20,22,26,.14);
    --fill-20:rgba(20,22,26,.16);
    --fill-30:rgba(20,22,26,.22);
    --hairline:rgba(20,22,26,.09);
    --hairline-soft:rgba(20,22,26,.07);
    --shade-05:rgba(20,22,26,.04);
    --shade-28:rgba(255,255,255,.60);
    --shade-40:rgba(255,255,255,.70);
    --shade-50:rgba(255,255,255,.78);
    --shade-55:rgba(255,255,255,.82);
    --shade-60:rgba(255,255,255,.86);
    --shade-80:rgba(250,248,245,.94);
    --shade-90:rgba(250,248,245,.97);
    /* the scrim runs up to paper instead of down to black */
    /* the cover is allowed further forward than the handoff's .62/.90: the wash carries the
       record, and the ground stays paper where the text lives */
    --art-veil-1:rgba(250,248,245,.62);
    --art-veil-2:rgba(250,248,245,.88);
    --art-veil-3:rgba(250,248,245,.98);
    --cover-veil-1:rgba(250,248,245,.64);
    --cover-veil-2:rgba(250,248,245,.90);
    --head-tint-1:rgba(250,248,245,.90);
    --head-tint-2:rgba(250,248,245,.62);
    /* the cover itself steps back: it is a wash behind the text, not a competitor */
    --wash-opacity:.72;
    --wash-saturate:1.55;
    --icon-invert:1;
    /* paper first: the cover tints the ground, it does not set it */
    --art-mix-1:66%;
    --art-mix-2:80%;
    /* semantic: the hues darken for a light ground, they do not change meaning */
    --ok:#1f9b6b;
    --ok-wash:rgba(31,155,107,.10);
    --ok-line:rgba(31,155,107,.30);
    --ok-ink:#15704d;
    --err:#a8231c;
    --err-soft:#a8231c;
    --err-deep:#8e1b1e;
    --err-wash:rgba(179,38,30,.07);
    --err-line:rgba(179,38,30,.30);
    --err-deep-soft:rgba(179,38,30,.10);
    /* shadows stay warm — a neutral black shadow on paper reads as dirt */
    --shadow-soft:rgba(24,20,14,.28);
    --shadow-strong:rgba(24,20,14,.50);
    --shadow-deep:rgba(24,20,14,.55);
    --shadow-cover:0 44px 90px -24px rgba(24,20,14,.55);
    --q-hires-ink:#1d4ed8;
    --q-hires-wash:rgba(29,78,216,.08);
    --q-hires-line:rgba(29,78,216,.22);
    --q-dsd-ink:#6b3fa0;
    --q-dsd-wash:rgba(107,63,160,.08);
    --q-dsd-line:rgba(107,63,160,.24);
    --q-lossless-num:#14161a;
    --q-lossless-unit:#5e646c;
    --q-lossless-wash:rgba(255,255,255,.70);
    --q-lossless-line:rgba(20,22,26,.12);
    --q-lossy-ink:#5e646c;
    --q-lossy-wash:rgba(20,22,26,.04);
    --q-lossy-line:rgba(20,22,26,.10);
    --q-radio-ink:#14161a;
    --q-radio-line:rgba(20,22,26,.26);
    --art-1:#fbf9f6;
    --art-2:#f6f3ef;
    --aw-band:#faf8f5;
  }
}
/* ---- type ---- */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/d6bfad4e-2ced-4203-b9fa-33c80afc1fc7.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/214b6e5d-60ab-4013-af8b-697b2594b903.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/328418ef-30e6-42e8-bc2a-08ed5e57c158.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/6e58b24d-247a-4191-99b3-1c5d3f871f16.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/7ba07226-151a-4c6b-8386-4f0a0fcf316e.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/34dd34e9-af61-45d9-a203-b67fa953467c.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/98261349-fbac-479f-b273-8efa066b3940.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/bd013266-855b-4d4c-91b5-3cf04809a886.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/material-symbols-rounded.woff") format("woff");
}
:root {
  --font-ui: 'Figtree', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
}

.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  display: inline-block;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

.mono {
  font-family: var(--font-mono);
}

/* ---- reset ---- */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body, #root {
  height: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.42857;
  color: var(--ink-1);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

h1, h2, h3, h4, p {
  margin: 0;
  font-weight: inherit;
}

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

img {
  border: 0;
  vertical-align: middle;
} /* the inherited frame aligns inline images to the middle */
a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the inherited frame's label: a 5px foot under every label the theme does not reset */
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
}

/* ---- the full-frame blurred cover behind every screen (spec §4) ---- */
.art-stack {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: var(--ground);
}

.art-bg {
  position: absolute;
  width: 150%;
  height: 150%;
  left: -25%;
  top: -25%;
  object-fit: cover;
  filter: blur(90px) saturate(var(--wash-saturate));
  -webkit-filter: blur(90px) saturate(var(--wash-saturate));
  opacity: var(--wash-opacity);
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.art-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in oklch, var(--art-1) var(--art-mix-1), var(--art-veil-1)) 0%, color-mix(in oklch, var(--art-2) var(--art-mix-2), var(--art-veil-2)) 50%, var(--art-veil-3) 100%);
}

/* the baked wash carries its blur and saturation in its pixels */
.art-bg--baked {
  filter: none;
  -webkit-filter: none;
  image-rendering: auto;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .art-bg {
    filter: none;
    -webkit-filter: none;
    opacity: 0.35;
  }
  .art-scrim {
    background: var(--bar-solid);
  }
}
/* the page beneath the Now Playing sheet: kept as it is, hidden and out of the flow while the sheet is up */
.aw-under {
  display: contents;
}

.aw-under--covered {
  visibility: hidden;
}

.aw-under--covered > * {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  pointer-events: none;
}

/* ---- the shell: a fixed rail, the content beside it, the mini player under it ---- */
#layout-container {
  position: relative;
  z-index: 1;
  height: 100%;
}

#contentWrapper {
  position: relative;
  height: 100%;
  margin-left: var(--rail-w);
  width: calc(100% - var(--rail-w));
}

#content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--mini-h);
}

#content.playback {
  padding-bottom: 0;
  overflow: hidden;
}

/* the frame's scrollbars (artwork-style.scss): 10px, dark track, grey thumb; square on the browse scroller */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background: #151515;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #999;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

#browseTablesWrapper::-webkit-scrollbar-thumb, #browseTablesWrapper::-webkit-scrollbar-track {
  border-radius: 0;
}

#content::-webkit-scrollbar {
  width: 8px;
}

#content::-webkit-scrollbar-thumb {
  background: var(--fill-14);
  border-radius: 4px;
}

/* ---- quality badges (handoff 8a) ---- */
body#artwork .np-chip.aw-q--hires, body#artwork .aw-q.aw-q--hires {
  background: var(--q-hires-wash);
  border-color: var(--q-hires-line);
}

body#artwork .np-chip.aw-q--hires .np-chip-num, body#artwork .np-chip.aw-q--hires .np-chip-unit, body#artwork .aw-q.aw-q--hires .aw-q__num, body#artwork .aw-q.aw-q--hires .aw-q__unit {
  color: var(--q-hires-ink);
}

body#artwork .np-chip.aw-q--dsd, body#artwork .aw-q.aw-q--dsd {
  background: var(--q-dsd-wash);
  border-color: var(--q-dsd-line);
}

body#artwork .np-chip.aw-q--dsd .np-chip-num, body#artwork .np-chip.aw-q--dsd .np-chip-unit, body#artwork .aw-q.aw-q--dsd .aw-q__num, body#artwork .aw-q.aw-q--dsd .aw-q__unit {
  color: var(--q-dsd-ink);
}

body#artwork .np-chip.aw-q--lossless {
  background: var(--q-lossless-wash);
  border-color: var(--q-lossless-line);
}

body#artwork .np-chip.aw-q--lossless .np-chip-num {
  color: var(--q-lossless-num);
}

body#artwork .np-chip.aw-q--lossless .np-chip-unit {
  color: var(--q-lossless-unit);
}

body#artwork .np-chip.aw-q--lossy {
  background: var(--q-lossy-wash);
  border-color: var(--q-lossy-line);
}

body#artwork .np-chip.aw-q--lossy .np-chip-num, body#artwork .np-chip.aw-q--lossy .np-chip-unit, body#artwork .np-chip.aw-q--lossy .np-chip-val {
  color: var(--q-lossy-ink);
}

body#artwork .np-chip.aw-q--radio {
  background: transparent;
  border: 1px dashed var(--q-radio-line);
}
body#artwork .np-chip.aw-q--radio .np-chip-num, body#artwork .np-chip.aw-q--radio .np-chip-unit, body#artwork .np-chip.aw-q--radio .np-chip-val {
  color: var(--q-radio-ink);
}

body#artwork #footer-content .track-info-rates.aw-q--hires {
  color: var(--q-hires-ink);
}

body#artwork #footer-content .track-info-rates.aw-q--dsd {
  color: var(--q-dsd-ink);
}

@media (prefers-reduced-motion: reduce) {
  body#artwork .art-bg, body#artwork .art-scrim {
    transition: none;
  }
}
/* the shared spinner (components/Spinner.tsx): currentColor ring, one quarter open */
@keyframes aw-spinner {
  to {
    transform: rotate(360deg);
  }
}
body#artwork .aw-spinner {
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  width: var(--aw-spinner, 16px);
  height: var(--aw-spinner, 16px);
  border: max(2px, var(--aw-spinner, 16px) / 9) solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: middle;
  animation: aw-spinner 0.8s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
} /* its own layer: turns without subpixel shimmer (iOS) */
@media (prefers-reduced-motion: reduce) {
  body#artwork .aw-spinner {
    animation-duration: 2.4s;
  }
}
/* the interface's one tooltip (core/tooltips.ts): title, and why, for the icon that is not obvious */
body#artwork .aw-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000001;
  max-width: 260px;
  padding: 8px 11px;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  background: var(--menu-fill);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid var(--fill-16);
  box-shadow: 0 12px 30px -14px var(--shadow-deep);
  color: var(--ink-1);
}
body#artwork .aw-tip.is-on {
  opacity: 1;
}
body#artwork .aw-tip__title {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
body#artwork .aw-tip__why {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-3);
}

@media (hover: none) {
  body#artwork .aw-tip {
    transition: none;
  }
}
/* a cut-short title sliding across once (core/marquee.ts): the ellipsis gives way while it runs */
body#artwork .aw-marquee {
  text-overflow: clip !important;
}

body#artwork .aw-marquee__run {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
}
/* Artwork rail (spec §5.1): fixed glass over the cover; icons only, or icons with labels (html.aw-rail-open). */
#main-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--rail-w);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(12px, 2.4vh, 22px) 0;
  background: var(--rail-fill);
  -webkit-backdrop-filter: blur(var(--glass-1-blur));
  backdrop-filter: blur(var(--glass-1-blur));
  border-right: 1px solid var(--glass-1-border);
  overflow: hidden;
  transition: width 0.22s ease;
}
#main-menu .brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  margin-bottom: clamp(10px, 2vh, 18px);
}
#main-menu .brand {
  width: clamp(30px, 2.5vw, 36px);
  height: clamp(30px, 2.5vw, 36px);
  flex: none;
  border-radius: 9px;
  border: 1.5px solid var(--ink-1);
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 800;
  color: var(--ink-1);
  cursor: pointer;
}
#main-menu .brand:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}
#main-menu .main-menu-list, #main-menu .main-menu-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}
#main-menu .main-menu-list {
  flex: 1 1 auto;
}
#main-menu .main-menu-bottom {
  flex: none;
  margin-top: auto;
}
#main-menu li {
  width: 100%;
  display: flex;
  justify-content: center;
}
#main-menu a {
  display: grid;
  place-items: center;
  width: var(--rail-item);
  height: var(--rail-item);
  border-radius: 13px;
  cursor: pointer;
  color: var(--ink-65);
  transition: background 0.18s, color 0.18s;
}
#main-menu a .material-symbols-rounded {
  font-size: clamp(20px, 1.6vw, 23px);
}
#main-menu a:hover {
  background: var(--fill-08);
  color: var(--ink-2);
}
#main-menu a.active {
  background: var(--fill-14);
  color: var(--ink-1);
}
#main-menu a:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}
#main-menu .rail__label {
  display: none;
}
#main-menu .rail__toggle {
  margin-top: 6px;
}

@supports not (backdrop-filter: blur(1px)) {
  body#artwork #main-menu {
    background: var(--bar-solid);
  }
}
/* labels: the rail widens (the page, the head and the mini player follow --rail-w); the icons keep
   their x — the column inset is the collapsed rail's own margin around an item — and each label
   runs after its icon in the same pill. Never on the phone, where the rail is the menu sheet. */
@media not all and (max-width: 700px) and (orientation: portrait) {
  html.aw-rail-open {
    --rail-w: var(--rail-w-open);
  }
  html.aw-rail-open #main-menu {
    align-items: stretch;
    padding-left: calc((var(--rail-w-closed) - var(--rail-item)) / 2);
    padding-right: calc((var(--rail-w-closed) - var(--rail-item)) / 2);
  }
  html.aw-rail-open #main-menu .brand-row {
    padding-left: calc((var(--rail-item) - clamp(30px, 2.5vw, 36px)) / 2);
  }
  html.aw-rail-open #main-menu li {
    justify-content: flex-start;
  }
  html.aw-rail-open #main-menu a {
    display: grid;
    grid-template-columns: var(--rail-item) minmax(0, 1fr);
    place-items: center start;
    width: 100%;
    padding-right: 12px;
  }
  html.aw-rail-open #main-menu a .material-symbols-rounded {
    justify-self: center;
  }
  html.aw-rail-open #main-menu .rail__label {
    display: block;
    min-width: 0;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html.aw-rail-open #main-menu .rail__label--brand {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink-1);
  }
  html.aw-rail-open #main-menu a.active .rail__label {
    font-weight: 600;
  }
}
@media (prefers-reduced-motion: reduce) {
  #main-menu {
    transition: none;
  }
}
/* the library is being indexed (Volumio's message points at "the icon on bottom left"): a spinning ring above Zones */
body#artwork #main-menu .rail__scan a {
  color: var(--ink-1);
}

body#artwork #main-menu .rail__scan-icon {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  justify-self: center;
}
/* The shared controls: the seek bar, the transport, the volume strip, the glyph buttons. */
/* ---- seek bar (mockup 2a 2b 2e): one markup, three sizes ---- */
.artwork-seek {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.artwork-seek .seek-time {
  flex: none;
  font-size: 11px;
  letter-spacing: 0;
  color: var(--ink-muted);
}

.artwork-seek .seek-elapsed {
  color: var(--ink);
}

.artwork-seek .seek-duration {
  margin-left: auto;
}

.artwork-seek .seek-remaining {
  display: none;
}

.artwork-seek__hit {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.artwork-seek__hit:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 4px;
  border-radius: 4px;
}

.seek-track {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--fill-18);
}

.seek-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background: var(--ink-1);
}

.seek-handle {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--ink);
  pointer-events: none;
  box-shadow: 0 0 0 3px var(--fill-16), 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* ---- glyph buttons ---- */
.btn-link {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  color: var(--ink-2);
}
.btn-link:disabled {
  opacity: 0.4;
  cursor: default;
}
.btn-link:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---- transport (spec §5.8): shuffle · prev · play · next · repeat ---- */
#playerButtons {
  display: flex;
  align-items: center;
}

#playerButtons .playPause {
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--ground);
  border: 0;
  display: grid;
  place-items: center;
}
#playerButtons .playPause:hover {
  color: var(--ground);
}

/* ---- volume: speaker glyph + a thin track with an ink fill (mockup §5.10) ---- */
.volume-slider {
  display: flex;
  align-items: center;
  gap: 9px;
}
.volume-slider .button-mute {
  width: 26px;
  height: 26px;
  color: var(--ink-3);
  border-radius: var(--r-control);
}
.volume-slider .button-mute .material-symbols-rounded {
  font-size: 22px;
}
.volume-slider .button-mute:hover {
  color: var(--ink);
}
.volume-slider .button-mute.selected {
  color: var(--ink-muted);
}
.volume-slider input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 20px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  --aw-fill: 0%;
}
.volume-slider input[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ink) var(--aw-fill), var(--fill-20) var(--aw-fill));
}
.volume-slider input[type=range]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--fill-20);
}
.volume-slider input[type=range]::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--ink);
}
.volume-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--ink);
  border: 0;
  opacity: 0;
}
.volume-slider input[type=range]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
  border: 0;
  opacity: 0;
}
.volume-slider input[type=range]:focus-visible {
  outline: none;
}
.volume-slider input[type=range]:focus-visible::-webkit-slider-thumb {
  opacity: 1;
}
.volume-slider input[type=range]:focus-visible::-moz-range-thumb {
  opacity: 1;
}
.volume-slider input[type=range].disabled::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--ink-faint) var(--aw-fill), var(--fill-20) var(--aw-fill));
}
.volume-slider input[type=range]:disabled {
  cursor: default;
}
/* Artwork mini player (spec §5.10 / mockup): identity · transport + seek · volume, zone, queue. */
#footer-content {
  position: fixed;
  left: var(--rail-w);
  right: 0;
  bottom: 0;
  height: var(--mini-h);
  z-index: 3;
  padding: 0 clamp(12px, 1.95vw, 28px);
  background: var(--bar-fill);
  -webkit-backdrop-filter: blur(34px);
  backdrop-filter: blur(34px);
  border-top: 1px solid var(--hairline-soft);
  color: var(--ink-1);
  transition: transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
#footer-content.is-hidden {
  transform: translateY(100%);
  pointer-events: none;
}
#footer-content #player-bar {
  height: 100%;
}
#footer-content .artwork-mini {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, min(300px, 23%)) minmax(auto, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  row-gap: clamp(3px, (var(--mini-h) - 80px) / 2, 9px);
  column-gap: clamp(10px, 1.67vw, 24px);
}
#footer-content .mini-identity {
  grid-column: 1;
  grid-row: 1/3;
  align-self: center;
  min-width: 0;
}
#footer-content .mini-transport {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#footer-content .mini-transport #playerButtons {
  gap: clamp(4px, 1vw, 14px);
}
#footer-content .mini-transport .btn-link {
  color: var(--ink);
  padding: 6px;
}
#footer-content .mini-transport .btn-link .material-symbols-rounded {
  font-size: 28px;
}
#footer-content .mini-transport .btn-link:hover {
  color: var(--ink);
}
#footer-content .mini-transport .player-action-shuffle, #footer-content .mini-transport .repeat-button {
  color: var(--ink-65);
}
#footer-content .mini-transport .player-action-shuffle .material-symbols-rounded, #footer-content .mini-transport .repeat-button .material-symbols-rounded {
  font-size: 22px;
}
#footer-content .mini-transport .player-action-shuffle:hover, #footer-content .mini-transport .repeat-button:hover {
  color: var(--ink-2);
}
#footer-content .mini-transport .player-action-shuffle.active, #footer-content .mini-transport .repeat-button.active {
  color: var(--ink);
}
#footer-content .mini-transport .playPause {
  width: 46px;
  height: 46px;
  color: var(--ground);
}
#footer-content .mini-transport .playPause .material-symbols-rounded {
  font-size: 27px;
}
#footer-content .mini-transport .playPause:hover {
  color: var(--ground);
}
#footer-content .mini-right {
  grid-column: 3;
  grid-row: 1/3;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}
#footer-content .mini-volume {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: none;
}
#footer-content .mini-zone {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 18px;
  background: var(--fill-10);
  border: 1px solid var(--fill-12);
  color: var(--ink-2);
  cursor: pointer;
  max-width: 160px;
}
#footer-content .mini-zone .material-symbols-rounded {
  font-size: 19px;
  color: var(--ink-2);
}
#footer-content .mini-zone .mini-zone-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#footer-content .mini-zone:hover {
  background: var(--fill-16);
}
#footer-content .mini-queue {
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  height: 36px;
}
#footer-content .mini-queue .material-symbols-rounded {
  font-size: 24px;
}
#footer-content .mini-queue .mini-queue__count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 15.7px;
}
#footer-content .mini-queue:hover, #footer-content .mini-queue.selected {
  color: var(--ink);
}
#footer-content .mini-seek {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}
#footer-content {
  /* identity: 60px cover, three fixed lines centred on it */
}
#footer-content #trackInfo-compact {
  display: grid;
  grid-template-columns: 60px 1fr;
  grid-template-areas: "cover title" "cover artist" "cover rates";
  grid-template-rows: var(--mini-rows, 18px 15px 15px);
  align-content: center;
  align-items: center;
  column-gap: 14px;
  row-gap: var(--mini-line-gap, 4px);
  min-height: 60px;
  padding: 0;
  overflow-y: hidden;
  scrollbar-width: none;
}
#footer-content {
  /* the frame's own leftover: between 992 and 1199px the compact block gets 4px of padding */
}
@media (min-width: 992px) and (max-width: 1199px) {
  #footer-content #trackInfo-compact {
    padding: 4px;
  }
}
#footer-content .trackInfo-album-art-wrapper {
  grid-area: cover;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 5px;
}
#footer-content img.album-art {
  width: 60px;
  height: 60px;
  border-radius: 5px;
  object-fit: cover;
  cursor: pointer;
  display: block;
}
#footer-content #trackInfo-title {
  grid-area: title;
  max-width: 98%;
  font-size: 15px;
  font-weight: 600;
  line-height: 18px;
  color: var(--ink-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
#footer-content #trackInfo-artist-album {
  grid-area: artist;
  max-width: 98%;
  font-size: 13px;
  line-height: 15px;
  color: var(--ink-65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
#footer-content #trackInfo-artist-album #trackInfo-artist {
  font-size: 13px;
  line-height: 15px;
}
#footer-content .track-info-rates {
  grid-area: rates;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  height: 15px;
  line-height: 15px;
  overflow: hidden;
  white-space: nowrap;
}
#footer-content .track-info-rates .track-info-rate + .track-info-type::before {
  content: "·";
  margin-right: 6px;
}

@supports not (backdrop-filter: blur(1px)) {
  body#artwork #footer-content {
    background: var(--bar-solid);
  }
}
@media (max-width: 900px) {
  body#artwork #footer-content .mini-zone .mini-zone-name {
    display: none;
  }
  body#artwork #footer-content .mini-zone {
    padding: 0 11px;
  }
  body#artwork #footer-content .mini-volume {
    display: none;
  }
}
@media (max-width: 700px) {
  body#artwork #footer-content .mini-transport .repeat-button, body#artwork #footer-content .mini-transport .player-action-shuffle {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body#artwork #footer-content {
    transition: none;
  }
}
/* ============ Now Playing (spec §6.1) — the theme's rules, one to one ============ */
#np {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: clamp(20px, 4.9vh, 44px) var(--pad-screen) clamp(16px, 4.2vh, 38px);
  color: var(--ink-1);
}
#np #np-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
}
#np #np-topbar .np-chevron {
  color: var(--ink-1);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--fill-12);
}
#np #np-topbar .np-chevron .material-symbols-rounded {
  font-size: 21px;
}
#np #np-topbar .np-chevron:hover {
  background: var(--fill-18);
}
#np .np-menu-btn {
  display: none;
}
#np .np-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
#np .np-zone {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-25);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw;
}
#np .np-zone .np-zone-out {
  color: var(--ink-dim);
}
#np #np-badge-slot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  min-width: 0;
}
#np .np-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  background: var(--fill-10);
  border: 1px solid var(--fill-13);
  color: var(--ink-1);
  font-size: 11px;
  letter-spacing: 0.08em;
  max-width: 48vw;
  overflow: hidden;
}
#np .np-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
}
#np {
  /* container-type: size, so #np-cover can express "the largest square that fits both the
     available height and half the available width" directly via cqh/cqw — align-items: stretch
     alone gave a definite height to derive from but then never re-shrank it after max-width
     clamped the derived width in a "boxy" (near-square) window, cropping the cover; flex-start
     never gave a definite size to derive from at all, so the box fell back to the raw image's
     intrinsic pixel size (tiny). Query units solve both at once, no JS measurement needed. */
}
#np #np-hero {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 3.9vw, 56px);
  margin-top: clamp(14px, 4vh, 36px);
  flex: 1 1 0;
  min-height: 0;
  container-type: size;
}
#np #np-cover {
  flex: none;
  width: min(100cqh, 50cqw);
  height: min(100cqh, 50cqw);
  aspect-ratio: 1/1;
  border-radius: 11px;
}
#np #np-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 11px;
  box-shadow: var(--shadow-cover);
}
#np #np-meta {
  min-width: 0;
  padding-top: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#np { /* the theme's fluid clamp for this never applied (csso dropped it): 14px is what shipped */ }
#np .np-eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-35);
  margin-bottom: clamp(8px, 1.8vh, 16px);
}
#np .np-title {
  font-family: var(--font-ui);
  font-size: var(--t-display);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
#np .np-byline {
  display: contents;
}
#np .np-artist {
  font-size: clamp(17px, 1.6vw, 23px);
  font-weight: 400;
  color: var(--ink-2);
  margin-top: clamp(10px, 2.4vh, 22px);
}
#np .np-album {
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 400;
  color: var(--ink-muted);
  margin-top: 5px;
}
#np #np-chip-slot {
  margin-top: clamp(14px, 3.5vh, 32px);
}
#np .np-quality {
  display: flex;
  align-items: center;
  gap: 12px;
}
#np .np-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 15px;
  border-radius: var(--r-pill);
  background: var(--glass-2-fill);
  border: 1px solid var(--glass-2-border);
}
#np .np-chip-num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}
#np .np-chip-num--rate {
  margin-left: 6px;
}
#np .np-chip-unit {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
#np .np-chip-unit--bit {
  text-transform: uppercase;
}
#np .np-chip-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
#np .np-format {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
#np .np-signalpath {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
#np .np-arrow {
  color: var(--ink-faint);
}
#np .np-node-final {
  color: var(--ink);
}
#np {
  /* the column's face switch (handoff 6a) */
}
#np .np-seg {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px;
  border-radius: 999px;
  margin-bottom: 22px;
  background: var(--fill-10);
  border: 1px solid var(--fill-13);
}
#np .np-seg button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
}
#np .np-seg button:hover:not(.active):not(:disabled) {
  color: var(--ink);
}
#np .np-seg button.active {
  background: var(--ink-1);
  color: var(--ground);
  font-weight: 700;
}
#np .np-seg button:disabled {
  opacity: 0.4;
  cursor: default;
}
#np .np-seg button:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}
#np {
  --lyr-near: var(--ink-muted);
  --lyr-mid: var(--ink-dim);
  --lyr-far: var(--ink-faint);
}
#np .np-lsheet {
  display: none;
}
#np .np-lyrics-host {
  display: contents;
}
#np.np--lyrics #np-hero, #np.np--info #np-hero {
  align-items: stretch;
}
#np.np--info #np-meta {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#np.np--info .np-about {
  flex: 1 1 auto;
}
#np .np-meta--lyrics {
  align-self: stretch;
}
#np .np-library {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  text-transform: uppercase;
}
#np {
  /* ---- the Info face (12B–12D) ---- */
}
body#artwork #np.np--info .np-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 12px;
}
body#artwork #np.np--info .np-artist {
  flex-basis: 100%;
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
body#artwork #np.np--info .np-album {
  font-size: 16px;
  font-weight: 400;
  color: var(--ink-2);
  margin: 0;
}
body#artwork #np.np--info #np-chip-slot {
  margin: 0;
  display: inline-flex;
}
body#artwork #np.np--info .np-chip {
  height: 28px;
  padding: 0 11px;
  gap: 7px;
}
body#artwork #np.np--info .np-chip .np-chip-num {
  font-size: 11px;
}
body#artwork #np.np--info .np-chip .np-chip-unit {
  font-size: 10px;
}
@media (max-width: 1100px) {
  body#artwork #np.np--info .np-eyebrow {
    display: none;
  }
  body#artwork #np.np--info .np-title {
    font-size: 28px;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  body#artwork #np.np--info .np-byline {
    gap: 0;
    margin-top: 6px;
    align-items: baseline;
  }
  body#artwork #np.np--info .np-artist {
    flex-basis: auto;
    font-size: 16px;
    font-weight: 400;
    color: var(--ink-2);
  }
  body#artwork #np.np--info .np-artist::after {
    content: "·";
    margin: 0 8px;
    color: var(--ink-dim);
  }
  body#artwork #np.np--info .np-album {
    font-size: 16px;
  }
  body#artwork #np.np--info #np-chip-slot {
    display: none;
  }
}
@media (max-width: 840px) {
  body#artwork #np.np--info .np-title {
    font-size: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body#artwork #np.np--info .np-artist {
    font-size: 15px;
  }
  body#artwork #np.np--info .np-artist::after {
    content: none;
  }
  body#artwork #np.np--info .np-album {
    display: none;
  }
}

#np .np-about {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  max-width: 680px;
}
#np .np-about::-webkit-scrollbar {
  display: none;
}
#np .np-about__rule {
  height: 1px;
  background: var(--fill-10);
  margin: 26px 0 22px;
  flex: none;
}
#np .np-about__row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}
#np .np-about__row.is-link {
  cursor: pointer;
}
#np .np-about__row--album {
  align-items: center;
  margin-top: 14px;
}
#np .np-about__img {
  width: 48px;
  height: 48px;
  border-radius: 11px;
  object-fit: cover;
  display: block;
  background: var(--fill-08);
}
#np .np-about__img--round {
  border-radius: 50%;
  object-position: 10% 5%;
}
#np .np-about__body {
  min-width: 0;
}
#np .np-about__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
#np .np-about__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
#np .np-about__sub {
  font-size: 13px;
  color: var(--ink-muted);
}
#np .np-about__row--album .np-about__sub {
  display: block;
  margin-top: 2px;
}
#np .np-about__text {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}
#np .np-about__text--album {
  display: none;
}
#np .np-about__src {
  display: inline-block;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
  text-decoration: none;
}
#np .np-about__src:hover {
  color: var(--ink-3);
}
#np .np-about__go {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 8px 0 14px;
  border-radius: 999px;
  background: var(--fill-10);
  border: 1px solid var(--fill-13);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-ui);
}
#np .np-about__go > span:first-child {
  font-size: 13px;
  font-weight: 600;
}
#np .np-about__go .material-symbols-rounded {
  font-size: 19px;
  color: var(--ink-3);
}
#np .np-about__go:hover {
  background: var(--fill-14);
}
@media (min-width: 1800px) {
  #np .np-about__row {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 18px;
  }
  #np .np-about__img {
    width: 56px;
    height: 56px;
  }
  #np .np-about__body {
    max-width: 62ch;
  }
  #np .np-about__head {
    display: block;
  }
  #np .np-about__name {
    font-size: 17px;
  }
  #np .np-about__sub {
    display: block;
    margin-top: 2px;
  }
  #np .np-about__text {
    margin-top: 10px;
    font-size: 15px;
    -webkit-line-clamp: 5;
  }
  #np .np-about__text--album {
    display: -webkit-box;
    -webkit-line-clamp: 3;
  }
  #np .np-about__row--album {
    align-items: start;
  }
  #np .np-about__src {
    margin-top: 8px;
  }
  #np .np-about__go {
    height: 40px;
    padding: 0 10px 0 16px;
  }
  #np .np-about__go > span:first-child {
    font-size: 14px;
  }
  #np .np-about__go .material-symbols-rounded {
    font-size: 20px;
  }
}
@media (max-width: 1100px) {
  #np .np-about {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
  }
  #np .np-about__rule {
    margin: 14px 0 0;
    background: transparent;
  }
  #np .np-about__row {
    grid-template-columns: 44px minmax(0, 1fr) 24px;
    gap: 14px;
    align-items: center;
    min-height: 64px;
  }
  #np .np-about__row--album {
    margin-top: 0;
  }
  #np .np-about__img {
    width: 44px;
    height: 44px;
  }
  #np .np-about__head {
    display: block;
  }
  #np .np-about__name {
    font-size: 15px;
    font-weight: 600;
  }
  #np .np-about__sub {
    display: block;
    margin-top: 1px;
  }
  #np .np-about__body {
    display: contents;
  }
  #np .np-about__body > .np-about__head, #np .np-about__row--album .np-about__body > .np-about__name, #np .np-about__row--album .np-about__body > .np-about__sub {
    grid-column: 2;
  }
  #np .np-about__row--album .np-about__body > .np-about__name {
    align-self: end;
  }
  #np .np-about__row--album .np-about__body > .np-about__sub {
    align-self: start;
    margin-top: 0;
  }
  #np .np-about__text {
    grid-column: 2/-1;
    margin: 0 0 14px;
    -webkit-line-clamp: 3;
  }
  #np .np-about__row--album {
    position: relative;
  }
  #np .np-about__row--album::before {
    content: "";
    position: absolute;
    left: 58px;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--fill-08);
  }
  #np .np-about__src {
    display: none;
  }
  #np .np-about__img, #np .np-about__body > .np-about__head, #np .np-about__go {
    grid-row: 1;
  }
  #np .np-about__row--artist .np-about__text {
    grid-row: 2;
  }
  #np .np-about__go {
    grid-column: 3;
    align-self: center;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
  }
  #np .np-about__go > span:first-child {
    display: none;
  }
  #np .np-about__go .material-symbols-rounded {
    font-size: 22px;
  }
}
@media (max-width: 840px) {
  #np .np-about__row {
    min-height: 52px;
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: 0;
    border-bottom: 1px solid var(--fill-08);
  }
  #np .np-about__row--album {
    border-bottom: 0;
  }
  #np .np-about__row--album::before {
    left: 0;
  }
  #np .np-about__img, #np .np-about__text, #np .np-about__row .np-about__sub, #np .np-about__row--album .np-about__body > .np-about__sub {
    display: none;
  }
  #np .np-about__body > .np-about__head, #np .np-about__row--album .np-about__body > .np-about__name {
    grid-column: 1;
    align-self: center;
  }
  #np .np-about__go {
    grid-column: 2;
  }
}
#np {
  /* the Lyrics face: a compact head */
}
#np .np-meta--lyrics .np-title {
  font-size: 52px;
  letter-spacing: -0.032em;
  line-height: 1.02;
  margin-top: 0;
}
#np .np-meta--lyrics .np-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-top: 12px;
}
#np .np-meta--lyrics .np-format {
  display: none;
}
#np .np-lyrics {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 28px;
}
#np .np-lyrics__col {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
#np .np-lyrics__col--synced {
  mask-image: linear-gradient(transparent 0, #000 58px, #000 calc(100% - 58px), transparent 100%);
  -webkit-mask-image: linear-gradient(transparent 0, #000 58px, #000 calc(100% - 58px), transparent 100%);
}
#np .np-lyrics__stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  will-change: transform;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}
#np .np-lyrics__stack.no-tween {
  transition: none;
}
#np .np-lyrics__line {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--lyr-far);
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.12s ease;
}
#np .np-lyrics__line .np-lyrics__mark {
  flex: none;
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  margin: 4px 0;
  background: transparent;
}
#np .np-lyrics__line.is-near, #np .np-lyrics__line.is-muted {
  color: var(--lyr-near);
}
#np .np-lyrics__line.is-dim {
  color: var(--lyr-mid);
}
#np .np-lyrics__line.is-faint {
  color: var(--lyr-far);
}
#np .np-lyrics__line.is-now {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.38;
  color: var(--ink);
}
#np .np-lyrics__line.is-now .np-lyrics__mark {
  background: var(--ink-1);
}
#np .np-lyrics__line.is-now .np-lyrics__text {
  animation: aw-lyr-in 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}
#np .np-lyrics__line.is-now ~ .np-lyrics__line .np-lyrics__mark {
  width: 3px;
}
#np .np-lyrics__line .np-lyrics__mark {
  width: 0;
}
#np .np-lyrics__line.is-now .np-lyrics__mark {
  width: 3px;
}
#np .np-lyrics__line:active {
  background: var(--fill-07);
}
#np .np-lyrics__col--plain {
  overflow-y: auto;
  scrollbar-width: none;
}
#np .np-lyrics__col--plain::-webkit-scrollbar {
  display: none;
}
#np .np-lyrics__eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
  margin-bottom: 14px;
}
#np .np-lyrics__plain {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 24px;
}
#np .np-lyrics__line.is-plain {
  color: var(--ink-2);
  cursor: default;
}
#np .np-lyrics__line.is-plain:active {
  background: transparent;
}
#np .np-lyrics__empty {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-dim);
}
#np .np-lyrics__skeleton {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 6px;
  animation: aw-lyr-pulse 1.4s ease-in-out infinite;
}
#np .np-lyrics__skeleton i {
  display: block;
  height: 18px;
  border-radius: 4px;
  background: var(--fill-10);
  width: 62%;
}
#np .np-lyrics__skeleton i:nth-child(2) {
  width: 78%;
}
#np .np-lyrics__skeleton i:nth-child(3) {
  width: 70%;
}
#np .np-lyrics__skeleton i:nth-child(4) {
  width: 54%;
}
#np .np-lyrics__skeleton i:nth-child(5) {
  width: 66%;
}
#np .np-lyrics__eyebrow--synced {
  flex: none;
  margin-bottom: 12px;
}
#np #np-footer {
  margin-top: auto;
  padding-top: clamp(14px, 4.8vh, 44px);
}
#np #np-seek {
  margin-bottom: clamp(10px, 2vh, 18px);
}
#np #np-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 4px;
  flex-wrap: wrap;
  row-gap: 12px;
}
#np {
  /* the row is 50px tall and the play disc overhangs it, sitting 7px high, as the theme lays it out */
  /* the row is 50px tall; each button carries 8px side margins and the play disc overhangs a
     55px slot, sitting 7px high — the geometry the theme ended up with, kept to the pixel */
}
#np #np-transport {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(20px, 2.6vw, 36px);
  height: 50px;
}
#np #np-transport #playerButtons {
  gap: clamp(20px, 2.6vw, 36px);
  height: 50px;
}
#np #np-transport #playerButtons > button {
  margin: 0 8px;
}
#np #np-transport #playerButtons > .playPause {
  margin: 0 calc(63px - clamp(56px, 5.3vw, 76px)) 0 8px;
}
#np #np-transport .btn-link {
  color: var(--ink-2);
  padding: 0;
  height: 34.84px;
}
#np #np-transport .btn-link .material-symbols-rounded {
  font-size: 28px;
}
#np #np-transport .btn-link:hover {
  color: var(--ink);
}
#np #np-transport { /* the line boxes the theme's inline glyphs made */ }
#np #np-transport #prev-button, #np #np-transport #next-button {
  height: 43.56px;
}
#np #np-transport #prev-button .material-symbols-rounded, #np #np-transport #next-button .material-symbols-rounded {
  font-size: 36px;
  color: var(--ink);
}
#np #np-transport .np-fav {
  color: var(--ink-1);
}
#np #np-transport .np-fav.active {
  color: var(--ink);
}
#np #np-transport .playPause {
  width: clamp(56px, 5.3vw, 76px);
  height: clamp(56px, 5.3vw, 76px);
  padding: 0;
  color: var(--ground);
  position: relative;
  top: -7px;
  flex: none;
  margin: 0 calc(63px - clamp(56px, 5.3vw, 76px)) 0 8px;
}
#np #np-transport .playPause .material-symbols-rounded {
  font-size: 42px;
}
#np #np-transport .playPause:hover {
  color: var(--ground);
}
#np #np-footer-right {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 30px);
  margin-left: auto;
  flex: none;
  min-width: 0;
}
#np #np-upnext {
  display: flex;
  align-items: center;
  gap: 13px;
  flex: none;
}
#np .np-upnext-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  white-space: nowrap;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-mono);
}
#np .np-upnext-label:hover {
  color: var(--ink);
}
#np .np-upnext-label:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 4px;
  border-radius: 4px;
}
#np .np-upnext-films {
  display: flex;
  gap: 13px;
}
#np .np-upnext-film {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  border-radius: 11px;
  cursor: pointer;
  transition: transform 0.15s ease;
}
#np .np-upnext-film img {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  object-fit: cover;
  transition: opacity 0.15s ease;
}
#np .np-upnext-film:nth-child(1) img {
  opacity: 1;
}
#np .np-upnext-film:nth-child(2) img {
  opacity: 0.6;
}
#np .np-upnext-film:nth-child(3) img {
  opacity: 0.34;
}
#np .np-upnext-film:hover {
  transform: translateY(-2px);
}
#np .np-upnext-film:hover img {
  opacity: 1 !important;
}
#np .np-upnext-film:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}
#np .np-queue {
  min-width: 44px;
  height: 44px;
  border-radius: 12px;
  padding: 0 14px;
  background: var(--fill-12);
  border: 0;
  color: var(--ink-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
}
#np .np-queue .material-symbols-rounded {
  font-size: 22px;
}
#np .np-queue .np-queue__count {
  font-size: 12px;
  font-weight: 700;
}
#np .np-queue:hover {
  background: var(--glass-2-hover);
}
#np .np-queue.active {
  background: var(--ink);
  color: var(--on-ink);
}
#np .np-volume {
  display: flex;
  align-items: center;
}
#np .np-volume .volume-slider {
  gap: 10px;
}
#np .np-volume .volume-slider input[type=range] {
  width: clamp(90px, 11vw, 150px);
}
#np .np-volume .volume-slider input[type=range]::-webkit-slider-runnable-track {
  height: 5px;
}
#np .np-volume .volume-slider input[type=range]::-webkit-slider-thumb {
  width: 13px;
  height: 13px;
  margin-top: -4px;
  opacity: 1;
  box-shadow: 0 0 0 3px var(--fill-14), 0 2px 6px var(--shadow-soft);
}
#np .np-volume .volume-slider input[type=range]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  opacity: 1;
}
#np .np-volume .volume-slider .button-mute {
  width: 30px;
  height: 30px;
}
#np .np-volume .volume-slider .button-mute .material-symbols-rounded {
  font-size: 23px;
}
#np {
  /* the seek bar here: 8px track, 20px handle, the timecodes under it */
}
#np #np-seek .artwork-seek {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "track track track" "elapsed remaining duration";
  row-gap: 12px;
  column-gap: 0;
}
#np #np-seek .artwork-seek__hit {
  grid-area: track;
  width: 100%;
  height: 36px;
}
#np #np-seek .seek-track {
  height: 8px;
  border-radius: 4px;
  background: var(--fill-14);
}
#np #np-seek .seek-fill {
  background: linear-gradient(90deg, var(--ink-25), var(--ink));
}
#np #np-seek .seek-handle {
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  box-shadow: 0 0 0 4px var(--fill-14), 0 0 18px rgba(255, 255, 255, 0.45), 0 3px 8px var(--shadow-soft);
}
#np #np-seek .seek-time {
  font-size: 12px;
}
#np #np-seek .seek-elapsed {
  grid-area: elapsed;
  justify-self: start;
  color: var(--ink-1);
}
#np #np-seek .seek-remaining {
  display: block;
  grid-area: remaining;
  justify-self: center;
}
#np #np-seek .seek-duration {
  grid-area: duration;
  justify-self: end;
  margin-left: 0;
}
#np .np-m-actions, #np .np-m-bar {
  display: none;
}

@keyframes aw-lyr-in {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
@keyframes aw-lyr-pulse {
  0%, 100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
html.aw-is-light body#artwork #np {
  --lyr-near: #5e646c;
  --lyr-mid: #676d74;
  --lyr-far: #8b9098;
}

html.aw-is-light body#artwork #np .np-lyrics__line:active {
  background: rgba(20, 22, 26, 0.07);
}

/* the Lyrics face's head: the title alone (not on the phone, where the words are a panel) */
@media not all and (max-width: 700px) and (orientation: portrait) {
  body#artwork #np .np-meta--lyrics .np-byline {
    display: none;
  }
  body#artwork #np .np-meta--lyrics #np-chip-slot {
    display: inline-flex;
    align-self: center;
    margin: 0;
  }
  body#artwork #np .np-meta--lyrics .np-chip {
    height: 30px;
    padding: 0 12px;
    gap: 7px;
  }
  body#artwork #np .np-meta--lyrics .np-chip .np-chip-num {
    font-size: 12px;
  }
  body#artwork #np .np-meta--lyrics .np-chip .np-chip-unit {
    font-size: 10px;
  }
}
html.aw-is-light body#artwork #np .np-about__go {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(20, 22, 26, 0.12);
}

html.aw-is-light body#artwork #np .np-about__rule {
  background: rgba(20, 22, 26, 0.09);
}

/* below this the seg control has no room to earn its keep: Cover is the only face on offer
   (Lyrics stays reachable through the phone's own tile once that layout kicks in) */
@media (max-width: 1100px) {
  body#artwork #np .np-seg {
    display: none;
  }
}
@media (max-width: 1080px) {
  body#artwork #np .np-upnext-films {
    display: none;
  }
}
@media (max-width: 900px) {
  body#artwork #np .np-upnext-label {
    display: none;
  }
}
/* tall or narrow: the cover above the text (a landscape window merely resized boxy — not
   actually tall — keeps the cover beside the text instead; only real portrait shapes stack) */
@media (max-aspect-ratio: 3/4), (max-width: 760px) {
  body#artwork #np {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }
  body#artwork #np #np-hero {
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 auto;
  }
  body#artwork #np #np-cover {
    height: auto;
    width: min(100%, 36vh);
    max-width: none;
  }
  body#artwork #np #np-meta {
    padding-top: 0;
  }
  body#artwork #np .np-title {
    font-size: clamp(26px, 7.5vw, 54px);
  }
  body#artwork #np .np-upnext-films, body#artwork #np .np-upnext-label {
    display: none;
  }
}
@media (max-height: 520px) and (orientation: landscape) {
  body#artwork #np {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }
  body#artwork #np #np-hero {
    flex: none;
    container-type: normal;
  } /* size containment collapsed it to 0 here: the page scrolls, the hero is as tall as its text */
  body#artwork #np #np-cover {
    height: auto;
    width: min(46vh, 40%);
  }
  body#artwork #np #np-footer {
    padding-top: 18px;
  }
  body#artwork #np .np-seg {
    display: none;
  } /* no headroom for the switch in a short window: Cover only */
  /* below this the title tracks the window's height, not its width — it keeps shrinking as the window gets shorter still */
  body#artwork #np .np-title {
    font-size: clamp(20px, 6.5vh, 48px);
  }
}
/* Now Playing opens as a sheet sliding up from the mini player and slides back down on the chevron */
@keyframes aw-np-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}
@keyframes aw-np-out {
  from {
    transform: none;
  }
  to {
    transform: translateY(100%);
  }
}
body#artwork #np {
  animation: aw-np-in 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

body#artwork #np.aw-np-out {
  animation: aw-np-out 0.38s cubic-bezier(0.4, 0, 0.6, 1) forwards;
  pointer-events: none;
  overflow: hidden;
}

body#artwork #np.aw-np-out > .art-stack {
  position: absolute;
  z-index: -1;
} /* the leaving sheet carries its wash over the page it uncovers */
/* pulled down by a finger (phone): the entry animation must let go of the transform, and the sheet carries its wash as when leaving */
body#artwork #np.aw-np-drag {
  animation: none;
  overflow: hidden;
  box-shadow: 0 -20px 50px -20px var(--shadow-deep);
}

body#artwork #np.aw-np-drag > .art-stack {
  position: absolute;
  z-index: -1;
}

@media (prefers-reduced-motion: reduce) {
  body#artwork #np, body#artwork #np.aw-np-out {
    animation: none;
  }
}
/* something outside the player drives it (AirPlay, the analog input, a group's leader): a pill in
   the signal path's place saying why the controls are off */
body#artwork #np .np-external {
  margin-top: 22px;
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 460px;
  text-align: left;
  padding: 12px 18px 12px 14px;
  border-radius: 16px;
  background: var(--glass-2-fill);
  border: 1px solid var(--glass-2-border);
}
body#artwork #np .np-external > .material-symbols-rounded {
  flex: none;
  font-size: 22px;
  color: var(--ink-1);
  margin-top: 1px;
}
body#artwork #np .np-external__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
body#artwork #np .np-external__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
body#artwork #np .np-external__sub {
  font-size: 13px;
  color: var(--ink-3);
}
body#artwork #np .np-external__sub a {
  color: var(--ink-1);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* nothing to show: where to find music, and the last tracks played */
body#artwork #np.np--empty .np-empty {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 6vw, 96px);
  padding: clamp(16px, 4vh, 40px) 0;
  overflow-y: auto;
}
body#artwork #np.np--empty .np-empty__intro {
  flex: 0 1 500px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
body#artwork #np.np--empty .np-empty__icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--fill-10);
  border: 1px solid var(--fill-13);
  margin-bottom: 22px;
}
body#artwork #np.np--empty .np-empty__icon .material-symbols-rounded {
  font-size: 30px;
  color: var(--ink-2);
}
body#artwork #np.np--empty .np-empty__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--ink);
}
body#artwork #np.np--empty .np-empty__text {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-3);
  text-wrap: pretty;
}
body#artwork #np.np--empty .np-empty__actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body#artwork #np.np--empty .np-empty__recent {
  flex: 0 1 460px;
  min-width: 0;
}
body#artwork #np.np--empty .np-empty__eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-35);
  margin: 0 0 10px;
}
body#artwork #np.np--empty .np-empty__list {
  display: flex;
  flex-direction: column;
  margin: 0 -12px;
}
body#artwork #np.np--empty .np-empty__row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-1);
  text-align: left;
  cursor: pointer;
}
body#artwork #np.np--empty .np-empty__row:hover {
  background: var(--fill-06);
}
body#artwork #np.np--empty .np-empty__row:hover .np-empty__play {
  opacity: 1;
}
body#artwork #np.np--empty .np-empty__art {
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--fill-08);
}
body#artwork #np.np--empty .np-empty__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body#artwork #np.np--empty .np-empty__art > .material-symbols-rounded {
  font-size: 22px;
  color: var(--ink-dim);
}
body#artwork #np.np--empty .np-empty__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 26px !important;
  color: #fff !important;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.15s;
}
body#artwork #np.np--empty .np-empty__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body#artwork #np.np--empty .np-empty__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork #np.np--empty .np-empty__by {
  font-size: 13px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork #np.np--empty .np-empty__dur {
  flex: none;
  font-size: 12px;
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  body#artwork #np.np--empty .np-empty {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 36px;
  }
  body#artwork #np.np--empty .np-empty__intro, body#artwork #np.np--empty .np-empty__recent {
    flex: none;
  }
}
/* Now Playing's text size, a screen's own choice (Appearance → This screen): the meta column scaled, the cover untouched */
html[data-aw-text=s] body#artwork #np .np-title {
  font-size: calc(var(--t-display) * 0.85);
}

html[data-aw-text=s] body#artwork #np .np-artist, html[data-aw-text=s] body#artwork #np .np-album {
  font-size: 0.9em;
}

html[data-aw-text=l] body#artwork #np .np-title {
  font-size: calc(var(--t-display) * 1.25);
}

html[data-aw-text=l] body#artwork #np .np-artist {
  font-size: clamp(21px, 2vw, 29px);
}

html[data-aw-text=l] body#artwork #np .np-album {
  font-size: clamp(17px, 1.55vw, 22px);
}

html[data-aw-text=xl] body#artwork #np .np-title {
  font-size: calc(var(--t-display) * 1.55);
}

html[data-aw-text=xl] body#artwork #np .np-artist {
  font-size: clamp(25px, 2.5vw, 36px);
}

html[data-aw-text=xl] body#artwork #np .np-album {
  font-size: clamp(20px, 1.9vw, 28px);
}

html[data-aw-text=l] body#artwork #np .np-chip, html[data-aw-text=xl] body#artwork #np .np-chip {
  height: 44px;
}
html[data-aw-text=l] body#artwork #np .np-chip .np-chip-num, html[data-aw-text=xl] body#artwork #np .np-chip .np-chip-num {
  font-size: 15px;
}
html[data-aw-text=l] body#artwork #np .np-chip .np-chip-unit, html[data-aw-text=xl] body#artwork #np .np-chip .np-chip-unit {
  font-size: 12px;
}

html[data-aw-text=l] body#artwork #np .np-format, html[data-aw-text=xl] body#artwork #np .np-format, html[data-aw-text=l] body#artwork #np .np-signalpath, html[data-aw-text=xl] body#artwork #np .np-signalpath {
  font-size: 13px;
}

/* the volume control hidden (Appearance → This screen): whoever sets it on the amplifier */
html.aw-no-volume body#artwork .np-volume, html.aw-no-volume body#artwork .mini-volume {
  display: none !important;
}

/* larger text on a low screen: the meta column may not fit the hero's height — it scrolls there, under the seek bar never */
html[data-aw-text=l] body#artwork #np #np-meta, html[data-aw-text=xl] body#artwork #np #np-meta {
  overflow-y: auto;
  scrollbar-width: none;
}

@media (max-height: 520px) and (orientation: landscape) {
  html[data-aw-text=s] body#artwork #np .np-title {
    font-size: clamp(17px, 5.5vh, 41px);
  }
  html[data-aw-text=l] body#artwork #np .np-title {
    font-size: clamp(25px, 8.1vh, 60px);
  }
  html[data-aw-text=xl] body#artwork #np .np-title {
    font-size: clamp(31px, 10vh, 74px);
  }
}
html[data-aw-text=l] body#artwork #np #np-meta::-webkit-scrollbar, html[data-aw-text=xl] body#artwork #np #np-meta::-webkit-scrollbar {
  display: none;
}
/* The shared page head, the tabs and the search pill, and the cards every shelf is built from. */
.aw-head {
  position: fixed;
  top: 0;
  left: var(--rail-w);
  right: 0;
  z-index: 25;
  padding: var(--head-pad, 34px) var(--pad-screen) 12px;
}

/* the row sits in its own positive layer: Safari otherwise paints the blur strips (backdrop-filter,
   z-index -1) over the sticky head's content */
.aw-head__row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 40px;
  position: relative;
  z-index: 1;
}

.aw-head__nav {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.aw-head__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.aw-head__back {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.aw-head__back .material-symbols-rounded {
  font-size: 22px;
  color: var(--ink-3);
}
.aw-head__back:hover .material-symbols-rounded {
  color: var(--ink);
}
.aw-head__back:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
  border-radius: 6px;
}

.aw-menu-btn {
  display: none;
}

.aw-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: calc(-1 * var(--head-fade, 40px));
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--head-tint-1) 0%, var(--head-tint-2) 52%, transparent 100%);
}

/* progressive blur: strips with a decreasing radius, each faded by its own mask.
   Safari-only delayed fade-in: Safari has been seen showing a frame or two of unblurred
   content (e.g. the page title) through this strip right as it mounts, before its
   backdrop-filter layers are actually composited — hiding it for 50ms sidesteps that window.
   `hanging-punctuation: first` + the `-apple-system-body` font keyword are both real,
   WebKit/Safari-only features — Blink (Chrome/Edge) recognizes neither, so this rule never
   applies there, where the blur must stay visible immediately, with no such glitch.
   (`-webkit-touch-callout` looked like the standard Safari @supports sniff but, verified via
   headless WebKit, is NOT actually recognized there either — don't reach for it again.) */
@keyframes aw-hblur-in {
  to {
    opacity: 1;
  }
}
@supports (hanging-punctuation: first) and (font: -apple-system-body) {
  .aw-head .aw-hblur {
    opacity: 0;
    animation: aw-hblur-in 0.15s ease 0.05s forwards;
  }
}
/* the blur under the sticky head, fading out over the first rows: ONE backdrop-filter layer with a gradient mask.
   It used to be twelve stacked layers (0.25px … 12.5px, each masked a little shorter) for a smoother gradation,
   and every scroll frame blurred the band twelve times — on a weak phone that alone ate most of the drawing time. */
.aw-head .aw-hblur {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: calc(-1 * var(--head-fade, 40px));
  z-index: -1;
  pointer-events: none;
}
.aw-head .aw-hblur i {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
}

.aw-head--album::after {
  content: none;
}
.aw-head--album .aw-hblur {
  display: none;
}

.aw-tab {
  font-size: 15px;
  color: var(--ink-dim);
  cursor: pointer;
}
.aw-tab.active {
  color: var(--ink);
  font-weight: 600;
}
.aw-tab:hover {
  color: var(--ink-2);
}

.aw-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 38px;
  padding: 0 16px;
  border-radius: 19px;
  width: 320px;
  min-width: 0;
  cursor: pointer;
  background: var(--fill-09);
  border: 1px solid var(--fill-11);
  margin-bottom: 0;
  font-weight: 400;
}
.aw-search .material-symbols-rounded {
  font-size: 20px;
  color: var(--ink-muted);
}
.aw-search .aw-search-label {
  font-size: 14px;
  color: var(--ink-muted);
}
.aw-search .aw-search-key {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-faint);
}
.aw-search:hover {
  background: var(--fill-13);
}
.aw-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 0;
  height: 100%;
  font-size: 14px;
  color: var(--ink);
  outline: 0;
  box-shadow: none;
  font-family: var(--font-ui);
}
.aw-search input::placeholder {
  color: var(--ink-muted);
}
.aw-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.aw-search:focus-within {
  border-color: var(--fill-30);
  cursor: text;
}
.aw-search .aw-search-clear {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  cursor: pointer;
}
.aw-search .aw-search-clear .material-symbols-rounded {
  font-size: 18px;
}
.aw-search .aw-search-clear:hover {
  color: var(--ink);
  background: var(--fill-10);
}

/* ---- the cards (spec §5.3): a shelf grid, the cover box, the play overlay, two lines ---- */
body#artwork .main__row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--gap-shelf);
  padding: 8px 0 40px;
}
body#artwork .music-card__wrapper {
  width: auto;
  padding: 0;
  margin: 0;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
  position: relative;
}
body#artwork {
  /* a tile with its menu open is raised over its later siblings — on touch screens a tapped button
     takes no focus, so the open state itself carries the raise (class from the tile, :has as a backstop) */
}
body#artwork .music-card__wrapper:hover, body#artwork .music-card__wrapper:focus-within, body#artwork .music-card__wrapper.is-menu-open, body#artwork .music-card__wrapper:has(.dropdown.open) {
  z-index: 6;
}
body#artwork .music-card {
  background: transparent;
  border: 0;
  cursor: pointer;
}
body#artwork .music-card__header {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: var(--r-cover);
  overflow: hidden;
  box-shadow: 0 20px 40px -16px var(--shadow-strong);
  margin-bottom: 12px;
}
body#artwork { /* the 12px under the cover came from the inherited card; kept */ }
body#artwork .music-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body#artwork .music-card__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(6, 9, 12, 0.42);
  opacity: 0;
  transition: opacity 0.25s ease;
}
body#artwork .music-card .meta__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
body#artwork .music-card .meta__play .play-btn {
  pointer-events: auto;
}
body#artwork .music-card .play-btn {
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
  background: var(--ink);
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
body#artwork .music-card .play-btn .play-btn__icon {
  color: var(--ground);
  font-size: 20px;
  margin-left: 2px;
}
body#artwork .music-card .action-btn, body#artwork .music-card .meta__actions {
  position: absolute;
  top: 8px;
  right: 8px;
}
body#artwork .music-card__info {
  margin-top: 10px;
  padding: 0;
  display: flex;
  min-width: 0;
}
body#artwork .music-card__label {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork .music-card__meta {
  font-size: 13px;
  line-height: 15px;
  color: var(--ink-dim);
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (hover: hover) {
  body#artwork .music-card__wrapper:hover {
    transform: translateY(-8px);
  }
  body#artwork .music-card__wrapper:hover .music-card__overlay {
    opacity: 1;
  }
}
body#artwork {
  /* a touch screen has no hover to bring the play button up: it sat in the middle of every cover unseen and
     played the album on a tap meant to open it. There a tap on a tile opens it (a track or a station plays,
     as a tap on the tile always did); playing a whole album is on its page and in the tile's menu */
}
@media (hover: none) {
  body#artwork .music-card__overlay {
    opacity: 1;
    background: rgba(6, 9, 12, 0.28);
  }
  body#artwork .music-card .meta__play {
    display: none;
  }
}
body#artwork .music-card.is-artist .music-card__header, body#artwork .music-card.is-artist .music-card__img, body#artwork .music-card.is-artist .music-card__overlay {
  border-radius: 50%;
}
body#artwork .music-card.is-artist .music-card__info, body#artwork .music-card.is-artist .music-card__meta, body#artwork .music-card.is-artist .music-card__label {
  text-align: center;
}

/* ---- the row / tile menu (mockup "Context menu"): glass, 44px rows with a glyph ---- */
body#artwork .dropdown {
  position: relative;
}

body#artwork .dropdown-menu {
  position: absolute;
  z-index: 1000;
  list-style: none;
  margin: 0;
}

body#artwork .hamburgerMenu ul.dropdown-menu.buttonsGroup, body#artwork .home-pin__menu ul.dropdown-menu.buttonsGroup {
  padding: 8px;
  border-radius: 14px;
  overflow: hidden;
  width: 272px;
  text-align: left; /* the rows read left whatever the tile centres */
  background: var(--menu-fill);
  -webkit-backdrop-filter: blur(60px) saturate(1.6) brightness(var(--menu-bright));
  backdrop-filter: blur(60px) saturate(1.6) brightness(var(--menu-bright));
  border: 1px solid var(--fill-14);
  box-shadow: 0 34px 70px -26px var(--shadow-deep);
}
body#artwork .hamburgerMenu ul.dropdown-menu.buttonsGroup li > a, body#artwork .home-pin__menu ul.dropdown-menu.buttonsGroup li > a {
  display: flex;
  align-items: center;
  gap: 13px;
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
body#artwork .hamburgerMenu ul.dropdown-menu.buttonsGroup li > a .material-symbols-rounded, body#artwork .home-pin__menu ul.dropdown-menu.buttonsGroup li > a .material-symbols-rounded {
  width: 20px;
  font-size: 20px;
  color: var(--ink-muted);
  flex: none;
}
body#artwork .hamburgerMenu ul.dropdown-menu.buttonsGroup li > a .aw-menu__badge, body#artwork .home-pin__menu ul.dropdown-menu.buttonsGroup li > a .aw-menu__badge {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-dim);
}
body#artwork .hamburgerMenu ul.dropdown-menu.buttonsGroup li > a:hover, body#artwork .hamburgerMenu ul.dropdown-menu.buttonsGroup li > a:focus, body#artwork .home-pin__menu ul.dropdown-menu.buttonsGroup li > a:hover, body#artwork .home-pin__menu ul.dropdown-menu.buttonsGroup li > a:focus {
  background: var(--fill-09);
  color: var(--ink);
}
body#artwork .hamburgerMenu ul.dropdown-menu.buttonsGroup li > a:hover .material-symbols-rounded, body#artwork .hamburgerMenu ul.dropdown-menu.buttonsGroup li > a:focus .material-symbols-rounded, body#artwork .home-pin__menu ul.dropdown-menu.buttonsGroup li > a:hover .material-symbols-rounded, body#artwork .home-pin__menu ul.dropdown-menu.buttonsGroup li > a:focus .material-symbols-rounded {
  color: var(--ink);
}
body#artwork .hamburgerMenu ul.dropdown-menu.buttonsGroup .aw-menu__sep, body#artwork .home-pin__menu ul.dropdown-menu.buttonsGroup .aw-menu__sep {
  height: 1px;
  margin: 6px 10px;
  background: var(--fill-09);
}
body#artwork .hamburgerMenu ul.dropdown-menu.buttonsGroup .aw-menu__danger > a, body#artwork .hamburgerMenu ul.dropdown-menu.buttonsGroup .aw-menu__danger > a .material-symbols-rounded, body#artwork .home-pin__menu ul.dropdown-menu.buttonsGroup .aw-menu__danger > a, body#artwork .home-pin__menu ul.dropdown-menu.buttonsGroup .aw-menu__danger > a .material-symbols-rounded {
  color: var(--err-soft);
}

body#artwork .home-pin__menu ul.dropdown-menu.buttonsGroup {
  width: 200px;
}
/* Home (spec §6.2 + mockup): the hero, the recent albums shelf, the pinned shelf. */
body#artwork #artwork-home {
  position: relative;
  z-index: 1;
  padding: 0 var(--pad-screen) 60px;
  color: var(--ink-1);
  min-height: 100%;
  box-sizing: border-box;
}
body#artwork #artwork-home .home-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  margin-top: 34px;
  align-items: flex-end;
}
body#artwork #artwork-home { /* 36 fixed: the fluid clamp loses to this block's two ids */
  /* 224 fixed: the frame's fluid clamp for this image loses to the page block's specificity (two ids), so it never applies on desktop */
}
body#artwork #artwork-home .home-hero-cover img {
  width: 224px;
  height: 224px;
  object-fit: cover;
  border-radius: var(--r-cover);
  box-shadow: 0 34px 70px -22px var(--shadow-strong);
  display: block;
}
body#artwork #artwork-home .home-hero-meta {
  display: flex;
  flex-direction: column;
  padding-bottom: 6px;
  min-width: 0;
}
body#artwork #artwork-home .home-eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-3);
}
body#artwork #artwork-home .home-eyebrow--row {
  display: none;
}
body#artwork #artwork-home { /* the phone's */ }
body#artwork #artwork-home .home-hero-title {
  font-family: var(--font-ui);
  font-size: var(--t-h1-lg);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin-top: 12px;
  color: var(--ink);
  text-wrap: pretty;
}
body#artwork #artwork-home .home-hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}
body#artwork #artwork-home .home-resume {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 24px 0 19px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--ground);
  border: 0;
  cursor: pointer;
}
body#artwork #artwork-home .home-resume .material-symbols-rounded {
  font-size: 23px;
}
body#artwork #artwork-home .home-resume span:last-child {
  font-size: 15px;
  font-weight: 700;
}
body#artwork #artwork-home .home-resume:hover {
  background: var(--ink-1);
}
body#artwork #artwork-home .home-hero-sub {
  font-size: 15px;
  color: var(--ink-muted);
}
body#artwork #artwork-home .home-shelf {
  margin-top: 44px;
}
body#artwork #artwork-home .home-shelf-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
body#artwork #artwork-home .home-shelf-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}
body#artwork #artwork-home .home-shelf-nav {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
body#artwork #artwork-home .home-shelf-nav button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--fill-16);
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink-2);
}
body#artwork #artwork-home .home-shelf-nav button .material-symbols-rounded {
  font-size: 18px;
}
body#artwork #artwork-home .home-shelf-nav button:disabled {
  color: var(--ink-muted);
  cursor: default;
  opacity: 0.6;
}
body#artwork #artwork-home .home-shelf-nav button:hover:not(:disabled) {
  background: var(--fill-08);
}
body#artwork #artwork-home .main__row {
  grid-template-columns: repeat(auto-fill, minmax(clamp(110px, 12vw, 180px), 1fr));
  gap: clamp(12px, 1.5vw, 22px);
  margin-top: 20px;
  padding-bottom: 0;
}
body#artwork #artwork-home .music-card__header {
  background: var(--card-flat);
}
body#artwork #artwork-home {
  /* pins */
}
body#artwork #artwork-home .home-pins-count {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
}
body#artwork #artwork-home .home-pins-edit {
  margin-left: auto;
  border: 0;
  background: transparent;
  padding: 4px 2px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
}
body#artwork #artwork-home .home-pins-edit:hover {
  color: var(--ink);
}
body#artwork #artwork-home .home-pin {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}
body#artwork #artwork-home .home-pin.is-lifted {
  z-index: 5;
  transition: none;
  box-shadow: 0 26px 50px -18px var(--shadow-deep);
  outline: 1px solid var(--fill-20);
  border-radius: var(--r-cover);
}
body#artwork #artwork-home .home-pin .music-card__header {
  position: relative;
  overflow: visible;
}
body#artwork #artwork-home .home-pin .music-card__img, body#artwork #artwork-home .home-pin .music-card__overlay {
  border-radius: var(--r-cover);
}
body#artwork #artwork-home .home-pin:hover .home-pin__more {
  opacity: 1;
}
body#artwork #artwork-home .is-editing .home-pin {
  cursor: grab;
  touch-action: none;
}
body#artwork #artwork-home .is-editing .home-pin .music-card {
  pointer-events: none;
}
body#artwork #artwork-home .is-editing .home-pin .home-pin__menu {
  pointer-events: auto;
}
body#artwork #artwork-home .home-pin__glyph {
  position: absolute;
  inset: 0;
  border-radius: var(--r-cover);
  background: var(--card-flat, var(--fill-06));
  display: grid;
  place-items: center;
}
body#artwork #artwork-home .home-pin__glyph .material-symbols-rounded {
  font-size: 52px;
  color: var(--ink-3);
}
body#artwork #artwork-home .home-pin .music-card__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
body#artwork #artwork-home .home-pin__menu {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}
body#artwork #artwork-home .home-pin__more {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background: rgba(8, 10, 13, 0.55);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
body#artwork #artwork-home .home-pin__more .material-symbols-rounded {
  font-size: 19px;
}
body#artwork #artwork-home .home-pin__menu.open .home-pin__more, body#artwork #artwork-home .is-editing .home-pin__more {
  opacity: 1;
}
body#artwork #artwork-home .home-pin__menu .dropdown-menu {
  right: 0;
  left: auto;
  top: 100%;
  margin-top: 6px;
}
/* The library: the base rows and tiles Volumio's browse is built from, then the theme's rules in
   the order they shipped, then the fluid rules. The selectors keep the theme's names. */
/* ---- bootstrap bits the markup leans on ---- */
.hidden {
  display: none !important;
}

.text-center {
  text-align: center;
}

.mr-2 {
  margin-right: 8px;
}

.ghost-btn {
  background: transparent;
  border: none;
}

/* ---- the base browse (Contemporary), as far as the theme builds on it ---- */
#browse {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
#browse .panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 0;
}

#browse .panel .body-content.new-browse {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  display: flex;
  overflow: hidden;
}

#browseTablesWrapper {
  width: 100%;
  height: 100%;
  overflow-y: scroll !important;
  overflow-x: hidden;
}

.main__source {
  margin-bottom: 12px;
}

#browse-page .panel-title {
  color: var(--ink-1);
  display: inline-flex;
  align-items: center;
  width: 100%;
  margin-top: 24px;
  margin-bottom: 0;
  padding: 0;
  font-size: 18px;
  line-height: 20px;
}

.main__list .album__tracks:first-child {
  padding-top: 12px;
}

.main__list .album__tracks:last-child {
  padding-bottom: 12px;
}

.music-card__wrapper {
  min-width: 0;
}

/* cards */
.music-card {
  width: 100%;
}

.music-card__header {
  position: relative;
  margin-bottom: 12px;
  background: var(--shade-60);
}

.music-card__img, .music-card__img-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.music-card__img-icon {
  background: var(--panel-fill);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.music-card__img-icon .material-symbols-rounded {
  font-size: 50px;
}

.music-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  transition: background-color 0.15s ease-out 0s;
}

.music-card__info {
  display: flex;
  min-width: 0;
  justify-content: space-between;
  align-items: center;
}

.music-card__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
}

.music-card__meta {
  font-size: 13px;
  line-height: 15px;
  color: #7a848e;
  margin-top: 6px;
}

.music-card__extension {
  display: block;
  flex: 0 0 20px;
  max-width: 20px;
}

.meta__genre {
  position: absolute;
  top: 12px;
  left: 12px;
  width: calc(100% - 24px);
  opacity: 0;
  transition: opacity 0.15s ease-out 0s;
  pointer-events: none;
}

.meta__actions {
  position: absolute;
  top: 12px;
  right: 6px;
  width: 24px;
  text-align: center;
  pointer-events: auto;
}
.meta__actions .action-btn {
  transition: opacity 0.15s ease-out 0s;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
  font-size: 17px;
  padding: 1px 12px;
  cursor: pointer;
  line-height: normal;
}
.meta__actions .action-btn:hover, .meta__actions .action-btn:active, .meta__actions .action-btn:focus {
  outline: none;
}
.meta__actions .action-btn {
  /* a 17px FontAwesome ellipsis-v, 4px wide in a 24px line: the Material dots keep the box */
}
.meta__actions .action-btn .material-symbols-rounded {
  position: relative;
  z-index: 20;
  display: inline-block;
  width: 4px;
  height: 24px;
  line-height: 24px;
  font-size: 20px;
  text-align: center;
  overflow: visible;
  vertical-align: top;
}

.meta__play {
  position: absolute;
  bottom: 12px;
  left: 12px;
  opacity: 0;
  transition: opacity 0.15s ease-out 0s;
  pointer-events: none;
}
.meta__play .play-btn {
  display: flex;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  border: 2px solid rgb(255, 255, 255);
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease-out;
  cursor: pointer;
}
.meta__play .play-btn__icon {
  margin-top: 2px;
  margin-left: 3px;
}

.meta__favorite {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-size: 20px;
  -webkit-text-stroke: 1px white;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transition: opacity 0.15s ease-out 0s;
  pointer-events: none;
  cursor: pointer;
}
.meta__favorite.favorited {
  opacity: 1;
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 1px transparent;
}

.hamburgerMenu.dropdown.open .action-btn {
  opacity: 1;
}

@media (min-width: 768px) and (pointer: fine) {
  .music-card:hover {
    cursor: pointer;
  }
  .music-card:hover .music-card__overlay {
    background-color: var(--shade-60);
  }
  .music-card:hover .meta__genre, .music-card:hover .meta__actions, .music-card:hover .action-btn, .music-card:hover .meta__play, .music-card:hover .meta__favorite {
    opacity: 1;
    pointer-events: auto;
  }
}
img.music-card__extension.tagrow {
  display: inline;
  height: 18px;
}

/* rows */
.music-item {
  flex: 1 0 100%;
  display: flex;
  min-width: 0;
  padding: 0;
  align-items: center;
  border-bottom: 1px solid #333;
  cursor: pointer;
  transition: background-color 0.15s ease-out 0s;
}
.music-item:hover .item__play, .music-item:hover .item__favorite {
  opacity: 1;
}
.music-item.title {
  padding: 24px 16px;
  font-size: 18px;
  line-height: 20px;
  pointer-events: none;
  border-bottom: none;
}

.item__play {
  display: block;
  flex: 0 0 48px;
  padding: 8px 0 8px 8px;
  opacity: 0;
}
.item__play .play-btn {
  width: 32px;
  height: 32px;
  border: 2px solid white;
  border-radius: 40px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item__play .play-btn__icon {
  padding-left: 2px;
}

.item__image {
  flex: 0 0 auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.item__image__img {
  width: 100%;
}

.item__number {
  display: block;
  width: 2em;
  text-align: right;
  color: #7a848e;
  margin: 0 16px 0 0;
}

.item__albumart {
  width: 40px;
  height: 40px;
  margin-right: 8px;
}

.item__albumart-icon {
  width: 40px;
  height: 40px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.item__albumart-icon .material-symbols-rounded {
  font-size: 18px;
}

.item__info {
  flex-grow: 1;
  display: flex;
  flex-wrap: nowrap;
  min-width: 0;
}
.item__info .truncate-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item__title, .item__album, .item__artist {
  flex: 0 0 33.3333333333%;
  min-width: 0;
  margin-bottom: 0;
}

.item__title__half {
  flex: 0 0 66.6666666667%;
}

.item__title__full {
  flex: 1 1 100%;
}

.item__album, .item__artist {
  padding: 0 4px 0 0;
  color: #7a848e;
}

.item__info__separator {
  padding: 0 6px;
  display: none;
  line-height: normal;
}

.item__favorite {
  display: block;
  flex: 0 0 auto;
  padding: 0 8px;
  -webkit-text-stroke: 1px white;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transition: opacity 0.15s ease-out 0s;
  cursor: pointer;
}
.item__favorite .material-symbols-rounded {
  vertical-align: top;
  margin-top: 1px;
}
.item__favorite.favorited {
  opacity: 1;
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 1px transparent;
}

.item__duration {
  padding: 0 8px;
  min-width: 64px;
}

.item__actions {
  padding-right: 8px;
}
.item__actions .action-btn {
  padding: 0 8px;
  cursor: pointer;
}
.item__actions {
  /* the base glyph was a 15px FontAwesome ellipsis-v, 3.2px wide: the Material dots keep that layout box and overflow it */
}
.item__actions .action-btn .material-symbols-rounded {
  display: inline-block;
  width: 3.2px;
  height: 15px;
  line-height: 15px;
  font-size: 15px;
  text-align: center;
  overflow: visible;
  vertical-align: top;
}

/* the inherited theme paints the browse chrome white; children set their own ink */
#browse {
  color: #fff;
}

label.aw-search, label.aw-filter {
  color: var(--ink-2);
}

@media (max-width: 767px) {
  .music-item {
    padding: 8px;
  }
  .item__play {
    display: none;
  }
  .item__info {
    flex-wrap: wrap;
  }
  .item__title {
    flex: 1 1 100%;
    margin-bottom: 8px;
  }
  .item__album {
    flex: 0 1 auto;
    color: #54C688;
  }
  .item__artist {
    flex: 0 1 auto;
  }
  .item__info__separator {
    display: block;
  }
  .item__favorite {
    display: none;
  }
}
/* ============ the theme's browse / library reskin (spec §5.3, §6.2) ============ */
body#artwork #browse, body#artwork #browse .panel, body#artwork #browse .panel-default, body#artwork #browse .panel-body, body#artwork #browse .body-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body#artwork .music-card .action-btn, body#artwork .music-card .meta__actions {
  position: absolute;
  top: 8px;
  right: 8px;
}
body#artwork .music-card .action-btn .material-symbols-rounded, body#artwork .music-card .meta__actions .material-symbols-rounded {
  color: var(--ink-1);
}
body#artwork {
  /* bottom/right reset: with the base rule's bottom and right still set, the heart stretched over the whole
     cover and took every click — the play button's and the tile's own */
}
body#artwork .music-card .meta__favorite {
  position: absolute;
  top: 8px;
  left: 8px;
  bottom: auto;
  right: auto;
}
body#artwork .music-card .meta__favorite .material-symbols-rounded {
  color: var(--ink-1);
}

/* the base .fa glyph slots, in Material: row heart / menu 15px var(--ink-3) */
body#artwork .music-item .item__number {
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 13px;
}

body#artwork .music-item .item__info {
  gap: 18px;
  min-width: 0;
}

body#artwork .music-item .item__title {
  color: var(--ink-1);
  font-size: 16px;
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
}

body#artwork .music-item .item__album, body#artwork .music-item .item__artist {
  color: var(--ink-dim);
  font-size: 14px;
}

body#artwork .music-item .item__duration {
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 13px;
}

body#artwork .music-item .item__favorite .material-symbols-rounded, body#artwork .music-item .item__actions .material-symbols-rounded {
  color: var(--ink-3);
  font-size: 15px;
}

body#artwork .music-item .item__favorite .material-symbols-rounded:hover, body#artwork .music-item .item__actions .material-symbols-rounded:hover {
  color: var(--ink-1);
}

body#artwork .music-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  border-radius: var(--r-panel);
  min-height: 52px;
  transition: background 0.15s ease;
}
body#artwork .music-item:hover {
  background: var(--fill-06);
}

body#artwork #browse.browsing-album .album__tracks .item__album, body#artwork #browse.browsing-album .album__tracks .item__artist, body#artwork #browse.browsing-album .album__tracks .item__info__separator {
  display: none;
}

/* search page: Volumio's own search box in the head */
body#artwork .dedicated-search {
  padding: var(--pad-top) var(--pad-screen) 6px;
}
body#artwork .dedicated-search form {
  margin: 0;
}
body#artwork .dedicated-search .search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 0;
  z-index: 2;
  cursor: pointer;
}
body#artwork .dedicated-search .search-icon .material-symbols-rounded {
  color: var(--ink-muted);
  font-size: 19px;
}
body#artwork #browse .dedicated-search {
  background: transparent !important;
}
body#artwork #browse .panel .body-content.new-browse.with-search-header {
  top: 0;
  height: 100%;
  padding-top: 0;
}
body#artwork .dedicated-search .search-container {
  max-width: 640px;
  margin: 0;
  position: relative;
}
body#artwork .dedicated-search input.form-control {
  height: 46px;
  font-size: 15px;
  border-radius: 23px;
  background: var(--fill-09);
  border: 1px solid var(--fill-11);
  padding: 0 20px 0 48px;
  width: 100%;
  color: var(--ink-1);
  box-shadow: none;
  outline: 0;
  font-family: var(--font-ui);
}
body#artwork .dedicated-search input.form-control::placeholder {
  color: var(--ink-dim);
}
body#artwork .dedicated-search input.form-control:focus {
  outline: none;
  border-color: var(--hairline);
  background: var(--glass-2-hover);
}
body#artwork .dedicated-search input.form-control::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
body#artwork .dedicated-search .search-icon .material-symbols-rounded {
  font-size: 17px;
  color: var(--ink-muted);
}

/* track rows (8b): a small pill before the duration, only for Hi-Res and DSD */
body#artwork .music-item .item__duration {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  white-space: nowrap;
}

body#artwork .music-item .item__quality {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  flex: none;
  border: 1px solid transparent;
  font-family: var(--font-mono);
}
body#artwork .music-item .item__quality .aw-q__num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
body#artwork .music-item .item__quality .aw-q__unit {
  font-size: 9px;
  letter-spacing: 0.14em;
}

/* ============ album / playlist detail ============ */
/* the pinned-cover, 2-column grid is for a real album, which never scrolls its own cover away; a
   playlist (Tidal's, Spotify's, a local one) scrolls as one column, cover included */
body#artwork #browse.browsing-album #browseTablesWrapper {
  /* two rows so the crumb bar (row 1) and the cover (row 2) share column 1 without overlapping,
     while the track list spans both and keeps its own scroll — see the .aw-head comment in
     AlbumHead.tsx for why the crumb bar is a column-1 sibling and not nested inside the cover's
     own (much shorter) box */
  display: grid;
  grid-template-columns: minmax(260px, 34%) 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: clamp(24px, 3.9vw, 56px);
  row-gap: 0;
  align-items: start;
  padding: 0 var(--pad-screen);
  overflow: hidden !important;
  overscroll-behavior: contain;
  /* static here, not fixed: this column never scrolls, so .aw-head just sits in the grid like any
     other cell — but its own padding-left (built for the full-bleed fixed bar elsewhere) would
     then double up with the column's own inset, landing the back arrow further right than the
     cover under it, so it's reset to 0 here and the vertical padding kept */
}
body#artwork #browse.browsing-album #browseTablesWrapper > .aw-head {
  grid-column: 1;
  grid-row: 1;
  position: static;
  padding-left: 0;
  padding-right: 0;
}
body#artwork #browse.browsing-album #browseTablesWrapper > .aw-headwrap {
  grid-column: 1;
  grid-row: 2;
  align-self: stretch;
  min-height: 0;
  overflow: visible;
}
body#artwork #browse.browsing-album #browseTablesWrapper > #browse-page {
  grid-column: 2;
  grid-row: 1/span 2;
  align-self: stretch;
  min-height: 0;
  margin-top: 104px;
  height: calc(100% - 104px - var(--mini-h) - 18px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 12px;
}
body#artwork #browse.browsing-album #browseTablesWrapper > #browse-page .main__list .album__tracks:first-child {
  padding-top: 0;
}
body#artwork #browse.browsing-album #browseTablesWrapper > #browse-page .main__source:last-child {
  margin-bottom: 0;
}
body#artwork #browse.browsing-album #browseTablesWrapper > #browse-page .main__list .album__tracks:last-child {
  padding-bottom: 0;
}

.aw-albumhead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}
.aw-albumhead__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.aw-albumhead__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(70px) saturate(1.3);
  opacity: 0.55;
  transform: scale(1.1);
}
.aw-albumhead__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--cover-veil-1) 0%, var(--cover-veil-2) 100%);
}
.aw-albumhead__cover--icon {
  background: var(--fill-08);
  border-radius: var(--r-cover);
}
.aw-albumhead__cover--icon img {
  padding: 24%;
  filter: invert(var(--icon-invert, 0));
  box-shadow: none;
}
.aw-albumhead__cover {
  width: 100%;
  max-width: 380px;
}
.aw-albumhead__cover img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-cover);
  box-shadow: var(--shadow-cover);
  display: block;
}
.aw-albumhead__eyebrow {
  margin-top: 24px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}
.aw-albumhead__title {
  margin: 24px 0 0;
  font-family: var(--font-ui);
  font-weight: 800;
  letter-spacing: -0.025em;
  font-size: var(--t-h1);
  line-height: 1.04;
  color: var(--ink);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.aw-albumhead__artist {
  margin-top: 8px;
  font-size: 19px;
  color: var(--ink-2);
}
.aw-albumhead__meta {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.aw-albumhead__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.aw-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-2-border);
  background: var(--glass-2-fill);
  color: var(--ink-1);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.aw-btn .material-symbols-rounded {
  font-size: 22px;
}
.aw-btn:hover {
  background: var(--glass-2-hover);
}

.aw-btn--primary {
  background: var(--ink);
  color: var(--ground);
  border: 0;
}
.aw-btn--primary:hover {
  background: var(--ink-1);
  color: var(--ground);
}

.aw-iconbtn {
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--glass-2-border);
  color: var(--ink-2);
}
.aw-iconbtn .material-symbols-rounded {
  font-size: 22px;
}
.aw-iconbtn:hover {
  color: var(--ink-1);
  background: var(--glass-2-fill);
}

body#artwork .album__tracks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  grid-column: 2;
}

body#artwork #browse.browsing-album .panel .body-content.new-browse, body#artwork #browse.browsing-playlist .panel .body-content.new-browse, body#artwork #browse.browsing-home .panel .body-content.new-browse {
  top: 0;
  height: 100%;
}

.aw-head + .aw-headwrap {
  margin-top: 32px;
}

/* the playlist head is not a column: the head sticks for the whole list. Not `display: contents`
   here — Safari does not resolve a sticky descendant's containing block through a `contents`
   parent, so the head silently stopped sticking there; an ordinary block passes the sticky
   context through in every engine. */
body#artwork #browse.browsing-playlist .aw-headwrap {
  display: block;
}

/* ============ the landing (mockup 2b-browse) ============ */
body#artwork .aw-browse {
  padding: var(--pad-top) var(--pad-screen) 40px;
  color: var(--ink-1);
}

.aw-browse-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-top: 26px;
  margin-bottom: 14px;
}

.aw-browse-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

.aw-browse-stats {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

.aw-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.aw-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border-radius: 16px;
  min-width: 0;
  background: var(--fill-08);
  border: 1px solid var(--fill-12);
  cursor: pointer;
  transition: background 0.25s ease;
}
.aw-card:hover {
  background: var(--fill-13);
}

.aw-tile {
  width: 96px;
  height: 96px;
  border-radius: 8px;
  overflow: hidden;
  flex: none;
  background: var(--card-flat);
}

.aw-tile--mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.aw-tile--mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}
.aw-tile--mosaic img:nth-child(n+5) {
  display: none;
}

.aw-tile--stack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aw-tile--avatars {
  display: flex;
  align-items: center;
  background: none;
  overflow: visible;
}
.aw-tile--avatars img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ground);
  flex: none;
}
.aw-tile--avatars img:nth-child(2) {
  margin-left: -30px;
}

.aw-tile--icon {
  display: grid;
  place-items: center;
  background: var(--fill-07);
}
.aw-tile--icon .material-symbols-rounded {
  font-size: 44px;
  color: var(--ink-1);
}

.aw-tile--lines {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  padding: 0 16px;
}
.aw-tile--lines i {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.7);
}
.aw-tile--lines i:nth-child(2) {
  width: 78%;
  background: rgba(255, 255, 255, 0.5);
}
.aw-tile--lines i:nth-child(3) {
  width: 56%;
  background: rgba(255, 255, 255, 0.35);
}

.aw-tile__glyph {
  display: none;
}

.aw-card-body {
  min-width: 0;
  flex: 1;
}

.aw-card-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.aw-card-sub {
  font-size: 14px;
  color: var(--ink-muted);
  margin-top: 5px;
}

.aw-card-meta {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  margin-top: 9px;
}

.aw-card-chev {
  font-size: 22px;
  color: var(--ink-muted);
  flex: none;
}

.aw-sources-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fill-10);
}
.aw-sources-head .mono {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-35);
}

.aw-sources-manage {
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  text-decoration: none;
}
.aw-sources-manage:hover {
  color: var(--ink-1);
}

.aw-sources {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.aw-source {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 13px;
  min-width: 0;
  background: var(--fill-05);
  cursor: pointer;
  color: var(--ink-1);
  text-decoration: none;
}
.aw-source > .material-symbols-rounded {
  font-size: 24px;
  color: var(--ink-2);
  flex: none;
}
.aw-source:hover {
  background: var(--fill-09);
}

.aw-source-logo {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 6px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.aw-source-logo__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Spotify's own icon file has a huge transparent safe-margin (the mark fills ~43% of the
   canvas vs. ~65-70% for other services' icons) — scale it up so it reads at the same visual
   size as its neighbours instead of looking shrunken; clipped by the wrapper above. */
.aw-source-logo__img--pad {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.35);
}

.aw-source-body {
  min-width: 0;
  flex: 1;
}

.aw-source-name {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aw-source-sub {
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: 2px;
}

.aw-source-chev {
  font-size: 20px;
  color: var(--ink-muted);
  flex: none;
}

body#artwork #browse-page {
  background: transparent;
}

/* ============ lists (artists, albums, genres…) ============ */
body#artwork #browseTablesWrapper {
  padding-left: var(--pad-screen);
  padding-right: var(--pad-screen);
}

body#artwork .aw-browse {
  padding-left: 0;
  padding-right: 0;
}

.aw-listhead {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 26px 0 18px;
}

.aw-listhead__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

.aw-listhead__count {
  font-size: 13px;
  color: var(--ink-muted);
}

body#artwork .album__tracks {
  background: transparent;
}

body#artwork #browse.browsing-artists .music-card__header, body#artwork #browse.browsing-artists .music-card__img, body#artwork #browse.browsing-artists .music-card__overlay {
  border-radius: 50%;
}

body#artwork #browse.browsing-artists .music-card__info, body#artwork #browse.browsing-artists .music-card__label, body#artwork #browse.browsing-artists .music-card__meta {
  text-align: center;
}

body#artwork #browse.browsing-artists .music-card__label {
  font-size: 16px;
  font-weight: 600;
  margin-top: 14px;
}

/* ============ playlist page (mockup 2d) ============ */
body#artwork #browse.browsing-playlist #browseTablesWrapper {
  padding-top: 0;
}

.aw-albumhead--playlist {
  display: grid;
  grid-template-columns: 260px 1fr;
  column-gap: 40px;
  align-items: end;
}
.aw-albumhead--playlist .aw-albumhead__cover {
  max-width: 260px;
  grid-row: 2;
}
.aw-albumhead--playlist .aw-albumhead__title, .aw-albumhead--playlist .aw-albumhead__artist, .aw-albumhead--playlist .aw-albumhead__meta, .aw-albumhead--playlist .aw-albumhead__actions {
  grid-column: 2;
}
.aw-albumhead--playlist .aw-albumhead__body {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-bottom: 6px;
}
.aw-albumhead--playlist .aw-albumhead__title {
  font-size: var(--t-h1-xl);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0;
}
.aw-albumhead--playlist .aw-albumhead__meta {
  margin-top: 14px;
}
.aw-albumhead--playlist .aw-albumhead__actions {
  margin-top: 26px;
}
.aw-albumhead--playlist .aw-albumhead__artist {
  display: none;
}

.aw-albumhead:not(.aw-albumhead--playlist) .aw-albumhead__body {
  display: contents;
}

/* matches .music-item's own resolved template exactly (number, cover, info, actions) — the row's
   duration/favourite columns collapse to nothing for a playlist (hidden there), so the header
   must skip them too or its 1fr resolves to a different width than the row's and every column
   past the number drifts out of alignment */
.aw-cols {
  display: grid;
  grid-template-columns: 26px 44px 1fr 27px;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  padding: 22px 14px 11px;
  border-bottom: 1px solid var(--fill-10);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
}
.aw-cols .aw-cols__info {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(140px, 260px);
  column-gap: 20px;
}

/* the non-playlist track list (Last 100, Favourites, genre/folder tracks, search) keeps its
   favourite heart, unlike a playlist row — one more resolved track than .aw-cols above, so its
   header needs the matching 5th column or the same 1fr-drift bug reappears */
.aw-cols--fav {
  grid-template-columns: 26px 44px 1fr 30px 27px;
}

.aw-cols__duration {
  display: none;
}

/* ============ list pages (mockup 2e Artists) ============ */
body#artwork #browse.browsing-list .panel .body-content.new-browse {
  top: 0;
  height: 100%;
}

body#artwork #browse.browsing-list #browseTablesWrapper {
  position: relative;
}

body#artwork .aw-hidden {
  display: none !important;
}

body#artwork #browse.browsing-list .main__list {
  display: flex;
  flex-direction: column;
}

.aw-crumbs {
  font-size: 15px;
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}
.aw-crumbs a, .aw-crumbs .aw-crumbs__cur {
  min-width: 0;
  max-width: clamp(70px, 13vw, 260px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
}
.aw-crumbs .aw-crumbs__sep {
  flex: none;
}
.aw-crumbs a {
  color: var(--ink-dim);
  text-decoration: none;
  cursor: pointer;
}
.aw-crumbs a:hover {
  color: var(--ink-3);
}
.aw-crumbs .aw-crumbs__sep {
  color: var(--ink-75);
}
.aw-crumbs .aw-crumbs__cur {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aw-filter {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 38px;
  padding: 0 16px;
  border-radius: 19px;
  width: 290px;
  margin-bottom: 0;
  font-weight: 400;
  background: var(--fill-09);
  border: 1px solid var(--fill-11);
  cursor: text;
}
.aw-filter .material-symbols-rounded {
  font-size: 20px;
  color: var(--ink-muted);
  flex: none;
}
.aw-filter input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 0;
  height: 100%;
  font-size: 14px;
  color: var(--ink);
  outline: 0;
  box-shadow: none;
  font-family: var(--font-ui);
}
.aw-filter input:focus, .aw-filter input:focus-visible {
  outline: none;
  box-shadow: none;
}
.aw-filter input::placeholder {
  color: var(--ink-muted);
}
.aw-filter input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.aw-filter:focus-within {
  border-color: var(--fill-30);
}

.aw-viewtoggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--fill-08);
  border: 1px solid var(--fill-11);
}
.aw-viewtoggle button {
  width: 34px;
  height: 30px;
  border-radius: 8px;
  border: 0;
  padding: 0;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.aw-viewtoggle button .material-symbols-rounded {
  font-size: 19px;
  color: var(--ink-muted);
}
.aw-viewtoggle button.active {
  background: var(--ink);
}
.aw-viewtoggle button.active .material-symbols-rounded {
  color: var(--on-ink);
}
.aw-viewtoggle button:hover:not(.active) .material-symbols-rounded {
  color: var(--ink);
}
.aw-viewtoggle button:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}

body#artwork #browse.browsing-list .aw-listhead {
  gap: 16px;
  margin: 26px 0 0;
}

.aw-sort {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 15px;
  border-radius: 17px;
  border: 1px solid var(--fill-16);
  background: transparent;
  cursor: pointer;
  align-self: center;
}
.aw-sort .aw-sort__k {
  font-size: 13px;
  color: var(--ink-muted);
}
.aw-sort .aw-sort__v {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
.aw-sort .material-symbols-rounded {
  font-size: 17px;
  color: var(--ink-muted);
}
.aw-sort:hover {
  background: var(--fill-06);
}
.aw-sort:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}

body#artwork #browse.browsing-list .main__row {
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  padding: 28px 0 0;
}

@media (max-width: 1400px) {
  body#artwork #browse.browsing-list .main__row {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 1100px) {
  body#artwork #browse.browsing-list .main__row {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 800px) {
  body#artwork #browse.browsing-list .main__row {
    grid-template-columns: repeat(3, 1fr);
  }
}
body#artwork #browse.browsing-artists .music-card__info {
  margin-top: 12px;
  justify-content: center;
}

body#artwork #browse.browsing-artists .music-card__label {
  max-width: 100%;
}

body#artwork #browse.browsing-artists .music-card__label {
  font-size: 15px;
  font-weight: 600;
  margin-top: 0;
}

body#artwork #browse.browsing-artists .music-card__meta {
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: 4px;
}

body#artwork #browse.browsing-artists .music-card .play-btn {
  width: 52px;
  height: 52px;
}
body#artwork #browse.browsing-artists .music-card .play-btn .play-btn__icon {
  font-size: 22px;
}

body#artwork #browse.browsing-artists .music-card__header {
  background: var(--fill-06);
  box-shadow: none;
}

body#artwork #browse.browsing-artists .music-card__img-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
body#artwork #browse.browsing-artists .music-card__img-icon .material-symbols-rounded {
  font-size: 40px;
  color: #6f757b;
}

.aw-cols.aw-cols--artists {
  display: grid;
  grid-template-columns: 26px 52px 1fr 27px;
  align-items: center;
  gap: 14px;
  padding: 22px 14px 11px;
  margin-top: 14px;
  border-bottom: 1px solid var(--fill-10);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
}

body#artwork #browse.browsing-artists .main__list {
  padding-top: 0;
}

.aw-alpha {
  position: fixed;
  right: 14px;
  top: calc(50% - 49px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  z-index: 2;
}
.aw-alpha button {
  background: transparent;
  border: 0;
  padding: 1px 5px;
  font: inherit;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  cursor: pointer;
}
.aw-alpha button:hover, .aw-alpha button.active {
  color: var(--ink);
}
.aw-alpha button.active {
  font-weight: 700;
}
.aw-alpha button:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 1px;
  border-radius: 4px;
}

/* the artists' rows show horizontal dots (the theme swapped the glyph): 12px wide in a 20px line */
body#artwork #browse.browsing-artists .music-item .item__actions .action-btn .material-symbols-rounded {
  font-size: 15px;
  width: 12px;
  height: 20px;
  line-height: 20px;
  vertical-align: top;
}

/* ============ album page track rows (mockup 2c) ============ */
@keyframes aw-eq {
  0%, 100% {
    height: 4px;
  }
  50% {
    height: 13px;
  }
}
body#artwork .music-item.aw-playing.aw-paused .item__number::before, body#artwork .music-item.aw-playing.aw-paused .item__number::after, body#artwork .music-item.aw-playing.aw-paused .item__number .item__number-dot,
body#artwork .music-item.aw-playing.aw-paused .aw-eq::before, body#artwork .music-item.aw-playing.aw-paused .aw-eq::after, body#artwork .music-item.aw-playing.aw-paused .aw-eq i {
  animation-play-state: paused;
}

/* ============ one shared row: album, playlist and plain-list/search track rows ============
   Same component (MusicRow), same row, same hover/playing behaviour everywhere — the number is
   always its own first column, and `:has()` adds a thumbnail column only when the row's own data
   actually carries one (a same-artist album has none; a streaming playlist, or a Spotify "album"
   that's really a various-artists mix, does) — no per-page reimplementation of the row itself. */
body#artwork #browse.browsing-album .music-item,
body#artwork #browse.browsing-playlist .music-item,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item,
body#artwork #browse.browsing-artists .music-item,
body#artwork #browse.browsing-search .music-item {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  margin: 0;
  min-height: 52px;
  border-radius: 0;
  border: 0;
}
body#artwork #browse.browsing-album .music-item::after,
body#artwork #browse.browsing-playlist .music-item::after,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item::after,
body#artwork #browse.browsing-artists .music-item::after,
body#artwork #browse.browsing-search .music-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--fill-06);
}
body#artwork #browse.browsing-album .music-item:has(.item__image:not(.hidden)),
body#artwork #browse.browsing-playlist .music-item:has(.item__image:not(.hidden)),
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item:has(.item__image:not(.hidden)),
body#artwork #browse.browsing-artists .music-item:has(.item__image:not(.hidden)),
body#artwork #browse.browsing-search .music-item:has(.item__image:not(.hidden)) {
  grid-template-columns: 26px 44px 1fr auto auto auto;
}
body#artwork #browse.browsing-album .music-item,
body#artwork #browse.browsing-playlist .music-item,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item,
body#artwork #browse.browsing-artists .music-item,
body#artwork #browse.browsing-search .music-item {
  /* a file-browser folder (MusicRow's isDir): no number column, and no play on hover */
}
body#artwork #browse.browsing-album .music-item.aw-dir,
body#artwork #browse.browsing-playlist .music-item.aw-dir,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item.aw-dir,
body#artwork #browse.browsing-artists .music-item.aw-dir,
body#artwork #browse.browsing-search .music-item.aw-dir {
  grid-template-columns: 1fr auto auto auto;
}
body#artwork #browse.browsing-album .music-item.aw-dir:has(.item__image:not(.hidden)),
body#artwork #browse.browsing-playlist .music-item.aw-dir:has(.item__image:not(.hidden)),
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item.aw-dir:has(.item__image:not(.hidden)),
body#artwork #browse.browsing-artists .music-item.aw-dir:has(.item__image:not(.hidden)),
body#artwork #browse.browsing-search .music-item.aw-dir:has(.item__image:not(.hidden)) {
  grid-template-columns: 44px 1fr auto auto auto;
}
body#artwork #browse.browsing-album .music-item.aw-dir .item__number,
body#artwork #browse.browsing-playlist .music-item.aw-dir .item__number,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item.aw-dir .item__number,
body#artwork #browse.browsing-artists .music-item.aw-dir .item__number,
body#artwork #browse.browsing-search .music-item.aw-dir .item__number {
  display: none;
}
body#artwork #browse.browsing-album .music-item .item__image,
body#artwork #browse.browsing-playlist .music-item .item__image,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item .item__image,
body#artwork #browse.browsing-artists .music-item .item__image,
body#artwork #browse.browsing-search .music-item .item__image {
  width: 44px;
  height: 44px;
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
body#artwork #browse.browsing-album .music-item .item__albumart, body#artwork #browse.browsing-album .music-item .item__image__img,
body#artwork #browse.browsing-playlist .music-item .item__albumart,
body#artwork #browse.browsing-playlist .music-item .item__image__img,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item .item__albumart,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item .item__image__img,
body#artwork #browse.browsing-artists .music-item .item__albumart,
body#artwork #browse.browsing-artists .music-item .item__image__img,
body#artwork #browse.browsing-search .music-item .item__albumart,
body#artwork #browse.browsing-search .music-item .item__image__img {
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}
body#artwork #browse.browsing-album .music-item .item__albumart-icon,
body#artwork #browse.browsing-playlist .music-item .item__albumart-icon,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item .item__albumart-icon,
body#artwork #browse.browsing-artists .music-item .item__albumart-icon,
body#artwork #browse.browsing-search .music-item .item__albumart-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body#artwork #browse.browsing-album .music-item .item__number,
body#artwork #browse.browsing-playlist .music-item .item__number,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item .item__number,
body#artwork #browse.browsing-artists .music-item .item__number,
body#artwork #browse.browsing-search .music-item .item__number {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
  width: auto;
  text-align: left;
  margin: 0;
}
body#artwork #browse.browsing-album .music-item .item__number-dot,
body#artwork #browse.browsing-playlist .music-item .item__number-dot,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item .item__number-dot,
body#artwork #browse.browsing-artists .music-item .item__number-dot,
body#artwork #browse.browsing-search .music-item .item__number-dot {
  display: none;
}
body#artwork #browse.browsing-album .music-item .item__info,
body#artwork #browse.browsing-playlist .music-item .item__info,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item .item__info,
body#artwork #browse.browsing-artists .music-item .item__info,
body#artwork #browse.browsing-search .music-item .item__info {
  display: block;
}
body#artwork #browse.browsing-album .music-item,
body#artwork #browse.browsing-playlist .music-item,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item,
body#artwork #browse.browsing-artists .music-item,
body#artwork #browse.browsing-search .music-item {
  /* the old, unscoped `@media (max-width: 767px) { .item__title { margin-bottom: 8px; } }`
     rule up above (a leftover from a pre-shared-row card layout) still matches `.item__title`
     everywhere below that width, including here — CSS Grid centres a row's items by their
     margin box, so that bottom-only margin pushed the visible text 4px above true centre on
     phone widths. Reset it explicitly rather than track down and rescope the old rule. */
}
body#artwork #browse.browsing-album .music-item .item__title,
body#artwork #browse.browsing-playlist .music-item .item__title,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item .item__title,
body#artwork #browse.browsing-artists .music-item .item__title,
body#artwork #browse.browsing-search .music-item .item__title {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-1);
  margin: 0;
}
body#artwork #browse.browsing-album .music-item .item__album, body#artwork #browse.browsing-album .music-item .item__artist,
body#artwork #browse.browsing-playlist .music-item .item__album,
body#artwork #browse.browsing-playlist .music-item .item__artist,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item .item__album,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item .item__artist,
body#artwork #browse.browsing-artists .music-item .item__album,
body#artwork #browse.browsing-artists .music-item .item__artist,
body#artwork #browse.browsing-search .music-item .item__album,
body#artwork #browse.browsing-search .music-item .item__artist {
  font-size: 14px;
  color: var(--ink-muted);
}
body#artwork #browse.browsing-album .music-item .item__duration,
body#artwork #browse.browsing-playlist .music-item .item__duration,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item .item__duration,
body#artwork #browse.browsing-artists .music-item .item__duration,
body#artwork #browse.browsing-search .music-item .item__duration {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
  order: 2;
}
body#artwork #browse.browsing-album .music-item .item__favorite,
body#artwork #browse.browsing-playlist .music-item .item__favorite,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item .item__favorite,
body#artwork #browse.browsing-artists .music-item .item__favorite,
body#artwork #browse.browsing-search .music-item .item__favorite {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  padding: 0;
  order: 3;
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: currentColor;
}
body#artwork #browse.browsing-album .music-item .item__favorite.favorited .item__favorite-heart .material-symbols-rounded,
body#artwork #browse.browsing-playlist .music-item .item__favorite.favorited .item__favorite-heart .material-symbols-rounded,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item .item__favorite.favorited .item__favorite-heart .material-symbols-rounded,
body#artwork #browse.browsing-artists .music-item .item__favorite.favorited .item__favorite-heart .material-symbols-rounded,
body#artwork #browse.browsing-search .music-item .item__favorite.favorited .item__favorite-heart .material-symbols-rounded {
  color: var(--ink);
}
body#artwork #browse.browsing-album .music-item .item__favorite .item__favorite-heart .material-symbols-rounded,
body#artwork #browse.browsing-playlist .music-item .item__favorite .item__favorite-heart .material-symbols-rounded,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item .item__favorite .item__favorite-heart .material-symbols-rounded,
body#artwork #browse.browsing-artists .music-item .item__favorite .item__favorite-heart .material-symbols-rounded,
body#artwork #browse.browsing-search .music-item .item__favorite .item__favorite-heart .material-symbols-rounded {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  font-size: 0;
  color: var(--ink-faint);
  margin: 0;
}
body#artwork #browse.browsing-album .music-item .item__favorite .item__favorite-heart .material-symbols-rounded::before,
body#artwork #browse.browsing-playlist .music-item .item__favorite .item__favorite-heart .material-symbols-rounded::before,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item .item__favorite .item__favorite-heart .material-symbols-rounded::before,
body#artwork #browse.browsing-artists .music-item .item__favorite .item__favorite-heart .material-symbols-rounded::before,
body#artwork #browse.browsing-search .music-item .item__favorite .item__favorite-heart .material-symbols-rounded::before {
  content: "favorite";
  font-family: "Material Symbols Rounded";
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}
body#artwork #browse.browsing-album .music-item .item__favorite:hover .material-symbols-rounded,
body#artwork #browse.browsing-playlist .music-item .item__favorite:hover .material-symbols-rounded,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item .item__favorite:hover .material-symbols-rounded,
body#artwork #browse.browsing-artists .music-item .item__favorite:hover .material-symbols-rounded,
body#artwork #browse.browsing-search .music-item .item__favorite:hover .material-symbols-rounded {
  color: var(--ink);
}
body#artwork #browse.browsing-album .music-item .item__actions,
body#artwork #browse.browsing-playlist .music-item .item__actions,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item .item__actions,
body#artwork #browse.browsing-artists .music-item .item__actions,
body#artwork #browse.browsing-search .music-item .item__actions {
  order: 4;
}
body#artwork #browse.browsing-album .music-item .item__actions .material-symbols-rounded,
body#artwork #browse.browsing-playlist .music-item .item__actions .material-symbols-rounded,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item .item__actions .material-symbols-rounded,
body#artwork #browse.browsing-artists .music-item .item__actions .material-symbols-rounded,
body#artwork #browse.browsing-search .music-item .item__actions .material-symbols-rounded {
  color: var(--ink-faint);
  font-size: 15px;
}
body#artwork #browse.browsing-album .music-item.aw-fav .item__favorite .item__favorite-heart .material-symbols-rounded,
body#artwork #browse.browsing-playlist .music-item.aw-fav .item__favorite .item__favorite-heart .material-symbols-rounded,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item.aw-fav .item__favorite .item__favorite-heart .material-symbols-rounded,
body#artwork #browse.browsing-artists .music-item.aw-fav .item__favorite .item__favorite-heart .material-symbols-rounded,
body#artwork #browse.browsing-search .music-item.aw-fav .item__favorite .item__favorite-heart .material-symbols-rounded {
  color: var(--ink);
}
body#artwork #browse.browsing-album .music-item.aw-fav .item__favorite .item__favorite-heart .material-symbols-rounded::before,
body#artwork #browse.browsing-playlist .music-item.aw-fav .item__favorite .item__favorite-heart .material-symbols-rounded::before,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item.aw-fav .item__favorite .item__favorite-heart .material-symbols-rounded::before,
body#artwork #browse.browsing-artists .music-item.aw-fav .item__favorite .item__favorite-heart .material-symbols-rounded::before,
body#artwork #browse.browsing-search .music-item.aw-fav .item__favorite .item__favorite-heart .material-symbols-rounded::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: no-repeat center/20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  filter: invert(var(--icon-invert, 0));
}
body#artwork #browse.browsing-album .music-item:not(.aw-playing):hover, body#artwork #browse.browsing-album .music-item:not(.aw-playing).aw-active,
body#artwork #browse.browsing-playlist .music-item:not(.aw-playing):hover,
body#artwork #browse.browsing-playlist .music-item:not(.aw-playing).aw-active,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item:not(.aw-playing):hover,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item:not(.aw-playing).aw-active,
body#artwork #browse.browsing-artists .music-item:not(.aw-playing):hover,
body#artwork #browse.browsing-artists .music-item:not(.aw-playing).aw-active,
body#artwork #browse.browsing-search .music-item:not(.aw-playing):hover,
body#artwork #browse.browsing-search .music-item:not(.aw-playing).aw-active {
  background: var(--row-hover);
  border-radius: 11px;
}
body#artwork #browse.browsing-album .music-item:not(.aw-playing):hover::after, body#artwork #browse.browsing-album .music-item:not(.aw-playing).aw-active::after,
body#artwork #browse.browsing-playlist .music-item:not(.aw-playing):hover::after,
body#artwork #browse.browsing-playlist .music-item:not(.aw-playing).aw-active::after,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item:not(.aw-playing):hover::after,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item:not(.aw-playing).aw-active::after,
body#artwork #browse.browsing-artists .music-item:not(.aw-playing):hover::after,
body#artwork #browse.browsing-artists .music-item:not(.aw-playing).aw-active::after,
body#artwork #browse.browsing-search .music-item:not(.aw-playing):hover::after,
body#artwork #browse.browsing-search .music-item:not(.aw-playing).aw-active::after {
  display: none;
}
body#artwork #browse.browsing-album .music-item:not(.aw-playing):hover .item__number, body#artwork #browse.browsing-album .music-item:not(.aw-playing).aw-active .item__number,
body#artwork #browse.browsing-playlist .music-item:not(.aw-playing):hover .item__number,
body#artwork #browse.browsing-playlist .music-item:not(.aw-playing).aw-active .item__number,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item:not(.aw-playing):hover .item__number,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item:not(.aw-playing).aw-active .item__number,
body#artwork #browse.browsing-artists .music-item:not(.aw-playing):hover .item__number,
body#artwork #browse.browsing-artists .music-item:not(.aw-playing).aw-active .item__number,
body#artwork #browse.browsing-search .music-item:not(.aw-playing):hover .item__number,
body#artwork #browse.browsing-search .music-item:not(.aw-playing).aw-active .item__number {
  visibility: hidden;
}
body#artwork #browse.browsing-album .music-item:not(.aw-playing):hover .item__play, body#artwork #browse.browsing-album .music-item:not(.aw-playing).aw-active .item__play,
body#artwork #browse.browsing-playlist .music-item:not(.aw-playing):hover .item__play,
body#artwork #browse.browsing-playlist .music-item:not(.aw-playing).aw-active .item__play,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item:not(.aw-playing):hover .item__play,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item:not(.aw-playing).aw-active .item__play,
body#artwork #browse.browsing-artists .music-item:not(.aw-playing):hover .item__play,
body#artwork #browse.browsing-artists .music-item:not(.aw-playing).aw-active .item__play,
body#artwork #browse.browsing-search .music-item:not(.aw-playing):hover .item__play,
body#artwork #browse.browsing-search .music-item:not(.aw-playing).aw-active .item__play {
  display: block;
}
body#artwork #browse.browsing-album .music-item .item__play,
body#artwork #browse.browsing-playlist .music-item .item__play,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item .item__play,
body#artwork #browse.browsing-artists .music-item .item__play,
body#artwork #browse.browsing-search .music-item .item__play {
  display: none;
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  z-index: 1;
  padding: 0;
  margin: 0;
  opacity: 1;
  flex: none;
}
body#artwork #browse.browsing-album .music-item .item__play .play-btn,
body#artwork #browse.browsing-playlist .music-item .item__play .play-btn,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item .item__play .play-btn,
body#artwork #browse.browsing-artists .music-item .item__play .play-btn,
body#artwork #browse.browsing-search .music-item .item__play .play-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  display: block;
  cursor: pointer;
  visibility: visible !important;
}
body#artwork #browse.browsing-album .music-item .item__play .play-btn .play-btn__icon,
body#artwork #browse.browsing-playlist .music-item .item__play .play-btn .play-btn__icon,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item .item__play .play-btn .play-btn__icon,
body#artwork #browse.browsing-artists .music-item .item__play .play-btn .play-btn__icon,
body#artwork #browse.browsing-search .music-item .item__play .play-btn .play-btn__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 22px;
  color: var(--ink);
  margin: 0;
  padding: 0;
}
body#artwork #browse.browsing-album .music-item.aw-playing,
body#artwork #browse.browsing-playlist .music-item.aw-playing,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item.aw-playing,
body#artwork #browse.browsing-artists .music-item.aw-playing,
body#artwork #browse.browsing-search .music-item.aw-playing {
  background: var(--row-fill);
  border-radius: 11px;
}
body#artwork #browse.browsing-album .music-item.aw-playing::after,
body#artwork #browse.browsing-playlist .music-item.aw-playing::after,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item.aw-playing::after,
body#artwork #browse.browsing-artists .music-item.aw-playing::after,
body#artwork #browse.browsing-search .music-item.aw-playing::after {
  display: none;
}
body#artwork #browse.browsing-album .music-item.aw-playing .item__title,
body#artwork #browse.browsing-playlist .music-item.aw-playing .item__title,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item.aw-playing .item__title,
body#artwork #browse.browsing-artists .music-item.aw-playing .item__title,
body#artwork #browse.browsing-search .music-item.aw-playing .item__title {
  font-weight: 700;
  color: var(--ink);
}
body#artwork #browse.browsing-album .music-item.aw-playing .item__duration,
body#artwork #browse.browsing-playlist .music-item.aw-playing .item__duration,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item.aw-playing .item__duration,
body#artwork #browse.browsing-artists .music-item.aw-playing .item__duration,
body#artwork #browse.browsing-search .music-item.aw-playing .item__duration {
  color: var(--ink-2);
}
body#artwork #browse.browsing-album .music-item.aw-playing .item__favorite .item__favorite-heart .material-symbols-rounded,
body#artwork #browse.browsing-playlist .music-item.aw-playing .item__favorite .item__favorite-heart .material-symbols-rounded,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item.aw-playing .item__favorite .item__favorite-heart .material-symbols-rounded,
body#artwork #browse.browsing-artists .music-item.aw-playing .item__favorite .item__favorite-heart .material-symbols-rounded,
body#artwork #browse.browsing-search .music-item.aw-playing .item__favorite .item__favorite-heart .material-symbols-rounded {
  color: var(--ink);
}
body#artwork #browse.browsing-album .music-item.aw-playing .item__number,
body#artwork #browse.browsing-playlist .music-item.aw-playing .item__number,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item.aw-playing .item__number,
body#artwork #browse.browsing-artists .music-item.aw-playing .item__number,
body#artwork #browse.browsing-search .music-item.aw-playing .item__number {
  font-size: 0;
  position: relative;
  width: 10px;
  height: 13px;
}
body#artwork #browse.browsing-album .music-item.aw-playing .item__number::before, body#artwork #browse.browsing-album .music-item.aw-playing .item__number::after, body#artwork #browse.browsing-album .music-item.aw-playing .item__number .item__number-dot,
body#artwork #browse.browsing-playlist .music-item.aw-playing .item__number::before,
body#artwork #browse.browsing-playlist .music-item.aw-playing .item__number::after,
body#artwork #browse.browsing-playlist .music-item.aw-playing .item__number .item__number-dot,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item.aw-playing .item__number::before,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item.aw-playing .item__number::after,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item.aw-playing .item__number .item__number-dot,
body#artwork #browse.browsing-artists .music-item.aw-playing .item__number::before,
body#artwork #browse.browsing-artists .music-item.aw-playing .item__number::after,
body#artwork #browse.browsing-artists .music-item.aw-playing .item__number .item__number-dot,
body#artwork #browse.browsing-search .music-item.aw-playing .item__number::before,
body#artwork #browse.browsing-search .music-item.aw-playing .item__number::after,
body#artwork #browse.browsing-search .music-item.aw-playing .item__number .item__number-dot {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 4px;
  background: var(--ink);
  animation: aw-eq 0.9s ease-in-out infinite;
}
body#artwork #browse.browsing-album .music-item.aw-playing .item__number::before,
body#artwork #browse.browsing-playlist .music-item.aw-playing .item__number::before,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item.aw-playing .item__number::before,
body#artwork #browse.browsing-artists .music-item.aw-playing .item__number::before,
body#artwork #browse.browsing-search .music-item.aw-playing .item__number::before {
  left: 0;
}
body#artwork #browse.browsing-album .music-item.aw-playing .item__number::after,
body#artwork #browse.browsing-playlist .music-item.aw-playing .item__number::after,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item.aw-playing .item__number::after,
body#artwork #browse.browsing-artists .music-item.aw-playing .item__number::after,
body#artwork #browse.browsing-search .music-item.aw-playing .item__number::after {
  left: 4px;
  animation-delay: 0.2s;
}
body#artwork #browse.browsing-album .music-item.aw-playing .item__number .item__number-dot,
body#artwork #browse.browsing-playlist .music-item.aw-playing .item__number .item__number-dot,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item.aw-playing .item__number .item__number-dot,
body#artwork #browse.browsing-artists .music-item.aw-playing .item__number .item__number-dot,
body#artwork #browse.browsing-search .music-item.aw-playing .item__number .item__number-dot {
  display: block;
  left: 8px;
  animation-delay: 0.4s;
}
body#artwork #browse.browsing-album .music-item.aw-playing.aw-paused .item__number::before, body#artwork #browse.browsing-album .music-item.aw-playing.aw-paused .item__number::after, body#artwork #browse.browsing-album .music-item.aw-playing.aw-paused .item__number .item__number-dot,
body#artwork #browse.browsing-playlist .music-item.aw-playing.aw-paused .item__number::before,
body#artwork #browse.browsing-playlist .music-item.aw-playing.aw-paused .item__number::after,
body#artwork #browse.browsing-playlist .music-item.aw-playing.aw-paused .item__number .item__number-dot,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item.aw-playing.aw-paused .item__number::before,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item.aw-playing.aw-paused .item__number::after,
body#artwork #browse.browsing-list:not(.browsing-artists) .music-item.aw-playing.aw-paused .item__number .item__number-dot,
body#artwork #browse.browsing-artists .music-item.aw-playing.aw-paused .item__number::before,
body#artwork #browse.browsing-artists .music-item.aw-playing.aw-paused .item__number::after,
body#artwork #browse.browsing-artists .music-item.aw-playing.aw-paused .item__number .item__number-dot,
body#artwork #browse.browsing-search .music-item.aw-playing.aw-paused .item__number::before,
body#artwork #browse.browsing-search .music-item.aw-playing.aw-paused .item__number::after,
body#artwork #browse.browsing-search .music-item.aw-playing.aw-paused .item__number .item__number-dot {
  animation-play-state: paused;
}

body#artwork #browse.browsing-album .album__tracks, body#artwork #browse.browsing-list .album__tracks, body#artwork #browse.browsing-search .album__tracks {
  gap: 0;
}

body#artwork .music-item .item__image, body#artwork .music-item .item__albumart-icon, body#artwork .music-item .item__albumart-icon .material-symbols-rounded, body#artwork .aw-card .item__albumart-icon .material-symbols-rounded {
  color: var(--ink-2);
}

/* a playlist page (Tidal, a local playlist…) never switches to the wide 2-column album grid at
   any width — #browseTablesWrapper there is always the plain scrolling block — so unlike the
   album head, its crumb bar always sits over moving content and always needs the frosted glass,
   not just below the narrow-fallback breakpoint where head.scss/browse.scss turn it on for albums. */
body#artwork #browse.browsing-playlist .aw-head--album::after {
  content: "";
}

body#artwork #browse.browsing-playlist .aw-head--album .aw-hblur {
  display: block;
}

/* the Artists list is the shared row too, only with a round 52px portrait and the counts
   ("7 albums · 64 tracks") under the name; after the shared block, so source order wins */
body#artwork #browse.browsing-artists .music-item:has(.item__image:not(.hidden)) {
  grid-template-columns: 26px 52px 1fr auto;
}
body#artwork #browse.browsing-artists .music-item .item__image, body#artwork #browse.browsing-artists .music-item .item__albumart, body#artwork #browse.browsing-artists .music-item .item__image__img {
  width: 52px;
  height: 52px;
}
body#artwork #browse.browsing-artists .music-item .item__albumart, body#artwork #browse.browsing-artists .music-item .item__image__img {
  border-radius: 50%;
}
body#artwork #browse.browsing-artists .music-item .item__counts {
  margin-top: 3px;
  font-size: 13px;
  color: var(--ink-dim);
}

/* every track list is one row shape — a plain playlist (Tidal, local), Spotify's album-art
   "playlist", Last 100, Favourites, a genre's or a folder's tracks, search results (isTrackList,
   so .aw-tracklist, in Browse.tsx): title over artist beside an album column, the favourite heart,
   the ⋯. Explicit px, not auto, for the heart and the ⋯, so the rows line up with .aw-cols--fav's
   header track for track (the header has nothing real to size an "auto" track from). Comes after
   the shared row block and must outrank every selector of it: the plain-list one,
   `#browse.browsing-list:not(.browsing-artists)`, counts two classes on #browse (the :not adds
   one), so this one names two as well (.boxTable is always on #browse) and wins on source order. */
body#artwork #browse.boxTable.aw-tracklist .music-item {
  grid-template-columns: 26px 1fr 30px 27px;
}
body#artwork #browse.boxTable.aw-tracklist .music-item:has(.item__image:not(.hidden)) {
  grid-template-columns: 26px 44px 1fr 30px 27px;
}
body#artwork #browse.boxTable.aw-tracklist .music-item .item__duration {
  display: none;
}
body#artwork #browse.boxTable.aw-tracklist .music-item .item__info {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(140px, 260px);
  grid-template-areas: "title album" "artist album";
  column-gap: 20px;
  row-gap: 2px;
  align-items: center;
}
body#artwork #browse.boxTable.aw-tracklist .music-item .item__title {
  grid-area: title;
  font-size: 16px;
  font-weight: 600;
}
body#artwork #browse.boxTable.aw-tracklist .music-item .item__artist {
  grid-area: artist;
  display: block;
  font-size: 13px;
  color: var(--ink-dim);
}
body#artwork #browse.boxTable.aw-tracklist .music-item .item__album {
  grid-area: album;
  display: block;
  font-size: 15px;
  color: var(--ink-muted);
}
body#artwork #browse.boxTable.aw-tracklist .music-item .item__info__separator {
  display: none;
}
body#artwork #browse.boxTable.aw-tracklist .music-item {
  /* a row without a heart of its own (the Favourites list itself) keeps the heart's column, so its
     ⋯ stays under the header's */
}
body#artwork #browse.boxTable.aw-tracklist .music-item .item__favorite.hidden {
  display: flex !important;
  visibility: hidden;
}

/* the duration column (with the quality pill), after ALBUM: only on wide screens — on a phone or a
   narrow window the title/album pair is already tight, and duration is the least useful of the three.
   A fixed width, not auto: the header and every row are separate grids, so an auto track sized by
   each one's own content (a pill + time in a row, the word DURATION in the header) left the 1fr —
   and the ALBUM column inside it — at a different x in each. 180px holds the widest pill + time
   (Spotify's "16/320 SPOTIFY 3:01"). A row without a duration keeps the column, likewise. */
@media (min-width: 1100px) {
  .aw-cols {
    grid-template-columns: 26px 44px 1fr 180px 27px;
  }
  .aw-cols--fav {
    grid-template-columns: 26px 44px 1fr 180px 30px 27px;
  }
  .aw-cols__duration {
    display: block;
    text-align: right;
  }
  body#artwork #browse.boxTable.aw-tracklist .music-item .item__duration {
    display: inline-flex;
  }
  body#artwork #browse.boxTable.aw-tracklist .music-item .item__duration.hidden {
    display: inline-flex !important;
    visibility: hidden;
  }
  body#artwork #browse.boxTable.aw-tracklist .music-item {
    grid-template-columns: 26px 1fr 180px 30px 27px;
  }
  body#artwork #browse.boxTable.aw-tracklist .music-item:has(.item__image:not(.hidden)) {
    grid-template-columns: 26px 44px 1fr 180px 30px 27px;
  }
}
/* ============ context menu (mockup "Context menu") ============ */
body#artwork .hamburgerMenu ul.dropdown-menu.buttonsGroup li {
  list-style: none;
}
body#artwork .hamburgerMenu ul.dropdown-menu.buttonsGroup li > a > span:not(.material-symbols-rounded):not(.aw-menu__badge) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork .hamburgerMenu ul.dropdown-menu.buttonsGroup .aw-menu__badge {
  font-size: 11px;
  color: var(--ink-faint);
}
body#artwork .hamburgerMenu ul.dropdown-menu.buttonsGroup .aw-menu__danger > a:hover {
  background: rgba(255, 143, 143, 0.08);
  color: var(--err-soft);
}
body#artwork .hamburgerMenu ul.dropdown-menu.buttonsGroup .aw-menu__danger > a:hover .material-symbols-rounded {
  color: var(--err-soft);
}
body#artwork .hamburgerMenu ul.dropdown-menu.buttonsGroup .aw-menu__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 12px;
}
body#artwork .hamburgerMenu ul.dropdown-menu.buttonsGroup .aw-menu__head img {
  width: 36px;
  height: 36px;
  border-radius: 5px;
  object-fit: cover;
  flex: none;
}
body#artwork .hamburgerMenu ul.dropdown-menu.buttonsGroup .aw-menu__head .aw-menu__head-text {
  min-width: 0;
}
body#artwork .hamburgerMenu ul.dropdown-menu.buttonsGroup .aw-menu__head .aw-menu__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork .hamburgerMenu ul.dropdown-menu.buttonsGroup .aw-menu__head .aw-menu__sub {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-top: 2px;
}

body#artwork #browse.browsing-album .music-item.aw-fav .item__favorite .item__favorite-heart .material-symbols-rounded {
  color: var(--ink);
}
body#artwork #browse.browsing-album .music-item.aw-fav .item__favorite .item__favorite-heart .material-symbols-rounded::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: no-repeat center/20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  filter: invert(var(--icon-invert, 0));
}

body#artwork #browse.browsing-search .panel .body-content.new-browse {
  top: 0;
  height: 100%;
}
body#artwork #browse.browsing-search .aw-browse {
  padding-bottom: 0;
}
body#artwork #browse.browsing-search #browse-page {
  padding: 0 0 48px;
}
body#artwork #browse.browsing-search .aw-listhead--search {
  margin: 26px 0 6px;
}
body#artwork #browse.browsing-search .main__source {
  margin: 0;
}
body#artwork #browse.browsing-search .main__source__title {
  display: block;
  margin: 22px 0 6px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--fill-10);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-35);
  font-weight: 400;
}
body#artwork #browse.browsing-search .main__row {
  padding: 12px 0 8px;
}

/* ============ artist page (mockup "Artist detail") ============ */
body#artwork #browse.browsing-artist .panel .body-content.new-browse {
  top: 0;
  height: 100%;
}

body#artwork #browse.browsing-artist #browseTablesWrapper {
  padding-top: 26px;
  padding-bottom: 48px;
}

body#artwork .aw-artist {
  color: var(--ink-1);
}
body#artwork .aw-artist__filter {
  width: 304px;
  height: 40px;
}
body#artwork .aw-artist__bar .aw-crumbs {
  line-height: normal;
}
body#artwork .aw-artist__hero {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  padding-top: 26px;
}
body#artwork .aw-artist__img {
  width: 158px;
  height: 158px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  box-shadow: 0 26px 54px -22px var(--shadow-deep);
  border: 1px solid var(--fill-10);
  background: var(--fill-06);
}
body#artwork .aw-artist__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 6px;
  min-width: 0;
}
body#artwork .aw-artist__eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
}
body#artwork .aw-artist__name {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-h1-lg);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
  text-wrap: pretty;
}
body#artwork .aw-artist__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  line-height: normal;
}
body#artwork .aw-artist__meta .mono {
  font-size: 13px;
  color: var(--ink-3);
}
body#artwork .aw-artist__dot {
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.4);
  flex: none;
}
body#artwork .aw-artist__story {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.5;
  max-width: 640px;
}
body#artwork .aw-artist__story > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body#artwork .aw-artist__more {
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
}
body#artwork .aw-artist__more:hover {
  color: var(--ink);
}
body#artwork .aw-artist__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  flex: none;
}
body#artwork .aw-artist__play {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 24px;
  border-radius: 23px;
  border: 0;
  background: var(--ink);
  color: var(--on-ink);
  cursor: pointer;
}
body#artwork .aw-artist__play .material-symbols-rounded {
  font-size: 23px;
}
body#artwork .aw-artist__play > span:last-child {
  font-size: 15px;
  font-weight: 700;
}
body#artwork .aw-artist__play:hover {
  background: var(--ink-1);
}
body#artwork .aw-artist__shuffle {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 20px;
  border-radius: 23px;
  border: 1px solid var(--fill-16);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
body#artwork .aw-artist__shuffle .material-symbols-rounded {
  font-size: 21px;
}
body#artwork .aw-artist__shuffle > span:last-child {
  font-size: 14px;
  font-weight: 600;
}
body#artwork .aw-artist__shuffle:hover {
  background: var(--fill-08);
}
body#artwork .aw-artist__iconbtn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--fill-16);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}
body#artwork .aw-artist__iconbtn .material-symbols-rounded {
  font-size: 21px;
}
body#artwork .aw-artist__iconbtn:hover {
  background: var(--fill-08);
  color: var(--ink);
}
body#artwork .aw-artist__menu {
  position: relative;
  display: block;
}
body#artwork .aw-artist__menu .dropdown-menu {
  top: 100%;
  margin-top: 8px;
  right: 0;
  left: auto;
}
body#artwork .aw-artist__play:focus-visible, body#artwork .aw-artist__shuffle:focus-visible, body#artwork .aw-artist__iconbtn:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}
body#artwork .aw-artist__sechead {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 26px;
  line-height: normal;
}
body#artwork .aw-artist__sechead--tracks {
  padding-top: 24px;
}
body#artwork .aw-artist__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
}
body#artwork .aw-artist__count {
  font-size: 11px;
  color: var(--ink-75);
}
body#artwork .aw-artist__link {
  margin-left: auto;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
}
body#artwork .aw-artist__link:hover {
  color: var(--ink);
}
body#artwork .aw-artist__albums {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 20px;
  padding-top: 16px;
}
@media (max-width: 1400px) {
  body#artwork .aw-artist__albums {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (max-width: 1150px) {
  body#artwork .aw-artist__albums {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  body#artwork .aw-artist__albums {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

body#artwork .aw-artist-album {
  display: flex;
  flex-direction: column;
  gap: 11px;
  cursor: pointer;
  min-width: 0;
  position: relative;
}
body#artwork .aw-artist-album__cover {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid var(--fill-08);
  box-shadow: 0 20px 40px -18px var(--shadow-deep);
  background: var(--fill-06);
}
body#artwork .aw-artist-album__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}
body#artwork .aw-artist-album__overlay {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: transparent;
  transition: background-color 0.15s ease-out;
  pointer-events: none;
}
body#artwork .aw-artist-album:hover .aw-artist-album__overlay {
  background: var(--shade-60);
}
body#artwork .aw-artist-album__play {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--ink);
  color: var(--on-ink);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  cursor: pointer;
}
body#artwork .aw-artist-album__play .material-symbols-rounded {
  font-size: 24px;
}
body#artwork .aw-artist-album:hover .aw-artist-album__play, body#artwork .aw-artist-album__play:focus-visible {
  opacity: 1;
}
body#artwork .aw-artist-album__actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}
body#artwork .aw-artist-album__more, body#artwork .aw-artist-album .hamburgerMenu .action-btn {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  place-items: center;
  background: rgba(8, 10, 13, 0.55);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
  text-shadow: none;
}
body#artwork .aw-artist-album__more .material-symbols-rounded, body#artwork .aw-artist-album .hamburgerMenu .action-btn .material-symbols-rounded {
  font-size: 19px;
}
body#artwork .aw-artist-album:hover .aw-artist-album__more, body#artwork .aw-artist-album:hover .hamburgerMenu .action-btn, body#artwork .aw-artist-album .hamburgerMenu.open .action-btn {
  opacity: 1;
}
body#artwork .aw-artist-album__actions .dropdown-menu {
  right: 0;
  left: auto;
  top: 100%;
  margin-top: 6px;
}
body#artwork .aw-artist-album:hover, body#artwork .aw-artist-album:focus-within, body#artwork .aw-artist-album.is-menu-open, body#artwork .aw-artist-album:has(.dropdown.open) {
  z-index: 6;
}
body#artwork .aw-artist-album__title {
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork .aw-artist-album__sub {
  font-size: 11px;
  line-height: normal;
  color: var(--ink-dim);
}

body#artwork #browse.browsing-artist #browse-page .main__source.aw-artist-albums {
  display: none;
}

body#artwork #browse.browsing-artist #browse-page .main__source {
  margin-bottom: 0;
}

body#artwork #browse.browsing-artist #browse-page .main__source__title {
  display: none;
}

body#artwork #browse.browsing-artist #browse-page {
  padding-top: 12px;
}

body#artwork #browse.browsing-artist:not(.aw-artist-all) #browse-page .aw-artist-tracks .album__tracks:nth-child(n+6) {
  display: none;
}

body#artwork #browse.browsing-artist #browse-page .main__list {
  display: flex;
  flex-direction: column;
  padding: 0;
}
body#artwork #browse.browsing-artist #browse-page .main__list .album__tracks {
  padding: 0;
  flex: none;
}
body#artwork #browse.browsing-artist #browse-page .main__list .music-item {
  flex: none;
}

/* was its own counter()-on-.item__image hack, same family of bug as the playlist one above: it
   drew a fake number over where a cover would go, so once MusicRow started always rendering the
   real .item__number as its own element (no longer nested inside .item__image, so the old
   `.item__image .item__number { display: none }` stopped matching anything) both showed at once.
   No thumbnails wanted in this row shape (matches the mockup), so .item__image is just hidden and
   .item__number takes its 26px slot directly — same hover/playing treatment as the shared row. */
body#artwork #browse.browsing-artist .music-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 57px;
  min-height: 0;
  padding: 0 16px 1px;
  margin: 0;
  border-radius: 0;
  border: 0;
}
body#artwork #browse.browsing-artist .music-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--fill-05);
}
body#artwork #browse.browsing-artist .music-item:hover {
  background: var(--fill-04);
}
body#artwork #browse.browsing-artist .music-item .item__image {
  display: none;
}
body#artwork #browse.browsing-artist .music-item .item__number {
  display: block;
  width: 26px;
  flex: none;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-faint);
}
body#artwork #browse.browsing-artist .music-item .item__number-dot {
  display: none;
}
body#artwork #browse.browsing-artist .music-item .item__play {
  display: block;
  position: absolute;
  left: 16px;
  top: 0;
  bottom: 0;
  width: 26px;
  padding: 0;
  margin: 0;
  opacity: 0;
  flex: none;
}
body#artwork #browse.browsing-artist .music-item .item__play .play-btn {
  width: 26px;
  height: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  display: grid;
  place-items: center;
}
body#artwork #browse.browsing-artist .music-item .item__play .play-btn .play-btn__icon {
  font-size: 22px;
  color: var(--ink);
  margin: 0;
  padding: 0;
}
body#artwork #browse.browsing-artist .music-item:hover .item__play, body#artwork #browse.browsing-artist .music-item.aw-active .item__play {
  opacity: 1;
}
body#artwork #browse.browsing-artist .music-item:hover .item__number, body#artwork #browse.browsing-artist .music-item.aw-active .item__number {
  visibility: hidden;
}
body#artwork #browse.browsing-artist .music-item .item__info {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-width: 0;
}
body#artwork #browse.browsing-artist .music-item .item__title {
  width: 290px;
  flex: none;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork #browse.browsing-artist .music-item .item__album {
  flex: 1;
  min-width: 0;
  display: block;
  font-size: 14px;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork #browse.browsing-artist .music-item .item__artist, body#artwork #browse.browsing-artist .music-item .item__info__separator, body#artwork #browse.browsing-artist .music-item .item__duration {
  display: none;
}
body#artwork #browse.browsing-artist .music-item .item__favorite {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  padding: 0;
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: currentColor;
}
body#artwork #browse.browsing-artist .music-item .item__favorite .item__favorite-heart .material-symbols-rounded {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  font-size: 0;
  color: var(--ink-faint);
  margin: 0;
}
body#artwork #browse.browsing-artist .music-item .item__favorite .item__favorite-heart .material-symbols-rounded::before {
  content: "favorite";
  font-family: "Material Symbols Rounded";
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}
body#artwork #browse.browsing-artist .music-item .item__favorite:hover .material-symbols-rounded {
  color: var(--ink);
}
body#artwork #browse.browsing-artist .music-item.aw-fav .item__favorite .item__favorite-heart .material-symbols-rounded, body#artwork #browse.browsing-artist .music-item .item__favorite.favorited .item__favorite-heart .material-symbols-rounded {
  color: var(--ink);
}
body#artwork #browse.browsing-artist .music-item .item__actions {
  padding: 0;
}
body#artwork #browse.browsing-artist .music-item .item__actions .action-btn {
  width: 20px;
  padding: 0;
  margin: 0;
  display: grid;
  place-items: center;
}
body#artwork #browse.browsing-artist .music-item .item__actions .material-symbols-rounded {
  color: var(--ink-faint);
  font-size: 20px;
  font-weight: 400;
}
body#artwork #browse.browsing-artist .music-item.aw-active {
  background: var(--fill-07);
  border-radius: 11px;
}
body#artwork #browse.browsing-artist .music-item.aw-active::after {
  display: none;
}
body#artwork #browse.browsing-artist .music-item.aw-playing {
  background: var(--row-fill);
  border-radius: 11px;
}
body#artwork #browse.browsing-artist .music-item.aw-playing::after {
  display: none;
}
body#artwork #browse.browsing-artist .music-item.aw-playing .item__title {
  font-weight: 700;
  color: var(--ink);
}
body#artwork #browse.browsing-artist .music-item.aw-playing .item__number {
  font-size: 0;
  position: relative;
  width: 10px;
  height: 13px;
  margin: 0 8px;
}
body#artwork #browse.browsing-artist .music-item.aw-playing .item__number::before, body#artwork #browse.browsing-artist .music-item.aw-playing .item__number::after, body#artwork #browse.browsing-artist .music-item.aw-playing .item__number .item__number-dot {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 4px;
  background: var(--ink);
  animation: aw-eq 0.9s ease-in-out infinite;
}
body#artwork #browse.browsing-artist .music-item.aw-playing .item__number::before {
  left: 0;
}
body#artwork #browse.browsing-artist .music-item.aw-playing .item__number::after {
  left: 4px;
  animation-delay: 0.2s;
}
body#artwork #browse.browsing-artist .music-item.aw-playing .item__number .item__number-dot {
  display: block;
  left: 8px;
  animation-delay: 0.4s;
}
body#artwork #browse.browsing-artist .music-item.aw-playing.aw-paused .item__number::before, body#artwork #browse.browsing-artist .music-item.aw-playing.aw-paused .item__number::after, body#artwork #browse.browsing-artist .music-item.aw-playing.aw-paused .item__number .item__number-dot {
  animation-play-state: paused;
}

body#artwork #browse.browsing-artists .music-card__header, body#artwork #browse.browsing-artists .music-card__overlay {
  overflow: visible;
}

body#artwork #browse.browsing-artists .music-card__img {
  border-radius: 50%;
}

body#artwork #browse.browsing-artists .music-card .meta__actions {
  top: 0;
  right: 0;
}

body#artwork #browse.browsing-artists .music-card .meta__actions .dropdown-menu {
  right: 0;
  left: auto;
}

body#artwork .music-card__wrapper {
  position: relative;
}

body#artwork .music-card__wrapper:hover, body#artwork .music-card__wrapper:focus-within, body#artwork .music-card__wrapper.is-menu-open, body#artwork .music-card__wrapper:has(.dropdown.open) {
  z-index: 6;
}

body#artwork #browse .music-card__header, body#artwork #browse .music-card__overlay {
  overflow: visible;
}

body#artwork #browse .music-card__img {
  border-radius: var(--r-cover);
}

body#artwork #browse .music-card__overlay {
  border-radius: var(--r-cover);
}

body#artwork #browse .music-card .meta__actions .dropdown-menu {
  right: 0;
  left: auto;
}

body#artwork #browse .music-card__wrapper:nth-child(odd) .meta__actions .dropdown-menu {
  left: 0;
  right: auto;
}

/* ============ the page head hands the screens their top padding ============ */
body#artwork #browse.browsing-list #browseTablesWrapper, body#artwork #browse.browsing-playlist #browseTablesWrapper, body#artwork #browse.browsing-artist #browseTablesWrapper {
  padding-top: 0;
}
body#artwork #browse .panel .body-content.new-browse.with-search-header {
  padding-top: 0;
}
body#artwork .aw-browse {
  padding-top: 0;
}

body#artwork .aw-head--search .aw-head__nav {
  flex: 1;
  min-width: 0;
}
body#artwork .aw-head--search .dedicated-search {
  flex: 1;
  min-width: 0;
  padding: 0;
  background: transparent;
}
body#artwork .aw-head--search .dedicated-search .search-container {
  max-width: 640px;
  margin: 0;
}
body#artwork .aw-head--search .dedicated-search form {
  float: none !important;
  width: 100%;
}

/* ============ fluid (zz-fluid), the browse part ============ */
body#artwork #browse .panel .body-content.new-browse {
  bottom: 0;
  height: auto !important;
}

body#artwork #browseTablesWrapper {
  padding-bottom: calc(var(--mini-h) + 16px);
}

body#artwork #browse.browsing-artist #browseTablesWrapper {
  padding-bottom: calc(var(--mini-h) + 48px);
}

body#artwork #browse.browsing-album #browseTablesWrapper > .aw-headwrap {
  padding-bottom: calc(var(--mini-h) + 24px);
}

body#artwork .aw-browse {
  padding-bottom: calc(var(--mini-h) + 40px);
}

body#artwork .aw-cards {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: clamp(10px, 1.25vw, 18px);
}

body#artwork .aw-sources {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}

body#artwork .aw-search {
  width: 320px;
  min-width: 0;
}

body#artwork #browse.browsing-list .main__row {
  grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 13vw, 190px), 1fr));
  gap: clamp(12px, 1.7vw, 24px);
}

body#artwork #browse.browsing-artists .main__row {
  row-gap: clamp(28px, 2.8vw, 40px);
}

body#artwork .aw-head__row {
  flex-wrap: wrap;
  row-gap: 10px;
}

body#artwork .aw-filter {
  width: min(290px, 100%);
}

body#artwork .aw-listhead {
  flex-wrap: wrap;
  row-gap: 10px;
}

@media (max-width: 640px) {
  body#artwork #browse:not(.browsing-album):not(.browsing-artist) .music-item .item__info {
    display: flex !important;
    flex-wrap: wrap;
    align-content: center;
    gap: 2px 0;
    min-width: 0;
  }
  body#artwork #browse:not(.browsing-album):not(.browsing-artist) .music-item .item__title {
    flex: 0 0 100%;
    order: 0;
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body#artwork #browse:not(.browsing-album):not(.browsing-artist) .music-item .item__artist {
    order: 1;
  }
  body#artwork #browse:not(.browsing-album):not(.browsing-artist) .music-item .item__info__separator {
    order: 2;
    display: block;
    margin: 0 6px;
  }
  body#artwork #browse:not(.browsing-album):not(.browsing-artist) .music-item .item__album {
    order: 3;
  }
  body#artwork #browse:not(.browsing-album):not(.browsing-artist) .music-item .item__artist, body#artwork #browse:not(.browsing-album):not(.browsing-artist) .music-item .item__album, body#artwork #browse:not(.browsing-album):not(.browsing-artist) .music-item .item__info__separator {
    display: block;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    font-size: 13px;
    color: var(--ink-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body#artwork .aw-filter {
    flex-basis: 100%;
    margin-left: 0;
  }
  body#artwork .aw-alpha {
    display: none;
  }
}
@media (max-height: 520px) {
  body#artwork .aw-alpha {
    display: none;
  }
}
body#artwork .aw-albumhead__cover {
  max-width: min(380px, 100%, 44vh, 100vh - 480px);
}

body#artwork #browse.browsing-album .aw-albumhead__title {
  font-size: min(var(--t-h1), 6vh);
}

body#artwork #browse.browsing-album .aw-albumhead__actions {
  margin-top: clamp(12px, 2.6vh, 24px);
}

@media (max-width: 860px), (max-height: 560px) {
  body#artwork #browse.browsing-album #browseTablesWrapper {
    display: block;
    overflow-y: auto !important;
    padding-bottom: calc(var(--mini-h) + 16px);
  }
  body#artwork #browse.browsing-album #browseTablesWrapper > .aw-headwrap {
    overflow: visible;
    margin: 0;
    padding: 0;
    scrollbar-width: auto;
  }
  body#artwork #browse.browsing-album #browseTablesWrapper > #browse-page {
    height: auto;
    margin-top: 28px;
    overflow: visible;
  }
  body#artwork .aw-albumhead__cover {
    max-width: min(320px, 60vw);
  }
  /* only here does the crumb bar truly sit over scrolling content (the wide 2-column grid never
     scrolls its head column at all, so head.scss turns the frosted glass off there by default) */
  body#artwork .aw-head--album::after {
    content: "";
  }
  body#artwork .aw-head--album .aw-hblur {
    display: block;
  }
  /* the wide-mode grid rule above (`#browseTablesWrapper > .aw-head { position: static; ... }`)
     isn't itself confined to a wide-only media query, so it's still in effect here — without
     this override the crumb bar stayed a static grid cell and scrolled away with everything
     else once the layout stacked into one scrolling column. Fixed is what every other context
     already gets from head.scss's own base rule; only the grid-cell padding reset needs undoing. */
  body#artwork #browse.browsing-album #browseTablesWrapper > .aw-head {
    position: fixed;
    padding-left: var(--pad-screen);
    padding-right: var(--pad-screen);
  }
}
@media (max-width: 700px) {
  body#artwork .aw-albumhead--playlist {
    grid-template-columns: 1fr;
  }
  body#artwork .aw-albumhead--playlist .aw-albumhead__cover {
    grid-row: auto;
    max-width: min(260px, 60vw);
  }
  body#artwork .aw-albumhead--playlist .aw-albumhead__body {
    grid-column: 1;
    grid-row: auto;
  }
  body#artwork .aw-cols {
    display: none;
  }
  /* every track-list row (playlists, Favourites, Last 100, search…): number · cover · text · heart · ⋯ */
  /* 12px inside the row, as the Mobile mockup's queue rows: the hover / playing fill doesn't end at the number and the ⋯ */
  body#artwork #browse.boxTable.aw-tracklist .music-item {
    grid-template-columns: 22px minmax(0, 1fr) 28px 24px;
    gap: 12px;
    padding: 10px 12px;
    min-height: 64px;
  }
  /* the hover play button sits exactly over the number column (the desktop one is 14px in, 26px wide) */
  body#artwork #browse.boxTable.aw-tracklist .music-item .item__play {
    left: 12px;
    width: 22px;
  }
  body#artwork #browse.boxTable.aw-tracklist .music-item .item__play .play-btn {
    width: 22px;
  }
  body#artwork #browse.boxTable.aw-tracklist .music-item .item__play .play-btn .play-btn__icon {
    width: 22px;
  }
  body#artwork #browse.boxTable.aw-tracklist .music-item:has(.item__image:not(.hidden)) {
    grid-template-columns: 22px 44px minmax(0, 1fr) 28px 24px;
  }
  body#artwork #browse.boxTable.aw-tracklist .music-item .item__number {
    font-size: 11px;
  }
  body#artwork #browse.boxTable.aw-tracklist .music-item .item__image {
    width: 44px;
    height: 44px;
  }
  body#artwork #browse.boxTable.aw-tracklist .music-item .item__albumart img {
    border-radius: 5px;
  }
  body#artwork #browse.boxTable.aw-tracklist .music-item .item__info {
    display: flex !important;
    flex-wrap: wrap;
    align-content: center;
    gap: 2px 0;
    min-width: 0;
  }
  body#artwork #browse.boxTable.aw-tracklist .music-item .item__title {
    flex: 0 0 100%;
    order: 0;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body#artwork #browse.boxTable.aw-tracklist .music-item .item__artist {
    order: 1;
  }
  body#artwork #browse.boxTable.aw-tracklist .music-item .item__info__separator {
    order: 2;
    display: block;
    margin: 0 6px;
  }
  body#artwork #browse.boxTable.aw-tracklist .music-item .item__album {
    order: 3;
  }
  body#artwork #browse.boxTable.aw-tracklist .music-item .item__artist, body#artwork #browse.boxTable.aw-tracklist .music-item .item__album, body#artwork #browse.boxTable.aw-tracklist .music-item .item__info__separator {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    font-size: 13px;
    color: var(--ink-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body#artwork #browse.boxTable.aw-tracklist .music-item .item__title, body#artwork #browse.boxTable.aw-tracklist .music-item .item__artist, body#artwork #browse.boxTable.aw-tracklist .music-item .item__album {
    grid-area: auto;
  }
  /* artist • album stays one line: the artist takes at most 60% and the album the rest, each cut
     with "…" — sized from their content they wrapped, leaving the • at a line's end and the album
     on a line of its own */
  body#artwork #browse.boxTable.aw-tracklist .music-item .item__artist {
    max-width: 60%;
    padding: 0;
  } /* no base 4px after it: 6px either side of the • */
  body#artwork #browse.boxTable.aw-tracklist .music-item .item__album {
    padding: 0;
  }
  body#artwork #browse.boxTable.aw-tracklist .music-item .item__info__separator {
    flex: none;
    padding: 0;
  } /* the base 6px padding doubled the 6px margin */
  body#artwork #browse.boxTable.aw-tracklist .music-item .item__album {
    flex: 1 1 0;
  }
}
body#artwork .aw-artist__hero {
  flex-wrap: wrap;
  row-gap: 18px;
  gap: clamp(16px, 2vw, 28px);
}

body#artwork .aw-artist__img {
  width: clamp(96px, 11vw, 158px);
  height: clamp(96px, 11vw, 158px);
}

body#artwork .aw-artist__albums {
  grid-template-columns: repeat(auto-fill, minmax(clamp(112px, 12vw, 165px), 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

body#artwork #browse.browsing-artist .music-item .item__title {
  width: clamp(140px, 30vw, 290px);
}

@media (max-width: 700px) {
  body#artwork .aw-artist__actions {
    margin-left: 0;
    flex-basis: 100%;
    padding-bottom: 0;
  }
  body#artwork #browse.browsing-artist .music-item .item__title {
    width: auto;
    flex: 1;
  }
  body#artwork .aw-artist__menu .dropdown-menu {
    max-width: calc(100vw - 40px);
  }
  body#artwork #browse.browsing-artist .music-item {
    gap: 12px;
    padding: 0 8px;
    height: 60px;
  }
  body#artwork #browse.browsing-artist .music-item .item__image {
    width: 22px;
  }
  body#artwork #browse.browsing-artist .music-item .item__play {
    left: 8px;
    width: 22px;
  }
  body#artwork #browse.browsing-artist .music-item .item__info {
    flex-wrap: wrap;
    gap: 2px 0;
    align-content: center;
  }
  body#artwork #browse.browsing-artist .music-item .item__title {
    flex: 0 0 100%;
    font-size: 15px;
  }
  body#artwork #browse.browsing-artist .music-item .item__album {
    flex: 0 1 auto;
    font-size: 13px;
  }
  body#artwork #browse.browsing-artist .music-item .item__favorite .item__favorite-heart .material-symbols-rounded::before {
    font-size: 18px;
  }
}
/* the browse page owns its scroller */
body#artwork #content.browse, body#artwork #content.search {
  overflow: hidden;
  padding-bottom: 0;
}

/* the playing row while this browser still waits for the stream: a spinner where the bars dance */
/* The bars are drawn by several row blocks of different weight (album page, plain lists with their
   :not(), the phone rules) — while loading they must go whatever block drew them, hence !important. */
body#artwork .music-item.aw-playing.aw-loading .item__number {
  width: auto !important;
  height: auto !important;
  display: grid !important;
  place-items: center;
}
body#artwork .music-item.aw-playing.aw-loading .item__number::before, body#artwork .music-item.aw-playing.aw-loading .item__number::after, body#artwork .music-item.aw-playing.aw-loading .item__number .item__number-dot {
  display: none !important;
}

/* a service's own genre filter and sort order (Qobuz: New Releases), beside the list's title */
body#artwork .aw-svcfilters {
  margin-left: auto;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
body#artwork .aw-svcfilters .aw-sort {
  margin-left: 0;
  max-width: 320px;
}
body#artwork .aw-svcfilters .aw-sort__v {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork .aw-svcfilters .aw-sort--on {
  border-color: var(--fill-30);
}
body#artwork .aw-svcfilters .aw-sort--on .aw-sort__v {
  color: var(--ink);
}
body#artwork .aw-svcfilters ul.dropdown-menu.buttonsGroup {
  min-width: 220px;
}/* Toasts (mockup "Toasts"): card 394 wide, pad 16 18 18, r14, glass; 34px icon tile per type; eyebrow = the
   title; message 14/600; close 19; 3px progress bar. Stack: top 28 / right 32, gap 12. And the undo toast. */
body#artwork #toast-container {
  position: fixed;
  z-index: 999999;
  top: 28px;
  right: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}
body#artwork #toast-container > .toast {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  width: 394px;
  margin: 0;
  padding: 16px 18px 18px;
  border-radius: 14px;
  opacity: 1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--menu-fill);
  -webkit-backdrop-filter: blur(60px) saturate(1.6) brightness(var(--menu-bright));
  backdrop-filter: blur(60px) saturate(1.6) brightness(var(--menu-bright));
  border: 1px solid var(--fill-16);
  box-shadow: 0 26px 60px -24px var(--shadow-deep);
  color: var(--ink-1);
}
body#artwork #toast-container > .toast::before {
  content: "info";
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-family: "Material Symbols Rounded";
  font-size: 20px;
  font-weight: 400;
  color: var(--ink-2);
  background: var(--fill-08);
  border: 1px solid var(--fill-13);
}
body#artwork #toast-container > .toast.toast-success::before {
  content: "check";
  color: var(--ok);
  background: var(--ok-wash);
  border-color: var(--ok-line);
}
body#artwork #toast-container > .toast.toast-error::before {
  content: "error";
  color: var(--err-soft);
  background: var(--err-wash);
  border-color: var(--err-line);
}
body#artwork #toast-container > .toast.toast-warning::before {
  content: "warning";
  color: var(--warn-ink);
  background: var(--warn-wash);
  border-color: var(--warn-line);
}
body#artwork #toast-container > .toast.toast-error {
  border-color: var(--err-line);
}
body#artwork #toast-container > .toast .toast-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body#artwork #toast-container > .toast .toast-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink-muted);
  margin: 0;
  padding: 0;
}
body#artwork #toast-container > .toast .toast-message {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-1);
  text-wrap: pretty;
  margin: 0;
  word-wrap: break-word;
}
body#artwork #toast-container > .toast .toast-message a {
  color: var(--ink);
}
body#artwork #toast-container > .toast .toast-close-button {
  order: 3;
  flex: none;
  margin: 0;
  padding: 0;
  width: 19px;
  height: 19px;
  font-size: 0;
  line-height: 0;
  color: var(--ink-faint);
  background: transparent;
  border: 0;
  cursor: pointer;
  align-self: flex-start;
}
body#artwork #toast-container > .toast .toast-close-button::before {
  content: "close";
  font-family: "Material Symbols Rounded";
  font-size: 19px;
  line-height: 1;
}
body#artwork #toast-container > .toast .toast-close-button:hover, body#artwork #toast-container > .toast .toast-close-button:focus {
  color: var(--ink);
}
body#artwork #toast-container > .toast::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--fill-12);
}
body#artwork #toast-container > .toast .toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  opacity: 1;
  z-index: 1;
  background: rgba(255, 255, 255, 0.75);
}
body#artwork #toast-container > .toast.toast-success .toast-progress {
  background: var(--ok);
}
body#artwork #toast-container > .toast.toast-error .toast-progress {
  background: var(--err-soft);
}
body#artwork #toast-container > .toast.toast-warning .toast-progress {
  background: #e8c76a;
}

body#artwork #toast-container > .toast {
  width: min(394px, 100vw - 24px);
}

@media (max-width: 480px) {
  html body#artwork #toast-container {
    left: 12px !important;
    right: 12px !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    align-items: stretch;
  }
  html body#artwork #toast-container > .toast {
    width: auto !important;
  }
  body#artwork #toast-container > .toast .toast-message, body#artwork #toast-container > .toast .toast-title {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
/* the undo toast (handoff 7b) */
body#artwork .aw-undo {
  position: fixed;
  left: 50%;
  bottom: calc(var(--mini-h) + 16px);
  z-index: 950;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  width: 420px;
  max-width: calc(100vw - 32px);
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--menu-fill);
  -webkit-backdrop-filter: blur(34px) brightness(var(--menu-bright));
  backdrop-filter: blur(34px) brightness(var(--menu-bright));
  border: 1px solid var(--fill-16);
  box-shadow: 0 20px 44px -22px var(--shadow-deep);
  color: var(--ink-1);
  animation: aw-undo-in 0.26s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
body#artwork .aw-undo__icon {
  flex: none;
  font-size: 22px;
  color: var(--ink);
}
body#artwork .aw-undo__text {
  min-width: 0;
  flex: 1;
}
body#artwork .aw-undo__eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
}
body#artwork .aw-undo__title {
  font-size: 15px;
  font-weight: 600;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork .aw-undo__btn {
  flex: none;
  margin-left: auto;
  border: 0;
  background: transparent;
  padding: 6px 2px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body#artwork .aw-undo__btn:hover {
  opacity: 0.8;
}

@keyframes aw-undo-in {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
body#artwork .aw-undo--np {
  bottom: 118px;
}

@media (max-width: 700px) and (orientation: portrait) {
  body#artwork .aw-undo--np {
    bottom: calc(88px + var(--sa-b) + 16px);
  }
}
/* the player cannot be reached: a dimmed layer over everything, a card in the toasts' glass */
body#artwork .aw-connlost {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: aw-connlost-in 0.3s ease both;
}
body#artwork .aw-connlost__card {
  box-sizing: border-box;
  width: min(400px, 100vw - 32px);
  padding: 30px 28px 26px;
  border-radius: 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--menu-fill);
  -webkit-backdrop-filter: blur(60px) saturate(1.6) brightness(var(--menu-bright));
  backdrop-filter: blur(60px) saturate(1.6) brightness(var(--menu-bright));
  border: 1px solid var(--fill-16);
  box-shadow: 0 26px 60px -24px var(--shadow-deep);
  color: var(--ink-1);
}
body#artwork .aw-connlost__card .aw-spinner {
  margin-bottom: 10px;
}
body#artwork .aw-connlost__card .aw-btn {
  margin-top: 12px;
}
body#artwork .aw-connlost__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}
body#artwork .aw-connlost__text {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
}
body#artwork .aw-connlost__seen {
  margin: 4px 0 0;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
}
body#artwork .aw-connlost__hint {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-dim);
  text-wrap: pretty;
}

@keyframes aw-connlost-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* the playlist sheet (Dialogs mockup) and the web radio sheet */
body#artwork .modal.aw-dlg--playlist .modal-dialog {
  width: 480px;
}

body#artwork .aw-sheet--playlist .aw-playlist__new, body#artwork .aw-sheet--radio .aw-playlist__new {
  padding: 4px 26px 0;
  display: flex;
  gap: 10px;
}
body#artwork .aw-sheet--playlist .aw-playlist__input, body#artwork .aw-sheet--radio .aw-playlist__input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  margin: 0;
  font-weight: 400;
  cursor: text;
  background: var(--fill-06);
  border: 1px solid var(--fill-11);
}
body#artwork .aw-sheet--playlist .aw-playlist__input .material-symbols-rounded, body#artwork .aw-sheet--radio .aw-playlist__input .material-symbols-rounded {
  font-size: 20px;
  color: var(--ink-muted);
}
body#artwork .aw-sheet--playlist .aw-playlist__input input, body#artwork .aw-sheet--radio .aw-playlist__input input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 0;
  height: 100%;
  font-size: 14px;
  color: var(--ink);
  outline: 0;
  box-shadow: none;
  font-family: var(--font-ui);
}
body#artwork .aw-sheet--playlist .aw-playlist__input input::placeholder, body#artwork .aw-sheet--radio .aw-playlist__input input::placeholder {
  color: var(--ink-dim);
}
body#artwork .aw-sheet--playlist .aw-playlist__input input:focus, body#artwork .aw-sheet--playlist .aw-playlist__input input:focus-visible, body#artwork .aw-sheet--radio .aw-playlist__input input:focus, body#artwork .aw-sheet--radio .aw-playlist__input input:focus-visible {
  outline: none;
  box-shadow: none;
}
body#artwork .aw-sheet--playlist .aw-playlist__input:focus-within, body#artwork .aw-sheet--radio .aw-playlist__input:focus-within {
  border-color: var(--fill-30);
}
body#artwork .aw-sheet--playlist .aw-playlist__create, body#artwork .aw-sheet--radio .aw-playlist__create {
  height: 46px;
  padding: 0 20px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  background: var(--fill-08);
  border: 1px solid var(--fill-12);
}
body#artwork .aw-sheet--playlist .aw-playlist__create:disabled, body#artwork .aw-sheet--radio .aw-playlist__create:disabled {
  color: var(--ink-dim);
  background: var(--fill-04);
  border-color: var(--fill-09);
  cursor: default;
}
body#artwork .aw-sheet--playlist .aw-playlist__create:not(:disabled):hover, body#artwork .aw-sheet--radio .aw-playlist__create:not(:disabled):hover {
  background: var(--fill-12);
  color: var(--ink);
}
body#artwork .aw-sheet--playlist .aw-playlist__list-wrap, body#artwork .aw-sheet--radio .aw-playlist__list-wrap {
  padding: 18px 26px 0;
}
body#artwork .aw-sheet--playlist .aw-playlist__list-wrap .aw-sheet__eyebrow, body#artwork .aw-sheet--radio .aw-playlist__list-wrap .aw-sheet__eyebrow {
  margin-bottom: 10px;
}
body#artwork .aw-sheet--playlist .aw-playlist__list, body#artwork .aw-sheet--radio .aw-playlist__list {
  border-radius: 14px;
  overflow: hidden;
  background: var(--fill-04);
  border: 1px solid var(--fill-10);
  max-height: 336px;
  overflow-y: auto;
}
body#artwork .aw-sheet--playlist .aw-playlist__row, body#artwork .aw-sheet--radio .aw-playlist__row {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 56px;
  width: 100%;
  padding: 0 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--fill-07);
  color: var(--ink-1);
  text-align: left;
  cursor: pointer;
}
body#artwork .aw-sheet--playlist .aw-playlist__row:last-child, body#artwork .aw-sheet--radio .aw-playlist__row:last-child {
  border-bottom: 0;
}
body#artwork .aw-sheet--playlist .aw-playlist__row .material-symbols-rounded, body#artwork .aw-sheet--radio .aw-playlist__row .material-symbols-rounded {
  font-size: 21px;
  color: var(--ink-dim);
}
body#artwork .aw-sheet--playlist .aw-playlist__row .aw-playlist__name, body#artwork .aw-sheet--radio .aw-playlist__row .aw-playlist__name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork .aw-sheet--playlist .aw-playlist__row:hover, body#artwork .aw-sheet--radio .aw-playlist__row:hover {
  background: var(--fill-04);
}
body#artwork .aw-sheet--playlist .aw-playlist__row.active, body#artwork .aw-sheet--radio .aw-playlist__row.active {
  background: var(--fill-07);
}
body#artwork .aw-sheet--playlist .aw-playlist__row.active .material-symbols-rounded, body#artwork .aw-sheet--radio .aw-playlist__row.active .material-symbols-rounded {
  color: var(--ink-1);
}
body#artwork .aw-sheet--playlist .aw-playlist__row.active .aw-playlist__name, body#artwork .aw-sheet--radio .aw-playlist__row.active .aw-playlist__name {
  font-weight: 600;
}
body#artwork .aw-sheet--playlist .aw-sheet__foot .aw-sheet__status, body#artwork .aw-sheet--radio .aw-sheet__foot .aw-sheet__status {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-right: auto;
}
body#artwork .aw-sheet--playlist .aw-sheet__btn:disabled, body#artwork .aw-sheet--radio .aw-sheet__btn:disabled {
  opacity: 0.5;
  cursor: default;
}
body#artwork .aw-sheet--playlist .aw-sheet__doc, body#artwork .aw-sheet--radio .aw-sheet__doc {
  font-size: 12px;
  color: var(--ink-dim);
}
/* Zones page — device rows in the mockup's table idiom */
body#artwork .aw-zones {
  padding: 0 var(--pad-screen) 48px;
  color: var(--ink-1); /* the fixed head (and its spacer) carries the top */
}
body#artwork .aw-zones .aw-listhead {
  margin: 26px 0 18px;
}
body#artwork .aw-zones { /* as the library's lists under their head */ }
body#artwork .aw-zones .aw-menu-btn {
  display: none;
}
body#artwork .aw-zones .aw-zones__empty {
  font-size: 15px;
  color: var(--ink-muted);
  margin-top: 12px;
}
body#artwork .aw-zones .aw-zones__cols, body#artwork .aw-zones .aw-zone {
  display: grid;
  grid-template-columns: 44px 1fr 300px 220px 200px;
  align-items: center;
  gap: 20px;
}
body#artwork .aw-zones .aw-zones__cols {
  padding: 16px 14px 12px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
}
body#artwork .aw-zones .aw-zone {
  padding: 14px;
  border-radius: 12px;
  border-top: 1px solid var(--fill-06);
}
body#artwork .aw-zones .aw-zone.aw-zone--self {
  background: var(--fill-06);
  border-top: 0;
}
body#artwork .aw-zones .aw-zone.aw-zone--child .aw-zone__icon {
  margin-left: 22px;
  background: var(--fill-06);
}
body#artwork .aw-zones .aw-zone__icon {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--fill-10);
  display: grid;
  place-items: center;
  overflow: hidden;
}
body#artwork .aw-zones .aw-zone__icon .material-symbols-rounded {
  font-size: 22px;
  color: var(--ink-2);
}
body#artwork .aw-zones .aw-zone__icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body#artwork .aw-zones .aw-zone__name {
  min-width: 0;
}
body#artwork .aw-zones .aw-zone__title {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork .aw-zones .aw-zone__sep {
  margin: 0 6px;
}
body#artwork .aw-zones .aw-zone__sub {
  font-size: 13px;
  color: var(--ink-dim);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork .aw-zones .aw-zone__np {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: 14px;
  color: var(--ink-2);
}
body#artwork .aw-zones .aw-zone__np .aw-zone__track {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork .aw-zones .aw-zone__np .aw-zone__idle {
  color: var(--ink-dim);
  text-transform: capitalize;
}
body#artwork .aw-zones .aw-zone__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex: none;
}
body#artwork .aw-zones .aw-zone__dot--on {
  background: var(--ok);
}
body#artwork .aw-zones .aw-zone__vol {
  display: flex;
  align-items: center;
  gap: 12px;
}
body#artwork .aw-zones .aw-zone__vol input[type=range] {
  flex: 1;
  min-width: 0;
  height: 13px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
body#artwork .aw-zones .aw-zone__vol input[type=range]::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 2.5px;
  background: linear-gradient(var(--ink), var(--ink)) no-repeat, var(--fill-20);
  background-size: var(--aw-fill, 0%) 100%;
}
body#artwork .aw-zones .aw-zone__vol input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--fill-14), 0 2px 6px var(--shadow-soft);
}
body#artwork .aw-zones .aw-zone__vol input[type=range]::-moz-range-track {
  height: 5px;
  border-radius: 2.5px;
  background: var(--fill-20);
}
body#artwork .aw-zones .aw-zone__vol input[type=range]::-moz-range-progress {
  height: 5px;
  border-radius: 2.5px;
  background: var(--ink);
}
body#artwork .aw-zones .aw-zone__vol input[type=range]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--fill-14), 0 2px 6px var(--shadow-soft);
}
body#artwork .aw-zones .aw-zone__vol input[type=range]:focus {
  outline: none;
}
body#artwork .aw-zones .aw-zone__vol input[type=range]:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 4px;
  border-radius: 3px;
}
body#artwork .aw-zones .aw-zone__vol .mono {
  font-size: 12px;
  color: var(--ink-muted);
  width: 28px;
  text-align: right;
}
body#artwork .aw-zones .aw-zone__act {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
body#artwork .aw-zones .aw-zone__btn {
  height: 34px;
  padding: 0 15px;
  border-radius: 17px;
  border: 1px solid var(--fill-16);
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-ui);
}
body#artwork .aw-zones .aw-zone__btn:hover {
  background: var(--fill-06);
}
body#artwork .aw-zones .aw-zone__btn:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}
body#artwork .aw-zones .aw-zone__group {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 15px;
}
body#artwork .aw-zones .aw-zone__group option {
  color: var(--on-ink);
}
/* The settings shell (grid 216 · 1fr · 340), the nav, the side column, the landing, the search, the theme card. */
/* the settings head is the phone's: the desktop shell has its nav */
.aw-head--settings {
  display: none;
}

/* the frame's heading line (Bootstrap's own, at its own specificity: the theme's title rules must still win) */
:where(body#artwork) h1, :where(body#artwork) h2, :where(body#artwork) h3, :where(body#artwork) h4, :where(body#artwork) h5, :where(body#artwork) h6 {
  line-height: 1.1;
}

/* the theme's global form dress (the inherited settings reskin): text inputs, selects, buttons */
body#artwork input[type=text], body#artwork input[type=number], body#artwork input[type=password], body#artwork input[type=email], body#artwork select, body#artwork textarea {
  background: var(--glass-2-fill);
  border: 1px solid var(--glass-2-border);
  color: var(--ink-1);
  border-radius: var(--r-control);
  padding: 8px 12px;
}
body#artwork input[type=text]::placeholder, body#artwork input[type=number]::placeholder, body#artwork input[type=password]::placeholder, body#artwork input[type=email]::placeholder, body#artwork select::placeholder, body#artwork textarea::placeholder {
  color: var(--ink-dim);
}
body#artwork input[type=text]:focus, body#artwork input[type=number]:focus, body#artwork input[type=password]:focus, body#artwork input[type=email]:focus, body#artwork select:focus, body#artwork textarea:focus {
  outline: 2px solid var(--ink-1);
  outline-offset: 1px;
}
body#artwork label, body#artwork .control-label {
  color: var(--ink-2);
}
body#artwork .btn:not(.btn-link), body#artwork button.btn:not(.btn-link) {
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-2-border);
  background: var(--glass-2-fill);
  color: var(--ink-1);
}
body#artwork .btn:not(.btn-link):hover, body#artwork button.btn:not(.btn-link):hover {
  background: var(--glass-2-hover);
}
body#artwork .btn-primary, body#artwork .btn-info, body#artwork .saveButton, body#artwork button.btn-primary {
  background: var(--ink);
  color: var(--ground);
  border: 0;
}
body#artwork .btn-primary:hover, body#artwork .btn-info:hover, body#artwork .saveButton:hover, body#artwork button.btn-primary:hover {
  background: var(--ink-1);
  color: var(--ground);
}
body#artwork .btn-danger {
  background: var(--err);
  color: var(--ink);
  border: 0;
}
body#artwork .setting-container, body#artwork .setting-container .panel, body#artwork .setting-container .panel-body, body#artwork .setting-container .panel-heading,
body#artwork #pluginWrapper .panel, body#artwork #pluginWrapper .panel-default, body#artwork #pluginWrapper .panel-body, body#artwork #pluginWrapper .panel-heading {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body#artwork .panel-title, body#artwork .setting-container h2, body#artwork .config-section-title, body#artwork .section-label {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--ink-1);
}
body#artwork .panel-title .fa {
  color: var(--ink-dim);
}
body#artwork .help-block, body#artwork .setting-description, body#artwork small {
  color: var(--ink-muted);
}

body#artwork #contentWrapper.aw-settings-shell {
  display: grid;
  height: 100%;
}
body#artwork #contentWrapper.aw-settings-shell > #content {
  position: relative;
  height: 100%;
  overflow-y: auto;
  min-width: 0;
}

.aw-settings-side {
  display: block;
  min-width: 0;
}

.aw-snav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  height: 100%;
  padding: 40px 16px 24px;
  border-right: 1px solid var(--fill-07);
}
.aw-snav__eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  padding: 0 14px 14px;
}
.aw-snav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 14px;
  border-radius: 11px;
  color: var(--ink-3);
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
}
.aw-snav__item .material-symbols-rounded {
  font-size: 20px;
  color: var(--ink-dim);
}
.aw-snav__item:hover {
  background: var(--fill-06);
  color: var(--ink-1);
}
.aw-snav__item.active {
  background: var(--fill-10);
  color: var(--ink-1);
  font-weight: 600;
}
.aw-snav__item.active .material-symbols-rounded {
  color: var(--ink-1);
}
.aw-snav__item:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}
.aw-snav__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aw-snav__foot {
  margin-top: auto;
  padding: 0 14px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-75);
}

.aw-mnav {
  display: none;
}

.aw-settings-nav {
  display: block;
  min-width: 0;
}

.aw-sside {
  height: 100%;
  padding: 40px 26px 0;
  min-width: 0;
  border-left: 1px solid var(--fill-07);
  background: var(--shade-28);
  -webkit-backdrop-filter: blur(34px);
  backdrop-filter: blur(34px);
}
.aw-sside__eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-35);
}

.aw-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  background: var(--fill-10);
  border: 1px solid var(--fill-13);
}
.aw-badge .mono {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-1);
}
.aw-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
}
.aw-badge__dot--warn {
  background: var(--warn);
}
.aw-badge__dot--idle {
  background: var(--ink-faint);
}

.aw-path {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
.aw-path li {
  position: relative;
  padding: 0 0 22px 24px;
}
.aw-path li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ok);
}
.aw-path li:first-child::before, .aw-path li:last-child::before {
  background: var(--ink-3);
}
.aw-path li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 18px;
  bottom: 0;
  width: 1px;
  background: var(--fill-12);
}
.aw-path li:last-child::after {
  display: none;
}
.aw-path__name {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-1);
}
.aw-path__val {
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  text-transform: uppercase;
}

.aw-kv {
  margin-top: 26px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--fill-05);
  border: 1px solid var(--fill-08);
}
.aw-kv__title {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.aw-kv__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
}
.aw-kv__row > span:first-child {
  font-size: 14px;
  color: var(--ink-dim);
}
.aw-kv__row > .mono {
  font-size: 13px;
  color: var(--ink-1);
  text-align: right;
  word-break: break-word;
}

/* the landing */
body#artwork .setting-container.panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: 40px 34px 0;
}
body#artwork .setting-container.panel .panel-heading {
  background: transparent;
  border: 0;
  padding: 0;
}
body#artwork .setting-container.panel .panel-title {
  font-family: var(--font-ui);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
body#artwork .setting-container.panel .panel-title .fa {
  display: none;
}
body#artwork .setting-container.panel .panel-body {
  padding: 0;
}
body#artwork .setting-container.panel {
  /* the frame's row/column boxes under the heading (the clearfix keeps the search pill's margin inside) */
}
body#artwork .setting-container.panel .panel-body > .row {
  margin: 0 -15px;
}
body#artwork .setting-container.panel .panel-body > .row::before, body#artwork .setting-container.panel .panel-body > .row::after {
  content: " ";
  display: table;
}
body#artwork .setting-container.panel .panel-body > .row::after {
  clear: both;
}
body#artwork .setting-container.panel .panel-body > .row > .col-xs-24 {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding: 0 15px;
  box-sizing: border-box;
}
body#artwork .setting-container.panel .hardwareToggleCheckbox {
  margin-top: 16px;
  font-size: 14px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 10px;
}

.aw-settings-hint {
  margin: 34px 0 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
} /* a paragraph keeps the frame's 10px foot */
/* the theme card and the ambient rows (the appearance slot) */
body#artwork .aw-theme-card {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 18px 20px;
  margin: 0 0 26px;
  border-radius: var(--r-panel);
  background: var(--fill-06);
  border: 1px solid var(--line-soft, var(--hairline-soft));
}
body#artwork .aw-theme-card__text {
  min-width: 0;
  flex: 1;
}
body#artwork .aw-theme-card__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
body#artwork .aw-theme-card__hint {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-dim);
}

body#artwork .aw-theme-pick {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 13px;
  flex: none;
  background: var(--fill-08);
  border: 1px solid var(--fill-11);
}
body#artwork .aw-theme-pick button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-ui);
}
body#artwork .aw-theme-pick button .material-symbols-rounded {
  font-size: 19px;
}
body#artwork .aw-theme-pick button:hover:not(.active) {
  color: var(--ink);
}
body#artwork .aw-theme-pick button.active {
  background: var(--ink);
  color: var(--on-ink);
}
body#artwork .aw-theme-pick button:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}

body#artwork .aw-theme-card--inline {
  margin: 18px 0 0;
  background: var(--fill-05);
  border-color: var(--hairline-soft);
}

body#artwork #pluginWrapper .aw-theme-card--inline {
  max-width: 100%;
}

@media (max-width: 560px) {
  body#artwork .aw-theme-pick {
    width: 100%;
  }
  body#artwork .aw-theme-pick button {
    flex: 1;
    justify-content: center;
    padding: 0 8px;
  }
  body#artwork .aw-theme-pick__label {
    display: none;
  }
}
body#artwork .aw-amb-rows {
  margin-top: 6px;
}

body#artwork .aw-amb-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--fill-08);
}
body#artwork .aw-amb-row:last-child {
  border-bottom: 0;
}
body#artwork .aw-amb-row__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
body#artwork .aw-amb-row__hint {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 3px;
}
body#artwork .aw-amb-row__hint code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
  background: var(--fill-08);
  padding: 1px 5px;
  border-radius: 4px;
}

body#artwork .aw-switch {
  position: relative;
  width: 52px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 15px;
  background: var(--fill-16);
  cursor: pointer;
  flex: none;
  transition: background 0.2s ease;
}
body#artwork .aw-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 0.2s ease, background 0.2s ease;
}
body#artwork .aw-switch.on {
  background: var(--ink);
}
body#artwork .aw-switch.on .aw-switch__knob {
  transform: translateX(22px);
  background: var(--on-ink);
}
body#artwork .aw-switch--sm {
  width: 44px;
  height: 26px;
}
body#artwork .aw-switch--sm .aw-switch__knob {
  width: 20px;
  height: 20px;
}
body#artwork .aw-switch--sm.on .aw-switch__knob {
  transform: translateX(18px);
}
body#artwork .aw-switch:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}

body#artwork .aw-seg {
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--fill-08);
  border: 1px solid var(--fill-12);
}
body#artwork .aw-seg button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 7px 11px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  cursor: pointer;
}
body#artwork .aw-seg button:hover:not(.active) {
  color: var(--ink);
}
body#artwork .aw-seg button.active {
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
}
body#artwork .aw-seg button:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}

body#artwork .aw-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 8px 0 14px;
  border-radius: 999px;
  background: var(--fill-10);
  border: 1px solid var(--fill-13);
  color: var(--ink);
  cursor: pointer;
}
body#artwork .aw-select select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  padding-right: 28px;
  cursor: pointer;
  outline: 0;
}
body#artwork .aw-select select option {
  color: #14161a;
}
body#artwork .aw-select .material-symbols-rounded {
  position: absolute;
  right: 8px;
  font-size: 20px;
  color: var(--ink-3);
  pointer-events: none;
}

body#artwork .aw-amb-night {
  display: flex;
  align-items: center;
  gap: 10px;
}
body#artwork .aw-amb-night__dash {
  color: var(--ink-3);
}

body#artwork .aw-time {
  width: 76px;
  height: 34px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--fill-12);
  background: var(--fill-08);
  color: var(--ink);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}
body#artwork .aw-time:disabled {
  opacity: 0.45;
}

@media (max-width: 560px) {
  body#artwork .aw-amb-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
body#artwork .aw-amb-save {
  margin: 14px 0 0;
}
body#artwork .aw-amb-save .control-buttons {
  display: flex;
  justify-content: flex-start;
}

/* the settings search (handoff 11a) */
body#artwork .aw-ssearch {
  margin: 20px 0 0;
  max-width: 652px;
}

body#artwork .aw-ssearch__field {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  margin: 0;
  font-weight: 400;
  cursor: text;
  background: var(--fill-10);
  border: 1px solid var(--fill-13);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
body#artwork .aw-ssearch__field > .material-symbols-rounded {
  font-size: 21px;
  color: var(--ink-3);
}
body#artwork .aw-ssearch__field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: 0;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--ink);
}
body#artwork .aw-ssearch__field input::placeholder {
  color: var(--ink-muted);
}
body#artwork .aw-ssearch__field input::-webkit-search-cancel-button {
  display: none;
}

body#artwork .aw-ssearch.is-active .aw-ssearch__field, body#artwork .aw-ssearch__field:focus-within {
  background: var(--fill-14);
  border-color: var(--ink-1);
}
body#artwork .aw-ssearch.is-active .aw-ssearch__field > .material-symbols-rounded, body#artwork .aw-ssearch__field:focus-within > .material-symbols-rounded {
  color: var(--ink-1);
}

body#artwork .aw-ssearch__key {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

body#artwork .aw-ssearch__clear {
  margin-left: auto;
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  cursor: pointer;
}
body#artwork .aw-ssearch__clear .material-symbols-rounded {
  font-size: 19px;
}
body#artwork .aw-ssearch__clear:hover {
  color: var(--ink);
}

body#artwork .aw-ssearch__count {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
  margin-top: 20px;
}

body#artwork .aw-ssearch__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
}

body#artwork .aw-ssearch__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
}
body#artwork .aw-ssearch__row.is-focus {
  background: var(--fill-10);
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}
body#artwork .aw-ssearch__row.is-focus .aw-ssearch__chev {
  color: var(--ink-3);
}

body#artwork .aw-ssearch__text {
  min-width: 0;
}

body#artwork .aw-ssearch__eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
  margin-bottom: 4px;
}

body#artwork .aw-ssearch__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

body#artwork .aw-ssearch__sub {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 2px;
}

body#artwork .aw-ssearch__chev {
  font-size: 20px;
  color: var(--ink-dim);
}

body#artwork .aw-ssearch__loading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 0 14px;
}
body#artwork .aw-ssearch__loading .mono {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
}

body#artwork .aw-ssearch__spin {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--fill-20);
  border-top-color: var(--ink-3);
  animation: aw-spin 0.9s linear infinite;
}

body#artwork .aw-ssearch__none {
  padding: 34px 14px 30px;
  font-size: 16px;
  color: #5e646c;
}

body#artwork .aw-ssearch-host + .aw-settings-hint {
  margin-top: 24px;
}

body#artwork .aw-ssearch-host.is-active ~ .aw-settings-hint {
  display: none;
}

body#artwork #pluginWrapper .panel.aw-flash {
  animation: aw-flash 0.6s ease-out;
}

@keyframes aw-flash {
  0% {
    background-color: var(--fill-14);
  }
  100% {
    background-color: transparent;
  }
}
/* fluid: the shell's columns */
body#artwork #contentWrapper.aw-settings-shell {
  grid-template-columns: clamp(170px, 15vw, 216px) 1fr clamp(250px, 23.6vw, 340px);
}

body#artwork #contentWrapper.aw-settings-shell.aw-settings-shell--noside {
  grid-template-columns: clamp(170px, 15vw, 216px) 1fr;
}

@media (max-width: 1180px) {
  body#artwork #contentWrapper.aw-settings-shell, body#artwork #contentWrapper.aw-settings-shell.aw-settings-shell--noside {
    grid-template-columns: clamp(170px, 15vw, 216px) 1fr;
  }
  body#artwork #contentWrapper.aw-settings-shell > .aw-settings-side {
    display: none;
  }
}
@media (max-width: 720px) {
  body#artwork #contentWrapper.aw-settings-shell, body#artwork #contentWrapper.aw-settings-shell.aw-settings-shell--noside {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  body#artwork #contentWrapper.aw-settings-shell .aw-snav {
    flex-direction: row;
    height: auto;
    overflow-x: auto;
    padding: 10px 8px;
    gap: 4px;
    border-right: 0;
    border-bottom: 1px solid var(--fill-07);
    scrollbar-width: none;
  }
  body#artwork #contentWrapper.aw-settings-shell .aw-snav::-webkit-scrollbar {
    display: none;
  }
  body#artwork #contentWrapper.aw-settings-shell .aw-snav__eyebrow, body#artwork #contentWrapper.aw-settings-shell .aw-snav__foot {
    display: none;
  }
  body#artwork #contentWrapper.aw-settings-shell .aw-snav__item {
    flex: none;
    height: 38px;
  }
}
@media (max-width: 640px) {
  body#artwork .aw-pe__row {
    grid-template-columns: 1fr !important;
    row-gap: 10px !important;
  }
  body#artwork #pluginWrapper .form-group {
    grid-template-columns: auto 1fr !important;
    column-gap: 8px;
    row-gap: 10px !important;
  }
  body#artwork #pluginWrapper .form-group > label.plugin-label {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  body#artwork #pluginWrapper .form-group > .control-doc {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: start;
  }
  body#artwork #pluginWrapper .form-group > .control-item {
    grid-column: 1/-1 !important;
    grid-row: 2 !important;
  }
  body#artwork #pluginWrapper .form-group > .control-description {
    grid-column: 1/-1 !important;
    grid-row: 3 !important;
  }
}
/* a plugin's settings page while they load, and when they never come */
body#artwork .aw-pluginwait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 60px 20px;
  text-align: center;
  color: var(--ink-3);
}
body#artwork .aw-pluginwait > .material-symbols-rounded {
  font-size: 32px;
  color: var(--ink-2);
}
body#artwork .aw-pluginwait__text {
  margin: 0;
  max-width: 420px;
  font-size: 14px;
  line-height: 1.45;
  text-wrap: pretty;
}

/* a screen that failed to render (ErrorBoundary) */
body#artwork .aw-crash {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 20px;
  text-align: center;
  color: var(--ink-2);
}
body#artwork .aw-crash > .material-symbols-rounded {
  font-size: 36px;
  color: var(--err-soft);
}
body#artwork .aw-crash__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}
body#artwork .aw-crash__text {
  margin: 0;
  max-width: 460px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-3);
  text-wrap: pretty;
}
body#artwork .aw-crash__detail {
  margin: 6px 0 0;
  max-width: min(640px, 100%);
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--fill-08);
  border: 1px solid var(--fill-12);
  font-size: 12px;
  color: var(--ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-align: left;
}
body#artwork .aw-crash__actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

/* plugin updates: the count on the Plugins entry, the bar above the installed list, the Update button */
body#artwork .aw-snav__badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--ground);
  background: var(--ink);
}

body#artwork .aw-mnav__value--badge {
  color: var(--ink);
  font-weight: 700;
}

body#artwork .aw-updates-badge {
  margin-left: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: inline-grid;
  place-items: center;
  font-size: 10px;
  color: var(--ground);
  background: var(--ink);
  vertical-align: 2px;
}

body#artwork .aw-updates-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--fill-06);
  border: 1px solid var(--fill-10);
}
body#artwork .aw-updates-bar__text {
  font-size: 14px;
  color: var(--ink-2);
}
body#artwork .aw-updates-bar .aw-btn--sm {
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  gap: 7px;
}
body#artwork .aw-updates-bar .aw-btn--sm .material-symbols-rounded {
  font-size: 18px;
}
body#artwork .aw-updates-bar .aw-btn--sm:disabled {
  opacity: 0.6;
  cursor: default;
}
/* Settings / plugin config pages (the centre column of the shell), the plugins page, Volumio's core sections. The
   form controls are one definition (the theme's mixin), applied to the pages, the modals and the device table. */
body#artwork .modal-content .ui-select-container.ui-select-bootstrap {
  position: relative;
  width: 100%;
  height: 44px;
  border-radius: 11px;
  color: var(--ink-1);
  background: var(--fill-08);
  border: 1px solid var(--fill-13);
  box-shadow: none !important;
}
body#artwork .modal-content .ui-select-container.ui-select-bootstrap:focus-within {
  border-color: var(--fill-30);
}
body#artwork .modal-content .ui-select-container.ui-select-bootstrap select {
  width: 100%;
  height: 42px;
  line-height: 42px;
  padding: 0 40px 0 14px;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-ui);
  appearance: none;
  -webkit-appearance: none;
  outline: 0;
  cursor: pointer;
}
body#artwork .modal-content .ui-select-container.ui-select-bootstrap select option {
  color: #14161a;
}
body#artwork .modal-content .ui-select-container.ui-select-bootstrap .caret {
  border: 0;
  width: auto;
  height: auto;
  margin: 0;
  position: absolute;
  right: 14px;
  top: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  line-height: 1;
  pointer-events: none;
}
body#artwork .modal-content .ui-select-container.ui-select-bootstrap .caret::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: no-repeat center/20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.75 8.75 L10 11.25 L13.25 8.75' fill='none' stroke='%23a7adb3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body#artwork .modal-content .bootstrap-switch {
  position: relative;
  display: inline-block;
  width: 50px !important;
  height: 32px;
  border-radius: 13px;
  border: 0;
  background: var(--fill-16);
  overflow: visible;
  margin-right: 44px;
  cursor: pointer;
  vertical-align: middle;
}
body#artwork .modal-content .bootstrap-switch input[type=checkbox] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
body#artwork .modal-content .bootstrap-switch::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ground);
  transition: left 0.15s ease;
}
body#artwork .modal-content .bootstrap-switch::after {
  content: "Off";
  position: absolute;
  left: 62px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--ink-dim);
  white-space: nowrap;
}
body#artwork .modal-content .bootstrap-switch.bootstrap-switch-on {
  background: var(--ink);
}
body#artwork .modal-content .bootstrap-switch.bootstrap-switch-on::before {
  left: 27px;
}
body#artwork .modal-content .bootstrap-switch.bootstrap-switch-on::after {
  content: "On";
  color: var(--ink-2);
}
body#artwork .modal-content input[type=checkbox].custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 50px;
  height: 32px;
  border-radius: 13px;
  border: 0;
  margin: 0;
  background: var(--fill-16);
  cursor: pointer;
  vertical-align: middle;
}
body#artwork .modal-content input[type=checkbox].custom-checkbox::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ground);
  transition: left 0.15s ease;
}
body#artwork .modal-content input[type=checkbox].custom-checkbox:checked {
  background: var(--ink);
}
body#artwork .modal-content input[type=checkbox].custom-checkbox:checked::before {
  left: 27px;
}
body#artwork .modal-content .aw-segment {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 52px;
  padding: 4px;
  border-radius: 11px;
  background: var(--fill-06);
  border: 1px solid var(--fill-10);
}
body#artwork .modal-content .aw-segment__opt {
  flex: 1;
  height: 100%;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--ink-muted);
  background: transparent;
  border: 0;
  padding: 0 10px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-ui);
}
body#artwork .modal-content .aw-segment__opt:hover {
  color: var(--ink-1);
}
body#artwork .modal-content .aw-segment__opt.active {
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
}
body#artwork .modal-content .aw-segment__opt:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}
body#artwork .modal-content input.form-control, body#artwork .modal-content textarea.form-control {
  display: block;
  width: 100%;
  height: 42px;
  border-radius: 11px;
  background: var(--fill-08);
  border: 1px solid var(--fill-13);
  color: var(--ink);
  font-size: 15px;
  box-shadow: none;
  padding: 0 14px;
  outline: 0;
  font-family: var(--font-ui);
}
body#artwork .modal-content input.form-control:focus, body#artwork .modal-content textarea.form-control:focus {
  border-color: var(--fill-30);
  box-shadow: none;
}
body#artwork .modal-content input.form-control::placeholder, body#artwork .modal-content textarea.form-control::placeholder {
  color: var(--ink-dim);
}
body#artwork .modal-content textarea.form-control {
  height: auto;
  padding: 10px 14px;
}
body#artwork .modal-content .btn {
  height: 42px;
  padding: 0 20px;
  border-radius: 21px;
  border: 1px solid var(--fill-18);
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
  line-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-ui);
  text-decoration: none;
}
body#artwork .modal-content .btn:hover {
  background: var(--fill-08);
  color: var(--ink);
}
body#artwork .modal-content .btn {
  /* the base's 13px FontAwesome glyph in a pill: 11px wide */
}
body#artwork .modal-content .btn .material-symbols-rounded {
  font-size: 13px;
  width: 11px;
  display: inline-block;
  text-align: center;
  overflow: visible;
  vertical-align: middle;
}
body#artwork .modal-content {
  /* a plugin's own button element (it carries plugin-attributes) stays the outline pill */
}
body#artwork .modal-content .btn.btn-info:not([plugin-attributes]), body#artwork .modal-content .btn.btn-primary, body#artwork .modal-content .btn.btn-success {
  background: var(--ink);
  color: var(--on-ink);
  border: 0;
  height: 40px;
  line-height: 40px;
  font-weight: 700;
}
body#artwork .modal-content .btn.btn-info:not([plugin-attributes]):hover, body#artwork .modal-content .btn.btn-primary:hover, body#artwork .modal-content .btn.btn-success:hover {
  background: var(--ink-1);
  color: var(--on-ink);
}
body#artwork .modal-content .btn.btn-danger {
  color: var(--err);
  border-color: var(--err-line);
  background: transparent;
}
body#artwork .modal-content .btn.btn-danger:hover {
  background: var(--err-wash);
  color: var(--err);
}
body#artwork .modal-content .btn.btn-link {
  border: 0;
  background: transparent;
  height: auto;
  line-height: normal;
  padding: 0 8px;
}
body#artwork .modal-content .progress {
  height: 20px;
  border-radius: 10px;
  background: var(--fill-10);
  overflow: hidden;
  margin: 10px 0;
}
body#artwork .modal-content .progress .progress-bar {
  height: 100%;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  transition: width 0.3s ease;
}
body#artwork .modal-content .alert {
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--fill-06);
  border: 1px solid var(--fill-10);
  color: var(--ink-2);
  margin-bottom: 14px;
}

body#artwork #pluginWrapper .ui-select-container.ui-select-bootstrap {
  position: relative;
  width: 100%;
  height: 44px;
  border-radius: 11px;
  color: var(--ink-1);
  background: var(--fill-08);
  border: 1px solid var(--fill-13);
  box-shadow: none !important;
}
body#artwork #pluginWrapper .ui-select-container.ui-select-bootstrap:focus-within {
  border-color: var(--fill-30);
}
body#artwork #pluginWrapper .ui-select-container.ui-select-bootstrap select {
  width: 100%;
  height: 42px;
  line-height: 42px;
  padding: 0 40px 0 14px;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-ui);
  appearance: none;
  -webkit-appearance: none;
  outline: 0;
  cursor: pointer;
}
body#artwork #pluginWrapper .ui-select-container.ui-select-bootstrap select option {
  color: #14161a;
}
body#artwork #pluginWrapper .ui-select-container.ui-select-bootstrap .caret {
  border: 0;
  width: auto;
  height: auto;
  margin: 0;
  position: absolute;
  right: 14px;
  top: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  line-height: 1;
  pointer-events: none;
}
body#artwork #pluginWrapper .ui-select-container.ui-select-bootstrap .caret::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: no-repeat center/20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.75 8.75 L10 11.25 L13.25 8.75' fill='none' stroke='%23a7adb3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body#artwork #pluginWrapper .bootstrap-switch {
  position: relative;
  display: inline-block;
  width: 50px !important;
  height: 32px;
  border-radius: 13px;
  border: 0;
  background: var(--fill-16);
  overflow: visible;
  margin-right: 44px;
  cursor: pointer;
  vertical-align: middle;
}
body#artwork #pluginWrapper .bootstrap-switch input[type=checkbox] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
body#artwork #pluginWrapper .bootstrap-switch::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ground);
  transition: left 0.15s ease;
}
body#artwork #pluginWrapper .bootstrap-switch::after {
  content: "Off";
  position: absolute;
  left: 62px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--ink-dim);
  white-space: nowrap;
}
body#artwork #pluginWrapper .bootstrap-switch.bootstrap-switch-on {
  background: var(--ink);
}
body#artwork #pluginWrapper .bootstrap-switch.bootstrap-switch-on::before {
  left: 27px;
}
body#artwork #pluginWrapper .bootstrap-switch.bootstrap-switch-on::after {
  content: "On";
  color: var(--ink-2);
}
body#artwork #pluginWrapper input[type=checkbox].custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 50px;
  height: 32px;
  border-radius: 13px;
  border: 0;
  margin: 0;
  background: var(--fill-16);
  cursor: pointer;
  vertical-align: middle;
}
body#artwork #pluginWrapper input[type=checkbox].custom-checkbox::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ground);
  transition: left 0.15s ease;
}
body#artwork #pluginWrapper input[type=checkbox].custom-checkbox:checked {
  background: var(--ink);
}
body#artwork #pluginWrapper input[type=checkbox].custom-checkbox:checked::before {
  left: 27px;
}
body#artwork #pluginWrapper .aw-segment {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 52px;
  padding: 4px;
  border-radius: 11px;
  background: var(--fill-06);
  border: 1px solid var(--fill-10);
}
body#artwork #pluginWrapper .aw-segment__opt {
  flex: 1;
  height: 100%;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--ink-muted);
  background: transparent;
  border: 0;
  padding: 0 10px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-ui);
}
body#artwork #pluginWrapper .aw-segment__opt:hover {
  color: var(--ink-1);
}
body#artwork #pluginWrapper .aw-segment__opt.active {
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
}
body#artwork #pluginWrapper .aw-segment__opt:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}
body#artwork #pluginWrapper input.form-control, body#artwork #pluginWrapper textarea.form-control {
  display: block;
  width: 100%;
  height: 42px;
  border-radius: 11px;
  background: var(--fill-08);
  border: 1px solid var(--fill-13);
  color: var(--ink);
  font-size: 15px;
  box-shadow: none;
  padding: 0 14px;
  outline: 0;
  font-family: var(--font-ui);
}
body#artwork #pluginWrapper input.form-control:focus, body#artwork #pluginWrapper textarea.form-control:focus {
  border-color: var(--fill-30);
  box-shadow: none;
}
body#artwork #pluginWrapper input.form-control::placeholder, body#artwork #pluginWrapper textarea.form-control::placeholder {
  color: var(--ink-dim);
}
body#artwork #pluginWrapper textarea.form-control {
  height: auto;
  padding: 10px 14px;
}
body#artwork #pluginWrapper .btn {
  height: 42px;
  padding: 0 20px;
  border-radius: 21px;
  border: 1px solid var(--fill-18);
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
  line-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-ui);
  text-decoration: none;
}
body#artwork #pluginWrapper .btn:hover {
  background: var(--fill-08);
  color: var(--ink);
}
body#artwork #pluginWrapper .btn {
  /* the base's 13px FontAwesome glyph in a pill: 11px wide */
}
body#artwork #pluginWrapper .btn .material-symbols-rounded {
  font-size: 13px;
  width: 11px;
  display: inline-block;
  text-align: center;
  overflow: visible;
  vertical-align: middle;
}
body#artwork #pluginWrapper {
  /* a plugin's own button element (it carries plugin-attributes) stays the outline pill */
}
body#artwork #pluginWrapper .btn.btn-info:not([plugin-attributes]), body#artwork #pluginWrapper .btn.btn-primary, body#artwork #pluginWrapper .btn.btn-success {
  background: var(--ink);
  color: var(--on-ink);
  border: 0;
  height: 40px;
  line-height: 40px;
  font-weight: 700;
}
body#artwork #pluginWrapper .btn.btn-info:not([plugin-attributes]):hover, body#artwork #pluginWrapper .btn.btn-primary:hover, body#artwork #pluginWrapper .btn.btn-success:hover {
  background: var(--ink-1);
  color: var(--on-ink);
}
body#artwork #pluginWrapper .btn.btn-danger {
  color: var(--err);
  border-color: var(--err-line);
  background: transparent;
}
body#artwork #pluginWrapper .btn.btn-danger:hover {
  background: var(--err-wash);
  color: var(--err);
}
body#artwork #pluginWrapper .btn.btn-link {
  border: 0;
  background: transparent;
  height: auto;
  line-height: normal;
  padding: 0 8px;
}
body#artwork #pluginWrapper .progress {
  height: 20px;
  border-radius: 10px;
  background: var(--fill-10);
  overflow: hidden;
  margin: 10px 0;
}
body#artwork #pluginWrapper .progress .progress-bar {
  height: 100%;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  transition: width 0.3s ease;
}
body#artwork #pluginWrapper .alert {
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--fill-06);
  border: 1px solid var(--fill-10);
  color: var(--ink-2);
  margin-bottom: 14px;
}
body#artwork #pluginWrapper {
  padding: 40px 34px 60px;
}
body#artwork #pluginWrapper .box {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
body#artwork #pluginWrapper {
  /* the inherited frame's title box: 20px over the header, 12px to the right of the title, a capitalised h2 */
}
body#artwork #pluginWrapper .boxHeader {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 20px 0 0;
}
body#artwork #pluginWrapper .boxHeader .title {
  margin: 0 12px 0 0;
}
body#artwork #pluginWrapper .boxHeader .title h2 {
  margin: 0;
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  background: transparent;
  padding: 0;
  text-transform: capitalize;
}
body#artwork #pluginWrapper .boxHeader .title h2 a.btn {
  display: none;
}
body#artwork #pluginWrapper .boxHeader .title button {
  display: block;
  margin-top: 10px;
}
body#artwork #pluginWrapper .pluginDescription {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ink-dim);
  text-wrap: pretty;
}
body#artwork #pluginWrapper .panel.panel-default {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0;
}
body#artwork #pluginWrapper .panel-heading {
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 34px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fill-10);
}
body#artwork #pluginWrapper .panel-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-35);
  font-weight: 400;
  margin: 0;
}
body#artwork #pluginWrapper .panel-title .fa {
  display: none;
}
body#artwork #pluginWrapper .panel-title .section-image {
  height: 16px;
  margin-right: 8px;
}
body#artwork #pluginWrapper .panel-body {
  padding: 0;
}
body#artwork #pluginWrapper .sectionDescription {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--ink-dim);
  font-weight: 400;
}
body#artwork #pluginWrapper {
  /* the control is 300px wide wherever the page has 500px for the row; in a narrower page (beside the settings
     menu in a ~730–790px window) it is narrower — by the same amount in every row, so the controls stay in line —
     instead of pushing the row past the page's edge */
}
body#artwork #pluginWrapper .form-group {
  display: grid;
  grid-template-columns: auto auto minmax(24px, 1fr) min(300px, 100% - 200px);
  align-items: center;
  column-gap: 8px;
  row-gap: 0; /* label · info icon · filler · control */
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--fill-05);
}
body#artwork #pluginWrapper .form-group > label.plugin-label, body#artwork #pluginWrapper .form-group > .control-doc, body#artwork #pluginWrapper .form-group > .control-item, body#artwork #pluginWrapper .form-group > .control-description, body#artwork #pluginWrapper .form-group > .control-buttons {
  float: none;
  width: auto;
  min-height: 0;
  padding: 0;
  margin: 0;
}
body#artwork #pluginWrapper .form-group > label.plugin-label {
  grid-column: 1;
  grid-row: 1;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-1);
}
body#artwork #pluginWrapper .form-group .control-label {
  text-transform: capitalize;
}
body#artwork #pluginWrapper .form-group { /* the frame capitalises every control label */ }
body#artwork #pluginWrapper .form-group > .control-doc {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  align-self: center;
  margin: 0;
  width: auto;
  height: auto;
}
body#artwork #pluginWrapper .form-group > .control-doc a {
  font-size: 20px;
  display: inline-block;
  padding-top: 3px;
  cursor: pointer;
}
body#artwork #pluginWrapper .form-group > .control-doc { /* the base's info link: the body's line height at 20px */ }
body#artwork #pluginWrapper .form-group > .control-doc .fa {
  font-size: 14px;
  color: var(--ink-faint);
  display: inline-block;
  width: 12px;
  height: 14px;
  line-height: 14px;
}
body#artwork #pluginWrapper .form-group > .control-doc .fa .material-symbols-rounded {
  font-size: 14px;
  display: block;
  width: 12px;
  overflow: visible;
}
body#artwork #pluginWrapper .form-group > .control-doc a:hover .material-symbols-rounded {
  color: var(--ink-3);
}
body#artwork #pluginWrapper .form-group > .control-item {
  grid-column: 4;
  grid-row: 1/3;
  display: block;
}
body#artwork #pluginWrapper .form-group > .control-description {
  grid-column: 1/4;
  grid-row: 2;
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ink-dim);
  text-wrap: pretty;
}
body#artwork #pluginWrapper .form-group > div:not(.control-item):not(.control-doc):not(.control-description) {
  grid-column: 1/-1;
}
body#artwork #pluginWrapper .form-group .control-item > div, body#artwork #pluginWrapper .form-group .control-item > div > div {
  width: 100%;
}
body#artwork #pluginWrapper .form-group > .control-buttons {
  padding-top: 0;
}
body#artwork #pluginWrapper .row .col-xs-24 > button, body#artwork #pluginWrapper .text-right > button {
  margin-top: 18px;
}
body#artwork #pluginWrapper .control-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-1);
}
body#artwork #pluginWrapper .equalizer {
  display: inline-block;
  margin: 10px;
}
body#artwork #pluginWrapper .equalizer.vertical {
  margin: 10px 20px;
}
body#artwork #pluginWrapper .equalizer.horizontal {
  margin: 10px 0 20px;
  width: 180px;
}
body#artwork #pluginWrapper .equalizer-label {
  width: 15px;
  text-align: center;
  white-space: nowrap;
  margin-left: -8px;
  display: block;
  font-size: 11px;
  color: var(--ink-dim);
}
body#artwork #pluginWrapper .equalizer.vertical input[type=range] {
  writing-mode: vertical-lr;
  direction: rtl;
  height: 140px;
  width: 20px;
}
body#artwork #pluginWrapper .equalizer-bars {
  display: flex;
  flex-wrap: wrap;
}
body#artwork #pluginWrapper table.table {
  width: 100%;
  border-collapse: collapse;
}
body#artwork #pluginWrapper table.table th, body#artwork #pluginWrapper table.table td {
  text-align: left;
  padding: 8px;
  border-top: 1px solid var(--fill-08);
}
body#artwork #pluginWrapper hr {
  border: 0;
  border-top: 1px solid var(--fill-08);
  margin: 20px 0;
}
body#artwork #pluginWrapper .uploadDroppableArea {
  display: block;
  padding: 22px;
  border-radius: 14px;
  border: 1px dashed var(--fill-16);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-3);
  text-align: center;
  cursor: pointer;
  margin-top: 12px;
}
body#artwork #pluginWrapper .uploadDroppableArea:hover {
  background: var(--fill-06);
  color: var(--ink);
}
body#artwork #pluginWrapper {
  /* the base's background picker */
}
body#artwork #pluginWrapper #backgroundSelector {
  margin: 0 -15px;
}
body#artwork #pluginWrapper #backgroundSelector::after {
  content: "";
  display: table;
  clear: both;
}
body#artwork #pluginWrapper #backgroundSelector .col-sm-6 {
  float: left;
  width: 25%;
  padding: 0 15px;
  position: relative;
  min-height: 1px;
}
body#artwork #pluginWrapper #backgroundSelector .background {
  position: relative;
}
body#artwork #pluginWrapper #backgroundSelector .backgroundName {
  font-size: 18px;
  text-align: center;
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
}
body#artwork #pluginWrapper #backgroundSelector .backgroundName span {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 6px 10px;
}
body#artwork #pluginWrapper #backgroundSelector .backgroundName p {
  margin: 10px 0 0;
}
body#artwork #pluginWrapper #backgroundSelector .backgroundName span.current {
  color: #54C688;
}
body#artwork #pluginWrapper #backgroundSelector img {
  width: 100%;
  border: solid 1px #999;
  cursor: pointer;
  margin-bottom: 30px;
  display: block;
}
body#artwork #pluginWrapper #backgroundSelector img.current {
  border: solid 2px #54C688;
}
body#artwork #pluginWrapper #backgroundColorSelector {
  margin: 0 -15px;
}
body#artwork #pluginWrapper #backgroundColorSelector #colorPalette {
  padding: 0 15px;
}
body#artwork #pluginWrapper #backgroundColorSelector #colorPalette > div {
  position: relative;
  display: inline-block;
  margin: 0 15px 10px 0;
  width: 110px;
  height: 110px;
}
body#artwork #pluginWrapper #backgroundColorSelector #colorPalette > div.selected {
  border: solid 2px #54C698;
}
body#artwork #pluginWrapper #backgroundColorSelector #colorPalette > div button {
  position: absolute;
  top: 50%;
  margin-top: -18px;
  left: 50%;
  margin-left: -21px;
}
body#artwork #pluginWrapper #backgroundColorSelector #colorPalette > div button.customColor {
  top: 10%;
  margin-top: 0;
}
body#artwork #pluginWrapper #backgroundColorSelector #colorPalette > div input {
  position: absolute;
  top: 60px;
  left: 10px;
  width: 90px;
}
body#artwork #pluginWrapper .pull-right {
  float: right;
}
body#artwork #pluginWrapper .text-right {
  text-align: right;
}
body#artwork #pluginWrapper .text-center {
  text-align: center;
}
body#artwork #pluginWrapper .clearfix::after {
  content: "";
  display: table;
  clear: both;
}
body#artwork #pluginWrapper .row {
  display: block;
}
body#artwork #pluginWrapper .row::after {
  content: "";
  display: table;
  clear: both;
}
body#artwork #pluginWrapper [class*=col-] {
  position: relative;
  min-height: 1px;
}
body#artwork #pluginWrapper .col-xs-12, body#artwork #pluginWrapper .col-md-12, body#artwork #pluginWrapper .col-sm-12 {
  float: left;
  width: 50%;
}
body#artwork #pluginWrapper .col-xs-8, body#artwork #pluginWrapper .col-md-8, body#artwork #pluginWrapper .col-sm-8 {
  float: left;
  width: 33.333%;
}
body#artwork #pluginWrapper .col-md-16 {
  float: left;
  width: 66.666%;
}
body#artwork #pluginWrapper .col-xs-24, body#artwork #pluginWrapper .col-sm-24 {
  width: 100%;
}
body#artwork #pluginWrapper .col-md-14 {
  float: left;
  width: 58.333%;
}
body#artwork #pluginWrapper .col-md-10 {
  float: left;
  width: 41.666%;
}
body#artwork #pluginWrapper .col-sm-offset-6 {
  margin-left: 25%;
}
body#artwork #pluginWrapper .fa {
  font-style: normal;
  display: inline-block;
}
body#artwork #pluginWrapper .fa .material-symbols-rounded {
  font-size: 16px;
  vertical-align: middle;
}
body#artwork #pluginWrapper .btn .fa {
  display: inline-flex;
}

/* Plugins page */
body#artwork .aw-state-volumio-plugin-manager #content .ui-select-container.ui-select-bootstrap {
  position: relative;
  width: 100%;
  height: 44px;
  border-radius: 11px;
  color: var(--ink-1);
  background: var(--fill-08);
  border: 1px solid var(--fill-13);
  box-shadow: none !important;
}
body#artwork .aw-state-volumio-plugin-manager #content .ui-select-container.ui-select-bootstrap:focus-within {
  border-color: var(--fill-30);
}
body#artwork .aw-state-volumio-plugin-manager #content .ui-select-container.ui-select-bootstrap select {
  width: 100%;
  height: 42px;
  line-height: 42px;
  padding: 0 40px 0 14px;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-ui);
  appearance: none;
  -webkit-appearance: none;
  outline: 0;
  cursor: pointer;
}
body#artwork .aw-state-volumio-plugin-manager #content .ui-select-container.ui-select-bootstrap select option {
  color: #14161a;
}
body#artwork .aw-state-volumio-plugin-manager #content .ui-select-container.ui-select-bootstrap .caret {
  border: 0;
  width: auto;
  height: auto;
  margin: 0;
  position: absolute;
  right: 14px;
  top: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  line-height: 1;
  pointer-events: none;
}
body#artwork .aw-state-volumio-plugin-manager #content .ui-select-container.ui-select-bootstrap .caret::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: no-repeat center/20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.75 8.75 L10 11.25 L13.25 8.75' fill='none' stroke='%23a7adb3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body#artwork .aw-state-volumio-plugin-manager #content .bootstrap-switch {
  position: relative;
  display: inline-block;
  width: 50px !important;
  height: 32px;
  border-radius: 13px;
  border: 0;
  background: var(--fill-16);
  overflow: visible;
  margin-right: 44px;
  cursor: pointer;
  vertical-align: middle;
}
body#artwork .aw-state-volumio-plugin-manager #content .bootstrap-switch input[type=checkbox] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
body#artwork .aw-state-volumio-plugin-manager #content .bootstrap-switch::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ground);
  transition: left 0.15s ease;
}
body#artwork .aw-state-volumio-plugin-manager #content .bootstrap-switch::after {
  content: "Off";
  position: absolute;
  left: 62px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--ink-dim);
  white-space: nowrap;
}
body#artwork .aw-state-volumio-plugin-manager #content .bootstrap-switch.bootstrap-switch-on {
  background: var(--ink);
}
body#artwork .aw-state-volumio-plugin-manager #content .bootstrap-switch.bootstrap-switch-on::before {
  left: 27px;
}
body#artwork .aw-state-volumio-plugin-manager #content .bootstrap-switch.bootstrap-switch-on::after {
  content: "On";
  color: var(--ink-2);
}
body#artwork .aw-state-volumio-plugin-manager #content input[type=checkbox].custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 50px;
  height: 32px;
  border-radius: 13px;
  border: 0;
  margin: 0;
  background: var(--fill-16);
  cursor: pointer;
  vertical-align: middle;
}
body#artwork .aw-state-volumio-plugin-manager #content input[type=checkbox].custom-checkbox::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ground);
  transition: left 0.15s ease;
}
body#artwork .aw-state-volumio-plugin-manager #content input[type=checkbox].custom-checkbox:checked {
  background: var(--ink);
}
body#artwork .aw-state-volumio-plugin-manager #content input[type=checkbox].custom-checkbox:checked::before {
  left: 27px;
}
body#artwork .aw-state-volumio-plugin-manager #content .aw-segment {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 52px;
  padding: 4px;
  border-radius: 11px;
  background: var(--fill-06);
  border: 1px solid var(--fill-10);
}
body#artwork .aw-state-volumio-plugin-manager #content .aw-segment__opt {
  flex: 1;
  height: 100%;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--ink-muted);
  background: transparent;
  border: 0;
  padding: 0 10px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-ui);
}
body#artwork .aw-state-volumio-plugin-manager #content .aw-segment__opt:hover {
  color: var(--ink-1);
}
body#artwork .aw-state-volumio-plugin-manager #content .aw-segment__opt.active {
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
}
body#artwork .aw-state-volumio-plugin-manager #content .aw-segment__opt:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}
body#artwork .aw-state-volumio-plugin-manager #content input.form-control, body#artwork .aw-state-volumio-plugin-manager #content textarea.form-control {
  display: block;
  width: 100%;
  height: 42px;
  border-radius: 11px;
  background: var(--fill-08);
  border: 1px solid var(--fill-13);
  color: var(--ink);
  font-size: 15px;
  box-shadow: none;
  padding: 0 14px;
  outline: 0;
  font-family: var(--font-ui);
}
body#artwork .aw-state-volumio-plugin-manager #content input.form-control:focus, body#artwork .aw-state-volumio-plugin-manager #content textarea.form-control:focus {
  border-color: var(--fill-30);
  box-shadow: none;
}
body#artwork .aw-state-volumio-plugin-manager #content input.form-control::placeholder, body#artwork .aw-state-volumio-plugin-manager #content textarea.form-control::placeholder {
  color: var(--ink-dim);
}
body#artwork .aw-state-volumio-plugin-manager #content textarea.form-control {
  height: auto;
  padding: 10px 14px;
}
body#artwork .aw-state-volumio-plugin-manager #content .btn {
  height: 42px;
  padding: 0 20px;
  border-radius: 21px;
  border: 1px solid var(--fill-18);
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
  line-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-ui);
  text-decoration: none;
}
body#artwork .aw-state-volumio-plugin-manager #content .btn:hover {
  background: var(--fill-08);
  color: var(--ink);
}
body#artwork .aw-state-volumio-plugin-manager #content .btn {
  /* the base's 13px FontAwesome glyph in a pill: 11px wide */
}
body#artwork .aw-state-volumio-plugin-manager #content .btn .material-symbols-rounded {
  font-size: 13px;
  width: 11px;
  display: inline-block;
  text-align: center;
  overflow: visible;
  vertical-align: middle;
}
body#artwork .aw-state-volumio-plugin-manager #content {
  /* a plugin's own button element (it carries plugin-attributes) stays the outline pill */
}
body#artwork .aw-state-volumio-plugin-manager #content .btn.btn-info:not([plugin-attributes]), body#artwork .aw-state-volumio-plugin-manager #content .btn.btn-primary, body#artwork .aw-state-volumio-plugin-manager #content .btn.btn-success {
  background: var(--ink);
  color: var(--on-ink);
  border: 0;
  height: 40px;
  line-height: 40px;
  font-weight: 700;
}
body#artwork .aw-state-volumio-plugin-manager #content .btn.btn-info:not([plugin-attributes]):hover, body#artwork .aw-state-volumio-plugin-manager #content .btn.btn-primary:hover, body#artwork .aw-state-volumio-plugin-manager #content .btn.btn-success:hover {
  background: var(--ink-1);
  color: var(--on-ink);
}
body#artwork .aw-state-volumio-plugin-manager #content .btn.btn-danger {
  color: var(--err);
  border-color: var(--err-line);
  background: transparent;
}
body#artwork .aw-state-volumio-plugin-manager #content .btn.btn-danger:hover {
  background: var(--err-wash);
  color: var(--err);
}
body#artwork .aw-state-volumio-plugin-manager #content .btn.btn-link {
  border: 0;
  background: transparent;
  height: auto;
  line-height: normal;
  padding: 0 8px;
}
body#artwork .aw-state-volumio-plugin-manager #content .progress {
  height: 20px;
  border-radius: 10px;
  background: var(--fill-10);
  overflow: hidden;
  margin: 10px 0;
}
body#artwork .aw-state-volumio-plugin-manager #content .progress .progress-bar {
  height: 100%;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  transition: width 0.3s ease;
}
body#artwork .aw-state-volumio-plugin-manager #content .alert {
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--fill-06);
  border: 1px solid var(--fill-10);
  color: var(--ink-2);
  margin-bottom: 14px;
}
body#artwork .aw-state-volumio-plugin-manager #content > .box, body#artwork .aw-state-volumio-plugin-manager #content .box {
  padding: 40px 34px 60px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
body#artwork .aw-state-volumio-plugin-manager #content .boxHeader {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 20px 0 0;
}
body#artwork .aw-state-volumio-plugin-manager #content .boxHeader .title {
  margin: 0 12px 0 0;
}
body#artwork .aw-state-volumio-plugin-manager #content .boxHeader .title h2 {
  margin: 0;
  display: inline-block;
  background: transparent;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-transform: capitalize;
}
body#artwork .aw-state-volumio-plugin-manager #content .boxHeader .title h2 .btn, body#artwork .aw-state-volumio-plugin-manager #content .boxHeader .title h2 a.btn {
  display: none;
}
body#artwork .aw-state-volumio-plugin-manager #content .box > .panel.panel-default {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0;
}
body#artwork .aw-state-volumio-plugin-manager #content .box > .panel.panel-default > .panel-heading {
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 34px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fill-10);
}
body#artwork .aw-state-volumio-plugin-manager #content .box > .panel.panel-default > .panel-heading .panel-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-35);
  font-weight: 400;
  margin: 0;
}
body#artwork .aw-state-volumio-plugin-manager #content .box > .panel.panel-default > .panel-heading .panel-title .fa {
  display: none;
}
body#artwork .aw-state-volumio-plugin-manager #content .box > .panel.panel-default > .panel-body {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
body#artwork .aw-state-volumio-plugin-manager #content .nav-tabs {
  display: flex;
  list-style: none;
  margin: 18px 0 22px;
  padding: 0;
  border-bottom: 1px solid var(--fill-10);
}
body#artwork .aw-state-volumio-plugin-manager #content .nav-tabs > li {
  margin-bottom: -1px;
}
body#artwork .aw-state-volumio-plugin-manager #content .nav-tabs { /* the frame's tabs overlap the rule by a pixel */ }
body#artwork .aw-state-volumio-plugin-manager #content .nav-tabs > li > a {
  display: block;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin: 0 22px 0 0;
  padding: 10px 0;
  font-size: 15px;
  line-height: 1.42857143;
  font-weight: 500;
  color: var(--ink-dim);
  cursor: pointer;
}
body#artwork .aw-state-volumio-plugin-manager #content .nav-tabs > li > a:hover {
  color: var(--ink-1);
}
body#artwork .aw-state-volumio-plugin-manager #content .nav-tabs > li.active > a {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--ink);
}
body#artwork .aw-state-volumio-plugin-manager #content {
  /* the inherited grid: the categories beside the cards from 768px, stacked over them below */
}
body#artwork .aw-state-volumio-plugin-manager #content .row {
  margin: 0 -15px;
}
body#artwork .aw-state-volumio-plugin-manager #content .col-sm-4, body#artwork .aw-state-volumio-plugin-manager #content .col-sm-20 {
  padding: 0 15px;
  min-width: 0;
}
@media (min-width: 768px) {
  body#artwork .aw-state-volumio-plugin-manager #content .row {
    display: flex;
    align-items: flex-start;
  }
  body#artwork .aw-state-volumio-plugin-manager #content .col-sm-4 {
    flex: 0 0 16.6667%;
  }
  body#artwork .aw-state-volumio-plugin-manager #content .col-sm-20 {
    flex: 0 0 83.3333%;
  }
}
body#artwork .aw-state-volumio-plugin-manager #content .btn.pluginCategoryBtn {
  height: auto;
  border: 0;
  padding: 8px 0;
  white-space: nowrap;
  background: transparent;
  justify-content: flex-start;
  line-height: 1.4;
  font-size: 15px;
  color: var(--ink-3);
  border-radius: 0;
  cursor: pointer;
}
body#artwork .aw-state-volumio-plugin-manager #content .btn.pluginCategoryBtn:hover {
  background: transparent;
  color: var(--ink);
}
body#artwork .aw-state-volumio-plugin-manager #content .btn.pluginCategoryBtn.active {
  color: var(--ink);
  font-weight: 600;
}
body#artwork .aw-state-volumio-plugin-manager #content .panel-body .panel.panel-default {
  background: var(--fill-06);
  border: 1px solid var(--fill-10);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0 0 12px;
  box-shadow: none;
}
body#artwork .aw-state-volumio-plugin-manager #content .panel-body .panel.panel-default > .panel-heading {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}
body#artwork .aw-state-volumio-plugin-manager #content .panel-body .panel.panel-default > .panel-heading .panel-title {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  margin: 0;
  /* the FontAwesome glyph box the card was drawn with: a 16px inline-block of line-height 1 */
}
body#artwork .aw-state-volumio-plugin-manager #content .panel-body .panel.panel-default > .panel-heading .panel-title .fa {
  color: var(--ink-muted);
  margin-right: 8px;
  font-size: 16px;
  display: inline-block;
  line-height: 16px;
  height: 16px;
  vertical-align: baseline;
}
body#artwork .aw-state-volumio-plugin-manager #content .panel-body .panel.panel-default > .panel-heading .panel-title .fa .material-symbols-rounded {
  display: inline-block;
  font-size: 16px;
  line-height: 16px;
  width: 16px;
  height: 16px;
  vertical-align: top;
}
body#artwork .aw-state-volumio-plugin-manager #content .panel-body .panel.panel-default > .panel-body {
  padding: 10px 0 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 14px;
  color: #999;
}
body#artwork .aw-state-volumio-plugin-manager #content .panel-body .panel.panel-default > .panel-body b, body#artwork .aw-state-volumio-plugin-manager #content .panel-body .panel.panel-default > .panel-body strong {
  color: var(--ink-2);
  font-weight: 600;
}
body#artwork .aw-state-volumio-plugin-manager #content .panel-body .panel.panel-default > .panel-body .row {
  display: block;
  margin: 0 -15px;
}
body#artwork .aw-state-volumio-plugin-manager #content .panel-body .panel.panel-default > .panel-body .row::after {
  content: "";
  display: table;
  clear: both;
}
body#artwork .aw-state-volumio-plugin-manager #content .panel-body .panel.panel-default > .panel-body .row > .col-xs-12 {
  float: left;
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
body#artwork .aw-state-volumio-plugin-manager #content .panel-body .panel.panel-default > .panel-body .row > .text-right {
  text-align: right;
}
body#artwork .aw-state-volumio-plugin-manager #content .panel-body .panel.panel-default > .panel-body .row.pluginDetailsRow {
  margin: 6px 0;
}
body#artwork .aw-state-volumio-plugin-manager #content .panel-body::before, body#artwork .aw-state-volumio-plugin-manager #content .panel-body::after {
  content: " ";
  display: table;
}
body#artwork .aw-state-volumio-plugin-manager #content .panel-body::after {
  clear: both;
}
body#artwork .aw-state-volumio-plugin-manager #content .btn.btn-info {
  padding: 0 18px;
}
body#artwork .aw-state-volumio-plugin-manager #content .btn.btn-info.pull-right ~ .btn.btn-info.pull-right {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--fill-18);
  height: 42px;
  line-height: 40px;
  font-weight: 500;
}
body#artwork .aw-state-volumio-plugin-manager #content .btn.btn-info.pull-right ~ .btn.btn-info.pull-right:hover {
  background: var(--fill-08);
  color: var(--ink);
}
body#artwork .aw-state-volumio-plugin-manager #content .btn.btn-danger {
  padding: 0 18px;
}
body#artwork .aw-state-volumio-plugin-manager #content .btn.pull-right {
  margin-left: 8px;
  float: right;
}
body#artwork .aw-state-volumio-plugin-manager #content .pluginDotStatus {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-faint);
  margin-right: 8px;
}
body#artwork .aw-state-volumio-plugin-manager #content .pluginDotStatus.active {
  background: var(--ok);
}
body#artwork .aw-state-volumio-plugin-manager #content .text-muted {
  color: var(--ink-dim);
}
body#artwork .aw-state-volumio-plugin-manager #content {
  /* installed tab: the same rounded card row used by the Sources page's "My Music" plugin
     list (#myMusicPlugins #installed-plugin-lists below) — one shared #installed-plugin-lists
     component, one shared row design, instead of the frame's old flat green-rule list */
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--fill-06);
  border: 1px solid var(--fill-10);
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.42857143;
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists .row, body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists #list-group {
  display: contents;
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists [class*=col-] {
  width: auto;
  float: none;
  padding: 0;
  min-height: 0;
  box-sizing: border-box;
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists {
  /* name + version: 1st slot of the name/switch/status group */
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists > .row > #list-group:first-child > .row > .col-md-8:nth-child(1) {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists > .row > #list-group:first-child > .row > .col-md-8:nth-child(1) .fa {
  display: inline-block;
  font-size: 16px;
  line-height: 16px;
  height: 16px;
  width: 16px;
  margin-right: 10px;
  color: var(--ink-muted);
  vertical-align: -3px;
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists > .row > #list-group:first-child > .row > .col-md-8:nth-child(1) .fa .material-symbols-rounded {
  display: inline-block;
  font-size: 16px;
  line-height: 16px;
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists > .row > #list-group:first-child > .row > .col-md-8:nth-child(1) small.text-muted {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 400;
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists {
  /* the enable/disable switch: 2nd slot */
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists > .row > #list-group:first-child > .row > .col-md-8:nth-child(2) {
  order: 2;
  flex: none;
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists > .row > #list-group:first-child > .row > .col-md-8:nth-child(2) .bootstrap-switch {
  margin-right: 0;
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists {
  /* active/inactive status: 3rd slot */
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists > .row > #list-group:first-child > .row > .col-md-8:nth-child(3) {
  order: 3;
  flex: none;
  font-size: 13px;
  color: var(--ink-dim);
  white-space: nowrap;
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists {
  /* update / settings / uninstall buttons: the 2nd top-level column (no #list-group id) */
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists > .row > div:nth-child(2) {
  order: 4;
  flex: none;
  display: flex;
  gap: 8px;
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists > .row > div:nth-child(2) .col-md-8 {
  display: contents;
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists > .row > div:nth-child(2) .btn.pull-right {
  float: none;
  margin: 0;
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists > .row > div:nth-child(2) .btn {
  height: 34px;
  line-height: 32px;
  padding: 0 14px;
  font-size: 13px;
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists > .row > div:nth-child(2) .btn.btn-info {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--fill-18);
  font-weight: 500;
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists > .row > div:nth-child(2) .btn.btn-info:hover {
  background: var(--fill-08);
  color: var(--ink);
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists > .row > div:nth-child(2) {
  /* a newer version in the store: the one filled button of the row */
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists > .row > div:nth-child(2) .btn.btn-info.aw-update-btn {
  background: var(--ink);
  color: var(--ground);
  border-color: transparent;
  font-weight: 600;
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists > .row > div:nth-child(2) .btn.btn-info.aw-update-btn:hover {
  background: var(--ink-1);
  color: var(--ground);
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists > .row > div:nth-child(2) .btn.btn-info.aw-update-btn small {
  font-size: 11px;
  opacity: 0.7;
  margin-left: 2px;
  font-weight: 500;
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists > .row > div:nth-child(2) .btn.btn-info.aw-update-btn .material-symbols-rounded {
  font-size: 16px;
  vertical-align: -3px;
  margin-right: 4px;
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists .pluginDotStatus {
  width: 7px;
  height: 7px;
  margin-right: 7px;
  vertical-align: 1px;
}
body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists .bootstrap-switch::after {
  display: none;
}
body#artwork .aw-state-volumio-plugin-manager #content {
  /* phone width: the name column's flex:1/min-width:0 above shrinks to 0 (and the icon+name+
     version vanish entirely, leaving just switch/status/buttons) once the other fixed-size
     slots alone exceed the row's width — give the name its own full-width line instead */
}
@media (max-width: 640px) {
  body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists > .row > #list-group:first-child > .row > .col-md-8:nth-child(1) {
    flex: 1 1 100%;
    white-space: normal;
  }
  body#artwork .aw-state-volumio-plugin-manager #content #installed-plugin-lists > .row > div:nth-child(2) {
    margin-left: auto;
  }
}

/* Volumio's core sections inside settings pages */
body#artwork #pluginWrapper #networkStatus > .panel-heading {
  display: none;
}
body#artwork #pluginWrapper #networkStatus .networkStatus {
  display: flex;
  gap: 12px;
}
body#artwork #pluginWrapper #networkStatus .networkStatus > .panel {
  flex: 1;
  width: auto;
  float: none;
  margin: 0;
  padding: 20px 22px;
  border-radius: 16px;
  box-shadow: none;
  background: var(--fill-09) !important;
  border: 1px solid var(--fill-14) !important;
}
body#artwork #pluginWrapper #networkStatus .networkStatus > .panel > .panel-heading {
  padding: 0;
  margin: 0;
  background: transparent !important;
  border: 0 !important;
}
body#artwork #pluginWrapper #networkStatus .networkStatus > .panel > .panel-heading .panel-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-transform: capitalize;
  letter-spacing: 0;
}
body#artwork #pluginWrapper #networkStatus .networkStatus > .panel > .panel-body {
  padding: 0;
}
body#artwork #pluginWrapper #networkStatus .networkStatus > .panel > .panel-body ul {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
body#artwork #pluginWrapper #networkStatus .networkStatus > .panel > .panel-body li {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 8px;
}
body#artwork #pluginWrapper #networkStatus .networkStatus > .panel > .panel-body li > span {
  font-family: var(--font-ui);
  color: var(--ink-dim);
}
body#artwork #pluginWrapper #networkStatus .networkStatus > .panel > .panel-body li:first-child {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
body#artwork #pluginWrapper #networkStatus .networkStatus > .panel > .panel-body li:first-child > span {
  display: none;
}
body#artwork #pluginWrapper #networkStatus .networkStatus > .panel > .panel-body .fa.true .material-symbols-rounded {
  color: var(--ok);
}
body#artwork #pluginWrapper #networkStatus .networkStatus > .panel > .panel-body .fa.false .material-symbols-rounded {
  color: var(--err);
}
body#artwork #pluginWrapper #wifiPlugin table.table, body#artwork #pluginWrapper #wifiPlugin table.table tbody {
  display: block;
  width: 100%;
  margin: 0;
}
body#artwork #pluginWrapper #wifiPlugin table.table tr {
  display: grid;
  grid-template-columns: 26px 1fr 24px;
  align-items: center;
  gap: 18px;
  padding: 13px 12px;
  border-radius: 11px;
  border-top: 1px solid var(--fill-05);
  cursor: pointer;
}
body#artwork #pluginWrapper #wifiPlugin table.table tr:first-child {
  border-top: 0;
  background: var(--fill-06);
}
body#artwork #pluginWrapper #wifiPlugin table.table tr:hover {
  background: var(--fill-06);
}
body#artwork #pluginWrapper #wifiPlugin table.table tr td {
  grid-row: 1;
  padding: 0;
  border: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-1);
  vertical-align: middle;
}
body#artwork #pluginWrapper #wifiPlugin table.table tr td.wifiIcon {
  grid-column: 1;
}
body#artwork #pluginWrapper #wifiPlugin table.table tr td.wifiIcon img {
  width: 20px;
  height: auto;
  display: block;
}
body#artwork #pluginWrapper #wifiPlugin table.table tr td.wifiIcon .fa {
  color: var(--ink-muted);
}
body#artwork #pluginWrapper #wifiPlugin table.table tr td.lockIcon {
  grid-column: 3;
  text-align: right;
}
body#artwork #pluginWrapper #wifiPlugin table.table tr td.lockIcon .fa {
  font-size: 16px;
  color: var(--ink-muted);
}
body#artwork #pluginWrapper #wifiPlugin table.table tr td:nth-child(3) {
  grid-column: 2;
}
body#artwork #pluginWrapper #wifiPlugin table.table tr td:nth-child(n+4), body#artwork #pluginWrapper #wifiPlugin table.table tr td.commandCol {
  display: none;
}
body#artwork #pluginWrapper #wifiPlugin table.table tr td.insertPasswordRow {
  grid-column: 1/-1;
  font-weight: 400;
  font-size: 14px;
  display: block;
  text-align: right;
}
body#artwork #pluginWrapper #wifiPlugin table.table tr td.insertPasswordRow label {
  margin-right: 10px;
}
body#artwork #pluginWrapper #wifiPlugin table.table tr td.insertPasswordRow input[type=checkbox] {
  width: auto;
}
body#artwork #pluginWrapper #wifiPlugin table.table tr td.insertPasswordRow input[type=text], body#artwork #pluginWrapper #wifiPlugin table.table tr td.insertPasswordRow input[type=password] {
  max-width: 300px;
  display: inline-block;
  margin-bottom: 10px;
  margin-right: -5px;
}
body#artwork #pluginWrapper #wifiPlugin table.table tr td.insertPasswordRow .securitySelectWrapper {
  width: 120px;
  display: inline-block;
  margin-right: 15px;
  position: relative;
}
body#artwork #pluginWrapper #wifiPlugin table.table tr td.insertPasswordRow .showHidePassword {
  margin-right: 10px;
}
body#artwork #pluginWrapper #wifiPlugin .refreshWiFiNetworks {
  margin-top: 15px;
}
body#artwork #pluginWrapper .networkStatus ul {
  list-style: none;
}
body#artwork #pluginWrapper .networkStatus li img {
  width: 20px;
  margin-bottom: 10px;
}
body#artwork #pluginWrapper #networkDrives .saveAddEditDrive {
  float: right;
}
body#artwork #pluginWrapper .accordion-toggle {
  cursor: pointer;
}
body#artwork #pluginWrapper #myMusic > .panel-heading {
  display: none;
}
body#artwork #pluginWrapper {
  /* the library card: the counts across, and under them what can be done — Update and Rescan, or, while Volumio
     is indexing, its status in their place */
}
body#artwork #pluginWrapper #myMusic > .panel-body {
  display: grid;
  grid-template-columns: auto auto 1fr;
  column-gap: 10px;
  row-gap: 22px;
  align-items: center;
  padding: 22px 26px !important;
  border-radius: 16px;
  margin-top: 4px;
  background: var(--fill-09) !important;
  border: 1px solid var(--fill-14) !important;
}
body#artwork #pluginWrapper #myMusic > .panel-body .aw-mystats {
  display: flex;
  gap: 20px;
  grid-column: 1/-1;
  grid-row: 1;
  margin: 0;
}
body#artwork #pluginWrapper #myMusic > .panel-body .aw-mystats__item {
  flex: 1;
  display: flex;
  flex-direction: column;
}
body#artwork #pluginWrapper #myMusic > .panel-body .aw-mystats__item:last-child {
  flex: 1.3;
}
body#artwork #pluginWrapper #myMusic > .panel-body .aw-mystats__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  font-weight: 400;
  text-transform: uppercase;
}
body#artwork #pluginWrapper #myMusic > .panel-body .aw-mystats__value {
  font-family: var(--font-ui);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  padding-top: 10px;
  color: var(--ink);
  white-space: nowrap;
}
body#artwork #pluginWrapper #myMusic > .panel-body .btn {
  grid-row: 2;
  margin: 0;
  width: auto;
  min-width: 140px;
}
body#artwork #pluginWrapper #myMusic > .panel-body .btn + .btn {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--fill-18);
  height: 40px;
  line-height: 38px;
  font-weight: 500; /* side by side with Update: its height */
}
body#artwork #pluginWrapper #myMusic > .panel-body .btn + .btn:hover {
  background: var(--fill-08);
}
body#artwork #pluginWrapper #myMusic > .panel-body .aw-mystats__scan {
  grid-column: 1/-1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--fill-08);
  border: 1px solid var(--fill-14);
  color: var(--ink-1);
}
body#artwork #pluginWrapper #myMusic > .panel-body .aw-mystats__scan-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
body#artwork #pluginWrapper #myMusic > .panel-body .aw-mystats__scan-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
body#artwork #pluginWrapper #myMusic > .panel-body .aw-mystats__scan-sub {
  font-size: 12px;
  color: var(--ink-muted);
}
body#artwork #pluginWrapper {
  /* too narrow for four counts across (a big library's 128406 / 8104:12:19): two by two, as on the phone */
}
body#artwork #pluginWrapper #myMusic {
  container-type: inline-size;
}
@container (max-width: 620px) {
  body#artwork #pluginWrapper #myMusic > .panel-body .aw-mystats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    row-gap: 14px;
  }
  body#artwork #pluginWrapper #myMusic > .panel-body .aw-mystats__value {
    font-size: 30px;
  }
}
body#artwork #pluginWrapper #myMusicPlugins > .panel-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0;
}
body#artwork #pluginWrapper #myMusicPlugins #installed-plugin-lists {
  font-size: 16px;
}
body#artwork #pluginWrapper #wifiPlugin table.table tr, body#artwork #pluginWrapper #networkDrives table.table tr {
  font-size: 18px;
}
body#artwork #pluginWrapper {
  /* the frame's clearfix pseudos would become grid/flex items and eat the first cell and the gaps */
}
body#artwork #pluginWrapper #myMusicPlugins > .panel-body::before, body#artwork #pluginWrapper #myMusicPlugins > .panel-body::after, body#artwork #pluginWrapper #myMusicPlugins #installed-plugin-lists .row::before, body#artwork #pluginWrapper #myMusicPlugins #installed-plugin-lists .row::after, body#artwork #pluginWrapper #myMusic > .panel-body::before, body#artwork #pluginWrapper #myMusic > .panel-body::after {
  display: none;
  content: none;
}
body#artwork #pluginWrapper #myMusicPlugins #installed-plugin-lists {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--fill-06);
  min-width: 0;
  border-bottom: 1px solid var(--fill-06); /* the frame's own bottom rule, in the card's colour */
}
body#artwork #pluginWrapper #myMusicPlugins #installed-plugin-lists .row, body#artwork #pluginWrapper #myMusicPlugins #installed-plugin-lists #list-group {
  display: contents;
}
body#artwork #pluginWrapper #myMusicPlugins #installed-plugin-lists [class*=col-] {
  width: auto;
  float: none;
  padding: 0;
  min-height: 0;
}
body#artwork #pluginWrapper #myMusicPlugins #installed-plugin-lists > .row > #list-group:first-child > .row > .col-md-16 {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork #pluginWrapper #myMusicPlugins #installed-plugin-lists > .row > #list-group:first-child > .row > .col-md-16 .fa {
  display: none;
}
body#artwork #pluginWrapper #myMusicPlugins #installed-plugin-lists > .row > #list-group:first-child > .row > .col-md-8 {
  order: 4;
  flex: none;
}
body#artwork #pluginWrapper #myMusicPlugins #installed-plugin-lists > .row > #list-group:first-child > .row > .col-md-8 .bootstrap-switch {
  margin-right: 0;
}
body#artwork #pluginWrapper #myMusicPlugins #installed-plugin-lists > .row > #list-group:last-child > .col-md-12:first-child {
  order: 2;
  flex: none;
  font-size: 12px;
  color: var(--ink-dim);
  white-space: nowrap;
}
body#artwork #pluginWrapper #myMusicPlugins #installed-plugin-lists > .row > #list-group:last-child > .col-md-12:last-child {
  order: 3;
  flex: none;
}
body#artwork #pluginWrapper #myMusicPlugins #installed-plugin-lists > .row > #list-group:last-child > .col-md-12:last-child .btn {
  float: none;
  height: 30px;
  line-height: 28px;
  padding: 0 12px;
  font-size: 12px;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--fill-18);
  font-weight: 500;
}
body#artwork #pluginWrapper #myMusicPlugins #installed-plugin-lists .pluginDotStatus {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
  margin-right: 7px;
  vertical-align: 1px;
}
body#artwork #pluginWrapper #myMusicPlugins #installed-plugin-lists .pluginDotStatus.active {
  background: var(--ok);
}
body#artwork #pluginWrapper #myMusicPlugins #installed-plugin-lists .bootstrap-switch::after {
  display: none;
}
body#artwork #pluginWrapper {
  /* beside the settings menu (a tablet upright, a narrow window) the page is far narrower than the window:
     two columns of functionality cards squeezed their names to a few letters — one column by the list's own width */
}
body#artwork #pluginWrapper #myMusicPlugins {
  container-type: inline-size;
}
@container (max-width: 700px) {
  body#artwork #pluginWrapper #myMusicPlugins > .panel-body {
    grid-template-columns: 1fr;
  }
}
body#artwork #pluginWrapper {
  /* phone width: #myMusic's "auto" button column and #myMusicPlugins's 2-up grid both size
     themselves from their content's intrinsic (max-content) width, which a narrow card can't
     actually fit — the button bleeds past the card's own right edge (off-screen, clipped by
     the page's overflow-x:hidden) and the plugin name collapses to 0 width and vanishes.
     Stack both to a single column so every child gets the card's full, actual width. */
}
@media (max-width: 640px) {
  body#artwork #pluginWrapper {
    /* real numbers (e.g. a "117:12:19" playtime) don't fit a 4-across nowrap row at any
       usable font size once the row itself is capped to the card's real width — 2x2 instead,
       each label directly above its own value (one .aw-mystats__item per stat, not a shared
       label row over a shared value row, which would pair "Artists" with "Tracks" visually) */
  }
  body#artwork #pluginWrapper #myMusic > .panel-body {
    grid-template-columns: 1fr 1fr;
    row-gap: 18px; /* the two buttons share the card's width */
  }
  body#artwork #pluginWrapper #myMusic > .panel-body .btn {
    min-width: 0;
    width: 100%;
  }
  body#artwork #pluginWrapper #myMusic > .panel-body .aw-mystats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    row-gap: 10px;
  }
  body#artwork #pluginWrapper #myMusic > .panel-body .aw-mystats__value {
    font-size: 26px;
  }
  body#artwork #pluginWrapper #myMusicPlugins > .panel-body {
    grid-template-columns: 1fr;
  }
  body#artwork #pluginWrapper #myMusicPlugins #installed-plugin-lists {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  body#artwork #pluginWrapper #myMusicPlugins #installed-plugin-lists > .row > #list-group:first-child > .row > .col-md-16 {
    flex: 1 1 100%;
    white-space: normal;
  }
}
body#artwork #pluginWrapper #networkDrives > .panel-heading .fa-info-circle {
  display: none;
}
body#artwork #pluginWrapper #networkDrives > .panel-body {
  padding: 0;
}
body#artwork #pluginWrapper #networkDrives #addNewDrive {
  float: right;
  margin-top: -46px;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--fill-18);
  font-weight: 500;
}
body#artwork #pluginWrapper #networkDrives table.table, body#artwork #pluginWrapper #networkDrives table.table tbody {
  display: block;
  width: 100%;
  margin: 0;
}
body#artwork #pluginWrapper #networkDrives table.table tr {
  display: grid;
  grid-template-columns: 1fr 210px 150px 44px;
  align-items: center;
  gap: 18px;
  padding: 14px 12px;
  border-radius: 11px;
  border-top: 1px solid var(--fill-05);
}
body#artwork #pluginWrapper #networkDrives table.table tr:first-child {
  border-top: 0;
  padding: 22px 12px 11px;
  border-radius: 0;
  border-bottom: 1px solid var(--fill-10);
}
body#artwork #pluginWrapper #networkDrives table.table tr th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
  font-weight: 400;
  text-transform: uppercase;
  padding: 0;
  border: 0;
}
body#artwork #pluginWrapper #networkDrives table.table tr td {
  padding: 0;
  border: 0;
  vertical-align: middle;
  color: var(--ink-1);
}
body#artwork #pluginWrapper #networkDrives table.table tr td:nth-child(1) {
  font-size: 16px;
  font-weight: 600;
}
body#artwork #pluginWrapper #networkDrives table.table tr td:nth-child(2) {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork #pluginWrapper #networkDrives table.table tr td:nth-child(3) .fa.true .material-symbols-rounded {
  color: var(--ok);
}
body#artwork #pluginWrapper #networkDrives table.table tr td:nth-child(3) .fa.false .material-symbols-rounded {
  color: var(--err);
}
body#artwork #pluginWrapper #networkDrives table.table tr td:nth-child(4) {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-3);
}
body#artwork #pluginWrapper #networkDrives table.table tr td.commandCol .btn {
  height: 32px;
  line-height: 30px;
  padding: 0 10px;
}
@media (max-width: 900px) {
  body#artwork #pluginWrapper #networkDrives table.table tr {
    grid-template-columns: 1fr 120px 44px;
  }
  body#artwork #pluginWrapper #networkDrives table.table tr td:nth-child(2) {
    display: none;
  }
}
body#artwork #pluginWrapper #systemVersion > .panel-body {
  display: block;
  padding: 20px 22px !important;
  border-radius: 16px;
  margin-top: 4px;
  background: var(--fill-09) !important;
  border: 1px solid var(--fill-14) !important;
}
body#artwork #pluginWrapper #systemVersion > .panel-body .sv-main {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-1);
}
body#artwork #pluginWrapper #systemVersion > .panel-body .sv-sub {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* ============================================================
   MyVolumio (the frame's pages under the theme's dress). Bootstrap-era markup: the frame's
   base rules the theme builds on come first — scoped with :where() so they keep the frame's
   own specificity — then the theme's sheet, verbatim.
   ============================================================ */
:where(body#artwork [class*=aw-state-myvolumio-]) {
  /* --- Bootstrap 3 + Volumio's base (the frame's own values) --- */
}
:where(body#artwork [class*=aw-state-myvolumio-]) h1, :where(body#artwork [class*=aw-state-myvolumio-]) h2, :where(body#artwork [class*=aw-state-myvolumio-]) h3, :where(body#artwork [class*=aw-state-myvolumio-]) h4 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}
:where(body#artwork [class*=aw-state-myvolumio-]) h1, :where(body#artwork [class*=aw-state-myvolumio-]) h2, :where(body#artwork [class*=aw-state-myvolumio-]) h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) h4 {
  margin-top: 10px;
  margin-bottom: 10px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) h1 {
  font-size: 36px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) h2 {
  font-size: 30px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) h3 {
  font-size: 24px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) h4 {
  font-size: 18px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) p {
  margin: 0 0 10px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) a {
  cursor: pointer;
  text-decoration: none;
}
:where(body#artwork [class*=aw-state-myvolumio-]) label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
}
:where(body#artwork [class*=aw-state-myvolumio-]) table {
  font-size: 18px;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .btn {
  display: inline-block;
  margin-bottom: 0;
  font-family: inherit;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  user-select: none;
  text-decoration: none;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .btn[disabled], :where(body#artwork [class*=aw-state-myvolumio-]) .btn.disabled {
  cursor: not-allowed;
  opacity: 0.65;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .btn {
  outline: none !important;
  font-size: 16px;
  border-radius: 50px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .btn:focus {
  color: #fff;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .btn-block {
  display: block;
  width: 100%;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .btn-default {
  color: var(--ink);
  background-color: #7a848e;
  border-color: #ccc;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .btn-danger {
  color: var(--ink);
  background-color: #df4649;
  border-color: #df4649;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .btn-outline {
  border: 2px solid #54c688;
  box-shadow: 0 0 1px transparent;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .pull-right {
  float: right !important;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .panel {
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .panel-body {
  padding: 15px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .panel-body::before, :where(body#artwork [class*=aw-state-myvolumio-]) .panel-body::after {
  content: " ";
  display: table;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .panel-body::after {
  clear: both;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .panel-body a {
  color: #fff;
  font-weight: 700;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .panel .panel-heading {
  border-bottom: solid 1px #54c688;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .panel .panel-heading .panel-title {
  color: var(--ink);
  font-size: 18px;
  text-transform: capitalize;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .panel-footer {
  padding: 10px 15px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  border-radius: 4px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .lead {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}
@media (min-width: 768px) {
  :where(body#artwork [class*=aw-state-myvolumio-]) .lead {
    font-size: 21px;
  }
}
:where(body#artwork [class*=aw-state-myvolumio-]) p.lead {
  text-align: center;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .table > tbody > tr > td, :where(body#artwork [class*=aw-state-myvolumio-]) .table > tbody > tr > th {
  padding: 8px;
  line-height: 1.42857;
  vertical-align: top;
  border-top: 1px solid #7c7c7c;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .table > tbody > tr > th {
  text-align: left;
}
@media (max-width: 767px) {
  :where(body#artwork [class*=aw-state-myvolumio-]) table.tableSmall th {
    font-size: 12px;
  }
  :where(body#artwork [class*=aw-state-myvolumio-]) table.tableSmall tr td {
    font-size: 13px;
    padding: 5px 2px !important;
  }
  :where(body#artwork [class*=aw-state-myvolumio-]) table.tableSmall button.btn {
    padding: 5px 8px;
    margin-top: 2px;
    margin-bottom: 2px;
  }
}
:where(body#artwork [class*=aw-state-myvolumio-]) .form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  font-family: inherit;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .form-group {
  margin-bottom: 15px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .input-group-addon {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #54c688;
  text-align: center;
  background-color: #242424;
  border: 1px solid #54c688;
  white-space: nowrap;
  width: 1%;
  vertical-align: middle;
  display: table-cell;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .help-block {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .row {
  margin-left: -15px;
  margin-right: -15px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .row::before, :where(body#artwork [class*=aw-state-myvolumio-]) .row::after {
  content: " ";
  display: table;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .row::after {
  clear: both;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .container::before, :where(body#artwork [class*=aw-state-myvolumio-]) .container::after {
  content: " ";
  display: table;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .container::after {
  clear: both;
}
:where(body#artwork [class*=aw-state-myvolumio-]) [class*=col-] {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .text-center {
  text-align: center;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .hidden, :where(body#artwork [class*=aw-state-myvolumio-]) .hide {
  display: none !important;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .show {
  display: block !important;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .invisible {
  visibility: hidden;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .img-circle {
  border-radius: 50%;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
:where(body#artwork [class*=aw-state-myvolumio-]) #change-subscription .badge {
  padding: 8px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) { /* the frame's vendor sheet carries no .badge base */ }
:where(body#artwork [class*=aw-state-myvolumio-]) .label {
  display: inline;
  padding: 0.2em 0.6em 0.3em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25em;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .glyphicon, :where(body#artwork [class*=aw-state-myvolumio-]) .fa {
  position: relative;
  top: 1px;
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .glyphicon .material-symbols-rounded, :where(body#artwork [class*=aw-state-myvolumio-]) .fa .material-symbols-rounded {
  font-size: 1em;
  display: block;
  width: 1em;
  height: 1em;
  line-height: 1;
  overflow: visible;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .fa-4x {
  font-size: 4em;
}
@media (min-width: 768px) and (max-width: 991px) {
  :where(body#artwork [class*=aw-state-myvolumio-]) .hidden-sm {
    display: none !important;
  }
}
@media (max-width: 767px) {
  :where(body#artwork [class*=aw-state-myvolumio-]) .hidden-xs {
    display: none !important;
  }
}
:where(body#artwork [class*=aw-state-myvolumio-]) {
  /* --- the frame's own MyVolumio rules the theme leaves standing --- */
}
:where(body#artwork [class*=aw-state-myvolumio-]) .boxHeader {
  margin-top: 20px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .boxHeader .title {
  margin-right: 12px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .boxHeader .title h2 {
  margin: 0;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .title h2 {
  display: inline-block;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__info-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  margin-bottom: 24px;
  padding: 16px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__info-card__description {
  margin: 0 28px 0 0;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 20px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__fake-checkbox {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 4px;
  cursor: pointer;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__fake-checkbox__tick {
  display: none;
  position: absolute;
  top: 5px;
  left: 4px;
  width: 10px;
  height: 10px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__checkbox:checked ~ .my-volumio__fake-checkbox .my-volumio__fake-checkbox__tick {
  display: block;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__checkbox:checked ~ .my-volumio__fake-checkbox .my-volumio__fake-checkbox__tick img {
  display: block;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__text-input {
  font-size: 16px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__btn-primary.disabled {
  pointer-events: none;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__toggle-header {
  text-align: center;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__toggle-header h2, :where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__toggle-header h3, :where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__toggle-header h4 {
  margin-top: 0;
  margin-bottom: 8px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__toggle-header .toggle-header__space {
  margin-bottom: 16px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__toggle .toggle__labels {
  display: inline-flex;
  border-radius: 4px;
  overflow: hidden;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__toggle .toggle__label-text {
  margin: 0;
  padding: 8px 24px;
  font-weight: normal;
  cursor: pointer;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__plan-grid {
  max-width: 944px;
  margin: auto;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .plan__item {
  position: relative;
  flex: 0 0 calc(33% - 16px);
  width: 100%;
  margin-bottom: 24px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .plan__item:not(:last-child) {
  margin-right: 24px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .plan__card {
  border-radius: 12px;
  font-weight: 400;
  cursor: pointer;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .plan__card .plan__title {
  padding: 10px;
  font-size: 20px;
  line-height: 20px;
  text-transform: uppercase;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .plan__card .plan__pricing {
  padding: 10px 24px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .plan__card .plan__trial {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 800;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .plan__card .plan__price {
  margin-bottom: 4px;
  font-size: 40px;
  line-height: 40px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .plan__card .plan__fake-radio {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  text-align: center;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .plan__card .plan__fake-radio .plan__fake-radio__tick {
  display: none;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .plan__card .plan__features {
  padding: 16px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .plan__card .plan__feature:not(:last-child) {
  margin-bottom: 8px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .plan__checkbox:checked ~ .plan__card .plan__fake-radio {
  display: flex;
  align-items: center;
  justify-content: center;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .plan__checkbox:checked ~ .plan__card .plan__fake-radio .plan__fake-radio__tick {
  display: block;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .collapse__panel .collapse__panel__header {
  padding: 6px 2px;
  cursor: pointer;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .collapse__panel .collapse__panel__header .collapse__indicator {
  transition: transform 0.2s ease-out 0s;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .collapse__panel .collapse__panel__content {
  display: none;
  padding: 4px 0 0;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .collapse__panel .collapse__checkbox:checked ~ .collapse__panel__header .collapse__indicator {
  transform: rotate(45deg);
}
:where(body#artwork [class*=aw-state-myvolumio-]) .collapse__panel .collapse__checkbox:checked ~ .collapse__panel__content {
  display: block;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__form-group {
  margin-bottom: 24px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__border-round {
  border-radius: 4px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .d-flex {
  display: flex;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .d-block {
  display: block;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .d-inline-flex {
  display: inline-flex;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .align-items-start {
  align-items: flex-start;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .align-items-center {
  align-items: center;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .justify-content-between {
  justify-content: space-between;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .justify-content-end {
  justify-content: flex-end;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .flex-spacer {
  flex: 1 1 100%;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .flex-shrink-0 {
  flex-shrink: 0;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .flex-grow-1 {
  flex-grow: 1;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .mb-2 {
  margin-bottom: 8px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .mb-4 {
  margin-bottom: 16px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .mb-6 {
  margin-bottom: 24px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .mb-10 {
  margin-bottom: 40px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .mb-16 {
  margin-bottom: 64px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .mr-2 {
  margin-right: 8px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .mr-4 {
  margin-right: 16px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .focus__helper {
  position: relative;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .focus__helper:after {
  position: absolute;
  display: none;
  content: "";
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  border: 1px dotted rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  pointer-events: none;
  z-index: -1;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .focus__helper.round:after {
  border-radius: 13px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .focus__helper:focus {
  outline: none;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .focus__helper:focus:after {
  display: block;
}
@media (min-width: 768px) {
  :where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__panel {
    margin-left: 20px;
    margin-right: 20px;
  }
  :where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__toggle-header {
    display: flex;
    justify-content: space-between;
    text-align: left;
  }
  :where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__toggle-header .toggle-header__space {
    margin-bottom: 0;
  }
  :where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__row-gutter > div[class*=col-]:first-child:not(:last-child) {
    padding-right: 12px;
  }
  :where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__row-gutter > div[class*=col-]:last-child:not(:first-child) {
    padding-left: 12px;
  }
  :where(body#artwork [class*=aw-state-myvolumio-]) .my-volumio__plan-grid {
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  :where(body#artwork [class*=aw-state-myvolumio-]) .omb_row-sm-offset-3 div:first-child[class*=col-] {
    margin-left: 25%;
  }
  :where(body#artwork [class*=aw-state-myvolumio-]) .omb_login .omb_forgotPwd {
    text-align: right;
    margin-top: 10px;
  }
}
:where(body#artwork [class*=aw-state-myvolumio-]) .omb_login .omb_authTitle {
  text-align: center;
  line-height: 300%;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .omb_login .omb_loginForm .help-block {
  color: red;
}
:where(body#artwork [class*=aw-state-myvolumio-]) a#myvolumio-info {
  margin-top: 20px;
  font-size: 18px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) a.btn.btn-outline.pull-right {
  margin-top: 18px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .plan-box .panel, :where(body#artwork [class*=aw-state-myvolumio-]) .myvolumio-current-plan-card .plans-table .panel {
  text-align: center;
  margin-top: 0 !important;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .plan-box .panel-body, :where(body#artwork [class*=aw-state-myvolumio-]) .myvolumio-current-plan-card .plans-table .panel-body {
  padding: 0;
  text-align: center;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .plan-box .panel-footer, :where(body#artwork [class*=aw-state-myvolumio-]) .myvolumio-current-plan-card .plans-table .panel-footer {
  min-height: 5em;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .plan-box .the-price, :where(body#artwork [class*=aw-state-myvolumio-]) .myvolumio-current-plan-card .plans-table .the-price {
  min-height: 10em;
  padding: 20px;
  margin: 0;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .plan-box .the-price h1, :where(body#artwork [class*=aw-state-myvolumio-]) .myvolumio-current-plan-card .plans-table .the-price h1 {
  line-height: 1em;
  padding: 0;
  margin: 0;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .plan-box .btn-label, :where(body#artwork [class*=aw-state-myvolumio-]) .myvolumio-current-plan-card .plans-table .btn-label {
  position: relative;
  left: -12px;
  display: inline-block;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px 0 0 3px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .plan-box .btn-labeled, :where(body#artwork [class*=aw-state-myvolumio-]) .myvolumio-current-plan-card .plans-table .btn-labeled {
  padding-top: 0;
  padding-bottom: 0;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .plan-box .btn, :where(body#artwork [class*=aw-state-myvolumio-]) .myvolumio-current-plan-card .plans-table .btn {
  margin-bottom: 10px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .myvolumio-current-plan-card .plans-table .the-price {
  min-height: 7em;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .trial-text {
  text-transform: uppercase;
  font-weight: bold;
}
:where(body#artwork [class*=aw-state-myvolumio-]) td.myvolumio-feature {
  font-size: 10pt;
  padding: 6px;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .avatar-image-box .avatar-image {
  background-color: #fff;
  width: 100%;
  height: auto;
  display: block;
  padding-top: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
:where(body#artwork [class*=aw-state-myvolumio-]) .avatar-image-box .avatar-letter img {
  width: 100%;
  height: auto;
}

.aw-myv-logout {
  display: none;
} /* the phone profile's logout; the phone sheet shows it */
/* --- the theme's sheet, verbatim (artwork-settings.scss) --- */
body#artwork .myvolumio-card-container {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* ============================================================
   MyVolumio account (mockup 2f-account) — Volumio's profile page restyled.
   Scoped by the per-state wrapper class (aw-state-<state>) — CSSO-safe. Real blocks only:
   avatar / name / email / Edit, Current plan card, devices table.
   ============================================================ */
body#artwork .aw-state-myvolumio-profile .box {
  position: relative;
  padding: clamp(24px, 4.4vh, 40px) var(--pad-screen) 60px;
  background: transparent;
  border: 0;
  box-shadow: none;
  /* Volumio wraps the profile and the device table in dark .panel-body boxes; the design is flat */
}
body#artwork .aw-state-myvolumio-profile .box .panel, body#artwork .aw-state-myvolumio-profile .box .panel-body, body#artwork .aw-state-myvolumio-profile .box .panel-heading {
  background: transparent;
  border: 0;
  box-shadow: none;
}
body#artwork .aw-state-myvolumio-profile .box {
  /* top row: mono eyebrow + Log out pill (mockup) */
}
body#artwork .aw-state-myvolumio-profile .box .boxHeader {
  background: transparent;
  border: 0;
  padding: 0;
}
body#artwork .aw-state-myvolumio-profile .box .boxHeader .title h2 {
  margin: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-35);
  font-weight: 400;
  line-height: 36px;
}
body#artwork .aw-state-myvolumio-profile .box #authLoginPlugin .panel-heading .btn-danger {
  position: absolute;
  top: 40px;
  right: 52px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  background: transparent;
  border: 1px solid var(--fill-16);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
}
body#artwork .aw-state-myvolumio-profile .box #authLoginPlugin .panel-heading .btn-danger .glyphicon {
  color: var(--ink-3);
  font-size: 15px;
  top: 0;
}
body#artwork .aw-state-myvolumio-profile .box #authLoginPlugin .panel-heading .btn-danger:hover {
  background: var(--fill-08);
  color: var(--ink);
}
body#artwork .aw-state-myvolumio-profile .box #authLoginPlugin.panel, body#artwork .aw-state-myvolumio-profile .box #device-selector-container.panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0;
}
body#artwork .aw-state-myvolumio-profile .box #authLoginPlugin > .panel-heading {
  padding: 0;
  border: 0;
  background: transparent;
}
body#artwork .aw-state-myvolumio-profile .box #authLoginPlugin > .panel-heading .panel-title {
  display: none;
}
body#artwork .aw-state-myvolumio-profile .box #authLoginPlugin > .panel-body {
  padding: 0;
}
body#artwork .aw-state-myvolumio-profile .box {
  /* profile: 196px avatar tile + name/email/actions, plan card on the right */
}
body#artwork .aw-state-myvolumio-profile .box .my-profile {
  display: grid;
  grid-template-columns: 196px 1fr;
  gap: 44px;
  margin: 34px 0 0;
  align-items: start;
}
body#artwork .aw-state-myvolumio-profile .box .my-profile > [class*=col-] {
  width: auto;
  float: none;
  padding: 0;
}
body#artwork .aw-state-myvolumio-profile .box .avatar-image-box {
  width: 196px;
  height: 196px;
  border-radius: var(--r-cover);
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #8b7fc4, #5f5590);
  box-shadow: 0 34px 70px -24px var(--shadow-strong);
}
body#artwork .aw-state-myvolumio-profile .box .avatar-image-box .avatar-letter {
  font-family: var(--font-ui);
  font-size: 104px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
body#artwork .aw-state-myvolumio-profile .box .my-profile > div > .row {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 44px;
  margin: 0;
}
body#artwork .aw-state-myvolumio-profile .box .my-profile > div > .row > [class*=col-] {
  width: auto;
  float: none;
  padding: 0;
}
body#artwork .aw-state-myvolumio-profile .box .user-data {
  padding-top: 8px;
}
body#artwork .aw-state-myvolumio-profile .box .user-data .user-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--ink);
  border: 0;
  padding: 0;
}
body#artwork .aw-state-myvolumio-profile .box .user-data .user-username {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--ink-dim);
}
body#artwork .aw-state-myvolumio-profile .box .user-data .user-details {
  margin: 18px 0 0;
  font-size: 16px;
  color: var(--ink-2);
}
body#artwork .aw-state-myvolumio-profile .box .user-data .user-details .glyphicon {
  color: var(--ink-muted);
  margin-right: 8px;
}
body#artwork .aw-state-myvolumio-profile .box .user-data .btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 22px;
  border-radius: 24px;
  margin-top: 22px;
  background: var(--ink);
  color: var(--on-ink);
  border: 0;
  font-size: 15px;
  font-weight: 700;
  box-shadow: none;
}
body#artwork .aw-state-myvolumio-profile .box .user-data .btn .glyphicon, body#artwork .aw-state-myvolumio-profile .box .user-data .btn .fa {
  top: 0;
  color: var(--on-ink);
}
body#artwork .aw-state-myvolumio-profile .box .user-data .btn:hover {
  background: var(--ink-1);
  color: var(--on-ink);
}
body#artwork .aw-state-myvolumio-profile .box {
  /* current plan card */
}
body#artwork .aw-state-myvolumio-profile .box .myvolumio-current-plan-card .panel.panel-primary {
  border-radius: 16px;
  padding: 24px 26px;
  background: var(--fill-06);
  border: 1px solid var(--fill-10);
  box-shadow: none;
  margin: 0;
}
body#artwork .aw-state-myvolumio-profile .box .myvolumio-current-plan-card .panel.panel-primary .panel-heading {
  padding: 0;
  background: transparent;
  border: 0;
}
body#artwork .aw-state-myvolumio-profile .box .myvolumio-current-plan-card .panel.panel-primary .panel-heading .panel-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 400;
  text-align: left;
}
body#artwork .aw-state-myvolumio-profile .box .myvolumio-current-plan-card .panel.panel-primary .panel-heading .panel-title .glyphicon {
  display: none;
}
body#artwork .aw-state-myvolumio-profile .box .myvolumio-current-plan-card .panel.panel-primary .panel-body {
  padding: 0;
  margin-top: 22px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  text-align: left;
}
body#artwork .aw-state-myvolumio-profile .box .myvolumio-current-plan-card .panel.panel-primary .panel-footer {
  padding: 0;
  margin-top: 22px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--fill-10);
  padding-top: 22px;
}
body#artwork .aw-state-myvolumio-profile .box .myvolumio-current-plan-card .panel.panel-primary .panel-footer .btn {
  width: 100%;
  height: 48px;
  border-radius: 24px;
  background: var(--ink);
  color: var(--on-ink);
  border: 0;
  font-size: 15px;
  font-weight: 700;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
body#artwork .aw-state-myvolumio-profile .box .myvolumio-current-plan-card .panel.panel-primary .panel-footer .btn .btn-label {
  background: transparent;
  color: var(--on-ink);
  padding: 0;
  position: static;
}
body#artwork .aw-state-myvolumio-profile .box .myvolumio-current-plan-card .panel.panel-primary .panel-footer .btn .glyphicon {
  top: 0;
}
body#artwork .aw-state-myvolumio-profile .box .myvolumio-current-plan-card .panel.panel-primary .panel-footer .btn:hover {
  background: var(--ink-1);
}
body#artwork .aw-state-myvolumio-profile .box {
  /* activated devices */
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container > .panel-heading {
  padding: 0 0 14px;
  margin-top: 46px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--fill-10);
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container > .panel-heading .panel-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-35);
  font-weight: 400;
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container > .panel-heading .panel-title .fa {
  display: none;
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container > .panel-body {
  padding: 0;
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container table.table {
  border-collapse: separate;
  border-spacing: 0 6px;
  margin: 4px 0 0;
  background: transparent;
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container table.table th {
  border: 0;
  padding: 16px 14px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 400;
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container table.table td {
  border: 0;
  padding: 14px;
  background: var(--fill-06);
  font-size: 15px;
  color: var(--ink-1);
  vertical-align: middle;
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container table.table td:first-child {
  border-radius: 12px 0 0 12px;
  font-weight: 600;
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container table.table td:last-child {
  border-radius: 0 12px 12px 0;
  text-align: right;
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container table.table .btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--fill-16);
  color: var(--ink-3);
  box-shadow: none;
  display: inline-grid;
  place-items: center;
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container table.table .btn .fa, body#artwork .aw-state-myvolumio-profile .box #device-selector-container table.table .btn .glyphicon {
  top: 0;
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container table.table .btn:hover {
  background: var(--fill-08);
  color: var(--ink);
}
body#artwork .aw-state-myvolumio-profile .box {
  /* the same 44×26 switch as the settings rows */
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container .bootstrap-switch {
  position: relative;
  width: 50px !important;
  height: 32px;
  border-radius: 13px; /* mockup: 44×26 + 3px padding, content-box → 50×32; radius stays 13 (not a full pill) */
  border: 0;
  background: var(--fill-16);
  overflow: visible;
  box-shadow: none;
  margin-right: 44px;
  /* the plugin binds its click/keyboard handlers on the inner label: keep it as an
     invisible full-size hit layer; the pill itself is painted by ::before/::after */
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container .bootstrap-switch .bootstrap-switch-container {
  position: absolute;
  inset: 0;
  width: 100% !important;
  margin: 0 !important;
  z-index: 1;
  overflow: visible;
  background: transparent;
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container .bootstrap-switch { /* visible: the focus ring sits 2px outside */ }
body#artwork .aw-state-myvolumio-profile .box #device-selector-container .bootstrap-switch .bootstrap-switch-handle-on, body#artwork .aw-state-myvolumio-profile .box #device-selector-container .bootstrap-switch .bootstrap-switch-handle-off {
  display: none !important;
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container .bootstrap-switch { /* vendor css: inline-block !important */ }
body#artwork .aw-state-myvolumio-profile .box #device-selector-container .bootstrap-switch .bootstrap-switch-label {
  display: block;
  width: 100% !important;
  height: 100%;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: transparent !important;
  border: 0;
  box-shadow: none;
  color: transparent;
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container .bootstrap-switch {
  /* the real checkbox carries keyboard focus: show the ring only for :focus-visible */
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container .bootstrap-switch input[type=checkbox] {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 1;
  visibility: visible;
  z-index: 2;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-radius: 16px;
  pointer-events: none;
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container .bootstrap-switch input[type=checkbox]:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container .bootstrap-switch::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ground);
  transition: left 0.15s ease;
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container .bootstrap-switch::after {
  content: "Off";
  position: absolute;
  left: 62px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--ink-dim);
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container .bootstrap-switch.bootstrap-switch-on {
  background: var(--ink);
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container .bootstrap-switch.bootstrap-switch-on::before {
  left: 27px;
}
body#artwork .aw-state-myvolumio-profile .box #device-selector-container .bootstrap-switch.bootstrap-switch-on::after {
  content: "On";
  color: var(--ink-1);
}

/* the core profile SCSS reverses the column placement (measured: the avatar column
   landed in the 1fr track and the text column in the 196px one) — pin every cell */
body#artwork .aw-state-myvolumio-profile .box .my-profile {
  direction: ltr;
}
body#artwork .aw-state-myvolumio-profile .box .my-profile > :first-child {
  grid-column: 1;
  grid-row: 1;
  order: 0;
}
body#artwork .aw-state-myvolumio-profile .box .my-profile > :last-child {
  grid-column: 2;
  grid-row: 1;
  order: 1;
}
body#artwork .aw-state-myvolumio-profile .box .my-profile > div > .row {
  direction: ltr;
}
body#artwork .aw-state-myvolumio-profile .box .my-profile > div > .row .user-data {
  grid-column: 1;
  order: 0;
}
body#artwork .aw-state-myvolumio-profile .box .my-profile > div > .row .plans-table {
  grid-column: 2;
  order: 1;
}

/* measured: auto-placement put the two cells in different rows; the core pricing
   table gives .the-price a fixed 364px box */
body#artwork .aw-state-myvolumio-profile .box .my-profile > div > .row .user-data, body#artwork .aw-state-myvolumio-profile .box .my-profile > div > .row .plans-table {
  grid-row: 1;
}
body#artwork .aw-state-myvolumio-profile .box .myvolumio-current-plan-card .the-price {
  height: auto;
  min-height: 0;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-size: inherit;
  background: transparent;
  box-shadow: none; /* core pricing css draws a grey frame with box-shadow */
  border: 0;
}

/* avatar initial: ng-letter-avatar draws a 50px canvas image; render the real
   initial (data-initial, additive attribute on the core template) crisply instead */
body#artwork .aw-state-myvolumio-profile .box .avatar-letter {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
body#artwork .aw-state-myvolumio-profile .box .avatar-letter img, body#artwork .aw-state-myvolumio-profile .box .avatar-letter ng-letter-avatar {
  display: none;
}
body#artwork .aw-state-myvolumio-profile .box .avatar-letter::before {
  content: attr(data-initial);
  text-transform: uppercase;
  font-family: var(--font-ui);
  font-size: 104px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}

/* measured: the core pricing-table styles still win on the card surface and paint the
   footer divider pure white — pin both */
body#artwork .aw-state-myvolumio-profile .box .myvolumio-current-plan-card .panel.panel-primary {
  background: var(--fill-06) !important;
  border: 1px solid var(--fill-10) !important;
}
body#artwork .aw-state-myvolumio-profile .box .myvolumio-current-plan-card .panel.panel-primary .panel-footer {
  border-top-color: var(--fill-10) !important;
}

/* ============================================================
   MyVolumio — Edit profile (theme template): page head, 196px avatar tile, settings rows
   (label · 300px control), key/value card, pills. Same tokens as the profile page.
   ============================================================ */
@keyframes aw-spin {
  to {
    transform: rotate(360deg);
  }
}
body#artwork .aw-state-myvolumio-edit-profile .box {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body#artwork .aw-pe {
  padding: clamp(24px, 4.4vh, 40px) var(--pad-screen) 60px;
  color: var(--ink-1);
  /* .aw-head is fixed (see head.scss); its own spacer reserves the bar's height, this adds the
     extra breathing room this page wants above its title */
}
body#artwork .aw-pe__title {
  margin: 26px 0 0;
  font-family: var(--font-ui);
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
body#artwork .aw-pe__grid {
  display: grid;
  grid-template-columns: 196px 1fr;
  gap: 44px;
  margin-top: 34px;
  align-items: start;
}
body#artwork .aw-pe__avatar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body#artwork .aw-pe__avatar .avatar-image-box {
  width: 196px;
  height: 196px;
  border-radius: var(--r-cover);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(150deg, #8b7fc4, #5f5590);
  box-shadow: 0 34px 70px -24px var(--shadow-strong);
}
body#artwork .aw-pe__avatar .avatar-image-box .avatar-image {
  width: 196px;
  height: 196px;
  border-radius: 0;
  background-size: cover;
  background-position: center;
}
body#artwork .aw-pe__avatar .avatar-image-box .avatar-letter {
  font-family: var(--font-ui);
  font-size: 104px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
body#artwork .aw-pe__avatar .avatar-image-box .avatar-letter::before {
  content: attr(data-initial);
}
body#artwork .aw-pe__avatar .avatar-image-box .avatar-letter ng-letter-avatar {
  display: none;
}
body#artwork .aw-pe__avatar .aw-btn {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
  padding: 0 12px;
  gap: 8px;
}
body#artwork .aw-pe__file {
  position: relative;
  overflow: hidden;
  margin: 0;
  font-weight: 600;
  cursor: pointer;
}
body#artwork .aw-pe__file input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
body#artwork .aw-pe__form {
  min-width: 0;
}
body#artwork .aw-pe__eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-35);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fill-10);
}
body#artwork .aw-pe__note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--ink-dim);
}
body#artwork .aw-pe__note-dot {
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  flex: none;
}
body#artwork .aw-pe {
  /* settings row: label · 300px control */
}
body#artwork .aw-pe__row {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 300px);
  align-items: center;
  gap: 24px;
  padding: 18px 0;
  margin: 0;
  border-bottom: 1px solid var(--fill-05);
  font-weight: 400;
  cursor: default;
}
body#artwork .aw-pe__label {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-1);
}
body#artwork .aw-pe__row input.form-control {
  height: 42px;
  border-radius: 11px;
  background: var(--fill-08);
  border: 1px solid var(--fill-13);
  color: var(--ink);
  font-size: 15px;
  box-shadow: none;
  padding: 0 14px;
}
body#artwork .aw-pe__row input.form-control:focus {
  border-color: var(--fill-30);
  box-shadow: none;
  outline: none;
}
body#artwork .aw-pe__row input.form-control::placeholder {
  color: var(--ink-dim);
}
body#artwork .aw-pe__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}
body#artwork .aw-pe__section {
  margin-top: 44px;
}
body#artwork .aw-pe__kv {
  margin-top: 18px;
}
body#artwork .aw-pe__sub-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
body#artwork .aw-pe__link {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
body#artwork .aw-pe__link:hover {
  color: var(--ink);
  text-decoration: none;
}
body#artwork .aw-pe__spacer {
  flex: 1;
}
body#artwork .aw-pe__danger {
  display: flex;
  justify-content: flex-end;
  padding-top: 26px;
  border-top: 1px solid var(--fill-10);
}
body#artwork .aw-pe {
  /* pills: same metrics as the settings mixin (outline 42 / primary 40, danger in the error tone) */
}
body#artwork .aw-pe .aw-btn {
  height: 42px;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--fill-18);
}
body#artwork .aw-pe .aw-btn .material-symbols-rounded {
  font-size: 20px;
}
body#artwork .aw-pe .aw-btn:hover {
  background: var(--fill-08);
  color: var(--ink);
}
body#artwork .aw-pe .aw-btn--primary {
  height: 40px;
  border: 0;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
}
body#artwork .aw-pe .aw-btn--primary:hover {
  background: var(--ink-1);
  color: var(--on-ink);
}
body#artwork .aw-pe .aw-btn--danger {
  color: var(--err);
  border-color: var(--err-line);
}
body#artwork .aw-pe .aw-btn--danger .material-symbols-rounded {
  color: var(--err);
}
body#artwork .aw-pe .aw-btn--danger:hover {
  background: var(--err-wash);
  color: var(--err);
}
body#artwork .aw-pe .aw-spin {
  animation: aw-spin 1s linear infinite;
}
body#artwork .aw-pe--login .aw-pe__note {
  margin: 34px 0 18px;
  font-size: 15px;
  color: var(--ink-muted);
}

/* ============================================================
   MyVolumio access (login / signup) — Volumio's page in the theme's idiom: eyebrow, 46/800
   title, two cards with a pill each, social buttons as outline pills.
   ============================================================ */
body#artwork .aw-state-myvolumio-access .box {
  position: relative;
  padding: clamp(24px, 4.4vh, 40px) var(--pad-screen) 60px;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--ink-1);
}
body#artwork .aw-state-myvolumio-access .box .panel, body#artwork .aw-state-myvolumio-access .box .panel-body, body#artwork .aw-state-myvolumio-access .box .panel-heading {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
body#artwork .aw-state-myvolumio-access .box .boxHeader {
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body#artwork .aw-state-myvolumio-access .box .boxHeader .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
body#artwork .aw-state-myvolumio-access .box .boxHeader .title h2 {
  margin: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-35);
  font-weight: 400;
  line-height: 36px;
}
body#artwork .aw-state-myvolumio-access .box .boxHeader #myvolumio-info {
  float: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  margin: 0;
  background: transparent;
  border: 1px solid var(--fill-16);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
  text-decoration: none;
}
body#artwork .aw-state-myvolumio-access .box .boxHeader #myvolumio-info .fa {
  color: var(--ink-3);
}
body#artwork .aw-state-myvolumio-access .box .boxHeader #myvolumio-info:hover {
  background: var(--fill-08);
  color: var(--ink);
}
body#artwork .aw-state-myvolumio-access .box #authLoginPlugin > .panel-heading {
  display: none;
}
body#artwork .aw-state-myvolumio-access .box .omb_login {
  margin-top: 34px;
}
body#artwork .aw-state-myvolumio-access .box .omb_authTitle {
  margin: 0 0 22px;
  font-family: var(--font-ui);
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  text-align: left;
}
body#artwork .aw-state-myvolumio-access .box .omb_socialButtons {
  display: flex;
  gap: 10px;
  margin: 0 0 22px;
}
body#artwork .aw-state-myvolumio-access .box .omb_socialButtons > [class*=col-] {
  width: auto;
  float: none;
  padding: 0;
  margin: 0;
}
body#artwork .aw-state-myvolumio-access .box .omb_socialButtons .btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 18px;
  border-radius: 21px;
  margin: 0;
  background: transparent;
  border: 1px solid var(--fill-18);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
  text-shadow: none;
}
body#artwork .aw-state-myvolumio-access .box .omb_socialButtons .btn:hover {
  background: var(--fill-08);
  color: var(--ink);
}
body#artwork .aw-state-myvolumio-access .box .omb_loginOr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
}
body#artwork .aw-state-myvolumio-access .box .omb_loginOr > [class*=col-] {
  width: auto;
  float: none;
  padding: 0;
  margin: 0;
}
body#artwork .aw-state-myvolumio-access .box .omb_loginOr .omb_hrOr {
  display: none;
}
body#artwork .aw-state-myvolumio-access .box .omb_loginOr .omb_spanOr {
  position: static;
  background: transparent;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
body#artwork .aw-state-myvolumio-access .box {
  /* the two choices: cards side by side */
}
body#artwork .aw-state-myvolumio-access .box .omb_login + .row, body#artwork .aw-state-myvolumio-access .box #authLoginPlugin .panel-body > .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
  margin: 0;
}
body#artwork .aw-state-myvolumio-access .box .omb_login + .row > [class*=col-], body#artwork .aw-state-myvolumio-access .box #authLoginPlugin .panel-body > .row > [class*=col-] {
  width: auto;
  float: none;
  padding: 0;
  margin: 0 !important;
}
body#artwork .aw-state-myvolumio-access .box .well {
  margin: 0;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--fill-06);
  border: 1px solid var(--fill-10);
  box-shadow: none;
}
body#artwork .aw-state-myvolumio-access .box .well .lead {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-2);
}
body#artwork .aw-state-myvolumio-access .box .well .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 44px;
  border-radius: 22px;
  margin: 0;
  box-shadow: none;
  font-size: 14px;
  font-weight: 700;
}
body#artwork .aw-state-myvolumio-access .box .well .btn .glyphicon {
  top: 0;
}
body#artwork .aw-state-myvolumio-access .box .well .btn-success {
  background: var(--ink);
  color: var(--on-ink);
  border: 0;
}
body#artwork .aw-state-myvolumio-access .box .well .btn-success .glyphicon {
  color: var(--on-ink);
}
body#artwork .aw-state-myvolumio-access .box .well .btn-success:hover {
  background: var(--ink-1);
  color: var(--on-ink);
}
body#artwork .aw-state-myvolumio-access .box .well .btn-primary, body#artwork .aw-state-myvolumio-access .box .well .btn-info, body#artwork .aw-state-myvolumio-access .box .well .btn-default {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--fill-18);
  font-weight: 600;
}
body#artwork .aw-state-myvolumio-access .box .well .btn-primary:hover, body#artwork .aw-state-myvolumio-access .box .well .btn-info:hover, body#artwork .aw-state-myvolumio-access .box .well .btn-default:hover {
  background: var(--fill-08);
  color: var(--ink);
}

/* ============================================================
   MyVolumio login / signup / password recovery — Volumio's pages in the theme's idiom
   (same as Access): mono eyebrow + outline pill, 46/800 title, a 480px form column,
   inputs like the settings inputs, white primary pill, outline secondary pills.
   ============================================================ */
body#artwork .aw-state-myvolumio-login .box, body#artwork .aw-state-myvolumio-signup .box, body#artwork .aw-state-myvolumio-recover-password .box {
  position: relative;
  padding: clamp(24px, 4.4vh, 40px) var(--pad-screen) 60px;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--ink-1);
}
body#artwork .aw-state-myvolumio-login .box .panel, body#artwork .aw-state-myvolumio-login .box .panel-body, body#artwork .aw-state-myvolumio-login .box .panel-heading, body#artwork .aw-state-myvolumio-login .box .well, body#artwork .aw-state-myvolumio-signup .box .panel, body#artwork .aw-state-myvolumio-signup .box .panel-body, body#artwork .aw-state-myvolumio-signup .box .panel-heading, body#artwork .aw-state-myvolumio-signup .box .well, body#artwork .aw-state-myvolumio-recover-password .box .panel, body#artwork .aw-state-myvolumio-recover-password .box .panel-body, body#artwork .aw-state-myvolumio-recover-password .box .panel-heading, body#artwork .aw-state-myvolumio-recover-password .box .well {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
body#artwork .aw-state-myvolumio-login .box .boxHeader, body#artwork .aw-state-myvolumio-signup .box .boxHeader, body#artwork .aw-state-myvolumio-recover-password .box .boxHeader {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 28px;
}
body#artwork .aw-state-myvolumio-login .box .boxHeader .title, body#artwork .aw-state-myvolumio-signup .box .boxHeader .title, body#artwork .aw-state-myvolumio-recover-password .box .boxHeader .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body#artwork .aw-state-myvolumio-login .box .boxHeader .title h2, body#artwork .aw-state-myvolumio-signup .box .boxHeader .title h2, body#artwork .aw-state-myvolumio-recover-password .box .boxHeader .title h2 {
  margin: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-35);
  font-weight: 400;
  line-height: 36px;
}
body#artwork .aw-state-myvolumio-login .box #authLoginPlugin > .panel-heading, body#artwork .aw-state-myvolumio-signup .box #authLoginPlugin > .panel-heading, body#artwork .aw-state-myvolumio-recover-password .box #authLoginPlugin > .panel-heading {
  display: none;
}
body#artwork .aw-state-myvolumio-login .box, body#artwork .aw-state-myvolumio-signup .box, body#artwork .aw-state-myvolumio-recover-password .box {
  /* outline pills (What is MyVolumio, Signup ⇄ Login) */
}
body#artwork .aw-state-myvolumio-login .box #myvolumio-info, body#artwork .aw-state-myvolumio-login .box .btn-outline, body#artwork .aw-state-myvolumio-signup .box #myvolumio-info, body#artwork .aw-state-myvolumio-signup .box .btn-outline, body#artwork .aw-state-myvolumio-recover-password .box #myvolumio-info, body#artwork .aw-state-myvolumio-recover-password .box .btn-outline {
  float: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  margin: 0;
  background: transparent;
  border: 1px solid var(--fill-16);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
}
body#artwork .aw-state-myvolumio-login .box #myvolumio-info .fa, body#artwork .aw-state-myvolumio-login .box .btn-outline .fa, body#artwork .aw-state-myvolumio-signup .box #myvolumio-info .fa, body#artwork .aw-state-myvolumio-signup .box .btn-outline .fa, body#artwork .aw-state-myvolumio-recover-password .box #myvolumio-info .fa, body#artwork .aw-state-myvolumio-recover-password .box .btn-outline .fa {
  color: var(--ink-3);
  margin: 0;
}
body#artwork .aw-state-myvolumio-login .box #myvolumio-info:hover, body#artwork .aw-state-myvolumio-login .box .btn-outline:hover, body#artwork .aw-state-myvolumio-signup .box #myvolumio-info:hover, body#artwork .aw-state-myvolumio-signup .box .btn-outline:hover, body#artwork .aw-state-myvolumio-recover-password .box #myvolumio-info:hover, body#artwork .aw-state-myvolumio-recover-password .box .btn-outline:hover {
  background: var(--fill-08);
  color: var(--ink);
}
body#artwork .aw-state-myvolumio-login .box, body#artwork .aw-state-myvolumio-signup .box, body#artwork .aw-state-myvolumio-recover-password .box {
  /* the form column */
}
body#artwork .aw-state-myvolumio-login .box .row, body#artwork .aw-state-myvolumio-signup .box .row, body#artwork .aw-state-myvolumio-recover-password .box .row {
  margin: 0;
}
body#artwork .aw-state-myvolumio-login .box [class*=col-], body#artwork .aw-state-myvolumio-signup .box [class*=col-], body#artwork .aw-state-myvolumio-recover-password .box [class*=col-] {
  float: none;
  width: auto;
  padding: 0;
  margin-left: 0 !important;
}
body#artwork .aw-state-myvolumio-login .box .omb_login, body#artwork .aw-state-myvolumio-signup .box .omb_login, body#artwork .aw-state-myvolumio-recover-password .box .omb_login {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
body#artwork .aw-state-myvolumio-login .box .omb_login > .btn-outline, body#artwork .aw-state-myvolumio-login .box .omb_login > .d-flex, body#artwork .aw-state-myvolumio-signup .box .omb_login > .btn-outline, body#artwork .aw-state-myvolumio-signup .box .omb_login > .d-flex, body#artwork .aw-state-myvolumio-recover-password .box .omb_login > .btn-outline, body#artwork .aw-state-myvolumio-recover-password .box .omb_login > .d-flex {
  align-self: flex-end;
  order: -1;
  margin-bottom: 18px;
}
body#artwork .aw-state-myvolumio-login .box .omb_authTitle, body#artwork .aw-state-myvolumio-signup .box .omb_authTitle, body#artwork .aw-state-myvolumio-recover-password .box .omb_authTitle {
  margin: 0 0 22px;
  font-family: var(--font-ui);
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  text-align: left;
}
body#artwork .aw-state-myvolumio-login .box .omb_socialButtons, body#artwork .aw-state-myvolumio-signup .box .omb_socialButtons, body#artwork .aw-state-myvolumio-recover-password .box .omb_socialButtons {
  display: flex;
  gap: 10px;
  margin: 0 0 18px;
}
body#artwork .aw-state-myvolumio-login .box .omb_socialButtons .btn, body#artwork .aw-state-myvolumio-signup .box .omb_socialButtons .btn, body#artwork .aw-state-myvolumio-recover-password .box .omb_socialButtons .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border-radius: 21px;
  margin: 0;
  background: transparent;
  border: 1px solid var(--fill-18);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
  text-shadow: none;
}
body#artwork .aw-state-myvolumio-login .box .omb_socialButtons .btn:hover, body#artwork .aw-state-myvolumio-signup .box .omb_socialButtons .btn:hover, body#artwork .aw-state-myvolumio-recover-password .box .omb_socialButtons .btn:hover {
  background: var(--fill-08);
}
body#artwork .aw-state-myvolumio-login .box .omb_loginOr, body#artwork .aw-state-myvolumio-signup .box .omb_loginOr, body#artwork .aw-state-myvolumio-recover-password .box .omb_loginOr {
  display: flex;
  align-items: center;
  margin: 0 0 18px;
}
body#artwork .aw-state-myvolumio-login .box .omb_loginOr .omb_hrOr, body#artwork .aw-state-myvolumio-signup .box .omb_loginOr .omb_hrOr, body#artwork .aw-state-myvolumio-recover-password .box .omb_loginOr .omb_hrOr {
  display: none;
}
body#artwork .aw-state-myvolumio-login .box .omb_loginOr .omb_spanOr, body#artwork .aw-state-myvolumio-signup .box .omb_loginOr .omb_spanOr, body#artwork .aw-state-myvolumio-recover-password .box .omb_loginOr .omb_spanOr {
  position: static;
  background: transparent;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
body#artwork .aw-state-myvolumio-login .box .input-group, body#artwork .aw-state-myvolumio-signup .box .input-group, body#artwork .aw-state-myvolumio-recover-password .box .input-group {
  display: block;
  width: 100%;
}
body#artwork .aw-state-myvolumio-login .box .input-group .input-group-addon, body#artwork .aw-state-myvolumio-signup .box .input-group .input-group-addon, body#artwork .aw-state-myvolumio-recover-password .box .input-group .input-group-addon {
  display: none;
}
body#artwork .aw-state-myvolumio-login .box .input-group .form-control, body#artwork .aw-state-myvolumio-signup .box .input-group .form-control, body#artwork .aw-state-myvolumio-recover-password .box .input-group .form-control {
  float: none;
  position: relative;
}
body#artwork .aw-state-myvolumio-login .box, body#artwork .aw-state-myvolumio-signup .box, body#artwork .aw-state-myvolumio-recover-password .box { /* Bootstrap floats the input: the group had no height */ }
body#artwork .aw-state-myvolumio-login .box .help-block, body#artwork .aw-state-myvolumio-signup .box .help-block, body#artwork .aw-state-myvolumio-recover-password .box .help-block {
  display: block;
  height: 12px;
  margin: 0;
  overflow: hidden;
}
body#artwork .aw-state-myvolumio-login .box .form-group, body#artwork .aw-state-myvolumio-login .box .my-volumio__form-group, body#artwork .aw-state-myvolumio-signup .box .form-group, body#artwork .aw-state-myvolumio-signup .box .my-volumio__form-group, body#artwork .aw-state-myvolumio-recover-password .box .form-group, body#artwork .aw-state-myvolumio-recover-password .box .my-volumio__form-group {
  margin: 0 0 12px;
}
body#artwork .aw-state-myvolumio-login .box .row::before, body#artwork .aw-state-myvolumio-login .box .row::after, body#artwork .aw-state-myvolumio-signup .box .row::before, body#artwork .aw-state-myvolumio-signup .box .row::after, body#artwork .aw-state-myvolumio-recover-password .box .row::before, body#artwork .aw-state-myvolumio-recover-password .box .row::after {
  display: none;
}
body#artwork .aw-state-myvolumio-login .box, body#artwork .aw-state-myvolumio-signup .box, body#artwork .aw-state-myvolumio-recover-password .box { /* Bootstrap clearfix pseudo-elements become grid items */ }
body#artwork .aw-state-myvolumio-login .box .my-volumio__row-gutter, body#artwork .aw-state-myvolumio-signup .box .my-volumio__row-gutter, body#artwork .aw-state-myvolumio-recover-password .box .my-volumio__row-gutter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 0 12px;
}
body#artwork .aw-state-myvolumio-login .box input.form-control, body#artwork .aw-state-myvolumio-login .box .my-volumio__text-input, body#artwork .aw-state-myvolumio-signup .box input.form-control, body#artwork .aw-state-myvolumio-signup .box .my-volumio__text-input, body#artwork .aw-state-myvolumio-recover-password .box input.form-control, body#artwork .aw-state-myvolumio-recover-password .box .my-volumio__text-input {
  height: 44px;
  border-radius: 11px !important;
  background: var(--fill-08);
  border: 1px solid var(--fill-13);
  color: var(--ink);
  font-size: 15px;
  box-shadow: none;
  padding: 0 14px;
  width: 100%;
}
body#artwork .aw-state-myvolumio-login .box input.form-control:focus, body#artwork .aw-state-myvolumio-login .box .my-volumio__text-input:focus, body#artwork .aw-state-myvolumio-signup .box input.form-control:focus, body#artwork .aw-state-myvolumio-signup .box .my-volumio__text-input:focus, body#artwork .aw-state-myvolumio-recover-password .box input.form-control:focus, body#artwork .aw-state-myvolumio-recover-password .box .my-volumio__text-input:focus {
  border-color: var(--fill-30);
  box-shadow: none;
  outline: none;
}
body#artwork .aw-state-myvolumio-login .box input.form-control::placeholder, body#artwork .aw-state-myvolumio-login .box .my-volumio__text-input::placeholder, body#artwork .aw-state-myvolumio-signup .box input.form-control::placeholder, body#artwork .aw-state-myvolumio-signup .box .my-volumio__text-input::placeholder, body#artwork .aw-state-myvolumio-recover-password .box input.form-control::placeholder, body#artwork .aw-state-myvolumio-recover-password .box .my-volumio__text-input::placeholder {
  color: var(--ink-dim);
}
body#artwork .aw-state-myvolumio-login .box, body#artwork .aw-state-myvolumio-signup .box, body#artwork .aw-state-myvolumio-recover-password .box {
  /* primary action */
}
body#artwork .aw-state-myvolumio-login .box input[type=submit].btn, body#artwork .aw-state-myvolumio-login .box .btn-success, body#artwork .aw-state-myvolumio-login .box .my-volumio__btn-primary, body#artwork .aw-state-myvolumio-signup .box input[type=submit].btn, body#artwork .aw-state-myvolumio-signup .box .btn-success, body#artwork .aw-state-myvolumio-signup .box .my-volumio__btn-primary, body#artwork .aw-state-myvolumio-recover-password .box input[type=submit].btn, body#artwork .aw-state-myvolumio-recover-password .box .btn-success, body#artwork .aw-state-myvolumio-recover-password .box .my-volumio__btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  margin: 8px 0 0;
  border-radius: 23px !important;
  border: 0;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 15px;
  font-weight: 700;
  box-shadow: none;
  text-shadow: none;
}
body#artwork .aw-state-myvolumio-login .box input[type=submit].btn:hover, body#artwork .aw-state-myvolumio-login .box .btn-success:hover, body#artwork .aw-state-myvolumio-login .box .my-volumio__btn-primary:hover, body#artwork .aw-state-myvolumio-signup .box input[type=submit].btn:hover, body#artwork .aw-state-myvolumio-signup .box .btn-success:hover, body#artwork .aw-state-myvolumio-signup .box .my-volumio__btn-primary:hover, body#artwork .aw-state-myvolumio-recover-password .box input[type=submit].btn:hover, body#artwork .aw-state-myvolumio-recover-password .box .btn-success:hover, body#artwork .aw-state-myvolumio-recover-password .box .my-volumio__btn-primary:hover {
  background: var(--ink-1);
  color: var(--on-ink);
}
body#artwork .aw-state-myvolumio-login .box input[type=submit].btn.disabled, body#artwork .aw-state-myvolumio-login .box .btn-success.disabled, body#artwork .aw-state-myvolumio-login .box .my-volumio__btn-primary.disabled, body#artwork .aw-state-myvolumio-signup .box input[type=submit].btn.disabled, body#artwork .aw-state-myvolumio-signup .box .btn-success.disabled, body#artwork .aw-state-myvolumio-signup .box .my-volumio__btn-primary.disabled, body#artwork .aw-state-myvolumio-recover-password .box input[type=submit].btn.disabled, body#artwork .aw-state-myvolumio-recover-password .box .btn-success.disabled, body#artwork .aw-state-myvolumio-recover-password .box .my-volumio__btn-primary.disabled {
  opacity: 0.6;
}
body#artwork .aw-state-myvolumio-login .box .omb_forgotPwd, body#artwork .aw-state-myvolumio-signup .box .omb_forgotPwd, body#artwork .aw-state-myvolumio-recover-password .box .omb_forgotPwd {
  margin: 14px 0 0;
  text-align: right;
}
body#artwork .aw-state-myvolumio-login .box .omb_forgotPwd a, body#artwork .aw-state-myvolumio-signup .box .omb_forgotPwd a, body#artwork .aw-state-myvolumio-recover-password .box .omb_forgotPwd a {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  text-decoration: none;
}
body#artwork .aw-state-myvolumio-login .box .omb_forgotPwd a:hover, body#artwork .aw-state-myvolumio-signup .box .omb_forgotPwd a:hover, body#artwork .aw-state-myvolumio-recover-password .box .omb_forgotPwd a:hover {
  color: var(--ink);
}
body#artwork .aw-state-myvolumio-login .box .checkbox.hidden, body#artwork .aw-state-myvolumio-signup .box .checkbox.hidden, body#artwork .aw-state-myvolumio-recover-password .box .checkbox.hidden {
  display: none;
}
body#artwork .aw-state-myvolumio-login .box, body#artwork .aw-state-myvolumio-signup .box, body#artwork .aw-state-myvolumio-recover-password .box {
  /* signup: intro card, consent checkboxes */
}
body#artwork .aw-state-myvolumio-login .box .my-volumio__info-card, body#artwork .aw-state-myvolumio-signup .box .my-volumio__info-card, body#artwork .aw-state-myvolumio-recover-password .box .my-volumio__info-card {
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--fill-06);
  border: 1px solid var(--fill-10);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
}
body#artwork .aw-state-myvolumio-login .box .my-volumio__info-card a, body#artwork .aw-state-myvolumio-signup .box .my-volumio__info-card a, body#artwork .aw-state-myvolumio-recover-password .box .my-volumio__info-card a {
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid var(--fill-30);
}
body#artwork .aw-state-myvolumio-login .box .mb-2, body#artwork .aw-state-myvolumio-login .box .mb-10, body#artwork .aw-state-myvolumio-signup .box .mb-2, body#artwork .aw-state-myvolumio-signup .box .mb-10, body#artwork .aw-state-myvolumio-recover-password .box .mb-2, body#artwork .aw-state-myvolumio-recover-password .box .mb-10 {
  margin-bottom: 10px;
}
body#artwork .aw-state-myvolumio-login .box .d-flex, body#artwork .aw-state-myvolumio-signup .box .d-flex, body#artwork .aw-state-myvolumio-recover-password .box .d-flex {
  display: flex;
}
body#artwork .aw-state-myvolumio-login .box .align-items-start, body#artwork .aw-state-myvolumio-signup .box .align-items-start, body#artwork .aw-state-myvolumio-recover-password .box .align-items-start {
  align-items: flex-start;
  gap: 10px;
}
body#artwork .aw-state-myvolumio-login .box .button-checkbox, body#artwork .aw-state-myvolumio-signup .box .button-checkbox, body#artwork .aw-state-myvolumio-recover-password .box .button-checkbox {
  flex: none;
}
body#artwork .aw-state-myvolumio-login .box .my-volumio__fake-checkbox, body#artwork .aw-state-myvolumio-signup .box .my-volumio__fake-checkbox, body#artwork .aw-state-myvolumio-recover-password .box .my-volumio__fake-checkbox {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border-radius: 6px;
  border: 1px solid var(--fill-30);
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}
body#artwork .aw-state-myvolumio-login .box .my-volumio__fake-checkbox .my-volumio__fake-checkbox__tick, body#artwork .aw-state-myvolumio-signup .box .my-volumio__fake-checkbox .my-volumio__fake-checkbox__tick, body#artwork .aw-state-myvolumio-recover-password .box .my-volumio__fake-checkbox .my-volumio__fake-checkbox__tick {
  display: none;
}
body#artwork .aw-state-myvolumio-login .box .my-volumio__fake-checkbox .my-volumio__fake-checkbox__tick img, body#artwork .aw-state-myvolumio-signup .box .my-volumio__fake-checkbox .my-volumio__fake-checkbox__tick img, body#artwork .aw-state-myvolumio-recover-password .box .my-volumio__fake-checkbox .my-volumio__fake-checkbox__tick img {
  width: 12px;
  filter: invert(1);
}
body#artwork .aw-state-myvolumio-login .box .my-volumio__checkbox:checked + .my-volumio__fake-checkbox, body#artwork .aw-state-myvolumio-signup .box .my-volumio__checkbox:checked + .my-volumio__fake-checkbox, body#artwork .aw-state-myvolumio-recover-password .box .my-volumio__checkbox:checked + .my-volumio__fake-checkbox {
  background: var(--ink);
  border-color: var(--ink);
}
body#artwork .aw-state-myvolumio-login .box .my-volumio__checkbox:checked + .my-volumio__fake-checkbox .my-volumio__fake-checkbox__tick, body#artwork .aw-state-myvolumio-signup .box .my-volumio__checkbox:checked + .my-volumio__fake-checkbox .my-volumio__fake-checkbox__tick, body#artwork .aw-state-myvolumio-recover-password .box .my-volumio__checkbox:checked + .my-volumio__fake-checkbox .my-volumio__fake-checkbox__tick {
  display: block;
}
body#artwork .aw-state-myvolumio-login .box .align-items-start > div:last-child, body#artwork .aw-state-myvolumio-signup .box .align-items-start > div:last-child, body#artwork .aw-state-myvolumio-recover-password .box .align-items-start > div:last-child {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}
body#artwork .aw-state-myvolumio-login .box .align-items-start > div:last-child .label, body#artwork .aw-state-myvolumio-signup .box .align-items-start > div:last-child .label, body#artwork .aw-state-myvolumio-recover-password .box .align-items-start > div:last-child .label {
  background: transparent;
  padding: 0;
  font-size: 13px;
}
body#artwork .aw-state-myvolumio-login .box .align-items-start > div:last-child .label a, body#artwork .aw-state-myvolumio-signup .box .align-items-start > div:last-child .label a, body#artwork .aw-state-myvolumio-recover-password .box .align-items-start > div:last-child .label a {
  color: var(--ink);
  font-weight: 600;
}
body#artwork .aw-state-myvolumio-login .box, body#artwork .aw-state-myvolumio-signup .box, body#artwork .aw-state-myvolumio-recover-password .box {
  /* signup step 2: plan choice */
}
body#artwork .aw-state-myvolumio-login .box .my-volumio__toggle-header, body#artwork .aw-state-myvolumio-signup .box .my-volumio__toggle-header, body#artwork .aw-state-myvolumio-recover-password .box .my-volumio__toggle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
}
body#artwork .aw-state-myvolumio-login .box .my-volumio__toggle-header h3, body#artwork .aw-state-myvolumio-signup .box .my-volumio__toggle-header h3, body#artwork .aw-state-myvolumio-recover-password .box .my-volumio__toggle-header h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
body#artwork .aw-state-myvolumio-login .box .my-volumio__toggle .toggle__labels, body#artwork .aw-state-myvolumio-signup .box .my-volumio__toggle .toggle__labels, body#artwork .aw-state-myvolumio-recover-password .box .my-volumio__toggle .toggle__labels {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--fill-08);
  border: 1px solid var(--fill-11);
}
body#artwork .aw-state-myvolumio-login .box .my-volumio__toggle .toggle__labels .toggle__label-text, body#artwork .aw-state-myvolumio-signup .box .my-volumio__toggle .toggle__labels .toggle__label-text, body#artwork .aw-state-myvolumio-recover-password .box .my-volumio__toggle .toggle__labels .toggle__label-text {
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
}
body#artwork .aw-state-myvolumio-login .box #yearly:checked ~ .toggle__labels label[for=yearly], body#artwork .aw-state-myvolumio-login .box #monthly:checked ~ .toggle__labels label[for=monthly], body#artwork .aw-state-myvolumio-signup .box #yearly:checked ~ .toggle__labels label[for=yearly], body#artwork .aw-state-myvolumio-signup .box #monthly:checked ~ .toggle__labels label[for=monthly], body#artwork .aw-state-myvolumio-recover-password .box #yearly:checked ~ .toggle__labels label[for=yearly], body#artwork .aw-state-myvolumio-recover-password .box #monthly:checked ~ .toggle__labels label[for=monthly] {
  background: var(--ink);
  color: var(--on-ink);
}
body#artwork .aw-state-myvolumio-login .box .my-volumio__plan-grid, body#artwork .aw-state-myvolumio-signup .box .my-volumio__plan-grid, body#artwork .aw-state-myvolumio-recover-password .box .my-volumio__plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px;
  max-width: 900px;
  margin: 0 auto 20px;
}
body#artwork .aw-state-myvolumio-login .box .plan__item, body#artwork .aw-state-myvolumio-signup .box .plan__item, body#artwork .aw-state-myvolumio-recover-password .box .plan__item {
  margin: 0;
  cursor: pointer;
}
body#artwork .aw-state-myvolumio-login .box .plan__card, body#artwork .aw-state-myvolumio-signup .box .plan__card, body#artwork .aw-state-myvolumio-recover-password .box .plan__card {
  height: 100%;
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--fill-06);
  border: 1px solid var(--fill-10);
  color: var(--ink-2);
}
body#artwork .aw-state-myvolumio-login .box .plan__checkbox:checked + .plan__card, body#artwork .aw-state-myvolumio-signup .box .plan__checkbox:checked + .plan__card, body#artwork .aw-state-myvolumio-recover-password .box .plan__checkbox:checked + .plan__card {
  border-color: var(--ink);
  background: var(--fill-10);
}
body#artwork .aw-state-myvolumio-login .box .plan__title, body#artwork .aw-state-myvolumio-signup .box .plan__title, body#artwork .aw-state-myvolumio-recover-password .box .plan__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  gap: 10px;
}
body#artwork .aw-state-myvolumio-login .box .plan__fake-radio, body#artwork .aw-state-myvolumio-signup .box .plan__fake-radio, body#artwork .aw-state-myvolumio-recover-password .box .plan__fake-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: grid;
  place-items: center;
}
body#artwork .aw-state-myvolumio-login .box .plan__fake-radio img, body#artwork .aw-state-myvolumio-signup .box .plan__fake-radio img, body#artwork .aw-state-myvolumio-recover-password .box .plan__fake-radio img {
  width: 12px;
  display: none;
  filter: invert(1);
}
body#artwork .aw-state-myvolumio-login .box .plan__checkbox:checked + .plan__card .plan__fake-radio, body#artwork .aw-state-myvolumio-signup .box .plan__checkbox:checked + .plan__card .plan__fake-radio, body#artwork .aw-state-myvolumio-recover-password .box .plan__checkbox:checked + .plan__card .plan__fake-radio {
  background: var(--ink);
  border-color: var(--ink);
}
body#artwork .aw-state-myvolumio-login .box .plan__checkbox:checked + .plan__card .plan__fake-radio img, body#artwork .aw-state-myvolumio-signup .box .plan__checkbox:checked + .plan__card .plan__fake-radio img, body#artwork .aw-state-myvolumio-recover-password .box .plan__checkbox:checked + .plan__card .plan__fake-radio img {
  display: block;
}
body#artwork .aw-state-myvolumio-login .box .plan__trial, body#artwork .aw-state-myvolumio-signup .box .plan__trial, body#artwork .aw-state-myvolumio-recover-password .box .plan__trial {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ok);
}
body#artwork .aw-state-myvolumio-login .box .plan__price, body#artwork .aw-state-myvolumio-signup .box .plan__price, body#artwork .aw-state-myvolumio-recover-password .box .plan__price {
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
body#artwork .aw-state-myvolumio-login .box .plan__period, body#artwork .aw-state-myvolumio-signup .box .plan__period, body#artwork .aw-state-myvolumio-recover-password .box .plan__period {
  font-size: 13px;
  color: var(--ink-dim);
}
body#artwork .aw-state-myvolumio-login .box .plan__features, body#artwork .aw-state-myvolumio-signup .box .plan__features, body#artwork .aw-state-myvolumio-recover-password .box .plan__features {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--fill-09);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body#artwork .aw-state-myvolumio-login .box .plan__feature, body#artwork .aw-state-myvolumio-signup .box .plan__feature, body#artwork .aw-state-myvolumio-recover-password .box .plan__feature {
  font-size: 13px;
  color: var(--ink-3);
}
body#artwork .aw-state-myvolumio-login .box .collapse__panel__header, body#artwork .aw-state-myvolumio-signup .box .collapse__panel__header, body#artwork .aw-state-myvolumio-recover-password .box .collapse__panel__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
}
body#artwork .aw-state-myvolumio-login .box .collapse__panel__header img, body#artwork .aw-state-myvolumio-signup .box .collapse__panel__header img, body#artwork .aw-state-myvolumio-recover-password .box .collapse__panel__header img {
  filter: invert(1);
  width: 12px;
}
body#artwork .aw-state-myvolumio-login .box, body#artwork .aw-state-myvolumio-signup .box, body#artwork .aw-state-myvolumio-recover-password .box {
  /* recovery: the nested boxes flatten into the same column */
}
body#artwork .aw-state-myvolumio-login .box .container, body#artwork .aw-state-myvolumio-signup .box .container, body#artwork .aw-state-myvolumio-recover-password .box .container {
  width: auto;
  max-width: 480px;
  margin: 0 auto;
  padding: 0;
}
body#artwork .aw-state-myvolumio-login .box .text-center, body#artwork .aw-state-myvolumio-signup .box .text-center, body#artwork .aw-state-myvolumio-recover-password .box .text-center {
  text-align: left;
}
body#artwork .aw-state-myvolumio-login .box .text-center h3 .fa-lock, body#artwork .aw-state-myvolumio-signup .box .text-center h3 .fa-lock, body#artwork .aw-state-myvolumio-recover-password .box .text-center h3 .fa-lock {
  display: none;
}
body#artwork .aw-state-myvolumio-login .box .text-center h2, body#artwork .aw-state-myvolumio-signup .box .text-center h2, body#artwork .aw-state-myvolumio-recover-password .box .text-center h2 {
  margin: 0 0 10px;
  font-family: var(--font-ui);
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
body#artwork .aw-state-myvolumio-login .box .panel-body > p, body#artwork .aw-state-myvolumio-login .box .text-center > p, body#artwork .aw-state-myvolumio-signup .box .panel-body > p, body#artwork .aw-state-myvolumio-signup .box .text-center > p, body#artwork .aw-state-myvolumio-recover-password .box .panel-body > p, body#artwork .aw-state-myvolumio-recover-password .box .text-center > p {
  font-size: 14px;
  color: var(--ink-muted);
  margin: 0 0 18px;
}
body#artwork .aw-state-myvolumio-login .box my-volumio-back-button, body#artwork .aw-state-myvolumio-signup .box my-volumio-back-button, body#artwork .aw-state-myvolumio-recover-password .box my-volumio-back-button {
  display: block;
  margin: 0 0 18px;
}
body#artwork .aw-state-myvolumio-login .box my-volumio-back-button a, body#artwork .aw-state-myvolumio-signup .box my-volumio-back-button a, body#artwork .aw-state-myvolumio-recover-password .box my-volumio-back-button a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  background: transparent;
  border: 1px solid var(--fill-16);
  color: var(--ink-2);
  font-size: 14px !important;
  font-weight: 500;
  text-decoration: none;
}
body#artwork .aw-state-myvolumio-login .box my-volumio-back-button a .glyphicon, body#artwork .aw-state-myvolumio-signup .box my-volumio-back-button a .glyphicon, body#artwork .aw-state-myvolumio-recover-password .box my-volumio-back-button a .glyphicon {
  top: 0;
  font-size: 13px;
  color: var(--ink-3);
}
body#artwork .aw-state-myvolumio-login .box my-volumio-back-button a:hover, body#artwork .aw-state-myvolumio-signup .box my-volumio-back-button a:hover, body#artwork .aw-state-myvolumio-recover-password .box my-volumio-back-button a:hover {
  background: var(--fill-08);
  color: var(--ink);
}
body#artwork .aw-state-myvolumio-login .box .panel-body > my-volumio-back-button + p, body#artwork .aw-state-myvolumio-signup .box .panel-body > my-volumio-back-button + p, body#artwork .aw-state-myvolumio-recover-password .box .panel-body > my-volumio-back-button + p {
  margin: 0 0 22px;
}

/* ============================================================
   MyVolumio plans — the theme's own template (Monthly | Yearly segments on the same model)
   in the auth pages' idiom: back pill, 46/800 title, the signup plan step's segmented control
   and glass plan cards.
   ============================================================ */
body#artwork .aw-state-myvolumio-plans .box {
  position: relative;
  padding: clamp(24px, 4.4vh, 40px) var(--pad-screen) 60px;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--ink-1);
}
body#artwork .aw-state-myvolumio-plans .box .aw-plans {
  max-width: 960px;
  margin: 0 auto;
}
body#artwork .aw-state-myvolumio-plans .box my-volumio-back-button {
  display: block;
  margin: 0 0 18px;
}
body#artwork .aw-state-myvolumio-plans .box my-volumio-back-button a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  background: transparent;
  border: 1px solid var(--fill-16);
  color: var(--ink-2);
  font-size: 14px !important;
  font-weight: 500;
  text-decoration: none;
}
body#artwork .aw-state-myvolumio-plans .box my-volumio-back-button a .glyphicon {
  top: 0;
  font-size: 13px;
  color: var(--ink-3);
}
body#artwork .aw-state-myvolumio-plans .box my-volumio-back-button a:hover {
  background: var(--fill-08);
  color: var(--ink);
}
body#artwork .aw-state-myvolumio-plans .box .aw-plans__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 24px;
}
body#artwork .aw-state-myvolumio-plans .box .aw-plans__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
body#artwork .aw-state-myvolumio-plans .box {
  /* the signup plan step's Monthly/Yearly toggle */
}
body#artwork .aw-state-myvolumio-plans .box .aw-plans__seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--fill-08);
  border: 1px solid var(--fill-11);
}
body#artwork .aw-state-myvolumio-plans .box .aw-plans__seg button {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
}
body#artwork .aw-state-myvolumio-plans .box .aw-plans__seg button:hover {
  color: var(--ink);
}
body#artwork .aw-state-myvolumio-plans .box .aw-plans__seg button:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}
body#artwork .aw-state-myvolumio-plans .box .aw-plans__seg button.is-on {
  background: var(--ink);
  color: var(--on-ink);
}
body#artwork .aw-state-myvolumio-plans .box .aw-plans__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  align-items: stretch;
}

/* Volumio's plan card (plans, subscribe, change and cancel subscription): a glass card with
   the price, the trial line, a hairline feature list and full-width pills in the foot */
body#artwork my-volumio-plan-card {
  display: block;
  min-width: 0;
}

body#artwork my-volumio-plan-card .plan-box {
  height: 100%;
}
body#artwork my-volumio-plan-card .plan-box .panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 !important;
  border-radius: 16px;
  background: var(--fill-06);
  border: 1px solid var(--fill-10);
  box-shadow: none;
  text-align: left;
  overflow: hidden;
  color: var(--ink-2);
}
body#artwork my-volumio-plan-card .plan-box .panel:hover {
  box-shadow: none;
}
body#artwork my-volumio-plan-card .plan-box .panel > .panel-heading {
  padding: 22px 22px 0;
  background: transparent;
  border: 0;
  color: var(--ink);
}
body#artwork my-volumio-plan-card .plan-box .panel > .panel-heading .panel-title {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
body#artwork my-volumio-plan-card .plan-box .panel-body {
  flex: 1 1 auto;
  padding: 0 22px;
  text-align: left;
  background: transparent;
  border: 0;
}
body#artwork my-volumio-plan-card .plan-box .the-price {
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 6px 0 0;
  background: transparent;
  box-shadow: none;
  border: 0;
  font-size: 13px;
  color: var(--ink-dim);
}
body#artwork my-volumio-plan-card .plan-box .the-price h1 {
  margin: 0 0 6px;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
}
body#artwork my-volumio-plan-card .plan-box .the-price span {
  font-size: 13px !important;
  color: var(--ink-dim);
}
body#artwork my-volumio-plan-card .plan-box .the-price { /* inline font-size: small */ }
body#artwork my-volumio-plan-card .plan-box .the-price br {
  display: none;
}
body#artwork my-volumio-plan-card .plan-box .trial-text {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ok);
}
body#artwork my-volumio-plan-card .plan-box table.table {
  margin: 16px 0 0;
  background: transparent;
  border-top: 1px solid var(--fill-09);
}
body#artwork my-volumio-plan-card .plan-box table.table tr, body#artwork my-volumio-plan-card .plan-box table.table tr.active {
  background: transparent;
}
body#artwork my-volumio-plan-card .plan-box table.table tr > td, body#artwork my-volumio-plan-card .plan-box table.table tr.active > td {
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--fill-06);
  background: transparent;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-3);
}
body#artwork my-volumio-plan-card .plan-box table.table tr:last-child > td {
  border-bottom: 0;
}
body#artwork my-volumio-plan-card .plan-box .panel-footer {
  min-height: 0;
  padding: 18px 22px 22px;
  background: transparent;
  border: 0;
  color: var(--ink-2);
}
body#artwork my-volumio-plan-card .plan-box .panel-footer > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body#artwork my-volumio-plan-card .plan-box .panel-footer > div:empty {
  display: none;
}
body#artwork my-volumio-plan-card .plan-box .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 44px;
  padding: 0 18px;
  margin: 0;
  border-radius: 22px;
  box-shadow: none;
  text-shadow: none;
  font-size: 14px;
  font-weight: 700;
  white-space: normal;
  line-height: 1.2;
}
body#artwork my-volumio-plan-card .plan-box .btn .glyphicon, body#artwork my-volumio-plan-card .plan-box .btn .fa {
  top: 0;
  font-size: 12px;
}
body#artwork my-volumio-plan-card .plan-box .btn[disabled], body#artwork my-volumio-plan-card .plan-box .btn.disabled {
  opacity: 0.45;
}
body#artwork my-volumio-plan-card .plan-box .btn-label {
  position: static;
  left: auto;
  display: inline-flex;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
body#artwork my-volumio-plan-card .plan-box .btn-success, body#artwork my-volumio-plan-card .plan-box .btn-primary {
  background: var(--ink);
  color: var(--on-ink);
  border: 0;
}
body#artwork my-volumio-plan-card .plan-box .btn-success:hover, body#artwork my-volumio-plan-card .plan-box .btn-success:focus, body#artwork my-volumio-plan-card .plan-box .btn-primary:hover, body#artwork my-volumio-plan-card .plan-box .btn-primary:focus {
  background: var(--ink-1);
  color: var(--on-ink);
}
body#artwork my-volumio-plan-card .plan-box .btn-default {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--fill-18);
  font-weight: 600;
}
body#artwork my-volumio-plan-card .plan-box .btn-default:hover, body#artwork my-volumio-plan-card .plan-box .btn-default:focus {
  background: var(--fill-08);
  color: var(--ink);
}

/* ============================================================
   MyVolumio subscription flow — subscribe, change and cancel subscription, payment
   success and fail. Volumio's pages, styled in place: back pill, the panel heading as the
   mono eyebrow, the page's own h3 as the 46/800 title, one 560px column with the card.
   ============================================================ */
body#artwork .aw-state-myvolumio-subscribe .box, body#artwork .aw-state-myvolumio-change-subscription .box, body#artwork .aw-state-myvolumio-cancel-subscription .box,
body#artwork .aw-state-myvolumio-payment-success .box, body#artwork .aw-state-myvolumio-payment-fail .box {
  position: relative;
  padding: clamp(24px, 4.4vh, 40px) var(--pad-screen) 60px;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--ink-1);
}
body#artwork .aw-state-myvolumio-subscribe .box > .boxHeader, body#artwork .aw-state-myvolumio-change-subscription .box > .boxHeader, body#artwork .aw-state-myvolumio-cancel-subscription .box > .boxHeader,
body#artwork .aw-state-myvolumio-payment-success .box > .boxHeader, body#artwork .aw-state-myvolumio-payment-fail .box > .boxHeader {
  display: none;
}
body#artwork .aw-state-myvolumio-subscribe .box, body#artwork .aw-state-myvolumio-change-subscription .box, body#artwork .aw-state-myvolumio-cancel-subscription .box,
body#artwork .aw-state-myvolumio-payment-success .box, body#artwork .aw-state-myvolumio-payment-fail .box { /* a second "MyVolumio" label: the panel heading is the eyebrow */
  /* flatten the page panel; its body and the ng-if wrapper join one column so the back pill
     can sit above the eyebrow */
}
body#artwork .aw-state-myvolumio-subscribe .box > .panel, body#artwork .aw-state-myvolumio-change-subscription .box > .panel, body#artwork .aw-state-myvolumio-cancel-subscription .box > .panel,
body#artwork .aw-state-myvolumio-payment-success .box > .panel, body#artwork .aw-state-myvolumio-payment-fail .box > .panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 560px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
body#artwork .aw-state-myvolumio-subscribe .box > .panel > .panel-body, body#artwork .aw-state-myvolumio-subscribe .box > .panel > .panel-body > div, body#artwork .aw-state-myvolumio-change-subscription .box > .panel > .panel-body, body#artwork .aw-state-myvolumio-change-subscription .box > .panel > .panel-body > div, body#artwork .aw-state-myvolumio-cancel-subscription .box > .panel > .panel-body, body#artwork .aw-state-myvolumio-cancel-subscription .box > .panel > .panel-body > div,
body#artwork .aw-state-myvolumio-payment-success .box > .panel > .panel-body,
body#artwork .aw-state-myvolumio-payment-success .box > .panel > .panel-body > div, body#artwork .aw-state-myvolumio-payment-fail .box > .panel > .panel-body, body#artwork .aw-state-myvolumio-payment-fail .box > .panel > .panel-body > div {
  display: contents;
}
body#artwork .aw-state-myvolumio-subscribe .box > .panel > .panel-heading, body#artwork .aw-state-myvolumio-change-subscription .box > .panel > .panel-heading, body#artwork .aw-state-myvolumio-cancel-subscription .box > .panel > .panel-heading,
body#artwork .aw-state-myvolumio-payment-success .box > .panel > .panel-heading, body#artwork .aw-state-myvolumio-payment-fail .box > .panel > .panel-heading {
  order: -1;
  margin: 0 0 12px;
  padding: 0;
  background: transparent;
  border: 0;
}
body#artwork .aw-state-myvolumio-subscribe .box > .panel > .panel-heading .panel-title, body#artwork .aw-state-myvolumio-change-subscription .box > .panel > .panel-heading .panel-title, body#artwork .aw-state-myvolumio-cancel-subscription .box > .panel > .panel-heading .panel-title,
body#artwork .aw-state-myvolumio-payment-success .box > .panel > .panel-heading .panel-title, body#artwork .aw-state-myvolumio-payment-fail .box > .panel > .panel-heading .panel-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-35);
}
body#artwork .aw-state-myvolumio-subscribe .box > .panel > .panel-heading .panel-title .fa, body#artwork .aw-state-myvolumio-change-subscription .box > .panel > .panel-heading .panel-title .fa, body#artwork .aw-state-myvolumio-cancel-subscription .box > .panel > .panel-heading .panel-title .fa,
body#artwork .aw-state-myvolumio-payment-success .box > .panel > .panel-heading .panel-title .fa, body#artwork .aw-state-myvolumio-payment-fail .box > .panel > .panel-heading .panel-title .fa {
  display: none;
}
body#artwork .aw-state-myvolumio-subscribe .box my-volumio-back-button, body#artwork .aw-state-myvolumio-change-subscription .box my-volumio-back-button, body#artwork .aw-state-myvolumio-cancel-subscription .box my-volumio-back-button,
body#artwork .aw-state-myvolumio-payment-success .box my-volumio-back-button, body#artwork .aw-state-myvolumio-payment-fail .box my-volumio-back-button {
  order: -2;
  align-self: flex-start;
  display: block;
  margin: 0 0 22px;
}
body#artwork .aw-state-myvolumio-subscribe .box my-volumio-back-button a, body#artwork .aw-state-myvolumio-change-subscription .box my-volumio-back-button a, body#artwork .aw-state-myvolumio-cancel-subscription .box my-volumio-back-button a,
body#artwork .aw-state-myvolumio-payment-success .box my-volumio-back-button a, body#artwork .aw-state-myvolumio-payment-fail .box my-volumio-back-button a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  background: transparent;
  border: 1px solid var(--fill-16);
  color: var(--ink-2);
  font-size: 14px !important;
  font-weight: 500;
  text-decoration: none;
}
body#artwork .aw-state-myvolumio-subscribe .box my-volumio-back-button a .glyphicon, body#artwork .aw-state-myvolumio-change-subscription .box my-volumio-back-button a .glyphicon, body#artwork .aw-state-myvolumio-cancel-subscription .box my-volumio-back-button a .glyphicon,
body#artwork .aw-state-myvolumio-payment-success .box my-volumio-back-button a .glyphicon, body#artwork .aw-state-myvolumio-payment-fail .box my-volumio-back-button a .glyphicon {
  top: 0;
  font-size: 13px;
  color: var(--ink-3);
}
body#artwork .aw-state-myvolumio-subscribe .box my-volumio-back-button a:hover, body#artwork .aw-state-myvolumio-change-subscription .box my-volumio-back-button a:hover, body#artwork .aw-state-myvolumio-cancel-subscription .box my-volumio-back-button a:hover,
body#artwork .aw-state-myvolumio-payment-success .box my-volumio-back-button a:hover, body#artwork .aw-state-myvolumio-payment-fail .box my-volumio-back-button a:hover {
  background: var(--fill-08);
  color: var(--ink);
}
body#artwork .aw-state-myvolumio-subscribe .box > .panel > .panel-body > h3, body#artwork .aw-state-myvolumio-subscribe .box > .panel > .panel-body > div > h3, body#artwork .aw-state-myvolumio-change-subscription .box > .panel > .panel-body > h3, body#artwork .aw-state-myvolumio-change-subscription .box > .panel > .panel-body > div > h3, body#artwork .aw-state-myvolumio-cancel-subscription .box > .panel > .panel-body > h3, body#artwork .aw-state-myvolumio-cancel-subscription .box > .panel > .panel-body > div > h3,
body#artwork .aw-state-myvolumio-payment-success .box > .panel > .panel-body > h3,
body#artwork .aw-state-myvolumio-payment-success .box > .panel > .panel-body > div > h3, body#artwork .aw-state-myvolumio-payment-fail .box > .panel > .panel-body > h3, body#artwork .aw-state-myvolumio-payment-fail .box > .panel > .panel-body > div > h3 {
  margin: 0 0 14px !important; /* inline 16px */
  font-family: var(--font-ui);
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--ink);
}
body#artwork .aw-state-myvolumio-subscribe .box > .panel > .panel-body > div > p, body#artwork .aw-state-myvolumio-change-subscription .box > .panel > .panel-body > div > p, body#artwork .aw-state-myvolumio-cancel-subscription .box > .panel > .panel-body > div > p,
body#artwork .aw-state-myvolumio-payment-success .box > .panel > .panel-body > div > p, body#artwork .aw-state-myvolumio-payment-fail .box > .panel > .panel-body > div > p {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}
body#artwork .aw-state-myvolumio-subscribe .box > .panel > .panel-body > h4, body#artwork .aw-state-myvolumio-subscribe .box > .panel > .panel-body > div > h4, body#artwork .aw-state-myvolumio-change-subscription .box > .panel > .panel-body > h4, body#artwork .aw-state-myvolumio-change-subscription .box > .panel > .panel-body > div > h4, body#artwork .aw-state-myvolumio-cancel-subscription .box > .panel > .panel-body > h4, body#artwork .aw-state-myvolumio-cancel-subscription .box > .panel > .panel-body > div > h4,
body#artwork .aw-state-myvolumio-payment-success .box > .panel > .panel-body > h4,
body#artwork .aw-state-myvolumio-payment-success .box > .panel > .panel-body > div > h4, body#artwork .aw-state-myvolumio-payment-fail .box > .panel > .panel-body > h4, body#artwork .aw-state-myvolumio-payment-fail .box > .panel > .panel-body > div > h4 {
  margin: 0 0 12px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-3);
}
body#artwork .aw-state-myvolumio-subscribe .box > .panel > .panel-body > div > h4.badged-block, body#artwork .aw-state-myvolumio-change-subscription .box > .panel > .panel-body > div > h4.badged-block, body#artwork .aw-state-myvolumio-cancel-subscription .box > .panel > .panel-body > div > h4.badged-block,
body#artwork .aw-state-myvolumio-payment-success .box > .panel > .panel-body > div > h4.badged-block, body#artwork .aw-state-myvolumio-payment-fail .box > .panel > .panel-body > div > h4.badged-block {
  margin: 6px 0 20px;
  font-weight: 600;
  color: var(--ink-2); /* inline text: "Current plan:" keeps its colon */
}
body#artwork .aw-state-myvolumio-subscribe .box > .panel > .panel-body > div > h4.badged-block .badge, body#artwork .aw-state-myvolumio-change-subscription .box > .panel > .panel-body > div > h4.badged-block .badge, body#artwork .aw-state-myvolumio-cancel-subscription .box > .panel > .panel-body > div > h4.badged-block .badge,
body#artwork .aw-state-myvolumio-payment-success .box > .panel > .panel-body > div > h4.badged-block .badge, body#artwork .aw-state-myvolumio-payment-fail .box > .panel > .panel-body > div > h4.badged-block .badge {
  margin-left: 8px;
  vertical-align: 1px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--fill-10);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
}
body#artwork .aw-state-myvolumio-subscribe .box > .panel > .panel-body br, body#artwork .aw-state-myvolumio-change-subscription .box > .panel > .panel-body br, body#artwork .aw-state-myvolumio-cancel-subscription .box > .panel > .panel-body br,
body#artwork .aw-state-myvolumio-payment-success .box > .panel > .panel-body br, body#artwork .aw-state-myvolumio-payment-fail .box > .panel > .panel-body br {
  display: none;
}
body#artwork .aw-state-myvolumio-subscribe .box, body#artwork .aw-state-myvolumio-change-subscription .box, body#artwork .aw-state-myvolumio-cancel-subscription .box,
body#artwork .aw-state-myvolumio-payment-success .box, body#artwork .aw-state-myvolumio-payment-fail .box {
  /* stand-alone actions (retry, log in, retry payment) */
}
body#artwork .aw-state-myvolumio-subscribe .box > .panel > .panel-body > .btn, body#artwork .aw-state-myvolumio-subscribe .box > .panel > .panel-body > div > .btn, body#artwork .aw-state-myvolumio-change-subscription .box > .panel > .panel-body > .btn, body#artwork .aw-state-myvolumio-change-subscription .box > .panel > .panel-body > div > .btn, body#artwork .aw-state-myvolumio-cancel-subscription .box > .panel > .panel-body > .btn, body#artwork .aw-state-myvolumio-cancel-subscription .box > .panel > .panel-body > div > .btn,
body#artwork .aw-state-myvolumio-payment-success .box > .panel > .panel-body > .btn,
body#artwork .aw-state-myvolumio-payment-success .box > .panel > .panel-body > div > .btn, body#artwork .aw-state-myvolumio-payment-fail .box > .panel > .panel-body > .btn, body#artwork .aw-state-myvolumio-payment-fail .box > .panel > .panel-body > div > .btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 24px;
  margin: 12px 0 0;
  border-radius: 23px;
  border: 0;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 15px;
  font-weight: 700;
  box-shadow: none;
  text-shadow: none;
}
body#artwork .aw-state-myvolumio-subscribe .box > .panel > .panel-body > .btn:hover, body#artwork .aw-state-myvolumio-subscribe .box > .panel > .panel-body > div > .btn:hover, body#artwork .aw-state-myvolumio-change-subscription .box > .panel > .panel-body > .btn:hover, body#artwork .aw-state-myvolumio-change-subscription .box > .panel > .panel-body > div > .btn:hover, body#artwork .aw-state-myvolumio-cancel-subscription .box > .panel > .panel-body > .btn:hover, body#artwork .aw-state-myvolumio-cancel-subscription .box > .panel > .panel-body > div > .btn:hover,
body#artwork .aw-state-myvolumio-payment-success .box > .panel > .panel-body > .btn:hover,
body#artwork .aw-state-myvolumio-payment-success .box > .panel > .panel-body > div > .btn:hover, body#artwork .aw-state-myvolumio-payment-fail .box > .panel > .panel-body > .btn:hover, body#artwork .aw-state-myvolumio-payment-fail .box > .panel > .panel-body > div > .btn:hover {
  background: var(--ink-1);
  color: var(--on-ink);
}
body#artwork .aw-state-myvolumio-subscribe .box my-volumio-plan-card, body#artwork .aw-state-myvolumio-change-subscription .box my-volumio-plan-card, body#artwork .aw-state-myvolumio-cancel-subscription .box my-volumio-plan-card,
body#artwork .aw-state-myvolumio-payment-success .box my-volumio-plan-card, body#artwork .aw-state-myvolumio-payment-fail .box my-volumio-plan-card {
  margin-top: 4px;
}
body#artwork .aw-state-myvolumio-subscribe .box, body#artwork .aw-state-myvolumio-change-subscription .box, body#artwork .aw-state-myvolumio-cancel-subscription .box,
body#artwork .aw-state-myvolumio-payment-success .box, body#artwork .aw-state-myvolumio-payment-fail .box {
  /* payment success: the current plan card, same surface as the plan cards */
}
body#artwork .aw-state-myvolumio-subscribe .box .myvolumio-current-plan-card, body#artwork .aw-state-myvolumio-change-subscription .box .myvolumio-current-plan-card, body#artwork .aw-state-myvolumio-cancel-subscription .box .myvolumio-current-plan-card,
body#artwork .aw-state-myvolumio-payment-success .box .myvolumio-current-plan-card, body#artwork .aw-state-myvolumio-payment-fail .box .myvolumio-current-plan-card {
  margin-top: 10px;
}
body#artwork .aw-state-myvolumio-subscribe .box .myvolumio-current-plan-card .plans-table, body#artwork .aw-state-myvolumio-change-subscription .box .myvolumio-current-plan-card .plans-table, body#artwork .aw-state-myvolumio-cancel-subscription .box .myvolumio-current-plan-card .plans-table,
body#artwork .aw-state-myvolumio-payment-success .box .myvolumio-current-plan-card .plans-table, body#artwork .aw-state-myvolumio-payment-fail .box .myvolumio-current-plan-card .plans-table {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}
body#artwork .aw-state-myvolumio-subscribe .box .myvolumio-current-plan-card .panel.panel-primary, body#artwork .aw-state-myvolumio-change-subscription .box .myvolumio-current-plan-card .panel.panel-primary, body#artwork .aw-state-myvolumio-cancel-subscription .box .myvolumio-current-plan-card .panel.panel-primary,
body#artwork .aw-state-myvolumio-payment-success .box .myvolumio-current-plan-card .panel.panel-primary, body#artwork .aw-state-myvolumio-payment-fail .box .myvolumio-current-plan-card .panel.panel-primary {
  margin: 0;
  border-radius: 16px;
  background: var(--fill-06) !important;
  border: 1px solid var(--fill-10) !important;
  box-shadow: none;
  overflow: hidden;
  text-align: left;
}
body#artwork .aw-state-myvolumio-subscribe .box .myvolumio-current-plan-card .panel-heading, body#artwork .aw-state-myvolumio-change-subscription .box .myvolumio-current-plan-card .panel-heading, body#artwork .aw-state-myvolumio-cancel-subscription .box .myvolumio-current-plan-card .panel-heading,
body#artwork .aw-state-myvolumio-payment-success .box .myvolumio-current-plan-card .panel-heading, body#artwork .aw-state-myvolumio-payment-fail .box .myvolumio-current-plan-card .panel-heading {
  padding: 22px 22px 0;
  background: transparent;
  border: 0;
}
body#artwork .aw-state-myvolumio-subscribe .box .myvolumio-current-plan-card .panel-heading .panel-title, body#artwork .aw-state-myvolumio-change-subscription .box .myvolumio-current-plan-card .panel-heading .panel-title, body#artwork .aw-state-myvolumio-cancel-subscription .box .myvolumio-current-plan-card .panel-heading .panel-title,
body#artwork .aw-state-myvolumio-payment-success .box .myvolumio-current-plan-card .panel-heading .panel-title, body#artwork .aw-state-myvolumio-payment-fail .box .myvolumio-current-plan-card .panel-heading .panel-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-35);
}
body#artwork .aw-state-myvolumio-subscribe .box .myvolumio-current-plan-card .panel-body, body#artwork .aw-state-myvolumio-change-subscription .box .myvolumio-current-plan-card .panel-body, body#artwork .aw-state-myvolumio-cancel-subscription .box .myvolumio-current-plan-card .panel-body,
body#artwork .aw-state-myvolumio-payment-success .box .myvolumio-current-plan-card .panel-body, body#artwork .aw-state-myvolumio-payment-fail .box .myvolumio-current-plan-card .panel-body {
  padding: 10px 22px 0;
  background: transparent;
  text-align: left;
}
body#artwork .aw-state-myvolumio-subscribe .box .myvolumio-current-plan-card .the-price, body#artwork .aw-state-myvolumio-change-subscription .box .myvolumio-current-plan-card .the-price, body#artwork .aw-state-myvolumio-cancel-subscription .box .myvolumio-current-plan-card .the-price,
body#artwork .aw-state-myvolumio-payment-success .box .myvolumio-current-plan-card .the-price, body#artwork .aw-state-myvolumio-payment-fail .box .myvolumio-current-plan-card .the-price {
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
}
body#artwork .aw-state-myvolumio-subscribe .box .myvolumio-current-plan-card .the-price h1, body#artwork .aw-state-myvolumio-change-subscription .box .myvolumio-current-plan-card .the-price h1, body#artwork .aw-state-myvolumio-cancel-subscription .box .myvolumio-current-plan-card .the-price h1,
body#artwork .aw-state-myvolumio-payment-success .box .myvolumio-current-plan-card .the-price h1, body#artwork .aw-state-myvolumio-payment-fail .box .myvolumio-current-plan-card .the-price h1 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
}
body#artwork .aw-state-myvolumio-subscribe .box .myvolumio-current-plan-card .the-price small, body#artwork .aw-state-myvolumio-change-subscription .box .myvolumio-current-plan-card .the-price small, body#artwork .aw-state-myvolumio-cancel-subscription .box .myvolumio-current-plan-card .the-price small,
body#artwork .aw-state-myvolumio-payment-success .box .myvolumio-current-plan-card .the-price small, body#artwork .aw-state-myvolumio-payment-fail .box .myvolumio-current-plan-card .the-price small {
  font-size: 13px;
  color: var(--ink-dim);
}
body#artwork .aw-state-myvolumio-subscribe .box .myvolumio-current-plan-card .panel-footer, body#artwork .aw-state-myvolumio-change-subscription .box .myvolumio-current-plan-card .panel-footer, body#artwork .aw-state-myvolumio-cancel-subscription .box .myvolumio-current-plan-card .panel-footer,
body#artwork .aw-state-myvolumio-payment-success .box .myvolumio-current-plan-card .panel-footer, body#artwork .aw-state-myvolumio-payment-fail .box .myvolumio-current-plan-card .panel-footer {
  padding: 18px 22px 22px;
  background: transparent;
  border: 0;
}
body#artwork .aw-state-myvolumio-subscribe .box .myvolumio-current-plan-card .btn, body#artwork .aw-state-myvolumio-change-subscription .box .myvolumio-current-plan-card .btn, body#artwork .aw-state-myvolumio-cancel-subscription .box .myvolumio-current-plan-card .btn,
body#artwork .aw-state-myvolumio-payment-success .box .myvolumio-current-plan-card .btn, body#artwork .aw-state-myvolumio-payment-fail .box .myvolumio-current-plan-card .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 44px;
  padding: 0 18px;
  margin: 0;
  border-radius: 22px;
  border: 0;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 14px;
  font-weight: 700;
  box-shadow: none;
}
body#artwork .aw-state-myvolumio-subscribe .box .myvolumio-current-plan-card .btn .btn-label, body#artwork .aw-state-myvolumio-change-subscription .box .myvolumio-current-plan-card .btn .btn-label, body#artwork .aw-state-myvolumio-cancel-subscription .box .myvolumio-current-plan-card .btn .btn-label,
body#artwork .aw-state-myvolumio-payment-success .box .myvolumio-current-plan-card .btn .btn-label, body#artwork .aw-state-myvolumio-payment-fail .box .myvolumio-current-plan-card .btn .btn-label {
  position: static;
  padding: 0;
  background: transparent;
}
body#artwork .aw-state-myvolumio-subscribe .box .myvolumio-current-plan-card .btn .glyphicon, body#artwork .aw-state-myvolumio-change-subscription .box .myvolumio-current-plan-card .btn .glyphicon, body#artwork .aw-state-myvolumio-cancel-subscription .box .myvolumio-current-plan-card .btn .glyphicon,
body#artwork .aw-state-myvolumio-payment-success .box .myvolumio-current-plan-card .btn .glyphicon, body#artwork .aw-state-myvolumio-payment-fail .box .myvolumio-current-plan-card .btn .glyphicon {
  top: 0;
  font-size: 12px;
}
body#artwork .aw-state-myvolumio-subscribe .box .myvolumio-current-plan-card .btn:hover, body#artwork .aw-state-myvolumio-change-subscription .box .myvolumio-current-plan-card .btn:hover, body#artwork .aw-state-myvolumio-cancel-subscription .box .myvolumio-current-plan-card .btn:hover,
body#artwork .aw-state-myvolumio-payment-success .box .myvolumio-current-plan-card .btn:hover, body#artwork .aw-state-myvolumio-payment-fail .box .myvolumio-current-plan-card .btn:hover {
  background: var(--ink-1);
  color: var(--on-ink);
}

/* the Paddle button inside a plan card: coupon disclosure and field in the theme's idiom */
body#artwork my-volumio-plan-card paddle-pay-button {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body#artwork my-volumio-plan-card paddle-pay-button .collapse__panel {
  margin: 0;
}
body#artwork my-volumio-plan-card paddle-pay-button .collapse__panel__header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
}
body#artwork my-volumio-plan-card paddle-pay-button .collapse__panel__header img {
  width: 12px;
  margin: 0;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}
body#artwork my-volumio-plan-card paddle-pay-button .collapse__panel__header:hover {
  color: var(--ink);
}
body#artwork my-volumio-plan-card paddle-pay-button .collapse__panel__header {
  border-radius: 8px;
}
body#artwork my-volumio-plan-card paddle-pay-button .collapse__panel__header:focus {
  outline: none;
}
body#artwork my-volumio-plan-card paddle-pay-button .collapse__panel__header:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 3px;
}
body#artwork my-volumio-plan-card paddle-pay-button .collapse__panel__header::after {
  display: none !important;
}
body#artwork my-volumio-plan-card paddle-pay-button .collapse__panel__header { /* core .focus__helper: a dotted frame on every focus, mouse included */ }
body#artwork my-volumio-plan-card paddle-pay-button .collapse__panel__content .form-group {
  margin: 10px 0 0;
}
body#artwork my-volumio-plan-card paddle-pay-button input.form-control {
  height: 44px;
  border-radius: 11px !important;
  background: var(--fill-08);
  border: 1px solid var(--fill-13);
  color: var(--ink);
  font-size: 15px;
  box-shadow: none;
  padding: 0 14px;
  width: 100%;
}
body#artwork my-volumio-plan-card paddle-pay-button input.form-control:focus {
  border-color: var(--fill-30);
  box-shadow: none;
  outline: none;
}
body#artwork my-volumio-plan-card paddle-pay-button input.form-control::placeholder {
  color: var(--ink-dim);
}

/* the price's heading keeps the frame's 1em line (React's own body#artwork h1 rule would otherwise outrank the frame's .the-price h1) */
body#artwork [class*=aw-state-myvolumio-] .the-price h1 {
  line-height: 1em;
}

/* the screens hand their top padding to the head (artwork-page-head.scss) */
body#artwork .aw-pe {
  padding-top: 0;
  --head-pad: clamp(24px, 4.4vh, 40px);
}

/* settings rows: label above the control when the row is narrow (artwork-fluid.scss) */
@media (max-width: 640px) {
  body#artwork .aw-pe__row {
    grid-template-columns: 1fr !important;
    row-gap: 10px !important;
  }
  body#artwork .aw-pe__grid, body#artwork .my-profile {
    grid-template-columns: 1fr !important;
  }
}
/* --- the phone (artwork-fluid.scss) --- */
body#artwork .myvolumio-card-container.visible-xs {
  display: none !important;
}

@media (max-width: 700px) and (orientation: portrait) {
  html body#artwork .aw-state-myvolumio-profile .box, html body#artwork .aw-state-myvolumio-access .box, html body#artwork .aw-state-myvolumio-login .box, html body#artwork .aw-state-myvolumio-signup .box, html body#artwork .aw-state-myvolumio-recover-password .box, html body#artwork .aw-state-myvolumio-plans .box, html body#artwork .aw-state-myvolumio-subscribe .box, html body#artwork .aw-state-myvolumio-change-subscription .box, html body#artwork .aw-state-myvolumio-cancel-subscription .box, html body#artwork .aw-state-myvolumio-payment-success .box, html body#artwork .aw-state-myvolumio-payment-fail .box {
    padding: calc(var(--phone-top) + 56px) 20px calc(var(--mini-h) + 20px);
  }
  body#artwork .aw-state-myvolumio-login .box .omb_socialButtons, body#artwork .aw-state-myvolumio-signup .box .omb_socialButtons {
    flex-wrap: wrap;
  }
  body#artwork .aw-state-myvolumio-profile .box #authLoginPlugin .panel-heading .btn-danger {
    top: calc(var(--phone-top) + 56px);
    right: 20px;
  }
  body#artwork .aw-state-myvolumio-profile .box .my-profile {
    grid-template-columns: 1fr !important;
    gap: 20px;
    margin-top: 20px;
  }
  body#artwork .aw-state-myvolumio-profile .box .my-profile > :last-child {
    grid-column: 1 !important;
    grid-row: auto !important;
  } /* desktop pins it to column 2 */
  body#artwork .aw-state-myvolumio-profile .box .my-profile > div > .row {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  body#artwork .aw-state-myvolumio-profile .box .my-profile > div > .row .plans-table, body#artwork .aw-state-myvolumio-profile .box .my-profile > div > .row .user-data {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  body#artwork .aw-state-myvolumio-profile .box .avatar-image-box {
    width: 120px;
    height: 120px;
  }
  body#artwork .aw-state-myvolumio-profile .box .avatar-image-box .avatar-letter {
    font-size: 64px;
  }
  body#artwork .aw-state-myvolumio-profile .box .myvolumio-current-plan-card, body#artwork .aw-state-myvolumio-profile .box .plans-table, body#artwork .aw-state-myvolumio-profile .box .plans-table .panel {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100%;
  }
  body#artwork .aw-state-myvolumio-profile .box .myvolumio-current-plan-card .panel.panel-primary .panel-body {
    font-size: 32px;
  }
  body#artwork .aw-state-myvolumio-profile .box .user-data .user-title {
    font-size: 30px;
  }
  body#artwork .aw-state-myvolumio-profile .box .user-data .btn {
    float: none;
    display: inline-flex;
    margin-top: 14px;
  }
  body#artwork .aw-pe {
    padding: var(--phone-top) 20px calc(var(--mini-h) + 20px);
  }
  body#artwork .aw-pe__title {
    margin-top: 18px;
  }
  body#artwork .aw-pe__title {
    font-size: 24px;
    letter-spacing: -0.02em;
  }
  body#artwork .aw-pe__grid {
    margin-top: 20px;
    gap: 20px;
  }
  body#artwork .aw-pe__avatar .avatar-image-box {
    width: 120px;
    height: 120px;
  }
  body#artwork .aw-pe__avatar .avatar-image-box .avatar-letter {
    font-size: 64px;
  }
  body#artwork .aw-pe__avatar .aw-btn {
    width: auto;
    align-self: flex-start;
  }
}
body#artwork .aw-menu-btn--float {
  display: none;
}

@media (max-width: 700px) and (orientation: portrait) {
  body#artwork .aw-menu-btn--float {
    top: var(--phone-top);
  } /* the later rule below wins, as in the frame sheet */
  body#artwork .aw-menu-btn--float {
    display: grid;
    place-items: center;
    position: fixed;
    top: calc(14px + var(--sa-t));
    left: 20px;
    z-index: 5;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--ink-2);
    cursor: pointer;
    height: 44px;
    width: 32px;
  }
  body#artwork .aw-menu-btn--float .material-symbols-rounded {
    font-size: 24px;
  }
}
/* the phone head: measured, the page-head rule outranks the fluid padding there (order) */
@media (max-width: 700px) and (orientation: portrait) {
  body#artwork .aw-pe {
    --head-pad: var(--phone-top);
  }
  body#artwork .aw-pe {
    padding-top: 0;
  }
}/* Floating queue panel (mockup): 560px sheet on the right, 20px from the edges and above the mini player. */
@keyframes aw-queue-eq {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.35);
  }
}
body#artwork .aw-queue {
  position: fixed;
  right: 20px;
  top: 20px;
  bottom: calc(var(--mini-h) + 20px);
  width: 560px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: var(--panel-fill);
  -webkit-backdrop-filter: blur(48px) saturate(1.15);
  backdrop-filter: blur(48px) saturate(1.15);
  border: 1px solid var(--fill-10);
  box-shadow: -46px 0 90px -30px var(--shadow-deep);
  color: var(--ink-1);
  opacity: 0;
  transform: translateX(40px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.32s;
}
body#artwork .aw-queue.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}
@media (max-width: 900px) {
  body#artwork .aw-queue {
    left: 12px;
    right: 12px;
    width: auto;
  }
}
body#artwork .aw-queue__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 24px 0;
}
body#artwork .aw-queue__titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body#artwork .aw-queue__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: normal;
  color: var(--ink);
}
body#artwork .aw-queue__sub {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  line-height: normal;
}
body#artwork .aw-queue__close {
  margin-left: auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--fill-12);
  color: var(--ink-3);
  cursor: pointer;
}
body#artwork .aw-queue__close .material-symbols-rounded {
  font-size: 21px;
}
body#artwork .aw-queue__close:hover {
  background: var(--fill-08);
  color: var(--ink);
}
body#artwork .aw-queue__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 24px 16px;
}
body#artwork .aw-queue__chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 13px;
  border-radius: 18px;
  cursor: pointer;
  background: var(--fill-06);
  border: 1px solid var(--fill-11);
  color: var(--ink-2);
}
body#artwork .aw-queue__chip .material-symbols-rounded {
  font-size: 18px;
  color: var(--ink-3);
}
body#artwork .aw-queue__chip > span:last-child {
  font-size: 13px;
  font-weight: 500;
}
body#artwork .aw-queue__chip:hover {
  background: var(--fill-10);
}
body#artwork .aw-queue__chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}
body#artwork .aw-queue__chip.active .material-symbols-rounded {
  color: var(--on-ink);
}
body#artwork .aw-queue__chip:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}
body#artwork .aw-queue__chip--danger {
  border-color: var(--err-line);
  background: var(--err-wash);
  color: var(--err-soft);
}
body#artwork .aw-queue__chip--danger .material-symbols-rounded {
  color: var(--err-soft);
}
body#artwork .aw-queue__chip--danger:hover {
  background: rgba(255, 107, 107, 0.18);
}
body#artwork .aw-queue__sechead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  line-height: normal;
}
body#artwork .aw-queue__sechead > .mono {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
}
body#artwork .aw-queue__hint {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-dim);
}
body#artwork .aw-queue__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px 0;
}
body#artwork .aw-queue__list {
  display: flex;
  flex-direction: column;
}
body#artwork .aw-queue__row {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 66px;
  flex: none;
  padding: 0 16px;
  cursor: pointer;
  position: relative;
  border-bottom: 1px solid var(--fill-05);
  transition: transform 0.18s ease;
}
body#artwork .aw-queue__row:hover {
  background: var(--fill-04);
}
body#artwork .aw-queue__row.is-current {
  border-radius: 11px;
  background: var(--fill-08);
  border-bottom-color: transparent;
}
body#artwork .aw-queue__row.is-dragging {
  transition: none;
  z-index: 2;
  border-radius: 11px;
  background: var(--fill-10);
  box-shadow: 0 18px 40px -18px var(--shadow-strong);
  border-bottom-color: transparent;
}
body#artwork .aw-queue__list.is-reordering {
  user-select: none;
}
body#artwork .aw-queue .aw-queue__list.is-reordering .aw-queue__row {
  pointer-events: none;
}
body#artwork .aw-queue__drag {
  font-size: 20px;
  color: var(--ink-75);
  cursor: grab;
  flex: none;
  touch-action: none;
}
body#artwork .aw-queue__drag:active {
  cursor: grabbing;
}
body#artwork .aw-queue__slot {
  width: 26px;
  flex: none;
  display: grid;
  place-items: center;
}
body#artwork .aw-queue__num {
  font-size: 13px;
  color: var(--ink-faint);
}
body#artwork .aw-queue__play {
  display: none;
  font-size: 22px;
  color: var(--ink);
}
body#artwork .aw-queue .aw-queue__row:hover .aw-queue__num {
  display: none;
}
body#artwork .aw-queue .aw-queue__row:hover .aw-queue__play {
  display: block;
}
body#artwork .aw-queue__eq {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
body#artwork .aw-queue__eq i {
  display: block;
  width: 2px;
  background: var(--ink);
  transform-origin: bottom;
  animation: aw-queue-eq 1.1s ease-in-out infinite;
}
body#artwork .aw-queue__eq i:nth-child(1) {
  height: 11px;
}
body#artwork .aw-queue__eq i:nth-child(2) {
  height: 6px;
  animation-delay: 0.18s;
}
body#artwork .aw-queue__eq i:nth-child(3) {
  height: 13px;
  animation-delay: 0.36s;
}
body#artwork .aw-queue .aw-queue__row.is-paused .aw-queue__eq i {
  animation-play-state: paused;
}
body#artwork .aw-queue__cover {
  width: 44px;
  height: 44px;
  border-radius: 5px;
  object-fit: cover;
  flex: none;
  background: var(--fill-06);
}
body#artwork .aw-queue__cover--icon {
  display: grid;
  place-items: center;
  color: var(--ink-dim);
}
body#artwork .aw-queue__cover--icon .fa {
  font-size: 18px;
}
body#artwork .aw-queue__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: normal;
}
body#artwork .aw-queue__name {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork .aw-queue__meta {
  font-size: 13px;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork .aw-queue .aw-queue__row.is-current .aw-queue__name {
  font-weight: 600;
  color: var(--ink);
}
body#artwork .aw-queue .aw-queue__row.is-current .aw-queue__meta, body#artwork .aw-queue .aw-queue__row.is-current .aw-queue__time {
  color: var(--ink-55);
}
body#artwork .aw-queue__time {
  font-size: 13px;
  color: var(--ink-dim);
  flex: none;
}
body#artwork .aw-queue__remove {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
}
body#artwork .aw-queue__remove .material-symbols-rounded {
  font-size: 20px;
}
body#artwork .aw-queue__remove:hover {
  color: var(--ink);
}
body#artwork .aw-queue__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px 22px;
  border-top: 1px solid var(--fill-09);
  line-height: normal;
}
body#artwork .aw-queue__foot > .material-symbols-rounded {
  font-size: 20px;
  color: var(--ink-muted);
}
body#artwork .aw-queue__note {
  font-size: 13px;
  color: var(--ink-3);
}
body#artwork .aw-queue__ends {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-muted);
}

/* on Now Playing the mini player is away: the sheet reaches 20px from the bottom */
body#artwork .aw-queue.on-playback {
  bottom: 20px;
}

@media (prefers-reduced-motion: reduce) {
  body#artwork .aw-queue {
    transition: none;
  }
}
@media (max-width: 600px) {
  body#artwork .aw-queue .aw-queue__hint {
    display: none;
  }
  body#artwork .aw-queue__row {
    gap: 10px;
    padding: 0 10px;
  }
}
/* shared by library and queue rows: the playing row while this browser loads the stream */
body#artwork .aw-loading-spin {
  display: block;
  color: var(--ink);
}/* The queue page (/queue): the frame's list of what is queued, as the theme dresses it.
   The frame's own rules that survive under the theme are kept: the cover's 10px side margins,
   the rollover's 45px box with its 10/15 padding, the title's -5px, the remove button's
   default-button box. */
body#artwork #playQueue {
  background: transparent;
  padding: 8px 0;
}

body#artwork #playQueue .trackInfoBarButtons {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 14px;
  text-align: right;
  background: var(--bar-veil);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--hairline-soft);
}
body#artwork #playQueue .trackInfoBarButtons button.btn-link {
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border-radius: var(--r-control);
  border: 1px solid transparent;
  background: transparent;
  display: inline-grid;
  place-items: center;
  color: var(--ink-2);
  font-size: 16px;
  cursor: pointer;
}
body#artwork #playQueue .trackInfoBarButtons button.btn-link .fa {
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
  font-style: normal;
  position: relative;
}
body#artwork #playQueue .trackInfoBarButtons button.btn-link .fa .material-symbols-rounded {
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
}
body#artwork #playQueue .trackInfoBarButtons button.btn-link.active {
  color: #54c688;
}
body#artwork #playQueue .trackInfoBarButtons button.btn-link { /* the frame's link hover colour marks the toggles that are on */ }
body#artwork #playQueue .trackInfoBarButtons button.btn-link:hover {
  background: var(--fill-08);
  color: var(--ink-1);
}

body#artwork #playQueueList {
  background: transparent;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  position: relative;
  height: auto;
  padding-top: 8px;
}

body#artwork #playQueueList ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body#artwork #playQueueList li {
  display: flex;
  align-items: center;
  gap: 14px;
  scroll-margin-top: 56px;
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--r-panel);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 0.15s;
}
body#artwork #playQueueList li:hover {
  background: var(--fill-06);
}

body#artwork #playQueueList .image {
  position: relative;
  width: 48px;
  height: 48px;
  flex: none;
  display: block;
}
body#artwork #playQueueList .image img {
  width: 48px;
  height: 48px;
  margin: 0 10px;
  object-fit: cover;
  border-radius: 7px;
  display: block;
}

body#artwork #playQueueList .rollover {
  position: absolute;
  top: 0;
  left: 0;
  width: 45px;
  height: 45px;
  padding: 10px 0 0 15px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  background: rgba(6, 9, 12, 0.45);
  opacity: 0;
  border-radius: 7px;
  transition: opacity 0.2s, transform 0.3s;
  color: var(--ink-1);
  font-size: 20px;
  cursor: pointer;
}
body#artwork #playQueueList .rollover .material-symbols-rounded {
  font-size: 20px;
  line-height: 1;
  grid-area: 1/1;
}
body#artwork #playQueueList .rollover .rollover__sort {
  display: none;
}

body#artwork #playQueueList li:hover .rollover {
  opacity: 1;
}

body#artwork #playQueueList li.sorting .rollover {
  transform: rotate(90deg);
}
body#artwork #playQueueList li.sorting .rollover .rollover__play {
  display: none;
}
body#artwork #playQueueList li.sorting .rollover .rollover__sort {
  display: block;
}

body#artwork #playQueueList .titleArtist {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

body#artwork #playQueueList .title {
  margin-top: -5px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body#artwork #playQueueList .artist-album {
  font-size: 13px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body#artwork #playQueueList .duration {
  flex: none;
  margin-right: 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

body#artwork #playQueueList .commandButtons {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 5px;
  font-size: 22px;
}
body#artwork #playQueueList .commandButtons button.btn-link {
  display: block;
  padding: 1px 6px;
  margin: 0;
  border: 2px outset transparent;
  border-radius: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1.42857;
  color: #fff;
  cursor: pointer;
}
body#artwork #playQueueList .commandButtons {
  /* the FontAwesome circle-x glyph is .857em wide and sits a pixel higher than the symbol */
}
body#artwork #playQueueList .commandButtons .fa {
  display: inline-block;
  width: 0.857em;
  font-size: 22px;
  line-height: 22px;
  height: 22px;
  color: var(--ink-muted);
  font-style: normal;
  position: relative;
  top: -1px;
}
body#artwork #playQueueList .commandButtons .fa .material-symbols-rounded {
  display: inline-block;
  vertical-align: top;
  font-size: 22px;
  line-height: 22px;
  height: 22px;
  width: 22px;
  margin-left: -1.57px;
}

body#artwork #playQueueList li.isPlaying {
  background: var(--fill-10);
}
body#artwork #playQueueList li.isPlaying .title {
  color: var(--ink);
  font-weight: 700;
}
body#artwork #playQueueList li.isPlaying .rollover {
  opacity: 1;
  background: transparent;
  color: #54c688;
}

@media (max-width: 767px) {
  body#artwork #playQueue .trackInfoBarButtons button.btn-link {
    font-size: 24px;
  }
}
/* The first-run wizard (/wizard): the frame's page, dressed by the theme's globals only —
   the pills, the glass inputs, white text on a dark 60% card with the theme's green hairline.
   Every box below is the frame's (its grid row, its 24 columns, its headings). */
#wizardScrim {
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 4;
  display: none;
}

body#artwork #wizard {
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  color: #fff;
  font-size: 14px;
  line-height: 1.42857143;
}
body#artwork #wizard h1, body#artwork #wizard h2, body#artwork #wizard h3, body#artwork #wizard h4, body#artwork #wizard h5, body#artwork #wizard h6 {
  font-family: var(--font-ui);
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}
body#artwork #wizard h1, body#artwork #wizard h2, body#artwork #wizard h3 {
  margin: 20px 0 10px;
}
body#artwork #wizard h4, body#artwork #wizard h5, body#artwork #wizard h6 {
  margin: 10px 0;
}
body#artwork #wizard h1 {
  font-size: 36px;
}
body#artwork #wizard h2 {
  font-size: 30px;
}
body#artwork #wizard h3 {
  font-size: 20px;
}
body#artwork #wizard h4 {
  font-size: 18px;
}
body#artwork #wizard h5 {
  font-size: 14px;
}
body#artwork #wizard h6 {
  font-size: 12px;
}
body#artwork #wizard p {
  margin: 0 0 10px;
}
body#artwork #wizard .text-center {
  text-align: center;
}
body#artwork #wizard .text-right {
  text-align: right;
}
body#artwork #wizard .row {
  margin: 8px;
}
body#artwork #wizard .row::before, body#artwork #wizard .row::after {
  content: " ";
  display: table;
}
body#artwork #wizard .row::after {
  clear: both;
}
body#artwork #wizard .row h1 {
  text-align: center;
  margin-bottom: 25px;
}
body#artwork #wizard #wizard-container {
  position: relative;
  float: left;
  box-sizing: border-box;
  min-height: 1px;
  width: 100%;
  padding: 30px 25px 65px;
  min-height: 450px;
  border: 1px solid #54c688;
  background-color: rgba(0, 0, 0, 0.6);
}
body#artwork #wizard {
  /* the pills (the frame's buttons under the theme's globals) */
}
body#artwork #wizard .btn {
  display: inline-block;
  margin: 0;
  padding: 6px 12px;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  color: var(--ink-1);
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  box-shadow: 0 0 1px transparent;
  text-shadow: none;
}
body#artwork #wizard .btn:hover {
  background-color: rgba(255, 255, 255, 0.16);
  color: var(--ink);
}
body#artwork #wizard .btn[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}
body#artwork #wizard .btn.btn-link {
  background: transparent;
  border-color: transparent;
  color: #fff;
  border-radius: 4px;
  box-shadow: none;
}
body#artwork #wizard .btn.btn-link:hover {
  color: #54c688;
  background: transparent;
}
body#artwork #wizard #wizard-navigator {
  text-align: center;
}
body#artwork #wizard #wizard-navigator button {
  margin-right: 10px;
  cursor: pointer;
}
body#artwork #wizard #wizard-navigator button.selected {
  background-color: #333 !important;
  border-bottom: 1px solid #54c688;
  border-radius: 0;
  transition: all 0.3s;
}
body#artwork #wizard {
  /* the frame's 24-column grid, on the two spans the views use */
}
body#artwork #wizard .wizard-panel {
  position: relative;
  min-height: 1px;
  padding: 0 15px;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  body#artwork #wizard #wizard-container {
    width: 75%;
    margin-left: 12.5%;
  }
  body#artwork #wizard .wizard-panel {
    float: left;
    width: 100%;
  }
  body#artwork #wizard .wizard-panel.col-sm-10 {
    width: 41.66666667%;
  }
  body#artwork #wizard .wizard-panel.col-sm-offset-7 {
    margin-left: 29.16666667%;
  }
  body#artwork #wizard .wizard-panel.col-sm-12 {
    width: 50%;
  }
  body#artwork #wizard .wizard-panel.col-sm-offset-5 {
    margin-left: 20.83333333%;
  }
}
@media (min-width: 992px) {
  body#artwork #wizard .col-md-8 {
    float: left;
    width: 33.33333333%;
    position: relative;
    min-height: 1px;
    padding: 0 15px;
    box-sizing: border-box;
  }
}
body#artwork #wizard #logo-wizard {
  left: 50%;
  text-align: center;
  padding: 30px;
}
body#artwork #wizard #logo-wizard img {
  max-width: 100%;
  vertical-align: middle;
}
body#artwork #wizard {
  /* the frame's select: a pill of 34px with the caret at the right */
}
body#artwork #wizard .ui-select-container {
  position: relative;
  display: block;
  height: 34px;
  border-radius: 50px;
  border: 0;
  background: transparent;
  color: #54c688;
  font-size: 14px;
}
body#artwork #wizard .ui-select-match {
  display: block;
  height: 34px;
}
body#artwork #wizard .ui-select-toggle {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 34px;
  box-sizing: border-box;
  padding: 6px 12px;
  text-align: left;
  font-size: 16px;
  line-height: 1.42857143;
  color: var(--ink-1);
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  box-shadow: none;
}
body#artwork #wizard .ui-select-toggle .ui-select-match-text {
  display: block;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 20px);
}
body#artwork #wizard .ui-select-toggle .ui-select-placeholder {
  color: #777;
}
body#artwork #wizard .ui-select-toggle .caret {
  display: block;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -2px;
  width: 0;
  height: 10px;
  box-sizing: border-box;
  margin-left: 0;
  vertical-align: middle;
  border-top: 4px dashed;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
body#artwork #wizard .ui-select-container .ui-select-search {
  display: none;
}
body#artwork #wizard { /* the frame's search box, never shown here */ }
body#artwork #wizard .wz-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
body#artwork #wizard {
  /* the frame's text inputs (the theme's glass fill, the frame's 34px) */
}
body#artwork #wizard input.form-control {
  display: block;
  width: 100%;
  height: 34px;
  box-sizing: border-box;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: var(--ink-1);
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  box-shadow: none;
  outline: 0;
}
body#artwork #wizard input.form-control:focus {
  border-color: var(--fill-30);
}
body#artwork #wizard #custom-amount {
  display: inline-block;
  width: 55px;
  vertical-align: baseline;
}
body#artwork #wizard form#donate-button {
  display: inline-block;
}
body#artwork #wizard .donate-button {
  font-family: "Lato", sans-serif;
}
body#artwork #wizard .donate-button .wz-paypal {
  display: inline-block;
  width: 0.9em;
  overflow: visible;
  margin: 0;
  font-size: 16px;
  vertical-align: -3px;
}
body#artwork #wizard { /* the paypal glyph's .9em advance */ }
body#artwork #wizard .congratulations-message {
  text-align: center;
  margin: 20px 0 30px;
  font-weight: bolder;
  color: #54c688;
}
body#artwork #wizard .done-message {
  margin-top: 20px;
  margin-bottom: 20px;
}
body#artwork #wizard .h-wizard {
  margin-top: 30px;
  margin-left: 20px;
}
body#artwork #wizard #status-bar {
  position: absolute;
  bottom: 20px;
  left: 40px;
}
body#artwork #wizard #button-bar {
  position: absolute;
  bottom: 10px;
  right: 25px;
}
body#artwork #wizard {
  /* the frame's switch as it stands outside the settings pages */
}
body#artwork #wizard .bootstrap-switch {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  box-sizing: content-box;
  width: 98px;
  height: 32px;
  line-height: 8px;
  border: 2px solid #54c688;
  border-radius: 50px;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  direction: ltr;
  user-select: none;
  background: transparent;
  box-shadow: 0 0 1px transparent;
}
body#artwork #wizard .bootstrap-switch .bootstrap-switch-container {
  display: inline-block;
  width: 147px;
  height: 32px;
  margin-left: -49px;
  border-radius: 4px;
  background-color: rgba(20, 20, 20, 0.6);
  white-space: nowrap;
  transition: margin-left 0.5s;
}
body#artwork #wizard .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container {
  margin-left: 0;
}
body#artwork #wizard .bootstrap-switch .bootstrap-switch-handle-on, body#artwork #wizard .bootstrap-switch .bootstrap-switch-handle-off, body#artwork #wizard .bootstrap-switch .bootstrap-switch-label {
  display: inline-block;
  box-sizing: border-box;
  width: 49px;
  height: 32px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: baseline;
}
body#artwork #wizard .bootstrap-switch .bootstrap-switch-handle-on {
  background-color: rgba(255, 255, 255, 0.3);
  color: #54c688;
}
body#artwork #wizard .bootstrap-switch .bootstrap-switch-label {
  margin: -1px 0;
  background: transparent;
  color: #333;
}
body#artwork #wizard .bootstrap-switch .bootstrap-switch-handle-off {
  background-color: rgba(20, 20, 20, 0.6);
  color: rgba(255, 255, 255, 0.3);
}
body#artwork #wizard .bootstrap-switch input[type=checkbox] {
  display: block;
  width: 13px;
  height: 13px;
  margin: 4px 0 0;
  opacity: 0;
}
body#artwork #wizard #wifiPlugin, body#artwork #wizard #networkDrives {
  color: var(--ink-1);
}

/* The iframe page (Help, Volumio Shop): the frame's title bar — a Bootstrap h2 with the back pill and a 24px arrow */
body#artwork .iframe-page-title h2 {
  margin: 10px;
  font-family: var(--font-ui);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  color: #fff;
}
body#artwork .iframe-page-title .btn {
  display: inline-block;
  margin: 0;
  padding: 6px 12px;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink-1);
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
}
body#artwork .iframe-page-title .btn:hover {
  background-color: rgba(255, 255, 255, 0.16);
}
body#artwork .iframe-page-title .fa {
  display: inline-block;
  width: 0.857em;
  height: 24px;
  font-size: 24px;
  line-height: 24px;
  font-style: normal;
  vertical-align: 1px; /* FontAwesome's baseline sits a pixel higher than Figtree's at 24px */
}
body#artwork .iframe-page-title .fa .material-symbols-rounded {
  display: inline-block;
  vertical-align: top;
  width: 24px;
  height: 24px;
  font-size: 24px;
  line-height: 24px;
  margin-left: -1.7px;
}/* Zones & outputs sheet: a panel on the right on wide screens, a bottom sheet on phones. */
body#artwork #sideMenu {
  position: relative;
  z-index: 401;
}
body#artwork #sideMenuScrim {
  position: fixed;
  inset: 0;
  z-index: 399;
  background: var(--scrim-page);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
body#artwork .outputs__menu {
  position: fixed;
  z-index: 400;
  top: 12px;
  right: 12px;
  bottom: 12px;
  left: auto;
  width: min(350px, 100vw - 24px);
  max-height: calc(100vh - 91px); /* what Volumio's own frame left the sheet with */
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px;
  background: var(--panel-deep);
  -webkit-backdrop-filter: blur(34px) saturate(1.1);
  backdrop-filter: blur(34px) saturate(1.1);
  border: 1px solid var(--fill-10);
  box-shadow: 0 30px 70px -24px var(--shadow-strong);
  color: var(--ink-1);
  opacity: 1;
  transform: none;
  animation: aw-outputs-in 0.22s ease-out;
}
body#artwork .outputs__grab {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--fill-08);
  color: var(--ink-3);
  cursor: pointer;
}
body#artwork .outputs__grab::after {
  content: "close";
  font-family: "Material Symbols Rounded";
  font-size: 18px;
  line-height: 32px;
}
body#artwork .outputs__grab:hover {
  background: var(--fill-16);
  color: var(--ink);
}
body#artwork .outputs__grab:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}
body#artwork .outputs__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
}
body#artwork .outputs__title__text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-35);
}
body#artwork .outputs__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 13px;
  border-radius: 17px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--fill-16);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
}
body#artwork .outputs__action:hover {
  background: var(--fill-08);
  color: var(--ink);
}
body#artwork .outputs__action .outputs__action__icon {
  font-size: 17px;
}
body#artwork .outputs__subtitle {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
body#artwork .outputs__device, body#artwork .device {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--fill-06);
  border: 1px solid var(--fill-09);
  flex-wrap: wrap;
}
body#artwork .device__thumb {
  flex: none;
  width: 44px;
  height: 44px;
  margin-right: 12px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
}
body#artwork .device__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body#artwork .device__info {
  min-width: 0;
  flex: 1 1 auto;
}
body#artwork .device__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body#artwork .device__title__text {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
body#artwork .device__subtitle, body#artwork .device__info small {
  font-size: 12px;
  color: var(--ink-muted);
}
body#artwork .device__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #7a848e;
  margin-top: 0;
  min-width: 0;
}
body#artwork .device__meta__song {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork .device__control--play {
  height: 28px;
  padding: 0 8px;
}
body#artwork .device__control--play .material-symbols-rounded {
  font-size: 18px;
}
body#artwork .device__group {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body#artwork .device__group__item {
  padding-top: 8px;
  border-top: 1px solid var(--fill-08);
}
body#artwork .device__group__action {
  flex-basis: 100%;
  margin-top: 6px;
}
body#artwork .device__volume {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
}
body#artwork .device__control--volume {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--ink-3);
}
body#artwork .device__control--volume .outputs__action__icon {
  font-size: 15px;
}
body#artwork .device__control--volume:hover {
  background: transparent;
  color: var(--ink);
}
body#artwork .volume-control__popover {
  position: static;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
body#artwork .outputs__menu input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
}
body#artwork .outputs__menu input[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--fill-20);
}
body#artwork .outputs__menu input[type=range]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--fill-20);
}
body#artwork .outputs__menu input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--fill-16), 0 2px 6px rgba(0, 0, 0, 0.6);
}
body#artwork .outputs__menu input[type=range]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
}
body#artwork .outputs__menu .material-symbols-rounded {
  color: var(--ink-3);
}
body#artwork .device.disabled {
  opacity: 0.5;
}

@keyframes aw-outputs-in {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes aw-outputs-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}
@media (max-width: 700px) and (orientation: portrait) {
  body#artwork .outputs__menu {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    max-height: 72vh;
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    padding-top: 26px;
    animation: aw-outputs-up 0.22s ease-out;
    will-change: transform;
  }
  body#artwork .outputs__grab {
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 26px;
    border-radius: 20px 20px 0 0;
    background: transparent;
    touch-action: none;
  }
  body#artwork .outputs__grab::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: var(--fill-30);
  }
  body#artwork .outputs__grab:hover {
    background: transparent;
  }
  body#artwork .outputs__grab:hover::after {
    background: var(--fill-30);
  }
}
/* Play in this browser: the Zones & outputs row and the banner every other client shows */
body#artwork .outputs__menu .aw-local {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}
body#artwork .outputs__menu .aw-local .aw-local__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--fill-08);
}
body#artwork .outputs__menu .aw-local .aw-local__icon .material-symbols-rounded {
  font-size: 22px;
  color: var(--ink-1);
}
body#artwork .outputs__menu .aw-local .aw-local__hint {
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: 2px;
}

/* shared by the sheet row and the Zones page row */
body#artwork .aw-local__busy {
  width: 52px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: none;
}

body#artwork .aw-local__spin {
  color: var(--ink-2);
}

body#artwork .aw-local__loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body#artwork .aw-local__link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ink-1);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
/* Phone menu sheet (mockup "Mobile — Menu"): 308px sheet 14px from the edges over a dimmed screen. */
body#artwork .aw-mm {
  position: fixed;
  inset: 0;
  z-index: 30;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.24s;
}
body#artwork .aw-mm.open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

body#artwork .aw-mm__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim-page);
  opacity: 0;
  transition: opacity 0.24s ease;
}

body#artwork .aw-mm.open .aw-mm__scrim {
  opacity: 1;
}

body#artwork .aw-mm__sheet {
  position: absolute;
  left: 14px;
  top: 14px;
  bottom: 14px;
  width: min(308px, 100vw - 28px);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 22px 14px 16px;
  background: var(--panel-fill);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  backdrop-filter: blur(24px) saturate(1.15);
  border: 1px solid var(--fill-11);
  box-shadow: 40px 0 90px -30px var(--shadow-deep);
  color: var(--ink-1);
  transform: translateX(-24px);
  opacity: 0;
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease;
  will-change: transform, opacity;
}

body#artwork .aw-mm.open .aw-mm__sheet {
  transform: none;
  opacity: 1;
}

body#artwork .aw-mm__head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 12px;
}

body#artwork .aw-mm__brand {
  width: 41px;
  height: 41px;
  border-radius: 11px;
  border: 1.5px solid var(--ink-1);
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 800;
  flex: none;
}

body#artwork .aw-mm__zone {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: normal;
}

body#artwork .aw-mm__zone-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body#artwork .aw-mm__zone-out {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body#artwork .aw-mm__close {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--ink-3);
  cursor: pointer;
  display: grid;
  place-items: center;
}
body#artwork .aw-mm__close .material-symbols-rounded {
  font-size: 23px;
}

body#artwork .aw-mm__eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-45);
  padding: 22px 14px 8px;
  line-height: normal;
}

body#artwork .aw-mm__eyebrow + .aw-mm__list + .aw-mm__eyebrow {
  padding-top: 20px;
}

body#artwork .aw-mm__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body#artwork .aw-mm__item {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 56px;
  padding: 0 14px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--ink-2);
}
body#artwork .aw-mm__item .material-symbols-rounded {
  font-size: 23px;
  color: var(--ink-3);
  width: 23px;
}
body#artwork .aw-mm__item:hover {
  background: var(--fill-06);
  color: var(--ink);
}
body#artwork .aw-mm__item.active {
  background: var(--fill-10);
  color: var(--ink);
}
body#artwork .aw-mm__item.active .material-symbols-rounded {
  color: var(--ink);
}
body#artwork .aw-mm__item.active .aw-mm__label {
  font-weight: 600;
}

body#artwork .aw-mm__label {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body#artwork .aw-mm__value {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-55);
}

body#artwork .aw-mm__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 0;
  border-top: 1px solid var(--fill-09);
}

body#artwork .aw-mm__power {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
body#artwork .aw-mm__power .material-symbols-rounded {
  font-size: 21px;
  color: var(--ink-muted);
}
body#artwork .aw-mm__power:hover {
  color: var(--ink);
}

body#artwork .aw-mm__os {
  margin-left: auto;
  font-size: 10px;
  color: var(--ink-dim);
}

@media (max-width: 700px) and (orientation: portrait) {
  body#artwork .aw-mm__sheet {
    z-index: 2;
    top: calc(14px + var(--sa-t));
    bottom: calc(14px + var(--sa-b));
    overflow-y: auto;
    scrollbar-width: none;
  }
  body#artwork .aw-mm__sheet::-webkit-scrollbar {
    display: none;
  }
  body#artwork .aw-mm__foot {
    flex: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body#artwork .aw-mm, body#artwork .aw-mm__sheet, body#artwork .aw-mm__scrim {
    transition: none;
  }
}
/* the library is being indexed: the phone's counterpart of the rail's spinning ring */
body#artwork .aw-mm__scan {
  flex: none;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
}

body#artwork .aw-mm__item--scan {
  color: var(--ink);
}/* The modal frame and the theme's sheets (Dialogs mockup). */
body#artwork .modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: var(--scrim-page);
  opacity: 1;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

body#artwork .modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

body#artwork .modal-dialog {
  width: 560px;
  max-width: calc(100vw - 32px);
  margin: 0 auto;
  position: relative;
}

body#artwork .modal-content {
  background: var(--panel-fill);
  border: 1px solid var(--fill-12);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 50px 100px -30px var(--shadow-deep);
  color: var(--ink-1);
  -webkit-backdrop-filter: blur(44px) saturate(1.3);
  backdrop-filter: blur(44px) saturate(1.3);
}

body#artwork .aw-sheet {
  color: var(--ink-1);
}
body#artwork .aw-sheet .aw-sheet__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 26px 18px;
}
body#artwork .aw-sheet .aw-sheet__icon {
  font-size: 24px;
  color: var(--ink-2);
}
body#artwork .aw-sheet .aw-sheet__titles {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
body#artwork .aw-sheet .aw-sheet__title {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
body#artwork .aw-sheet .aw-sheet__sub {
  font-size: 13px;
  color: var(--ink-65);
}
body#artwork .aw-sheet .aw-sheet__close {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--fill-10);
  color: var(--ink-muted);
  padding: 0;
  cursor: pointer;
}
body#artwork .aw-sheet .aw-sheet__close .material-symbols-rounded {
  font-size: 21px;
}
body#artwork .aw-sheet .aw-sheet__close:hover {
  color: var(--ink);
  background: var(--fill-06);
}
body#artwork .aw-sheet .aw-sheet__body {
  padding: 6px 26px 6px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
body#artwork .aw-sheet .aw-sheet__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body#artwork .aw-sheet .aw-sheet__eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
}
body#artwork .aw-sheet .aw-sheet__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 26px 22px;
}
body#artwork .aw-sheet .aw-sheet__btn {
  height: 44px;
  padding: 0 22px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--fill-16);
  cursor: pointer;
}
body#artwork .aw-sheet .aw-sheet__btn:hover {
  background: var(--fill-06);
}
body#artwork .aw-sheet .aw-sheet__btn--primary {
  padding: 0 26px;
  font-weight: 700;
  color: var(--on-ink);
  background: var(--ink);
  border: 0;
}
body#artwork .aw-sheet .aw-sheet__btn--primary:hover {
  background: var(--ink-1);
}
body#artwork .aw-sheet .aw-sheet__btn:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}
body#artwork .aw-sheet .aw-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body#artwork .aw-sheet .aw-pill {
  height: 34px;
  padding: 0 14px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
  background: var(--fill-06);
  border: 1px solid var(--fill-11);
}
body#artwork .aw-sheet .aw-pill:hover {
  background: var(--fill-10);
  color: var(--ink);
}
body#artwork .aw-sheet .aw-pill.active {
  font-weight: 600;
  color: var(--on-ink);
  background: var(--ink);
  border-color: var(--ink);
}

/* Power dialog: 440 wide; tile 40 r12; rows h52 r14 (primary white), Cancel h44 */
body#artwork .aw-sheet--power .aw-confirm__head {
  padding: 26px 26px 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body#artwork .aw-sheet--power .aw-confirm__tile {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  background: var(--fill-07);
  border: 1px solid var(--fill-12);
}
body#artwork .aw-sheet--power .aw-confirm__tile .material-symbols-rounded {
  font-size: 23px;
}
body#artwork .aw-sheet--power .aw-confirm__title {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
body#artwork .aw-sheet--power .aw-power__actions {
  padding: 18px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body#artwork .aw-sheet--power .aw-power__row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 18px;
  border-radius: 14px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  background: var(--fill-06);
  border: 1px solid var(--fill-12);
  color: var(--ink-1);
}
body#artwork .aw-sheet--power .aw-power__row .material-symbols-rounded {
  font-size: 22px;
  color: var(--ink-3);
}
body#artwork .aw-sheet--power .aw-power__row .aw-power__label {
  font-size: 15px;
  font-weight: 600;
}
body#artwork .aw-sheet--power .aw-power__row:hover {
  background: var(--fill-10);
}
body#artwork .aw-sheet--power .aw-power__row--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}
body#artwork .aw-sheet--power .aw-power__row--primary .material-symbols-rounded {
  color: var(--on-ink);
}
body#artwork .aw-sheet--power .aw-power__row--primary .aw-power__label {
  font-weight: 700;
}
body#artwork .aw-sheet--power .aw-power__row--primary:hover {
  background: var(--ink-1);
}
body#artwork .aw-sheet--power .aw-power__cancel {
  height: 44px;
  margin-top: 4px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid var(--fill-14);
  cursor: pointer;
}
body#artwork .aw-sheet--power .aw-power__cancel:hover {
  background: var(--fill-06);
  color: var(--ink);
}

@media (max-width: 700px) and (orientation: portrait) {
  body#artwork .modal-dialog {
    max-width: calc(100vw - 24px);
  }
}
/* The theme's sheets: sleep timer, alarms, track actions, credits; the form controls they share. */
@keyframes aw-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Volumio's own modal markup (header / body / footer) laid out as the confirm pattern */
body#artwork .modal-content .modal-header {
  padding: 26px 26px 4px;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
body#artwork .modal-content .modal-header .modal-title {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
body#artwork .modal-content .modal-body {
  padding: 8px 26px 4px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-65);
  background: transparent;
  border: 0;
  text-wrap: pretty;
}
body#artwork .modal-content .modal-body h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--ink-1);
}
body#artwork .modal-content .modal-body table {
  color: var(--ink-1);
  width: 100%;
  border-collapse: collapse;
}
body#artwork .modal-content .modal-body td {
  padding: 8px;
  vertical-align: top;
  border-top: 1px solid var(--fill-08);
}
body#artwork .modal-content .credits-story {
  white-space: pre-line;
  font-size: 16px;
  text-align: justify;
}
body#artwork .modal-content td.album-credits-title:first-letter {
  text-transform: capitalize;
}
body#artwork .modal-content .modal-footer {
  padding: 18px 26px 22px;
  border: 0;
  background: transparent;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* a long label (e.g. "Install v3.1.3 (stable)") must stay on one line — wrap onto a new row
     of buttons instead of wrapping the text inside a button */
}
body#artwork .modal-content .modal-footer .btn {
  flex: 1 1 160px;
  height: 44px;
  line-height: 42px;
  border-radius: 22px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  border: 1px solid var(--fill-16);
  background: transparent;
  margin: 0;
  cursor: pointer;
  font-family: var(--font-ui);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork .modal-content .modal-footer .btn.btn-info, body#artwork .modal-content .modal-footer .btn.btn-primary, body#artwork .modal-content .modal-footer .btn.btn-success {
  background: var(--ink);
  color: var(--on-ink);
  border: 0;
  font-weight: 700;
  height: 44px;
  line-height: 44px;
}

/* the shared controls (select, switch, stepper) */
body#artwork .modal-content .ui-select-container.ui-select-bootstrap {
  position: relative;
  width: 100%;
  height: 44px;
  border-radius: 11px;
  color: var(--ink-1);
  background: var(--fill-08);
  border: 1px solid var(--fill-13);
  box-shadow: none !important;
}
body#artwork .modal-content .ui-select-container.ui-select-bootstrap:focus-within {
  border-color: var(--fill-30);
}
body#artwork .modal-content .ui-select-container.ui-select-bootstrap select {
  width: 100%;
  height: 42px;
  line-height: 42px;
  padding: 0 40px 0 14px;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-ui);
  appearance: none;
  -webkit-appearance: none;
  outline: 0;
  cursor: pointer;
}
body#artwork .modal-content .ui-select-container.ui-select-bootstrap select option {
  color: var(--on-ink);
  background: var(--ink);
}
body#artwork .modal-content .ui-select-container.ui-select-bootstrap .caret {
  border: 0;
  width: auto;
  height: auto;
  margin: 0;
  position: absolute;
  right: 14px;
  top: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  line-height: 1;
  pointer-events: none;
}
body#artwork .modal-content .ui-select-container.ui-select-bootstrap .caret::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: no-repeat center/20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.75 8.75 L10 11.25 L13.25 8.75' fill='none' stroke='%23a7adb3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body#artwork .modal-content .bootstrap-switch {
  position: relative;
  display: block;
  width: 50px;
  height: 32px;
  border-radius: 13px;
  border: 0;
  background: var(--fill-16);
  overflow: visible;
  margin-right: 44px;
  cursor: pointer;
}
body#artwork .modal-content .bootstrap-switch input[type=checkbox] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}
body#artwork .modal-content .bootstrap-switch::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ground);
  transition: left 0.15s ease;
}
body#artwork .modal-content .bootstrap-switch::after {
  content: "Off";
  position: absolute;
  left: 62px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--ink-dim);
  white-space: nowrap;
}
body#artwork .modal-content .bootstrap-switch.bootstrap-switch-on {
  background: var(--ink);
}
body#artwork .modal-content .bootstrap-switch.bootstrap-switch-on::before {
  left: 27px;
}
body#artwork .modal-content .bootstrap-switch.bootstrap-switch-on::after {
  content: "On";
  color: var(--ink-2);
}
body#artwork .modal-content .aw-sheet__status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
}
body#artwork .modal-content .aw-sheet__status .mono {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
body#artwork .modal-content .aw-sheet__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
}
body#artwork .modal-content .aw-sheet__dot--on {
  background: var(--ok);
}
body#artwork .modal-content .aw-stepper {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 20px 12px;
  border-radius: 14px;
  background: var(--fill-06);
  border: 1px solid var(--fill-11);
}
body#artwork .modal-content .aw-stepper__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
body#artwork .modal-content .aw-stepper__col button {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--ink-65);
  cursor: pointer;
  display: grid;
  place-items: center;
}
body#artwork .modal-content .aw-stepper__col button .material-symbols-rounded {
  font-size: 19px;
}
body#artwork .modal-content .aw-stepper__col button:hover {
  color: var(--ink);
}
body#artwork .modal-content .aw-stepper__num {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  min-width: 2ch;
  text-align: center;
}
body#artwork .modal-content .aw-stepper__colon {
  font-size: 34px;
  color: var(--ink-75);
  padding-bottom: 28px;
}
body#artwork .modal-content .aw-stepper__unit {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
}

/* ---- Alarms sheet: 760 wide ---- */
body#artwork .modal.aw-dlg--alarm-clock .modal-dialog {
  width: 760px;
}

body#artwork .aw-sheet--alarms .aw-sheet__body--alarms {
  padding: 4px 26px 6px;
  gap: 12px;
}
body#artwork .aw-sheet--alarms .aw-sheet__body--alarms > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body#artwork .aw-sheet--alarms .aw-sheet__note {
  font-size: 14px;
  color: var(--ink-65);
  margin: 0;
}
body#artwork .aw-sheet--alarms .aw-sheet__eyebrow {
  padding-bottom: 2px;
}
body#artwork .aw-sheet--alarms .aw-alarm {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--fill-06);
  border: 1px solid var(--fill-11);
}
body#artwork .aw-sheet--alarms .aw-alarm--off .aw-stepper--bare, body#artwork .aw-sheet--alarms .aw-alarm--off .aw-alarm__what {
  opacity: 0.55;
}
body#artwork .aw-sheet--alarms .aw-stepper--bare {
  padding: 0;
  background: transparent;
  border: 0;
  gap: 8px;
  align-items: flex-end;
}
body#artwork .aw-sheet--alarms .aw-stepper--bare .aw-stepper__col {
  gap: 4px;
}
body#artwork .aw-sheet--alarms .aw-stepper--bare .aw-stepper__col button .material-symbols-rounded {
  font-size: 17px;
}
body#artwork .aw-sheet--alarms .aw-stepper--bare .aw-stepper__num {
  font-size: 28px;
}
body#artwork .aw-sheet--alarms .aw-stepper--bare .aw-stepper__colon {
  font-size: 24px;
  padding-bottom: 24px;
}
body#artwork .aw-sheet--alarms .aw-stepper--bare .aw-stepper__unit {
  font-size: 9px;
}
body#artwork .aw-sheet--alarms .aw-alarm__what {
  flex: 1;
  min-width: 0;
}
body#artwork .aw-sheet--alarms .aw-sheet__select--sm.ui-select-container.ui-select-bootstrap {
  height: 42px;
  border-radius: 11px;
  background: var(--fill-05);
  border-color: var(--fill-10);
}
body#artwork .aw-sheet--alarms .aw-sheet__select--sm.ui-select-container.ui-select-bootstrap select {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}
body#artwork .aw-sheet--alarms .bootstrap-switch {
  margin-right: 0;
  flex: none;
}
body#artwork .aw-sheet--alarms .bootstrap-switch::after {
  display: none;
}
body#artwork .aw-sheet--alarms .aw-alarm__delete {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex: none;
  background: transparent;
  border: 1px solid var(--fill-11);
  color: var(--ink-muted);
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
body#artwork .aw-sheet--alarms .aw-alarm__delete .material-symbols-rounded {
  font-size: 20px;
}
body#artwork .aw-sheet--alarms .aw-alarm__delete:hover {
  color: var(--err-soft);
  border-color: var(--err-line);
}
body#artwork .aw-sheet--alarms .aw-alarm__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  width: 100%;
  border-radius: 14px;
  cursor: pointer;
  border: 1px dashed var(--fill-16);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-ui);
}
body#artwork .aw-sheet--alarms .aw-alarm__add .material-symbols-rounded {
  font-size: 20px;
}
body#artwork .aw-sheet--alarms .aw-alarm__add:hover {
  background: var(--fill-06);
  color: var(--ink);
}

/* ---- track actions sheet (⋯ on Now Playing) ---- */
body#artwork .modal.aw-dlg--track-actions .modal-dialog {
  width: 460px;
}

body#artwork .aw-sheet--track .aw-confirm__head {
  padding: 26px 26px 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
body#artwork .aw-sheet--track .aw-confirm__tile {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  background: var(--fill-07);
  border: 1px solid var(--fill-12);
}
body#artwork .aw-sheet--track .aw-confirm__tile .material-symbols-rounded {
  font-size: 23px;
}
body#artwork .aw-sheet--track .aw-confirm__title {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork .aw-sheet--track .aw-track__titles {
  min-width: 0;
  flex: 1;
}
body#artwork .aw-sheet--track .aw-power__cancel {
  height: 44px;
  margin-top: 4px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid var(--fill-14);
  cursor: pointer;
  width: 100%;
  font-family: var(--font-ui);
}
body#artwork .aw-sheet--track .aw-power__cancel:hover {
  background: var(--fill-06);
  color: var(--ink);
}
body#artwork .aw-sheet--track .aw-track__sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork .aw-sheet--track .aw-track__tiles {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 4px 26px 0;
}
body#artwork .aw-sheet--track .aw-track__tile {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  background: var(--fill-07);
  border: 1px solid var(--fill-11);
  color: var(--ink-3);
  cursor: pointer;
  box-shadow: none;
}
body#artwork .aw-sheet--track .aw-track__tile .material-symbols-rounded {
  font-size: 24px;
}
body#artwork .aw-sheet--track .aw-track__tile:disabled {
  opacity: 0.5;
  cursor: default;
}
body#artwork .aw-sheet--track .aw-track__tile.active {
  color: var(--ink);
  background: var(--fill-16);
}
body#artwork .aw-sheet--track .aw-track__rows {
  padding: 18px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body#artwork .aw-sheet--track .aw-track__row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 16px;
  border-radius: 14px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--fill-06);
  border: 1px solid var(--fill-10);
  color: var(--ink-2);
  font-family: var(--font-ui);
}
body#artwork .aw-sheet--track .aw-track__row .material-symbols-rounded {
  font-size: 21px;
  color: var(--ink-3);
}
body#artwork .aw-sheet--track .aw-track__row .aw-track__label {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork .aw-sheet--track .aw-track__row:hover {
  background: var(--fill-10);
  color: var(--ink);
}
body#artwork .aw-sheet--track .aw-track__row.is-off, body#artwork .aw-sheet--track .aw-track__row[disabled] {
  opacity: 0.5;
  cursor: default;
}
body#artwork .aw-sheet--track .aw-track__row:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}
body#artwork .aw-sheet--track .aw-track__spin {
  color: var(--ink-3);
}
body#artwork .aw-sheet--track .aw-track__sep {
  height: 1px;
  margin: 6px 0;
  background: var(--fill-09);
}

/* ---- Sleep timer sheet (handoff 9a): 420 wide ---- */
body#artwork .modal.aw-dlg--sleep .modal-dialog {
  width: 460px;
} /* Volumio opens it as a small modal: 460, not the mockup's 420 */
body#artwork .aw-sheet--sleep {
  padding: 24px 26px 26px;
  color: var(--ink-1);
}
body#artwork .aw-sheet--sleep .aw-sleep__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
body#artwork .aw-sheet--sleep .aw-sleep__head .material-symbols-rounded {
  font-size: 22px;
  color: var(--ink-2);
}
body#artwork .aw-sheet--sleep .aw-sleep__head .mono {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
}
body#artwork .aw-sheet--sleep .aw-sleep__head .aw-sheet__close {
  margin-left: auto;
}
body#artwork .aw-sheet--sleep .aw-sleep__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 20px;
}
body#artwork .aw-sheet--sleep .aw-sleep__preset {
  height: 56px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  background: var(--fill-08);
  border: 1px solid var(--fill-12);
}
body#artwork .aw-sheet--sleep .aw-sleep__preset:hover:not(.active) {
  background: var(--fill-12);
}
body#artwork .aw-sheet--sleep .aw-sleep__preset.active {
  background: var(--ink);
  color: var(--on-ink);
  border-color: var(--ink);
}
body#artwork .aw-sheet--sleep .aw-sleep__preset:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}
body#artwork .aw-sheet--sleep .aw-sleep__unit {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
  margin-top: 8px;
}
body#artwork .aw-sheet--sleep .aw-sleep__custom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  margin: 14px 0 0;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--fill-12);
  font-weight: 400;
  cursor: text;
}
body#artwork .aw-sheet--sleep .aw-sleep__custom > span:first-child {
  font-size: 15px;
  color: var(--ink-3);
}
body#artwork .aw-sheet--sleep .aw-sleep__custom.active {
  border-color: var(--ink);
}
body#artwork .aw-sheet--sleep .aw-sleep__custom input {
  width: 3.2ch;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
  text-align: right;
  outline: 0;
  padding: 0;
}
body#artwork .aw-sheet--sleep .aw-sleep__custom input::placeholder {
  color: var(--ink-dim);
}
body#artwork .aw-sheet--sleep .aw-sleep__custom-val {
  font-size: 14px;
  color: var(--ink-dim);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body#artwork .aw-sheet--sleep .aw-sleep__rule {
  height: 1px;
  background: var(--fill-09);
  margin: 20px 0;
}
body#artwork .aw-sheet--sleep .aw-sleep__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
body#artwork .aw-sheet--sleep .aw-sleep__seg {
  display: flex;
  margin-top: 12px;
  padding: 3px;
  border-radius: 999px;
  background: var(--fill-08);
  border: 1px solid var(--fill-12);
}
body#artwork .aw-sheet--sleep .aw-sleep__seg button {
  flex: 1;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 9px 0;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink-3);
  cursor: pointer;
}
body#artwork .aw-sheet--sleep .aw-sleep__seg button.active {
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
}
body#artwork .aw-sheet--sleep .aw-sleep__seg button:hover:not(.active) {
  color: var(--ink);
}
body#artwork .aw-sheet--sleep .aw-sleep__start, body#artwork .aw-sheet--sleep .aw-sleep__off {
  display: block;
  width: 100%;
  height: 50px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 16px;
  cursor: pointer;
}
body#artwork .aw-sheet--sleep .aw-sleep__start {
  margin-top: 22px;
  border: 0;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
}
body#artwork .aw-sheet--sleep .aw-sleep__start:disabled {
  opacity: 0.45;
  cursor: default;
}
body#artwork .aw-sheet--sleep .aw-sleep__start:hover:not(:disabled) {
  background: var(--ink-1);
}
body#artwork .aw-sheet--sleep .aw-sleep__run {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body#artwork .aw-sheet--sleep .aw-sleep__count {
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 34px;
  font-variant-numeric: tabular-nums;
}
body#artwork .aw-sheet--sleep .aw-sleep__then {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-top: 10px;
}
body#artwork .aw-sheet--sleep .aw-sleep__bar {
  align-self: stretch;
  height: 4px;
  border-radius: 2px;
  background: var(--fill-20);
  margin-top: 30px;
}
body#artwork .aw-sheet--sleep .aw-sleep__bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--ink);
  transition: width 1s linear;
}
body#artwork .aw-sheet--sleep .aw-sleep__ends {
  align-self: stretch;
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-size: 11px;
  color: var(--ink-dim);
}
body#artwork .aw-sheet--sleep .aw-sleep__off {
  margin-top: 34px;
  border: 1px solid var(--fill-20);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
}
body#artwork .aw-sheet--sleep .aw-sleep__off:hover {
  background: var(--fill-06);
}

/* the tag while it runs (9b): Now Playing's top bar and the mini player's rates line */
body#artwork #np .np-sleep-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  margin-left: 16px;
  border-radius: 999px;
  border: 1px solid var(--fill-13);
  background: var(--fill-10);
  color: var(--ink-1);
  cursor: pointer;
  flex: none;
  font-family: var(--font-ui);
}
body#artwork #np .np-sleep-tag .material-symbols-rounded {
  font-size: 18px;
  color: var(--ink-3);
}
body#artwork #np .np-sleep-tag .mono {
  font-size: 11px;
  letter-spacing: 0.14em;
}
body#artwork #np .np-sleep-tag:hover {
  background: var(--fill-16);
}

body#artwork #footer-content .track-info-rates .track-info-sleep::before {
  content: "·";
  margin-right: 6px;
}
/* Ambient — the display's resting state (handoff 5a–5g).
   The frames were drawn at 800×480, 1024×600, 1280×800 and 1920×1080; every size below is the
   line through those four points, so the screen scales with the panel instead of snapping:
     cover 250/320/420/560   = 52vh          title 34/44/64/92  ≈ 7.6vh (≥ 28px on 480)
     pad   48/62/96/140      ≈ 7vw           clock 72/76/88/132 ≈ 12vh  (≥ 72px on 480)
     gap   40/52/76/104      ≈ 5.4vw         blur  70/80/90/110 ≈ 5.7vw
   Dark: cover blur at .9, saturate 1.5 under a .44→.62→.84 ground gradient.
   Light: blur at .34, saturate 1.1 under a .72→.85→.94 paper veil, so a bright sleeve cannot
   glow on paper. */
body#artwork .aw-amb {
  --amb-pad: clamp(48px, 7vw, 140px);
  --amb-gap: clamp(40px, 5.4vw, 104px);
  --amb-cover: 52vh;
  --amb-blur: clamp(70px, 5.7vw, 110px);
  --amb-ink: var(--ink-1);
  --amb-ink-2: var(--ink-2);
  --amb-ink-3: var(--ink-3);
  --amb-veil-0: rgba(6, 8, 10, .44);
  --amb-veil-1: rgba(6, 8, 10, .62);
  --amb-veil-2: rgba(6, 8, 10, .84);
  --amb-bg-opacity: .9;
  --amb-bg-sat: 1.5;
  --amb-pill-fill: rgba(255, 255, 255, .10);
  --amb-pill-line: rgba(255, 255, 255, .13);
  --amb-track: rgba(255, 255, 255, .14);
  --amb-cover-shadow: 0 5.5vh 11vh -3vh rgba(0, 0, 0, .85);
  position: fixed;
  inset: 0;
  z-index: 900;
  overflow: hidden;
  background: var(--ground);
  color: var(--amb-ink);
  font-family: var(--font-ui);
  cursor: none;
  user-select: none;
  -webkit-user-select: none;
  animation: aw-amb-in 0.8s ease both;
}

:root[data-aw-theme=light] body#artwork .aw-amb, html.aw-is-light body#artwork .aw-amb {
  --amb-veil-0: rgba(250, 248, 245, .72);
  --amb-veil-1: rgba(250, 248, 245, .85);
  --amb-veil-2: rgba(250, 248, 245, .94);
  --amb-bg-opacity: .34;
  --amb-bg-sat: 1.1;
  --amb-pill-fill: rgba(255, 255, 255, .66);
  --amb-pill-line: rgba(20, 22, 26, .12);
  --amb-track: rgba(20, 22, 26, .14);
  --amb-cover-shadow: 0 4.2vh 8.8vh -3.5vh rgba(24, 20, 14, .5);
}

@keyframes aw-amb-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 5g — burn-in defence: the whole composition drifts as one group, ±14/±8 px over a 240 s
   cycle, about 7 px a minute */
@keyframes aw-amb-drift {
  from {
    transform: translate(-14px, -8px);
  }
  to {
    transform: translate(14px, 8px);
  }
}
/* --- the blurred cover ------------------------------------------------------------------- */
body#artwork .aw-amb__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

body#artwork .aw-amb__bg-img {
  position: absolute;
  width: 155%;
  height: 155%;
  left: -27.5%;
  top: -27.5%;
  object-fit: cover;
  filter: blur(var(--amb-blur)) saturate(var(--amb-bg-sat));
  opacity: var(--amb-bg-opacity);
}

body#artwork .aw-amb__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--amb-veil-0) 0%, var(--amb-veil-1) 60%, var(--amb-veil-2) 100%);
}

/* --- the composition ---------------------------------------------------------------------- */
body#artwork .aw-amb__group {
  position: absolute;
  inset: 0;
  animation: aw-amb-drift 240s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  body#artwork .aw-amb__group {
    animation: none;
  }
}
body#artwork .aw-amb__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: var(--amb-gap);
  padding: 0 var(--amb-pad);
}

body#artwork .aw-amb__cover {
  flex: none;
  width: var(--amb-cover);
  height: var(--amb-cover);
  border-radius: 11px;
  object-fit: cover; /* Now Playing's corners */
  box-shadow: var(--amb-cover-shadow);
}

body#artwork .aw-amb__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body#artwork .aw-amb__tag {
  font-size: clamp(11px, 1.3vh, 14px);
  letter-spacing: 0.16em;
  color: var(--amb-ink-3);
  margin-bottom: clamp(12px, 1.8vh, 20px);
}

body#artwork .aw-amb__title {
  font-size: clamp(28px, 5.5vh + 1.5vw, 92px);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.02;
  text-wrap: pretty; /* 34/44/64/92 across the four frames */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body#artwork .aw-amb__artist {
  font-size: clamp(20px, 3.9vh, 40px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 2vh;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body#artwork .aw-amb__album {
  font-size: clamp(15px, 2.5vh, 24px);
  color: var(--amb-ink-2);
  margin-top: 1.1vh;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body#artwork .aw-amb__row {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vh, 18px);
  margin-top: clamp(20px, 3.7vh, 40px);
}

body#artwork .aw-amb__pill {
  display: inline-flex;
  align-items: center;
  gap: clamp(7px, 0.9vh, 9px);
  height: clamp(32px, 4.6vh, 50px);
  padding: 0 clamp(12px, 1.8vh, 20px);
  border-radius: 999px;
  background: var(--amb-pill-fill);
  border: 1px solid var(--amb-pill-line);
}
body#artwork .aw-amb__pill-num {
  font-size: clamp(12px, 1.6vh, 17px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--amb-ink-2);
}
body#artwork .aw-amb__pill-unit {
  font-size: clamp(10px, 1.2vh, 13px);
  letter-spacing: 0.14em;
  color: var(--amb-ink-3);
}
body#artwork .aw-amb__pill.aw-q--hires {
  background: var(--q-hires-wash);
  border-color: var(--q-hires-line);
}
body#artwork .aw-amb__pill.aw-q--hires .aw-amb__pill-num, body#artwork .aw-amb__pill.aw-q--hires .aw-amb__pill-unit {
  color: var(--q-hires-ink);
}
body#artwork .aw-amb__pill.aw-q--dsd {
  background: var(--q-dsd-wash);
  border-color: var(--q-dsd-line);
}
body#artwork .aw-amb__pill.aw-q--dsd .aw-amb__pill-num, body#artwork .aw-amb__pill.aw-q--dsd .aw-amb__pill-unit {
  color: var(--q-dsd-ink);
}
body#artwork .aw-amb__pill.aw-q--lossy {
  background: var(--q-lossy-wash);
  border-color: var(--q-lossy-line);
}
body#artwork .aw-amb__pill.aw-q--lossy .aw-amb__pill-num, body#artwork .aw-amb__pill.aw-q--lossy .aw-amb__pill-unit {
  color: var(--q-lossy-ink);
}

body#artwork .aw-amb__bp {
  display: flex;
  align-items: center;
  gap: 8px;
}
body#artwork .aw-amb__bp .mono {
  font-size: clamp(11px, 1.3vh, 14px);
  letter-spacing: 0.14em;
  color: var(--amb-ink);
}

body#artwork .aw-amb__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
}

body#artwork .aw-amb__time {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(11px, 1.5vh, 16px);
  letter-spacing: 0.1em;
  color: var(--amb-ink-2);
}
body#artwork .aw-amb__time .aw-amb__slash {
  color: var(--ink-dim);
}
body#artwork .aw-amb__time .aw-amb__total {
  color: var(--amb-ink-3);
}

/* the time sits beside the pill on small panels and on a line of its own from 1200px */
body#artwork .aw-amb__time--block {
  display: none;
  margin-top: clamp(20px, 3.3vh, 40px);
}

@media (min-width: 1200px) {
  body#artwork .aw-amb__time--inline {
    display: none;
  }
  body#artwork .aw-amb__time--block {
    display: flex;
  }
}
body#artwork .aw-amb__line {
  display: none;
  font-size: clamp(11px, 1.3vh, 14px);
  letter-spacing: 0.14em;
  color: var(--amb-ink-2);
  margin-top: clamp(16px, 3vh, 24px);
  white-space: nowrap;
}

body#artwork .aw-amb__clock {
  position: absolute;
  top: clamp(26px, 6.5vh, 74px);
  right: clamp(36px, 5vw, 96px);
  font-size: clamp(72px, 12vh, 132px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--amb-ink);
  font-variant-numeric: tabular-nums;
}

body#artwork .aw-amb__ampm {
  font-size: 0.25em;
  letter-spacing: 0.14em;
  margin-left: 0.3em;
  vertical-align: 0.2em;
  color: var(--amb-ink-3);
}

body#artwork .aw-amb__name {
  font-size: clamp(11px, 1.3vh, 14px);
  letter-spacing: 0.16em;
  color: var(--amb-ink-3);
}

body#artwork .aw-amb__name--corner {
  position: absolute;
  left: var(--amb-pad);
  bottom: clamp(26px, 5.6vh, 62px);
}

/* --- stopped / empty queue: clock and name on plain ground --------------------------------- */
body#artwork .aw-amb__idle {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 5.4vh, 40px);
}

body#artwork .aw-amb__clock--idle {
  position: static;
  font-size: clamp(96px, 25vh, 260px);
  line-height: 0.9;
  letter-spacing: -0.03em;
}

body#artwork .aw-amb__idle .aw-amb__name {
  font-size: clamp(12px, 1.4vh, 15px);
  letter-spacing: 0.18em;
  color: var(--ink-dim);
}

/* --- paused: the tag above the title, the hairline in the muted ink ---------------------- */
body#artwork .aw-amb.is-paused .aw-amb__seek {
  background: rgba(255, 255, 255, 0.1);
}

body#artwork .aw-amb.is-paused .aw-amb__seek-fill {
  background: var(--amb-ink-3);
}

/* --- night: one scrim, the metadata folded into a line, no shadow under the cover --------- */
body#artwork .aw-amb__night {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 8, 0.55);
  pointer-events: none;
}

body#artwork .aw-amb.is-night .aw-amb__album, body#artwork .aw-amb.is-night .aw-amb__row, body#artwork .aw-amb.is-night .aw-amb__time--block, body#artwork .aw-amb.is-night .aw-amb__name--corner {
  display: none;
}
body#artwork .aw-amb.is-night .aw-amb__line {
  display: block;
}
body#artwork .aw-amb.is-night .aw-amb__cover {
  box-shadow: none;
}
body#artwork .aw-amb.is-night .aw-amb__seek {
  background: rgba(255, 255, 255, 0.06);
}
body#artwork .aw-amb.is-night .aw-amb__seek-fill {
  background: rgba(242, 243, 245, 0.5);
}

/* --- cover-led, after the community's mockup (1612×1000): the cover fills three quarters of
   the height on the left, the player's name top-left and a small clock top-right on one
   baseline, the text centred beside the cover with what comes next under a rule, and the seek
   bar across the whole width beneath the cover with the times at its ends. Everything in vh/vw
   of that frame: cover 750 = 75vh, top 118 = 11.8vh, sides 68 = 4.2vw, gap 57 = 3.5vw. ----- */
body#artwork .aw-amb--cover {
  --amb-x: clamp(28px, 4.2vw, 96px);
  --amb-top: 11.8vh;
  --amb-cover: 75vh;
  --amb-gap: clamp(24px, 3.5vw, 64px);
}
body#artwork .aw-amb--cover .aw-amb__stage {
  inset: auto;
  left: var(--amb-x);
  right: var(--amb-x);
  top: var(--amb-top);
  height: var(--amb-cover);
  padding: 0;
  align-items: center;
}
body#artwork .aw-amb--cover .aw-amb__cover {
  width: var(--amb-cover);
  height: var(--amb-cover);
  box-shadow: 0 3vh 8vh -2vh rgba(0, 0, 0, 0.7);
}
body#artwork .aw-amb--cover .aw-amb__text {
  flex: 1;
  min-width: 0;
}
body#artwork .aw-amb--cover .aw-amb__title {
  font-size: clamp(24px, 5.6vh, 64px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  -webkit-line-clamp: 2;
}
body#artwork .aw-amb--cover .aw-amb__artist {
  font-size: clamp(16px, 3vh, 34px);
  font-weight: 700;
  color: var(--amb-ink-2);
  margin-top: 1.6vh;
}
body#artwork .aw-amb--cover .aw-amb__album {
  font-size: clamp(13px, 2.4vh, 26px);
  color: var(--amb-ink-3);
  margin-top: 0.8vh;
}
body#artwork .aw-amb--cover .aw-amb__row {
  margin-top: clamp(16px, 3.6vh, 40px);
  gap: clamp(8px, 1.4vh, 16px);
}
body#artwork .aw-amb--cover .aw-amb__time--inline, body#artwork .aw-amb--cover .aw-amb__time--block {
  display: none;
}
body#artwork .aw-amb--cover { /* the times are at the seek bar's ends */ }
body#artwork .aw-amb--cover .aw-amb__bp .mono {
  color: var(--ok);
}
body#artwork .aw-amb--cover .aw-amb__next {
  margin-top: clamp(20px, 5.5vh, 60px);
  padding-top: clamp(20px, 4.4vh, 48px);
  border-top: 1px solid var(--amb-pill-line);
}
body#artwork .aw-amb--cover .aw-amb__next-eyebrow {
  font-size: clamp(10px, 1.5vh, 15px);
  letter-spacing: 0.16em;
  color: var(--amb-ink-3);
}
body#artwork .aw-amb--cover .aw-amb__next-title {
  font-size: clamp(14px, 2.2vh, 24px);
  color: var(--amb-ink);
  margin-top: 1vh;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#artwork .aw-amb--cover .aw-amb__name--corner {
  left: var(--amb-x);
  bottom: auto;
  top: clamp(20px, 5.6vh, 60px);
  font-size: clamp(11px, 1.5vh, 15px);
  letter-spacing: 0.2em;
}
body#artwork .aw-amb--cover .aw-amb__clock {
  top: clamp(16px, 4.8vh, 52px);
  right: var(--amb-x);
  font-size: clamp(20px, 3vh, 34px);
  letter-spacing: 0.02em;
}
body#artwork .aw-amb--cover .aw-amb__ampm {
  font-size: 0.5em;
}
body#artwork .aw-amb--cover .aw-amb__sleep {
  bottom: auto;
  top: clamp(16px, 4.8vh, 52px);
  right: calc(var(--amb-x) + 12vh);
}
body#artwork .aw-amb--cover .aw-amb__seek {
  left: var(--amb-x);
  right: var(--amb-x);
  bottom: auto;
  top: calc(var(--amb-top) + var(--amb-cover) + 4.9vh);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}
body#artwork .aw-amb--cover .aw-amb__times {
  position: absolute;
  left: var(--amb-x);
  right: var(--amb-x);
  top: calc(var(--amb-top) + var(--amb-cover) + 4.9vh + 6px + 1.4vh);
  display: flex;
  justify-content: space-between;
  font-size: clamp(11px, 1.7vh, 17px);
  letter-spacing: 0.06em;
  color: var(--amb-ink-2);
}
body#artwork .aw-amb--cover.is-night .aw-amb__next, body#artwork .aw-amb--cover.is-night .aw-amb__times {
  display: none;
}
body#artwork .aw-amb--cover {
  /* the bar and its times drift with the composition, so their left edge stays on the cover's */
}
body#artwork .aw-amb--cover .aw-amb__seek, body#artwork .aw-amb--cover .aw-amb__times {
  animation: aw-amb-drift 240s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  body#artwork .aw-amb--cover .aw-amb__seek, body#artwork .aw-amb--cover .aw-amb__times {
    animation: none;
  }
}

body#artwork .aw-amb__times {
  display: none;
}

body#artwork .aw-amb__next {
  display: none;
}

body#artwork .aw-amb--cover .aw-amb__next {
  display: block;
}

body#artwork .aw-amb--cover .aw-amb__times {
  display: flex;
}

body#artwork .aw-amb--cover.is-night .aw-amb__next, body#artwork .aw-amb--cover.is-night .aw-amb__times {
  display: none;
}

/* --- clock-led: the clock large in the middle, the track small beneath it ---------------- */
body#artwork .aw-amb--clock {
  --amb-veil-0: rgba(6, 8, 10, .62);
  --amb-veil-1: rgba(6, 8, 10, .70);
  --amb-veil-2: rgba(6, 8, 10, .78);
  --amb-bg-opacity: .62;
  --amb-bg-sat: 1.4;
}
body#artwork .aw-amb--clock .aw-amb__stage {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 3.4vh, 40px);
  padding-top: clamp(96px, 34vh, 380px);
}
body#artwork .aw-amb--clock .aw-amb__clock {
  top: auto;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  top: 50%;
  margin-top: calc(-30vh - clamp(20px, 3.4vh, 40px) / 2 - 7vh);
  font-size: clamp(120px, 30vh, 320px);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
body#artwork .aw-amb--clock .aw-amb__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 30vh 0 0;
}
body#artwork .aw-amb--clock .aw-amb__cover {
  width: 16vh;
  height: 16vh;
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.8);
}
body#artwork .aw-amb--clock .aw-amb__text {
  gap: 0.8vh;
}
body#artwork .aw-amb--clock .aw-amb__title {
  font-size: clamp(22px, 4.7vh, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  -webkit-line-clamp: 2;
}
body#artwork .aw-amb--clock .aw-amb__artist {
  font-size: clamp(15px, 2.8vh, 28px);
  font-weight: 400;
  color: var(--amb-ink-2);
  margin-top: 0;
}
body#artwork .aw-amb--clock .aw-amb__album, body#artwork .aw-amb--clock .aw-amb__row, body#artwork .aw-amb--clock .aw-amb__time--block, body#artwork .aw-amb--clock .aw-amb__name--corner, body#artwork .aw-amb--clock .aw-amb__tag {
  display: none;
}
body#artwork .aw-amb--clock .aw-amb__line {
  display: block;
  margin-top: 0.4vh;
  color: var(--amb-ink-3);
}

:root[data-aw-theme=light] body#artwork .aw-amb--clock, html.aw-is-light body#artwork .aw-amb--clock {
  --amb-veil-0: rgba(250, 248, 245, .78);
  --amb-veil-1: rgba(250, 248, 245, .86);
  --amb-veil-2: rgba(250, 248, 245, .92);
  --amb-bg-opacity: .34;
}

/* --- full-bleed: the cover as it is; the text on a fixed dark gradient, in both themes ------ */
body#artwork .aw-amb--bleed {
  --amb-ink: #fff;
  --amb-ink-2: #f2f3f5;
  --amb-ink-3: #f2f3f5;
}
body#artwork .aw-amb--bleed .aw-amb__bg-img {
  inset: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  filter: none;
  opacity: 1;
}
body#artwork .aw-amb--bleed .aw-amb__veil {
  top: auto;
  height: 60%;
  background: linear-gradient(180deg, rgba(6, 8, 10, 0) 0%, rgba(6, 8, 10, 0.72) 55%, rgba(6, 8, 10, 0.94) 100%);
}
body#artwork .aw-amb--bleed .aw-amb__stage {
  align-items: flex-end;
  padding: 0 clamp(40px, 5.5vw, 110px) clamp(40px, 8.7vh, 94px);
}
body#artwork .aw-amb--bleed .aw-amb__cover, body#artwork .aw-amb--bleed .aw-amb__album, body#artwork .aw-amb--bleed .aw-amb__row, body#artwork .aw-amb--bleed .aw-amb__time--block, body#artwork .aw-amb--bleed .aw-amb__name--corner, body#artwork .aw-amb--bleed .aw-amb__tag {
  display: none;
}
body#artwork .aw-amb--bleed .aw-amb__title {
  font-size: clamp(30px, 8.7vh, 100px);
}
body#artwork .aw-amb--bleed .aw-amb__artist {
  font-size: clamp(18px, 3.7vh, 40px);
  margin-top: 1.6vh;
}
body#artwork .aw-amb--bleed .aw-amb__line {
  display: block;
  color: var(--amb-ink);
  margin-top: 2.4vh;
}
body#artwork .aw-amb--bleed .aw-amb__clock {
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7);
  font-size: clamp(64px, 10.7vh, 120px);
  top: clamp(26px, 5vh, 60px);
  right: clamp(36px, 4vw, 80px);
}
body#artwork .aw-amb--bleed .aw-amb__seek {
  background: rgba(255, 255, 255, 0.2);
}
body#artwork .aw-amb--bleed .aw-amb__seek-fill {
  background: #fff;
}
body#artwork .aw-amb--bleed {
  /* the seek bar inset above the bottom edge with the times at its ends, as on the cover-led
     layout; the text block ends above it, and its mono line no longer carries the time */
  --amb-x: clamp(28px, 5.5vw, 110px);
}
body#artwork .aw-amb--bleed .aw-amb__stage {
  padding-bottom: clamp(80px, 15vh, 170px);
}
body#artwork .aw-amb--bleed .aw-amb__line-time {
  display: none;
}
body#artwork .aw-amb--bleed .aw-amb__seek {
  left: var(--amb-x);
  right: var(--amb-x);
  bottom: clamp(40px, 7.6vh, 84px);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  animation: aw-amb-drift 240s ease-in-out infinite alternate;
}
body#artwork .aw-amb--bleed .aw-amb__times {
  display: flex;
  position: absolute;
  left: var(--amb-x);
  right: var(--amb-x);
  bottom: clamp(16px, 3.6vh, 40px);
  justify-content: space-between;
  font-size: clamp(11px, 1.7vh, 17px);
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
  animation: aw-amb-drift 240s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  body#artwork .aw-amb--bleed .aw-amb__seek, body#artwork .aw-amb--bleed .aw-amb__times {
    animation: none;
  }
}
body#artwork .aw-amb--bleed.is-night .aw-amb__times {
  display: none;
}

/* --- the seek hairline: flush to the bottom edge, outside the drift ---------------------- */
body#artwork .aw-amb__seek {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--amb-track);
} /* 4px: 2px was lost at three metres */
body#artwork .aw-amb__seek-fill {
  height: 100%;
  background: var(--amb-ink);
  transition: width 1s linear;
}

/* --- a track change: the cover and the text cross-fade instead of snapping -------------- */
body#artwork .aw-amb__cover, body#artwork .aw-amb__text {
  transition: opacity 0.25s ease;
}

body#artwork .aw-amb.is-swapping .aw-amb__cover, body#artwork .aw-amb.is-swapping .aw-amb__text {
  opacity: 0;
}

/* the sleep timer's tag, bottom right (5e) */
body#artwork .aw-amb__sleep {
  position: absolute;
  right: clamp(36px, 5vw, 96px);
  bottom: clamp(26px, 5.6vh, 62px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: clamp(32px, 4.6vh, 44px);
  padding: 0 13px;
  border-radius: 999px;
  background: var(--amb-pill-fill);
  border: 1px solid var(--amb-pill-line);
}
body#artwork .aw-amb__sleep .material-symbols-rounded {
  font-size: clamp(17px, 2.2vh, 22px);
  color: var(--amb-ink-3);
}
body#artwork .aw-amb__sleep .mono {
  font-size: clamp(11px, 1.3vh, 14px);
  letter-spacing: 0.14em;
  color: var(--amb-ink);
}

body#artwork .aw-amb.is-night .aw-amb__sleep {
  display: none;
}
/* The phone (portrait, ≤700px): the rail goes, the mini player shrinks to one row, Now Playing
   stacks the cover over the text with tiles under it and a transport bar along the bottom. The
   theme's rules, one to one; the notch and the home indicator pad the bars, never the art. */
@media (max-width: 700px) and (orientation: portrait) {
  :root {
    --rail-w: 0px;
    --sa-t: env(safe-area-inset-top, 0px);
    --sa-b: env(safe-area-inset-bottom, 0px);
    --mini-h: calc(80px + var(--sa-b));
    --pad-screen: 20px;
    --pad-top: calc(14px + var(--sa-t));
    --phone-top: calc(22px + var(--sa-t));
  }
  html, body#artwork {
    background: var(--ground);
  }
  body#artwork {
    background-color: var(--aw-band, var(--ground)) !important;
    background-image: none !important;
  }
  /* the page's top edge in the mini player's colour: solid over the safe area, fading into the art.
     Currently inert: the frame's clearfix makes this pseudo a zero-width table, so it never
     paints — status-bar tinting is handled by the `theme-color` meta tag instead (palette.ts). */
  body#artwork #layout-container::before {
    content: "";
    display: table;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(env(safe-area-inset-top, 0px) + 52px);
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--aw-band, var(--ground)) 0, var(--aw-band, var(--ground)) calc(env(safe-area-inset-top, 0px) + 8px), transparent 100%);
  }
  /* the document itself never scrolls: the screens scroll inside, so Safari keeps its bars still.
     Neither vh unit is right for both browsing modes on iOS: a regular Safari TAB needs `dvh`
     (its address bar shows/hides, and static `vh` — sized for the chrome-hidden case — then
     overshoots and clips content, like the play button, behind the visible bottom bar). A
     STANDALONE app (Add to Home Screen) has no such chrome, and there `dvh` is the one that's
     wrong instead — confirmed on-device that it reports a taller-than-visible height there,
     leaving a dead strip of background below fixed-position UI (the mini player, among others).
     `display-mode: standalone` is the standard way to tell the two apart and give each its own
     correct unit, rather than fixing one browsing mode by breaking the other. */
  html, body#artwork {
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }
  body#artwork #layout-container {
    height: 100dvh;
  }
}
@media (max-width: 700px) and (orientation: portrait) and (display-mode: standalone) {
  html, body#artwork {
    height: 100vh;
  }
  body#artwork #layout-container {
    height: 100vh;
  }
}
@media (max-width: 700px) and (orientation: portrait) {
  body#artwork #main-menu {
    display: none;
  }
  body#artwork #contentWrapper {
    margin-left: 0;
    width: 100%;
  }
}
@media (max-width: 700px) and (orientation: portrait) {
  /* --- mini player: 80px, cover 52 r5, title 14/600, artist 12, rates mono 9; play 44 · next 26 · speaker 24 --- */
  body#artwork #footer-content {
    left: 0;
    height: calc(80px + var(--sa-b));
    padding: 0 16px var(--sa-b);
    background: var(--bar-fill);
    -webkit-backdrop-filter: blur(40px) saturate(1.15);
    backdrop-filter: blur(40px) saturate(1.15);
    border-top-color: var(--fill-09);
  }
  body#artwork #footer-content .artwork-mini {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto;
    column-gap: 12px;
    align-content: center;
  }
  body#artwork #footer-content .mini-identity {
    grid-column: 1;
    grid-row: 1;
  }
  body#artwork #footer-content .mini-transport {
    grid-column: 2;
    grid-row: 1;
  }
  body#artwork #footer-content .mini-right {
    grid-column: 3;
    grid-row: 1;
    gap: 14px;
  }
  body#artwork #footer-content .mini-queue, body#artwork #footer-content .mini-seek, body#artwork #footer-content .mini-volume,
  body#artwork #footer-content .mini-transport .repeat-button, body#artwork #footer-content .mini-transport .player-action-shuffle, body#artwork #footer-content .mini-transport #prev-button {
    display: none;
  }
  body#artwork #footer-content .mini-transport #playerButtons {
    gap: 14px;
  }
  body#artwork #footer-content .mini-transport .playPause {
    width: 44px;
    height: 44px;
  }
  body#artwork #footer-content .mini-transport .playPause .material-symbols-rounded {
    font-size: 26px;
  }
  body#artwork #footer-content .mini-transport .btn-link .material-symbols-rounded {
    font-size: 26px;
  }
  body#artwork #footer-content .mini-zone {
    padding: 0;
    height: auto;
    background: transparent;
    border: 0;
  }
  body#artwork #footer-content .mini-zone .material-symbols-rounded {
    font-size: 24px;
    color: var(--ink-3);
  }
  body#artwork #footer-content .mini-zone .mini-zone-name {
    display: none;
  }
  body#artwork #footer-content #trackInfo-compact {
    grid-template-columns: 52px 1fr;
    column-gap: 12px;
    --mini-rows: 18px 16px 15px;
    --mini-line-gap: 2px;
    height: auto;
    min-height: 52px;
  }
  body#artwork #footer-content .trackInfo-album-art-wrapper {
    width: 52px;
    height: 52px;
  }
  body#artwork #footer-content img.album-art {
    width: 52px;
    height: 52px;
    border-radius: 5px;
  }
  body#artwork #footer-content #trackInfo-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
  }
  body#artwork #footer-content #trackInfo-artist-album {
    display: block;
    font-size: 12px;
    line-height: 1.3;
    color: var(--ink-55);
  }
  body#artwork #footer-content .mini-identity .track-info-rates {
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
  } /* outranks the badge colour, as the theme's did */
  /* --- Now Playing --- */
  body#artwork #content.playback {
    overflow-y: auto;
  }
  body#artwork #np {
    height: auto;
    min-height: 100%;
    overflow: visible;
    padding: var(--phone-top) 20px 0;
    display: flex;
    flex-direction: column;
  }
  body#artwork #np #np-topbar {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 0;
    min-height: 44px;
  }
  body#artwork #np .np-menu-btn {
    display: grid;
    place-items: center;
    height: 44px;
    width: 32px;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--ink-2);
    cursor: pointer;
  }
  body#artwork #np .np-menu-btn .material-symbols-rounded {
    font-size: 26px;
  }
  body#artwork #np .np-topbar-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 0;
  }
  body#artwork #np .np-zone {
    flex: 1;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--ink-25);
  }
  body#artwork #np .np-zone .np-zone-out {
    display: none;
  }
  body#artwork #np .np-sleep-tag {
    display: none;
  }
  body#artwork #np .np-chevron {
    width: auto;
    height: auto;
    background: transparent;
    color: var(--ink-2);
  }
  body#artwork #np .np-chevron .material-symbols-rounded {
    font-size: 24px;
  }
  body#artwork #np #np-badge-slot {
    display: none;
  }
  /* container-type: size (desktop, np.scss) needs a definite height from `flex: 1 1 0` in the
     desktop flex column; phone sets `flex: none` instead and sizes #np-cover from the viewport
     directly (no cqh/cqw below), so the container context must be turned back off here — left
     on, it collapses #np-hero to 0 height, and every sibling after it (.np-m-actions) renders
     where the hero's box should be, on top of the cover instead of below the whole hero block */
  body#artwork #np #np-hero {
    flex: none;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    gap: 0;
    container-type: normal;
  }
  body#artwork #np #np-cover {
    height: auto;
    width: min(100% - 32px, 100vh - 450px - var(--sa-t) - var(--sa-b));
    max-width: none;
    border-radius: 11px;
  }
  body#artwork #np #np-cover img {
    border-radius: 11px;
    box-shadow: 0 34px 66px -22px var(--shadow-deep);
  }
  body#artwork #np #np-meta {
    padding: 0;
    width: 100%;
    display: block;
    text-align: center;
    margin-top: 26px;
  }
  body#artwork #np .np-title + .np-byline .np-artist, body#artwork #np .np-title + .np-byline .np-album {
    margin-top: 9px;
  }
  body#artwork #np .np-eyebrow, body#artwork #np .np-signalpath {
    display: none;
  }
  body#artwork #np .np-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
  }
  body#artwork #np .np-artist {
    display: inline;
    font-size: 15px;
    color: var(--ink-25);
    margin: 0;
  }
  body#artwork #np .np-album {
    display: inline;
    font-size: 15px;
    color: var(--ink-25);
    margin: 0;
  }
  body#artwork #np .np-album::before {
    content: " · ";
  }
  body#artwork #np .np-artist:empty + .np-album::before {
    content: none;
  }
  body#artwork #np #np-chip-slot {
    margin-top: 11px;
  }
  body#artwork #np .np-quality {
    gap: 9px;
    justify-content: center;
  }
  body#artwork #np .np-chip {
    height: 30px;
    padding: 0 11px;
    border-radius: 15px;
    background: var(--fill-12);
    border: 1px solid var(--fill-14);
    gap: 5px;
  }
  body#artwork #np .np-chip .np-chip-num {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink);
  }
  body#artwork #np .np-chip .np-chip-unit {
    font-size: 10px;
  }
  body#artwork #np .np-chip .np-chip-num--rate {
    margin-left: 2px;
  }
  body#artwork #np .np-format {
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--ink-45);
  }
  /* the phone chip's own background/border beat the desktop quality rules on specificity (two ids vs one) — restate them here, by source */
  body#artwork #np .np-chip.aw-q--hires {
    background: var(--q-hires-wash);
    border-color: var(--q-hires-line);
  }
  body#artwork #np .np-chip.aw-q--hires .np-chip-num, body#artwork #np .np-chip.aw-q--hires .np-chip-unit {
    color: var(--q-hires-ink);
  }
  body#artwork #np .np-chip.aw-q--dsd {
    background: var(--q-dsd-wash);
    border-color: var(--q-dsd-line);
  }
  body#artwork #np .np-chip.aw-q--dsd .np-chip-num, body#artwork #np .np-chip.aw-q--dsd .np-chip-unit {
    color: var(--q-dsd-ink);
  }
  body#artwork #np .np-chip.aw-q--lossless {
    background: var(--q-lossless-wash);
    border-color: var(--q-lossless-line);
  }
  body#artwork #np .np-chip.aw-q--lossless .np-chip-num {
    color: var(--q-lossless-num);
  }
  body#artwork #np .np-chip.aw-q--lossless .np-chip-unit {
    color: var(--q-lossless-unit);
  }
  body#artwork #np .np-chip.aw-q--lossy {
    background: var(--q-lossy-wash);
    border-color: var(--q-lossy-line);
  }
  body#artwork #np .np-chip.aw-q--lossy .np-chip-num, body#artwork #np .np-chip.aw-q--lossy .np-chip-unit, body#artwork #np .np-chip.aw-q--lossy .np-chip-val {
    color: var(--q-lossy-ink);
  }
  body#artwork #np .np-chip.aw-q--radio {
    background: transparent;
    border: 1px dashed var(--q-radio-line);
  }
  body#artwork #np .np-chip.aw-q--radio .np-chip-num, body#artwork #np .np-chip.aw-q--radio .np-chip-unit, body#artwork #np .np-chip.aw-q--radio .np-chip-val {
    color: var(--q-radio-ink);
  }
  body#artwork #np .np-m-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
  }
  body#artwork #np .np-m-tile {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    padding: 0;
    margin: 0;
    background: var(--fill-07);
    border: 1px solid var(--fill-11);
    color: var(--ink-3);
    cursor: pointer;
    box-shadow: none;
  }
  body#artwork #np .np-m-tile .material-symbols-rounded {
    font-size: 24px;
  }
  body#artwork #np .np-m-tile.active {
    color: var(--ink);
    background: var(--fill-16);
  }
  body#artwork #np .np-m-tile:disabled {
    opacity: 0.35;
  }
  body#artwork #np #np-footer {
    margin-top: auto;
    padding: 24px 0 14px;
  }
  body#artwork #np #np-seek {
    margin-bottom: 0;
  }
  body#artwork #np #np-seek .artwork-seek__hit {
    width: 100%;
    height: 56px;
  }
  body#artwork #np #np-seek .seek-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  }
  body#artwork #np #np-seek .seek-handle {
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15), 0 0 16px rgba(255, 255, 255, 0.42), 0 2px 7px var(--shadow-soft);
  }
  body#artwork #np #np-seek .artwork-seek {
    grid-template-columns: 1fr auto;
    grid-template-areas: "track track" "elapsed remaining";
    row-gap: 2px;
  }
  body#artwork #np #np-seek .seek-time {
    font-size: 11px;
  }
  body#artwork #np #np-seek .seek-elapsed {
    color: var(--ink);
  }
  body#artwork #np #np-seek .seek-remaining {
    justify-self: end;
  }
  body#artwork #np #np-seek .seek-duration {
    display: none;
  }
  body#artwork #np #np-footer-row {
    display: none;
  }
  body#artwork #np .np-m-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(88px + var(--sa-b));
    margin: 0 -20px;
    padding: 0 26px var(--sa-b);
    flex: none;
    background: var(--bar-fill);
    -webkit-backdrop-filter: blur(40px) saturate(1.15);
    backdrop-filter: blur(40px) saturate(1.15);
    border-top: 1px solid var(--fill-09);
  }
  body#artwork #np .np-m-bar__btn {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--ink-3);
    display: grid;
    place-items: center;
    cursor: pointer;
  }
  body#artwork #np .np-m-bar__btn .material-symbols-rounded {
    font-size: 27px;
  }
  body#artwork #np .np-m-bar__btn--skip {
    color: var(--ink);
  }
  body#artwork #np .np-m-bar__btn--skip .material-symbols-rounded {
    font-size: 34px;
  }
  body#artwork #np .np-m-bar__btn--skip:disabled, body#artwork #np .np-m-bar__play:disabled {
    opacity: 0.35;
    cursor: default;
  } /* an outside source drives the player */
  body#artwork #np .np-m-bar__play {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    border: 0;
    background: var(--ink);
    color: var(--on-ink);
    display: grid;
    place-items: center;
    cursor: pointer;
  }
  body#artwork #np .np-m-bar__play .material-symbols-rounded {
    font-size: 36px;
  }
  body#artwork #content.playback {
    padding-bottom: 0;
  }
  body#artwork #np .np-seg, body#artwork #np .np-library {
    display: none;
  }
  body#artwork #np .np-m-tile--lyrics:disabled {
    opacity: 0.35;
  }
  /* --- the words on the phone (6b): a panel that rises over what plays; its handle drags it away --- */
  body#artwork #np .np-lyrics-host {
    display: none;
  }
  body#artwork #np .np-lsheet-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--scrim-page);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  body#artwork #np .np-lsheet {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: calc(var(--phone-top) + 52px);
    z-index: 2;
    border-radius: 20px 20px 0 0;
    padding: 26px 26px 0;
    background: var(--panel-sheet);
    -webkit-backdrop-filter: blur(34px);
    backdrop-filter: blur(34px);
    border-top: 1px solid var(--fill-14);
    animation: aw-outputs-up 0.22s ease-out;
    will-change: transform;
    overflow: hidden;
  }
  body#artwork #np.np--lyrics {
    overflow: hidden;
  }
  body#artwork #np .np-meta--lyrics .np-byline {
    display: contents;
  }
  body#artwork #np .np-meta--lyrics .np-title {
    font-size: 24px;
    letter-spacing: -0.02em;
    line-height: 1.15;
  }
  body#artwork #np .np-lsheet__grab {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 20px 20px 0 0;
    background: transparent;
    cursor: pointer;
    touch-action: none;
  }
  body#artwork #np .np-lsheet__grab::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: var(--fill-30);
  }
  body#artwork #np .np-lsheet__head {
    margin-top: 12px;
    min-width: 0;
  }
  body#artwork #np .np-lsheet__title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body#artwork #np .np-lsheet__artist {
    font-size: 15px;
    color: var(--ink-2);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body#artwork #np .np-lsheet__body {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: calc(88px + var(--sa-b) + 140px);
  }
  body#artwork #np .np-lsheet .np-lyrics {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-top: 18px;
  }
  body#artwork #np .np-lsheet .np-lyrics__col--plain {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  body#artwork #np .np-lsheet .np-lyrics__col--synced {
    mask-image: linear-gradient(#000 0, #000 calc(100% - 46px), transparent 100%);
    -webkit-mask-image: linear-gradient(#000 0, #000 calc(100% - 46px), transparent 100%);
  }
  body#artwork #np .np-lsheet .np-lyrics__stack {
    gap: 12px;
  }
  body#artwork #np .np-lsheet .np-lyrics__line {
    font-size: 18px;
    gap: 12px;
  }
  body#artwork #np .np-lsheet .np-lyrics__line.is-now {
    font-size: 20px;
  }
  body#artwork #np .np-lsheet .np-lyrics__line .np-lyrics__mark {
    margin: 3px 0;
  }
  body#artwork #np .np-lsheet .np-lyrics__empty {
    font-size: 18px;
  }
  body#artwork #np .np-lsheet .np-lyrics__source {
    font-size: 10px;
    margin-top: 8px;
  }
  body#artwork #np.np--lyrics #np-footer, body#artwork #np.np--lyrics .np-m-bar {
    position: relative;
    z-index: 3;
  }
  body#artwork #np.np--lyrics #np-footer {
    margin: auto -20px 0;
    padding-left: 26px;
    padding-right: 26px;
    background: var(--panel-sheet);
  }
  /* --- the heads: the menu button next to Back, the search takes the rest of the row --- */
  body#artwork #browseTablesWrapper, body#artwork .aw-browse, body#artwork #artwork-home {
    --head-pad: var(--phone-top);
  }
  body#artwork .aw-head__row {
    flex-wrap: nowrap;
    gap: 12px;
  }
  body#artwork .aw-head__nav {
    min-width: 0;
    overflow: hidden;
    flex-shrink: 100;
  }
  body#artwork .aw-head__actions {
    min-width: 0;
  }
  body#artwork .aw-head .aw-menu-btn, body#artwork #artwork-home .aw-menu-btn {
    display: grid;
    place-items: center;
    height: 44px;
    width: 32px;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--ink-2);
    cursor: pointer;
  }
  body#artwork .aw-head .aw-menu-btn .material-symbols-rounded, body#artwork #artwork-home .aw-menu-btn .material-symbols-rounded {
    font-size: 24px;
  }
  body#artwork .aw-head__row {
    min-height: 44px;
    margin-top: 0;
  }
  body#artwork .aw-head--start .aw-head__row, body#artwork .aw-head--home .aw-head__row {
    gap: 12px;
    flex-wrap: nowrap;
  }
  body#artwork .aw-head--start .aw-head__actions, body#artwork .aw-head--home .aw-head__actions {
    flex: 1;
    min-width: 0;
  }
  /* --- Home --- */
  body#artwork #artwork-home {
    padding: 0 20px calc(var(--mini-h) + 20px);
    min-height: 100%;
  }
  body#artwork #artwork-home .aw-tab, body#artwork #artwork-home .aw-search-key {
    display: none;
  }
  body#artwork #artwork-home .home-pins-edit {
    display: none;
  }
  body#artwork #artwork-home .home-pin__more {
    opacity: 1;
    width: 28px;
    height: 28px;
  }
  body#artwork #artwork-home .aw-search {
    flex: 1;
    width: auto;
    margin-left: 0;
    height: 44px;
    border-radius: 22px;
    padding: 0 14px;
    gap: 9px;
    background: var(--fill-09);
    border: 1px solid var(--fill-12);
  }
  /* Continue: the label on a line of its own, then the cover with, beside it, what it is, whose, and Resume */
  body#artwork #artwork-home .home-eyebrow--row {
    display: block;
    margin-top: 24px;
    font-size: 11px;
    letter-spacing: 0.18em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body#artwork #artwork-home .home-hero-meta .home-eyebrow {
    display: none;
  }
  body#artwork #artwork-home .home-hero {
    margin-top: 14px;
    gap: 16px;
    align-items: center;
    flex-wrap: nowrap;
  }
  body#artwork #artwork-home .home-hero-cover {
    flex: none;
  }
  body#artwork #artwork-home .home-hero-cover img {
    width: 132px;
    height: 132px;
  } /* the Mobile mockup's: 132, title 20/1.12, Resume 38 high */
  body#artwork #artwork-home .home-hero-meta {
    padding-bottom: 0;
  }
  body#artwork #artwork-home .home-hero-title {
    margin-top: 0;
    font-size: 20px;
    letter-spacing: -0.02em;
    line-height: 1.12;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  /* the artist is after the button in the page: shown before it here */
  body#artwork #artwork-home .home-hero-actions {
    margin-top: 4px;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 12px;
  }
  body#artwork #artwork-home .home-hero-sub {
    font-size: 14px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body#artwork #artwork-home .home-resume {
    height: 38px;
    padding: 0 18px 0 13px;
    gap: 8px;
    font-size: 13px;
  }
  body#artwork #artwork-home .home-resume .material-symbols-rounded {
    font-size: 20px;
  }
  body#artwork #artwork-home .home-shelf {
    margin-top: 26px;
  }
  body#artwork #artwork-home .main__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
  }
  /* --- the queue: a full screen --- */
  body#artwork .aw-queue {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    background: var(--panel-sheet);
    transform: translateY(24px);
  }
  body#artwork .aw-queue.open {
    transform: none;
  }
  body#artwork .aw-queue.on-playback {
    bottom: 0;
  }
  body#artwork .aw-queue__head {
    padding: calc(28px + var(--sa-t)) 20px 0;
  }
  body#artwork .aw-queue__title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  body#artwork .aw-queue__sub {
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-45);
  }
  body#artwork .aw-queue__close {
    border: 0;
    width: auto;
    height: auto;
  }
  body#artwork .aw-queue__close .material-symbols-rounded {
    font-size: 26px;
  }
  body#artwork .aw-queue__chips {
    padding: 18px 20px 0;
    gap: 10px;
    flex-wrap: nowrap;
  }
  body#artwork .aw-queue__chip {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 14px;
    justify-content: center;
  }
  body#artwork .aw-queue__chip > span:last-child {
    display: none;
  }
  body#artwork .aw-queue__chip .material-symbols-rounded {
    font-size: 22px;
    color: var(--ink-25);
  }
  body#artwork .aw-queue__chip--danger .material-symbols-rounded {
    color: var(--err-soft);
  }
  body#artwork .aw-queue__sechead {
    padding: 22px 20px 0;
  }
  body#artwork .aw-queue__sechead > .mono {
    font-size: 10px;
    color: var(--ink-45);
  }
  body#artwork .aw-queue__sechead .aw-queue__hint {
    display: inline;
    font-size: 12px;
  }
  body#artwork .aw-queue__scroll {
    padding: 10px 20px calc(var(--mini-h) + 12px);
  }
  body#artwork .aw-queue__row {
    height: 64px;
    gap: 13px;
    padding: 0 12px;
    border-radius: 12px;
  }
  body#artwork .aw-queue__drag {
    font-size: 19px;
  }
  body#artwork .aw-queue__slot {
    width: 20px;
  }
  body#artwork .aw-queue__num {
    font-size: 12px;
    color: var(--ink-dim);
  }
  body#artwork .aw-queue__cover {
    width: 40px;
    height: 40px;
  }
  body#artwork .aw-queue__name {
    font-size: 14px;
  }
  body#artwork .aw-queue__meta {
    font-size: 12px;
    color: var(--ink-55);
  }
  body#artwork .aw-queue__time {
    font-size: 12px;
    color: var(--ink-55);
  }
  body#artwork .aw-queue__foot {
    display: none;
  }
}
/* ---- the library on the phone: the theme's rules, one to one ---- */
@media (max-width: 700px) and (orientation: portrait) {
  body#artwork #browseTablesWrapper, body#artwork .aw-browse, body#artwork #browse.browsing-artist #browseTablesWrapper {
    --head-pad: var(--phone-top);
  }
  body#artwork #browse.browsing-list #browseTablesWrapper, body#artwork #browse.browsing-artist #browseTablesWrapper, body#artwork #browse.browsing-playlist #browseTablesWrapper {
    padding-top: 0;
  }
  body#artwork .aw-head--album::after {
    content: "";
  }
  body#artwork .aw-head--album .aw-hblur {
    display: block;
  }
  body#artwork .aw-head .aw-crumbs {
    overflow: hidden;
  }
  body#artwork .aw-head .aw-crumbs a {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* the filter rests as a magnifier and slides open on a tap; it stays open while something is typed */
  body#artwork .aw-head .aw-filter {
    width: 44px;
    flex: none;
    padding: 0;
    gap: 0;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: width 0.26s cubic-bezier(0.4, 0, 0.2, 1), padding 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  }
  body#artwork .aw-head .aw-filter input {
    width: 0;
    flex: none;
    padding: 0;
    opacity: 0;
    transition: opacity 0.18s ease 0.04s;
  }
  body#artwork .aw-head .aw-filter:focus-within, body#artwork .aw-head .aw-filter.aw-filter--on {
    width: min(45vw, 300px);
    flex: 0 1 auto;
    min-width: 0;
    padding: 0 16px;
    gap: 11px;
    cursor: text;
  }
  body#artwork .aw-head .aw-filter:focus-within input, body#artwork .aw-head .aw-filter.aw-filter--on input {
    width: auto;
    flex: 1;
    opacity: 1;
  }
  /* --- Browse landing: hamburger + search, title + count, 3-column tiles --- */
  body#artwork .aw-head--home .aw-head__row {
    gap: 12px;
    flex-wrap: nowrap;
  }
  body#artwork .aw-browse .aw-tab, body#artwork .aw-browse .aw-search-key {
    display: none;
  }
  body#artwork .aw-browse .aw-menu-btn {
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--ink-2);
    cursor: pointer;
  }
  body#artwork .aw-browse .aw-menu-btn .material-symbols-rounded {
    font-size: 24px;
  }
  body#artwork .aw-browse .aw-search {
    flex: 1;
    width: auto;
    margin-left: 0;
    height: 44px;
    border-radius: 22px;
    padding: 0 14px;
    gap: 9px;
    background: var(--fill-09);
    border: 1px solid var(--fill-12);
  }
  body#artwork .aw-browse .aw-search input::placeholder {
    color: var(--ink-muted);
  }
  body#artwork .aw-browse .aw-browse-head {
    margin-top: 20px;
    align-items: baseline;
    gap: 12px;
  }
  body#artwork .aw-browse .aw-browse-title {
    font-size: 30px;
    letter-spacing: -0.025em;
  }
  body#artwork .aw-browse .aw-browse-stats {
    font-size: 11px;
    color: var(--ink-45);
  }
  body#artwork .aw-browse .aw-cards, body#artwork .aw-browse .aw-sources {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
  }
  body#artwork .aw-browse .aw-sources {
    margin-top: 16px;
  }
  body#artwork .aw-browse .aw-card, body#artwork .aw-browse .aw-source {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  body#artwork .aw-browse .aw-tile, body#artwork .aw-browse .aw-source > .material-symbols-rounded:first-child, body#artwork .aw-browse .aw-source > .aw-source-logo:first-child {
    width: auto;
    height: auto;
    aspect-ratio: 1;
    border-radius: 14px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--fill-06);
    border: 1px solid var(--fill-10);
    color: var(--ink-25);
    font-size: 34px;
  }
  /* the source's own square is the logo's box; the img inside is centred like a glyph */
  body#artwork .aw-browse .aw-source-logo__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 22px;
    box-sizing: border-box;
  }
  body#artwork .aw-browse .aw-source-logo__img--pad {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 22px;
    box-sizing: border-box;
    transform: scale(1.35);
  }
  body#artwork .aw-browse .aw-tile img, body#artwork .aw-browse .aw-tile--lines i {
    display: none;
  }
  body#artwork .aw-browse .aw-tile--mosaic, body#artwork .aw-browse .aw-tile--avatars, body#artwork .aw-browse .aw-tile--stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    place-items: center;
  }
  body#artwork .aw-browse .aw-tile .material-symbols-rounded {
    font-size: 34px;
    color: var(--ink-25);
  }
  body#artwork .aw-browse .aw-tile__glyph {
    display: block;
  }
  body#artwork .aw-browse .aw-card-body, body#artwork .aw-browse .aw-source-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }
  body#artwork .aw-browse .aw-card-title, body#artwork .aw-browse .aw-source-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body#artwork .aw-browse .aw-card-sub {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-55);
    margin: 0;
  }
  body#artwork .aw-browse .aw-card-meta, body#artwork .aw-browse .aw-card-chev, body#artwork .aw-browse .aw-source-chev {
    display: none;
  }
  body#artwork .aw-browse .aw-sources-head {
    margin-top: 22px;
  }
  /* --- Album page: 150px square cover beside the title, then compact rows --- */
  body#artwork #browse.browsing-album #browseTablesWrapper {
    padding: 0 20px calc(var(--mini-h) + 20px);
  }
  body#artwork .aw-albumhead {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
  }
  /* .aw-head is fixed (see head.scss); `+ *` catches whatever follows it — its own spacer when
     fixed, or the real next element on a layout that overrides it back to static */
  body#artwork .aw-head--album + * {
    margin-top: 18px;
  }
  body#artwork .aw-head--album .aw-head__row {
    gap: 12px;
  }
  /* playlists and favourites share the album head on the phone (cover left, title right, the actions under) */
  /* the album/playlist head and its action bar are children of the scroller: both stick for the whole list */
  body#artwork .aw-headwrap {
    display: contents;
  }
  body#artwork .aw-albumhead .aw-albumhead__cover {
    grid-column: 1;
    grid-row: 2;
    width: 150px;
    max-width: none;
  }
  body#artwork .aw-albumhead .aw-albumhead__cover img {
    box-shadow: 0 16px 34px -16px var(--shadow-strong);
  }
  body#artwork .aw-albumhead .aw-albumhead__body {
    display: contents;
  }
  body#artwork .aw-albumhead .aw-albumhead__title, body#artwork .aw-albumhead .aw-albumhead__artist, body#artwork .aw-albumhead .aw-albumhead__meta {
    grid-column: 2;
    min-width: 0;
  }
  body#artwork .aw-albumhead .aw-albumhead__title {
    grid-row: 2;
    align-self: end;
  }
  body#artwork .aw-albumhead .aw-albumhead__artist {
    grid-row: 3;
  }
  body#artwork .aw-albumhead .aw-albumhead__meta {
    grid-row: 4;
    align-self: start;
  }
  body#artwork .aw-albumhead .aw-albumhead__cover {
    grid-row: 2/5;
    align-self: center;
  }
  body#artwork .aw-albumhead .aw-albumhead__eyebrow {
    display: none;
  }
  body#artwork .aw-albumhead .aw-albumhead__title {
    font-size: 22px !important;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  body#artwork .aw-albumhead .aw-albumhead__artist {
    font-size: 15px;
    margin-top: 6px;
    color: var(--ink-25);
  }
  body#artwork .aw-albumhead .aw-albumhead__meta {
    font-size: 10px;
    margin-top: 8px;
    letter-spacing: 0.08em;
    white-space: normal;
  }
  body#artwork .aw-albumhead .aw-albumhead__actions {
    grid-column: 1/-1;
    grid-row: 5;
    margin-top: 18px !important;
    gap: 10px;
  }
  body#artwork .aw-albumhead .aw-albumhead__actions .aw-btn {
    height: 44px;
    padding: 0 18px;
    font-size: 14px;
  }
  body#artwork .aw-albumhead .aw-albumhead__actions .aw-iconbtn {
    width: 44px;
    height: 44px;
  }
  body#artwork #browse.browsing-album #browseTablesWrapper > #browse-page {
    margin-top: 22px;
  }
  body#artwork #browse.browsing-album .music-item {
    grid-template-columns: 22px minmax(0, 1fr) auto auto auto;
    gap: 10px;
    padding: 12px 8px;
  }
  body#artwork #browse.browsing-album .music-item .item__number {
    font-size: 11px;
  }
  body#artwork #browse.browsing-album .music-item:not(.aw-playing) .item__number-dot {
    display: none !important;
  }
  /* an album page has no per-row artist to bridge */
  body#artwork #browse.browsing-album .music-item .item__info__separator {
    display: none;
  }
  body#artwork #browse.browsing-album .music-item .item__duration {
    width: auto;
  }
  body#artwork #browse.browsing-album .music-item .item__title {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body#artwork #browse.browsing-album .music-item .item__duration {
    font-size: 11px;
  }
  body#artwork #browse.browsing-album .music-item .item__favorite .item__favorite-heart .material-symbols-rounded::before {
    font-size: 18px;
  }
  body#artwork #browse.browsing-album .music-item .item__play {
    left: 8px;
    width: 22px;
  }
}
@media (max-width: 700px) and (orientation: portrait) {
  body#artwork #np .np-sleep-tag {
    display: none;
  }
  /* --- Zones: device cards (icon · name / now playing / volume / actions) --- */
  body#artwork .aw-zones {
    --head-pad: var(--phone-top);
    padding: 0 20px calc(var(--mini-h) + 20px);
  }
  body#artwork .aw-zones .aw-listhead {
    gap: 12px;
    margin: 14px 0 6px;
    align-items: center;
    min-height: 44px;
  }
  body#artwork .aw-zones .aw-listhead .aw-menu-btn {
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--ink-2);
    cursor: pointer;
    height: 44px;
    width: 32px;
  }
  body#artwork .aw-zones .aw-listhead .aw-menu-btn .material-symbols-rounded {
    font-size: 24px;
  }
  body#artwork .aw-zones .aw-listhead__title {
    font-size: 24px;
    letter-spacing: -0.02em;
  }
  body#artwork .aw-zones .aw-zones__cols {
    display: none;
  }
  body#artwork .aw-zones .aw-zone {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas: "icon name" "np np" "vol vol" "act act";
    gap: 12px 14px;
    padding: 14px;
    margin-top: 10px;
    border-top: 0;
    background: var(--fill-05);
    border: 1px solid var(--fill-08);
    border-radius: 14px;
  }
  body#artwork .aw-zones .aw-zone__icon {
    grid-area: icon;
  }
  body#artwork .aw-zones .aw-zone__name {
    grid-area: name;
  }
  body#artwork .aw-zones .aw-zone__np {
    grid-area: np;
  }
  body#artwork .aw-zones .aw-zone__vol {
    grid-area: vol;
  }
  body#artwork .aw-zones .aw-zone__act {
    grid-area: act;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  /* This browser: one line — icon · name and status · switch; the status may take two lines (it can carry "Listen here") */
  body#artwork .aw-zones .aw-zone.aw-zone--local {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "icon name act";
    align-items: center;
  }
  body#artwork .aw-zones .aw-zone--local .aw-zone__np, body#artwork .aw-zones .aw-zone--local .aw-zone__vol {
    display: none;
  }
  body#artwork .aw-zones .aw-zone--local .aw-zone__act {
    justify-content: flex-end;
  }
  body#artwork .aw-zones .aw-zone--local .aw-zone__sub {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
  }
}
@media (max-width: 700px) and (orientation: portrait) {
  body#artwork #contentWrapper.aw-settings-shell .aw-mnav {
    padding-top: var(--phone-top);
  }
  body#artwork #pluginWrapper {
    padding-top: var(--phone-top);
  }
  body#artwork #pluginWrapper .boxHeader .title h2 {
    min-height: 44px;
  }
  /* --- Settings: grouped list on the landing; plugin pages full width with their own back --- */
  body#artwork #contentWrapper.aw-settings-shell, body#artwork #contentWrapper.aw-settings-shell.aw-settings-shell--noside {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
  }
  body#artwork #contentWrapper.aw-settings-shell .aw-snav {
    display: none;
  }
  body#artwork #contentWrapper.aw-settings-shell > .aw-settings-side {
    display: none;
  }
  body#artwork #contentWrapper.aw-settings-shell .aw-settings-nav {
    display: block;
    min-height: 0;
    overflow-y: auto;
  }
  body#artwork #contentWrapper.aw-settings-shell .aw-mnav {
    display: block;
    padding: var(--phone-top) 20px calc(var(--mini-h) + 20px);
    color: var(--ink-1);
  }
  body#artwork #contentWrapper.aw-settings-shell .aw-mnav ~ * {
    display: none;
  }
  body#artwork #contentWrapper.aw-settings-shell.aw-state-volumio-settings > #content {
    display: none;
  }
  body#artwork .aw-mnav__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 0;
    min-height: 44px;
  }
  body#artwork .aw-mnav__back {
    height: 44px;
    width: 32px;
    align-self: flex-start;
    margin-top: 0;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--ink-2);
    display: grid;
    place-items: center;
    cursor: pointer;
  }
  body#artwork .aw-mnav__back .material-symbols-rounded {
    font-size: 24px;
  }
  body#artwork .aw-mnav__titles {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: normal;
  }
  body#artwork .aw-mnav__title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  body#artwork .aw-mnav__sub {
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-45);
  }
  body#artwork .aw-mnav__eyebrow {
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--ink-45);
    padding: 14px 2px 8px;
    line-height: normal;
  }
  body#artwork .aw-mnav__card {
    border-radius: 14px;
    overflow: hidden;
    background: var(--fill-05);
    border: 1px solid var(--fill-10);
  }
  body#artwork .aw-mnav__row {
    display: flex;
    align-items: center;
    gap: 13px;
    height: 52px;
    padding: 0 14px;
    border-bottom: 1px solid var(--fill-06);
    cursor: pointer;
    text-decoration: none;
    color: var(--ink-2);
  }
  body#artwork .aw-mnav__row:last-child {
    border-bottom: 0;
  }
  body#artwork .aw-mnav__row:hover {
    background: var(--fill-05);
    color: var(--ink);
  }
  body#artwork .aw-mnav__row > .material-symbols-rounded:first-child {
    font-size: 22px;
    color: var(--ink-3);
    width: 22px;
  }
  body#artwork .aw-mnav__label {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body#artwork .aw-mnav__value {
    font-size: 11px;
    color: var(--ink-55);
  }
  body#artwork .aw-mnav__chev {
    font-size: 20px;
    color: var(--ink-faint);
  }
  body#artwork #pluginWrapper {
    padding: var(--phone-top) 20px calc(var(--mini-h) + 20px);
  }
  body#artwork #pluginWrapper .boxHeader .title h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    letter-spacing: -0.02em;
    line-height: normal;
  }
  body#artwork #pluginWrapper .boxHeader .title h2 a.btn {
    display: grid;
    place-items: center;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--ink-2);
    flex: none;
    /* the glyph box as the frame draws it: a block of 24px text, the symbol inline in it */
  }
  body#artwork #pluginWrapper .boxHeader .title h2 a.btn .fa {
    display: block;
    width: auto;
    height: auto;
    font-size: 24px;
    line-height: 24px;
  }
  body#artwork #pluginWrapper .boxHeader .title h2 a.btn .fa .material-symbols-rounded {
    display: inline;
    width: auto;
    font-size: 24px;
    line-height: inherit;
    vertical-align: baseline;
  }
  body#artwork #pluginWrapper .pluginDescription {
    margin-top: 6px;
  }
}
/* --- Settings on the phone: the shared page head (hamburger + Settings; back + Settings / page inside) --- */
@media (max-width: 700px) and (orientation: portrait) {
  body#artwork .aw-head--settings {
    display: block;
  }
  body#artwork .aw-head--settings + * {
    margin-top: 26px;
  }
  body#artwork #contentWrapper.aw-settings-shell .aw-mnav {
    padding-top: 0;
    --head-pad: var(--phone-top);
  }
  body#artwork .aw-mnav__back {
    display: none;
  }
  body#artwork #pluginWrapper {
    padding-top: 0;
    --head-pad: var(--phone-top);
  }
  body#artwork #pluginWrapper .boxHeader .title h2 a.btn {
    display: none;
  }
  body#artwork .aw-state-volumio-plugin-manager #content .box {
    padding: 0 20px calc(var(--mini-h) + 20px);
    --head-pad: var(--phone-top);
  }
  body#artwork .aw-state-volumio-plugin-manager #content .boxHeader .title h2 a.btn {
    display: none;
  }
  /* the page title sits where the list pages put theirs: right under the head */
  body#artwork #pluginWrapper .boxHeader, body#artwork .aw-state-volumio-plugin-manager #content .boxHeader {
    margin-top: 0;
  }
}
/* --- playlists and favourites on the phone: the album head, with no artist line the title and the count share the cover's height --- */
@media (max-width: 700px) and (orientation: portrait) {
  body#artwork .aw-albumhead--playlist .aw-albumhead__meta {
    grid-row: 3;
    margin-top: 8px;
  }
  body#artwork .aw-albumhead--playlist .aw-albumhead__cover {
    grid-row: 2/4;
  }
}
/* --- MyVolumio profile on the phone: the shared head (hamburger · MyVolumio · Logout), the tile beside the name, e-mail and Edit under it --- */
@media (max-width: 700px) and (orientation: portrait) {
  html body#artwork .aw-state-myvolumio-profile .box {
    padding-top: 0;
    --head-pad: var(--phone-top);
  }
  body#artwork .aw-state-myvolumio-profile .box .boxHeader {
    display: none;
  }
  body#artwork .aw-state-myvolumio-profile .box #authLoginPlugin .panel-heading .btn-danger {
    display: none;
  }
  body#artwork .aw-state-myvolumio-profile .box .aw-head--settings + * {
    margin-top: 8px;
  }
  body#artwork .aw-head--settings .aw-crumbs__cur:first-child {
    max-width: none;
  } /* a lone title never ellipses */
  body#artwork .aw-myv-logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: 18px;
    background: transparent;
    border: 1px solid var(--fill-16);
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
  }
  body#artwork .aw-myv-logout .glyphicon {
    display: inline-block;
    line-height: 1;
  }
  body#artwork .aw-myv-logout .glyphicon .material-symbols-rounded {
    font-size: 16px;
    display: block;
  }
  body#artwork .aw-state-myvolumio-profile .box .my-profile {
    grid-template-columns: 120px 1fr !important;
    column-gap: 16px;
    row-gap: 20px;
    align-items: center;
    margin-top: 8px;
  }
  body#artwork .aw-state-myvolumio-profile .box .my-profile > :first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  /* the text column and the plan card become grid items themselves: name beside the tile, the card under both */
  body#artwork .aw-state-myvolumio-profile .box .my-profile > :last-child, body#artwork .aw-state-myvolumio-profile .box .my-profile > div > .row {
    display: contents;
  }
  body#artwork .aw-state-myvolumio-profile .box .my-profile > div > .row .user-data {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0;
    padding-top: 0;
  }
  body#artwork .aw-state-myvolumio-profile .box .my-profile > div > .row .plans-table {
    grid-column: 1/-1 !important;
    grid-row: 2 !important;
  }
  body#artwork .aw-state-myvolumio-profile .box .user-data .user-title {
    font-size: 24px;
    line-height: 1.1;
    display: block;
  }
  body#artwork .aw-state-myvolumio-profile .box .user-data .user-username {
    margin-top: 2px;
    font-size: 13px;
  }
  body#artwork .aw-state-myvolumio-profile .box .user-data .user-details {
    margin-top: 6px;
    font-size: 14px;
  }
  body#artwork .aw-state-myvolumio-profile .box .user-data .aw-myv-edit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border-radius: 19px;
    margin-top: 12px;
    background: var(--ink);
    color: var(--on-ink);
    border: 0;
    font-size: 14px;
    font-weight: 700;
    box-shadow: none;
    float: none;
  }
  body#artwork .aw-state-myvolumio-profile .box .user-data .aw-myv-edit .fa {
    display: inline-block;
    line-height: 1;
  }
  body#artwork .aw-state-myvolumio-profile .box .user-data .aw-myv-edit .fa .material-symbols-rounded {
    font-size: 16px;
    display: block;
    color: var(--on-ink);
  }
}
/* --- MyVolumio pages on the phone: the shared head with the crumbs replaces the floating hamburger and the back pills --- */
@media (max-width: 700px) and (orientation: portrait) {
  html body#artwork [class*=aw-state-myvolumio-] .box {
    padding-top: 0;
    --head-pad: var(--phone-top);
  }
  body#artwork [class*=aw-state-myvolumio-] .box > .boxHeader {
    display: none;
  }
  body#artwork [class*=aw-state-myvolumio-] .box .aw-head--settings + * {
    margin-top: 8px;
  }
  body#artwork [class*=aw-state-myvolumio-] .box my-volumio-back-button {
    display: none !important;
  } /* the theme shows the pill with a heavier selector */
  body#artwork .aw-state-myvolumio-plans .box .aw-plans {
    margin-top: 12px;
  }
}