/* Mycelium Pro / Unified Layout v1.
 * One semantic layout contract shared by all views. Values come from tokens.css.
 * Loaded after the historic Pro stylesheet; avoid adding per-release spacing rules.
 * Works in current Chromium/Firefox/Safari without CSS preprocessors or JS frameworks.
 */

.pro-native-v102 {
  background: var(--color-bg-app);
  color: var(--ui-foreground);
  font-family: var(--font-family-ui);
  line-height: var(--line-height-body);
  -webkit-text-size-adjust: 100%;
}
.pro-native-v102 *, .pro-native-v102 *::before, .pro-native-v102 *::after {
  box-sizing: border-box;
}
.pro-native-v102 :where(button, input, select, textarea) { font: inherit; }
.pro-native-v102 :where(button, [role="button"], summary) { -webkit-tap-highlight-color: transparent; }
.pro-native-v102 :where(button, input, select, textarea, a, summary):focus-visible {
  outline: 2px solid var(--ui-focus-ring);
  outline-offset: 3px;
}
.pro-native-v102 :where(button, input, select, textarea):disabled { cursor: not-allowed; }
.pro-native-v102 :where([hidden]) { display: none !important; }

/* App shell, rail and common content-width contract. */
.v102-shell {
  min-height: 100dvh;
  grid-template-columns: var(--ui-sidebar-width) minmax(0, 1fr);
  padding-bottom: calc(var(--ui-player-reserve) + env(safe-area-inset-bottom, 0px));
}
.v102-shell .side-rail {
  height: calc(100dvh - var(--ui-player-reserve));
  padding: var(--space-lg) var(--space-sm) var(--space-md);
  background: var(--color-surface-sidebar);
  border-color: var(--ui-line);
}
.v102-shell .rail-brand { padding: var(--space-xs) var(--space-xs) var(--space-lg); }
.v102-shell .rail-nav { gap: var(--space-2xs); }
.v102-shell .nav {
  padding: var(--space-sm) var(--space-md);
  gap: var(--space-sm);
  min-height: var(--ui-control-min-height);
  border-radius: var(--radius-medium);
}
.v102-shell .nav.active { background: var(--color-state-hover); }
.v102-shell .rail-status { padding: var(--space-sm); }
.v102-main {
  padding: 0 var(--ui-page-gutter) var(--ui-section-gap);
  max-width: calc(var(--ui-page-max) + 2 * var(--ui-page-gutter));
  margin-inline: auto;
  width: 100%;
  min-width: 0;
}
.v102-main .app-topbar {
  margin-inline: calc(-1 * var(--ui-page-gutter));
  padding: var(--space-md) var(--ui-page-gutter);
  background: var(--color-topbar);
  border-color: var(--ui-line);
}
.v102-main .topbar-inner { gap: var(--ui-column-gap); min-width: 0; }
.v102-main .topbar-search { min-width: 0; }
.v102-intro {
  padding: var(--ui-section-gap) 0 var(--space-lg);
  border-color: var(--ui-line);
}
.v102-intro h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: var(--line-height-snug); }
.v102-intro p { max-width: 72ch; line-height: var(--line-height-relaxed); }

/* Identical section spacing across Home, Library, Discover, Search, Playlists,
 * Queue, Smart, Favorites, Radio, History, Offline, Devices, Server, Settings. */
.v102-main :where(.v102-toolbar, .v133-album-detail-toolbar, .v134-radio-actions,
                  .v134-radio-saved, .v134-radio-meta, .v136-genre-tools,
                  .v135-album-playlist-actions, .v115-index-actions,
                  .v121-settings-actions, .v128-root-actions) {
  gap: var(--ui-column-gap);
}
.v102-main .v102-toolbar {
  margin: var(--space-lg) 0;
  row-gap: var(--space-sm);
}
.v102-main .v102-toolbar nav { gap: var(--space-xs); flex-wrap: wrap; }
.v102-main :where(.v102-results, .v-demo-albums, .v134-radio-grid) {
  gap: var(--ui-column-gap);
}
.v102-main .v102-results {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 196px), 1fr));
  margin: var(--space-lg) 0 var(--space-md);
}
.v102-main .v102-card {
  padding: var(--ui-card-padding);
  gap: var(--space-xs);
  border-radius: var(--radius-medium);
  background: var(--ui-surface);
  border-color: var(--ui-line);
  min-width: 0;
}
.v102-main .v-demo-albums {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
}
.v102-main .v-demo-albums .v102-card { padding: var(--ui-card-padding); }
.v102-main :where(.v-demo-showcase, .v-demo-section-heading) { margin-block: var(--space-lg); }
.v102-main .v102-pagination { gap: var(--space-md); flex-wrap: wrap; }
.v102-main .v102-message { margin: var(--space-md) 0 var(--space-lg); }

/* Panel primitives: one shared inset, no per-feature random 14/17/19/23/25px. */
.v102-main :where(.v134-radio-studio, .v128-roots, .v120-session-note,
                  .v119-offline-intro, .v118-smart-tools, .v115-index-panel,
                  .v121-settings form) {
  padding: var(--ui-panel-padding);
  border-radius: var(--radius-large);
  background: var(--ui-surface-raised);
  border-color: var(--ui-line);
  min-width: 0;
}
.v102-main :where(.v134-radio-studio, .v128-roots, .v121-settings form) {
  gap: var(--space-md);
}
.v102-main .v121-settings { max-width: var(--layout-reading-max); margin-block: var(--space-lg) var(--ui-section-gap); }
.v102-main .v134-radio-studio { max-width: var(--content-max-readable); margin-block: var(--space-lg); }
.v102-main .v134-radio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v102-main .v136-genre-panel { padding: var(--space-lg) 0; gap: var(--space-sm); border-color: var(--ui-line); }
.v102-main .v136-genre-tools { gap: var(--space-md); }
.v102-main .v136-genre-cloud, .v102-main .v136-genre-selected { gap: var(--space-xs); }
.v102-main .v136-genre-chip { padding: var(--space-xs) var(--space-sm); min-height: var(--ui-control-min-height); }
.v102-main .v128-root-list { gap: var(--space-xs); }
.v102-main .v128-root-item { padding: var(--space-sm); }
.v102-main .v133-album-detail-toolbar { padding: var(--space-lg) 0 var(--space-md); }
.v102-main :where(.v133-album-controls, .v135-album-playlist-actions) { gap: var(--space-xs); }
.v102-main .v102-results.v133-album-detail-list .v133-album-track-row {
  padding: var(--space-sm);
  column-gap: var(--space-sm);
  row-gap: var(--space-2xs);
}
.v102-main .v102-results.v133-album-library-list .v133-album-list-card { padding: var(--space-sm); gap: var(--space-xs) var(--space-md); }
.v102-main .v102-results.v133-album-detail-compact .v133-album-track-row { padding: var(--space-xs) var(--space-sm); }
.v102-main :where(.v102-queue-actions, .v102-queue-header-actions, .v130-playlist-row > .v102-actions) { gap: var(--space-xs); }

/* One button/input shape for every section; native checkbox, range, and radios keep
 * their working semantics and are not forced into text-field geometry. */
.pro-native-v102 :where(.v102-toolbar, .v102-results, .v102-pagination,
                       .v134-radio-studio, .v128-roots, .v121-settings,
                       .v135-playlist-picker, .v133-album-detail-toolbar,
                       .v115-index-panel, .v118-smart-tools) :where(button, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select) {
  min-height: var(--ui-control-min-height);
  border-radius: var(--ui-input-radius);
}
.pro-native-v102 :where(.v102-toolbar, .v134-radio-studio, .v128-roots,
                       .v121-settings, .v135-playlist-picker, .v118-smart-tools)
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select) {
  min-width: 0;
  max-width: 100%;
  padding: var(--space-xs) var(--space-sm);
}
.pro-native-v102 :where(button, a, input, select, textarea) { touch-action: manipulation; }

/* Global player and overlays share the spacing rhythm; respect notch and home bar. */
.v102-player {
  gap: var(--ui-column-gap);
  padding: var(--space-sm) var(--ui-page-gutter) calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
  background: var(--color-player-dock);
  border-color: var(--ui-line);
}
.v102-player .v102-controls { min-width: 0; }
.v102-login { padding: var(--ui-page-gutter); }
.v102-login-form { padding: var(--ui-panel-padding); gap: var(--space-md); }
.v135-playlist-picker {
  padding: var(--ui-panel-padding);
  border-radius: var(--radius-large);
  border-color: var(--ui-line);
  max-height: calc(100dvh - var(--space-lg) * 2);
}
.v135-picker-heading, .v135-picker-buttons { gap: var(--space-md); }
.v135-picker-options { gap: var(--space-md); padding-bottom: var(--space-sm); }
.v135-playlist-picker :where(input[type="search"], input:not([type]), select) { padding: var(--space-sm); }
.v103-dsp-panel { padding: var(--ui-panel-padding); border-radius: var(--radius-large); }
.v104-outputs { padding-top: var(--space-sm); margin-top: var(--space-md); }

/* Native range controls: make timeline and volume legible on all platforms.
 * Only the shared player is styled; radio/filter sliders keep native behavior. */
body.pro-native-v102 .v102-player input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  accent-color: var(--color-text-primary);
}
body.pro-native-v102 .v102-player input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface-4);
}
body.pro-native-v102 .v102-player input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 2px solid var(--color-player-dock);
  border-radius: var(--radius-circle);
  background: var(--color-text-primary);
}
body.pro-native-v102 .v102-player input[type="range"]::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface-4);
}
body.pro-native-v102 .v102-player input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-text-primary);
}
body.pro-native-v102 .v102-player input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-player-dock);
  border-radius: var(--radius-circle);
  background: var(--color-text-primary);
}

/* Laptop and tablet: one predictable content gutter, usable controls. */
@media (max-width: 1100px) {
  :root { --ui-page-gutter: var(--space-lg); --ui-panel-padding: var(--space-md); }
  .v102-main .v134-radio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  :root { --ui-page-gutter: var(--space-md); --ui-player-reserve: 160px; --ui-control-min-height: 44px; }
  .v102-shell { grid-template-columns: minmax(0, 1fr); }
  .v102-shell .side-rail {
    position: relative;
    height: auto;
    min-height: 0;
    padding: var(--space-sm) var(--ui-page-gutter);
  }
  .v102-shell .rail-brand { padding: var(--space-2xs) 0 var(--space-sm); }
  .v102-shell .rail-nav { gap: var(--space-xs); scrollbar-width: thin; }
  .v102-shell .nav { padding: var(--space-xs) var(--space-sm); }
  .v102-main { padding: 0 var(--ui-page-gutter) var(--space-lg); }
  .v102-main .app-topbar { margin-inline: calc(-1 * var(--ui-page-gutter)); padding: var(--space-sm) var(--ui-page-gutter); }
  .v102-player { grid-template-columns: minmax(0,1fr); gap: var(--space-xs); }
  .v102-main .v102-toolbar { margin-block: var(--space-md); }
  .v102-intro { padding: var(--space-lg) 0 var(--space-md); }
  .v102-main .v102-results { grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); }
}
@media (max-width: 600px) {
  :root { --ui-page-gutter: var(--space-sm); --ui-panel-padding: var(--space-md); --ui-section-gap: var(--space-lg); --ui-player-reserve: 186px; }
  .v102-main .topbar-inner { flex-wrap: wrap; gap: var(--space-xs); }
  .v102-main .topbar-search { flex: 1 1 100%; max-width: none; }
  .v102-main .v134-radio-grid { grid-template-columns: minmax(0, 1fr); }
  .v102-main .v102-results { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-sm); }
  .v102-main .v-demo-albums { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-sm); }
  .v102-main :where(.v134-radio-studio, .v128-roots, .v120-session-note,
                    .v119-offline-intro, .v118-smart-tools, .v115-index-panel,
                    .v121-settings form) { padding: var(--ui-panel-padding); }
  .v102-main .v133-album-detail-toolbar { align-items: flex-start; gap: var(--space-sm); }
  .v102-main .v133-album-controls { margin-left: 0; }
  .v135-playlist-picker { max-width: calc(100vw - var(--space-md) * 2); padding: var(--space-md); }
  .v103-dsp-panel { right: var(--space-xs); width: calc(100vw - var(--space-md)); }
}
@media (max-width: 380px) {
  .v102-main .v102-results, .v102-main .v-demo-albums { grid-template-columns: minmax(0,1fr); }
}
@media (pointer: coarse) {
  .pro-native-v102 :where(.v102-toolbar, .v102-results, .v102-pagination,
                         .v134-radio-studio, .v136-genre-panel, .v128-roots,
                         .v121-settings, .v135-playlist-picker, .v102-player) button {
    min-height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pro-native-v102 *, .pro-native-v102 *::before, .pro-native-v102 *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Earlier global system.css has mobile shell rules with high specificity.
   Scope the responsive override to this app rather than relying on load order. */
@media (max-width: 850px) {
  body.pro-native-v102 #workspace.v102-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0,1fr);
  }
  body.pro-native-v102 #workspace.v102-shell .side-rail {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    height: auto;
    padding: var(--space-sm) var(--ui-page-gutter);
  }
  body.pro-native-v102 #workspace.v102-shell .rail-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 0 var(--space-sm);
  }
  body.pro-native-v102 #workspace.v102-shell .rail-nav {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    margin: 0;
    padding: 0 0 var(--space-xs);
    gap: var(--space-xs);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  body.pro-native-v102 #workspace.v102-shell .rail-nav .nav {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    min-height: 44px;
    padding: var(--space-xs) var(--space-sm);
  }
  body.pro-native-v102 #workspace.v102-shell .v102-main {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
  }
}

/* Compact handset transport: two clear rows; keep playback control reachable. */
@media (max-width: 600px) {
  body.pro-native-v102 .v102-player {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "now eq" "transport transport";
    gap: var(--space-xs);
    min-height: 0;
  }
  body.pro-native-v102 .v102-player .v102-now { grid-area: now; }
  body.pro-native-v102 .v102-player .v102-controls {
    grid-area: transport;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-areas: "take previous play next" "seek seek seek time";
    align-items: center;
    column-gap: var(--space-xs);
    row-gap: var(--space-sm);
    width: 100%;
    min-width: 0;
  }
  body.pro-native-v102 .v102-player #takeControl { grid-area: take; }
  body.pro-native-v102 .v102-player #previousTrack { grid-area: previous; }
  body.pro-native-v102 .v102-player #playPause { grid-area: play; }
  body.pro-native-v102 .v102-player #nextTrack { grid-area: next; }
  body.pro-native-v102 .v102-player #playTime { grid-area: time; font-variant-numeric: tabular-nums; justify-self: end; }
  body.pro-native-v102 .v102-player #seek { grid-area: seek; width: 100%; min-width: 0; }
  body.pro-native-v102 .v102-player .v103-eq-toggle { grid-area: eq; }
  body.pro-native-v102 .v102-player .v102-volume,
  body.pro-native-v102 .v102-player #ownerStatus { display: none; }
  body.pro-native-v102 .v102-player .v102-controls button {
    padding-inline: var(--space-xs);
    white-space: nowrap;
    min-width: 0;
  }
  body.pro-native-v102 .v102-player .v102-controls #takeControl {
    font-size: 11px;
    padding-inline: var(--space-xs);
  }
}

/* Brand and search are permanent controls, not layout-dependent decoration. */
body.pro-native-v102 .v102-shell .brand-logo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 15px;
  white-space: nowrap;
  letter-spacing: .02em;
}
@media (max-width: 600px) {
  body.pro-native-v102 .v102-shell .rail-brand .eyebrow { display: none; }
  body.pro-native-v102 .v102-main .topbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
  }
  body.pro-native-v102 .v102-main .topbar-title { flex: 1 1 auto; }
  body.pro-native-v102 .v102-main .topbar-search {
    display: block;
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  body.pro-native-v102 .v102-main #globalSearch {
    display: block;
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding-inline: var(--space-sm);
    background: var(--color-surface-2);
    border: 1px solid var(--ui-line);
    border-radius: var(--radius-medium);
    color: var(--ui-foreground);
  }
}
@media (max-width: 600px) {
  body.pro-native-v102 .v102-main .app-topbar .topbar-inner {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-rows: auto auto;
    gap: var(--space-xs);
  }
  body.pro-native-v102 .v102-main .app-topbar .topbar-title { grid-column: 1; grid-row: 1; }
  body.pro-native-v102 .v102-main .app-topbar #logoutBtn { grid-column: 2; grid-row: 1; }
  body.pro-native-v102 .v102-main .app-topbar .topbar-search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}
@media (max-width: 600px) {
  body.pro-native-v102 .v102-main header.app-topbar.topbar {
    height: auto;
    min-height: 0;
    padding-block: var(--space-xs);
  }
  body.pro-native-v102 .v102-main header.app-topbar .topbar-inner {
    height: auto;
    min-height: 0;
  }
}
@media (max-width: 600px) {
  body.pro-native-v102 main#mainContent > header.app-topbar.topbar {
    height: auto;
    min-height: 0;
    padding: var(--space-xs) var(--ui-page-gutter);
  }
}

/* Calm micro-feedback: artwork stays the focal point, chrome stays neutral. */
.v102-main .v102-card { transition: background-color var(--motion-standard) var(--ease-standard), border-color var(--motion-standard) var(--ease-standard); }
.v102-main .v102-card:hover, .v102-main .v102-card:focus-within {
  background: var(--color-surface-2);
  border-color: var(--color-divider-strong);
}
.v102-main .v102-card :where(h3, p) { overflow-wrap: anywhere; }

/* Legacy system.css uses a high-specificity :not() chain to force 32px.
 * This one scoped !important restores real touch targets without modifying other apps. */
@media (pointer: coarse) {
  body.pro-native-v102 .v102-player .v102-controls button,
  body.pro-native-v102 .v102-player .v103-eq-toggle {
    min-height: 44px !important;
  }
  body.pro-native-v102 .v102-player #seek,
  body.pro-native-v102 .v102-player #volume {
    height: 44px;
  }
}


/* One accessible, discoverable shortcut surface across desktop and phone. */
body.pro-native-v102 .v102-main .v102-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
  min-width: 0;
}
body.pro-native-v102 #shortcutHelpToggle {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-medium);
  background: var(--ui-surface);
  color: var(--ui-foreground);
  cursor: pointer;
}
body.pro-native-v102 #shortcutHelpToggle:hover {background: var(--color-state-hover);}
body.pro-native-v102 .v102-shortcut-help {
  position: fixed;
  width: min(480px, calc(100vw - 2 * var(--space-md)));
  max-height: min(80dvh, 600px);
  overflow-y: auto;
  background: var(--color-surface-2);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-large);
  color: var(--ui-foreground);
  padding: var(--space-lg);
  box-shadow: 0 18px 60px #0009;
}
body.pro-native-v102 .v102-shortcut-help::backdrop {background: #000a;}
body.pro-native-v102 .v102-shortcut-help header {display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);}
body.pro-native-v102 .v102-shortcut-help h2 {margin:0;font-size:20px;}
body.pro-native-v102 .v102-shortcut-help button {
  min-height: 44px;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-medium);
  background: var(--ui-surface);
  color: var(--ui-foreground);
  cursor: pointer;
}
body.pro-native-v102 .v102-shortcut-help dl {display:grid;gap:var(--space-sm);margin:var(--space-lg) 0;}
body.pro-native-v102 .v102-shortcut-help dl > div {display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:var(--space-md);align-items:center;}
body.pro-native-v102 .v102-shortcut-help dt,
body.pro-native-v102 .v102-shortcut-help dd {margin:0;}
body.pro-native-v102 .v102-shortcut-help dd,
body.pro-native-v102 .v102-shortcut-help p {font-size:13px;color:var(--color-text-secondary);line-height:1.5;}
body.pro-native-v102 .v102-shortcut-help kbd {font:inherit;font-size:12px;border:1px solid var(--ui-line);border-radius:4px;padding:3px 7px;white-space:nowrap;}
@media (max-width:600px) {
  body.pro-native-v102 .v102-main .app-topbar .v102-top-actions {grid-column:2;grid-row:1;}
  body.pro-native-v102 .v102-main .app-topbar #logoutBtn {grid-column:auto;grid-row:auto;min-width:0;}
  body.pro-native-v102 .v102-shortcut-help dl > div {grid-template-columns:1fr;gap:var(--space-xs);}
}

/* HOME_V2: responsive album density with a working clickable featured cover. */
.v102-main #homeAlbumGrid,
.v102-main #homeHistoryGrid,
.v102-main #homeFavoritesGrid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
}
.v-demo-feature-art-button {
  display:grid;place-items:center;width:100%;height:100%;margin:0;padding:0;
  border:0;background:transparent;color:inherit;cursor:pointer;min-width:0;
}
.v-demo-feature-art-button:focus-visible {outline:2px solid var(--demo-gold, #d7b19b);outline-offset:3px;}
.v-demo-feature-art-button img,
.v-demo-feature-art-button .v-demo-art-placeholder {display:block;max-width:100%;}
.v-demo-feature-status {min-height:0;margin:10px 0 0;color:#e4ada9;font-size:12px;}
.v-demo-feature-status:empty {display:none;}
@media (max-width:600px){
  .v102-main #homeAlbumGrid,.v102-main #homeHistoryGrid,.v102-main #homeFavoritesGrid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:380px){
  .v102-main #homeAlbumGrid,.v102-main #homeHistoryGrid,.v102-main #homeFavoritesGrid {
    grid-template-columns:minmax(0,1fr);
  }
}

/* HOME_V2: prioritize listening/navigation, not eight equal-weight action buttons. */
.v102-main #homeShowcase .v-home-card .v102-actions,
.v102-main #results .v-home-card .v102-actions {align-items:center;}
.v102-main .v-home-card .v-home-more {position:relative;min-width:0;}
.v102-main .v-home-card .v-home-more > summary {
  list-style:none;cursor:pointer;border:1px solid var(--ui-line, #484848);
  padding:6px 9px;border-radius:5px;color:#c9c5c6;font-size:11px;
}
.v102-main .v-home-card .v-home-more > summary::-webkit-details-marker {display:none;}
.v102-main .v-home-card .v-home-more[open] {width:100%;}
.v102-main .v-home-card .v-home-more[open] > summary {margin-bottom:8px;}
.v102-main .v-home-card .v-home-more[open] > button {margin:3px 4px 3px 0;}
.v102-main .v-home-card .v-home-more > summary:focus-visible {outline:2px solid var(--demo-gold, #d7b19b);outline-offset:3px;}
@media (min-width:361px) and (max-width:600px) {
 .v-demo-feature {grid-template-columns:minmax(108px,36%) minmax(0,1fr);min-height:200px;}
 .v-demo-feature-art {min-height:200px;padding:10px 6px;}
 .v-demo-feature-art img,.v-demo-feature-art .v-demo-art-placeholder {width:100%;}
 .v-demo-feature-info {padding:12px 12px 12px 4px;}
 .v-demo-feature-info h2 {font-size:clamp(19px,5vw,27px);margin:7px 0;}
 .v-demo-feature-info p {font-size:12px;}
 .v-demo-feature-actions {margin-top:12px;gap:5px;}
 .v-demo-feature-actions button {padding:7px 9px;font-size:11px;}
}

/* MF-029: read-only server diagnostics. Reuses existing card spacing tokens. */
.v102-results .v-p0-diagnostic[data-status="error"] { border-inline-start: 3px solid #dc7676; }
.v102-results .v-p0-diagnostic[data-status="warning"] { border-inline-start: 3px solid #b7a071; }
.v102-results .v-p0-diagnostic[data-status="ok"] { border-inline-start: 3px solid #75998a; }
.v102-results .v-p0-diagnostic small { color: var(--ui-muted, #a5a5aa); overflow-wrap: anywhere; }

.v102-main .v-p0-diagnostic-head { flex-wrap: wrap; justify-content: flex-start; }
.v102-main .v-p0-diagnostic-head h2 { flex-basis: 100%; }