:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  color: #e8edf5;
  background: #0e1116;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(49, 89, 149, .18), transparent 34rem),
    #0e1116;
  color: #e8edf5;
}

a {
  color: inherit;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: wait;
  opacity: .55;
}

.topbar {
  min-height: 72px;
  padding: 14px max(22px, calc((100vw - 1200px) / 2));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid #262c36;
  background: rgba(14, 17, 22, .86);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  font-weight: 720;
  letter-spacing: -.02em;
}

.version {
  color: #7f8998;
  font-size: .78rem;
  margin-top: 3px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.top-actions form {
  margin: 0;
}

.user-pill {
  border: 1px solid #303846;
  background: #171c24;
  padding: 8px 11px;
  border-radius: 999px;
  color: #cfd7e5;
  font-size: .88rem;
}

.page {
  width: min(1200px, calc(100% - 44px));
  margin: 0 auto;
  padding: 38px 0 70px;
}

.hero {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 26px;
}

h1,
h2 {
  margin: 0;
  letter-spacing: -.035em;
}

h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
}

h2 {
  font-size: 1.18rem;
}

.eyebrow {
  color: #7aa8ef;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  font-weight: 750;
  margin-bottom: 8px;
}

.muted {
  color: #939dac;
  line-height: 1.55;
  margin-bottom: 0;
}

.card {
  background: rgba(23, 28, 36, .94);
  border: 1px solid #29313d;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .14);
}

.login-shell {
  min-height: calc(100vh - 180px);
  display: grid;
  place-items: center;
}

.login-card {
  width: min(440px, 100%);
  padding: 32px;
}

.stack {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

label {
  display: grid;
  gap: 7px;
  color: #bdc6d4;
  font-size: .9rem;
}

input,
select {
  width: 100%;
  border: 1px solid #343e4d;
  background: #11161d;
  color: #eef3fb;
  border-radius: 11px;
  min-height: 43px;
  padding: 9px 11px;
  outline: none;
}

input:focus,
select:focus {
  border-color: #5d8ed8;
  box-shadow: 0 0 0 3px rgba(93, 142, 216, .14);
}

.primary-button,
.secondary-button,
.ghost-button,
.danger-button {
  border-radius: 11px;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 680;
}

.primary-button {
  background: #3774ce;
  color: white;
}

.primary-button:hover {
  background: #4380da;
}

.secondary-button {
  background: #1d2734;
  border-color: #334258;
  color: #dce8f8;
}

.ghost-button {
  background: transparent;
  border-color: #303846;
  color: #c7d0dc;
}

.danger-button {
  background: #2b1b1f;
  border-color: #583039;
  color: #f1bbc4;
}

.compact {
  min-height: 38px;
  padding: 7px 11px;
  font-size: .88rem;
}

.alert {
  margin: 0 0 18px;
  border: 1px solid #694048;
  background: #2a191d;
  color: #f3c4cb;
  padding: 13px 15px;
  border-radius: 12px;
}

.alert.success {
  border-color: #315a45;
  background: #17251e;
  color: #bde6cd;
}

.hidden {
  display: none !important;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.metric {
  display: grid;
  gap: 6px;
}

.metric strong {
  font-size: 2rem;
  letter-spacing: -.04em;
}

.metric-label {
  color: #8e99a8;
  font-size: .86rem;
}

.status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: .78rem;
  font-weight: 700;
  margin-top: 13px;
}

.status.success {
  background: #183125;
  color: #aee3c3;
}

.status.warning {
  background: #342b18;
  color: #ead39a;
}

.status.neutral {
  background: #242b35;
  color: #b8c2cf;
}

.details {
  margin: 16px 0 0;
}

.details dt {
  color: #7f8a99;
  font-size: .78rem;
}

.details dd {
  margin: 4px 0 0;
  word-break: break-all;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.mapping-list {
  display: grid;
}

.mapping-row {
  display: grid;
  grid-template-columns: minmax(170px, .75fr) minmax(460px, 1.75fr);
  gap: 22px;
  align-items: center;
  padding: 17px 0;
  border-top: 1px solid #29313d;
}

.mapping-row:first-child {
  border-top: 0;
}

.identity-name {
  font-weight: 720;
  font-size: 1.02rem;
}

.identity-meta {
  color: #7f8998;
  font-size: .82rem;
  margin-top: 4px;
}

.mapping-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
  gap: 9px;
  align-items: center;
}

.mapping-controls .status {
  margin-top: 0;
  white-space: nowrap;
}

.loading,
.empty-state {
  padding: 22px 0;
  color: #8994a3;
}

@media (max-width: 900px) {
  .mapping-row {
    grid-template-columns: 1fr;
  }

  .mapping-controls {
    grid-template-columns: 1fr 1fr;
  }

  .mapping-controls select {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .page {
    width: min(100% - 28px, 1200px);
    padding-top: 26px;
  }

  .topbar {
    padding-inline: 14px;
  }

  .user-pill {
    display: none;
  }

  .hero {
    align-items: start;
    flex-direction: column;
  }

  .grid,
  .summary-grid {
    grid-template-columns: 1fr;
  }

  .mapping-controls {
    grid-template-columns: 1fr;
  }

  .mapping-controls select {
    grid-column: auto;
  }

  .top-actions {
    gap: 5px;
  }

  .ghost-button {
    padding-inline: 9px;
  }
}


.connection-card {
  margin-bottom: 18px;
}

.connection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.connection-panel {
  display: grid;
  gap: 13px;
  padding: 18px;
  border: 1px solid #2b3440;
  background: #12171e;
  border-radius: 14px;
}

.connection-panel .eyebrow {
  margin-bottom: 0;
}

.connection-status,
.token-state {
  min-height: 38px;
  display: flex;
  align-items: center;
  border-radius: 10px;
  padding: 9px 11px;
  border: 1px solid #323b48;
  background: #171d25;
  color: #a9b3c0;
  font-size: .84rem;
  overflow-wrap: anywhere;
}

.connection-status.success,
.token-state.success {
  border-color: #315a45;
  background: #17251e;
  color: #bde6cd;
}

.connection-status.error {
  border-color: #694048;
  background: #2a191d;
  color: #f3c4cb;
}

.token-state.warning {
  border-color: #5b4a26;
  background: #2a2418;
  color: #ead39a;
}

.settings-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.small {
  font-size: .82rem;
}

@media (max-width: 760px) {
  .connection-grid {
    grid-template-columns: 1fr;
  }

  .settings-actions {
    align-items: stretch;
    flex-direction: column;
  }
}


.music-search-card {
  margin-bottom: 18px;
}

.search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.artist-results {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.artist-result {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 11px;
  border: 1px solid #2b3440;
  background: #12171e;
  border-radius: 14px;
}

.artist-cover,
.album-cover {
  object-fit: cover;
  background: #1d2530;
  border: 1px solid #303a48;
}

.artist-cover {
  width: 58px;
  height: 58px;
  border-radius: 50%;
}

.album-cover {
  width: 52px;
  height: 52px;
  border-radius: 9px;
}

.image-placeholder {
  display: grid;
  place-items: center;
  color: #778497;
  font-size: 1.3rem;
}

.artist-result-body,
.album-info,
.result-album > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.artist-selection-card {
  margin-bottom: 18px;
}

.artist-selection-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.album-groups {
  display: grid;
  gap: 14px;
}

.album-group {
  border: 1px solid #2b3440;
  border-radius: 14px;
  background: #12171e;
  overflow: hidden;
}

.album-group-heading {
  min-height: 52px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  background: #171d25;
}

details.album-group > summary {
  cursor: pointer;
  list-style: none;
}

details.album-group > summary::-webkit-details-marker {
  display: none;
}

details.album-group > summary::after {
  content: "▾";
  margin-left: auto;
  color: #7f8998;
  transition: transform .18s ease;
}

details.album-group[open] > summary::after {
  transform: rotate(180deg);
}

.group-toggle {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #e5ebf4;
}

.group-toggle input,
.album-row > input {
  width: 18px;
  height: 18px;
  min-height: auto;
}

.album-list {
  display: grid;
}

.album-row {
  display: grid;
  grid-template-columns: 20px 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  border-top: 1px solid #28303b;
  cursor: pointer;
}

.album-row:hover {
  background: #151b23;
}

.album-row:has(input:disabled) {
  cursor: default;
  opacity: .72;
}

.album-row .status {
  margin-top: 0;
  white-space: nowrap;
}

.add-bar {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #29313d;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.add-result {
  display: grid;
  gap: 13px;
  margin-top: 16px;
}

.result-summary {
  margin: 0;
  font-size: 1.05rem;
}

.result-albums {
  display: grid;
  border: 1px solid #29313d;
  border-radius: 13px;
  overflow: hidden;
}

.result-album {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid #29313d;
}

.result-album:first-child {
  border-top: 0;
}

.result-album .status {
  margin-top: 0;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .search-row {
    grid-template-columns: 1fr;
  }

  .artist-result {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .artist-cover {
    width: 48px;
    height: 48px;
  }

  .artist-result > button {
    grid-column: 1 / -1;
  }

  .artist-selection-head,
  .add-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .album-row {
    grid-template-columns: 20px 44px minmax(0, 1fr);
  }

  .album-cover {
    width: 44px;
    height: 44px;
  }

  .album-row .status {
    grid-column: 2 / -1;
  }
}


.subsection-divider {
  height: 1px;
  background: #2b3440;
  margin: 4px 0;
}

.library-awareness-info {
  margin: 0 0 14px;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid #323b48;
  background: #171d25;
  color: #abb6c4;
  font-size: .86rem;
  line-height: 1.45;
}

.library-awareness-info.success {
  border-color: #315a45;
  background: #17251e;
  color: #bde6cd;
}

.library-awareness-info.warning {
  border-color: #5b4a26;
  background: #2a2418;
  color: #ead39a;
}


/* Responsive album and discovery layout */
.album-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
}
.album-row {
  display: grid;
  grid-template-columns: 20px 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid #28303b;
  border-radius: 12px;
  background: #141a22;
}
.album-row:first-child,
.album-row { border-top: 1px solid #28303b; }
.album-row .album-cover { width: 64px; height: 64px; }
.album-row .status { grid-column: 2 / -1; justify-self: start; white-space: normal; margin-top: 0; }
.album-info strong { overflow-wrap: anywhere; }
.artist-inline-badges, .similar-artist-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.artist-inline-badges .status, .similar-artist-badges .status { margin-top: 0; }
.similar-artists-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid #29313d; }
.similar-artists-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.similar-artist-card { appearance: none; border: 1px solid #2b3440; background: #141a22; color: inherit; border-radius: 13px; padding: 10px; display: grid; gap: 8px; text-align: left; cursor: pointer; }
.similar-artist-card:hover { background: #19212b; border-color: #3b4758; }
.similar-artist-cover { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; background: #1d2530; }
.lidarr-admin-entry, .lidarr-settings-grid { margin-bottom: 18px; }
.button-link { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.snapshot-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.snapshot-stats > div { display: grid; gap: 5px; padding: 12px; border: 1px solid #29313d; border-radius: 11px; background: #141a22; }
.snapshot-toolbar { margin: 16px 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.snapshot-artist-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.snapshot-artist-card { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 9px 11px; align-items: start; padding: 11px; border: 1px solid #29313d; border-radius: 12px; background: #141a22; cursor: pointer; }
.snapshot-artist-card:hover { background: #18202a; }
.snapshot-artist-body { min-width: 0; display: grid; gap: 4px; }
.snapshot-artist-card > .status { grid-column: 2; justify-self: start; margin-top: 0; }
@media (max-width: 1180px) {
  .album-list, .snapshot-artist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .similar-artists-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .album-list, .snapshot-artist-grid { grid-template-columns: 1fr; }
  .album-row { grid-template-columns: 20px 56px minmax(0, 1fr); }
  .album-row .album-cover { width: 56px; height: 56px; }
  .similar-artists-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .snapshot-toolbar { align-items: stretch; flex-direction: column; }
}


.album-editions {
  grid-column: 1 / -1;
  border: 1px dashed #364150;
  border-radius: 11px;
  background: #11171e;
  overflow: hidden;
}

.album-editions > summary {
  cursor: pointer;
  padding: 10px 12px;
  color: #aeb9c7;
  font-size: .86rem;
  list-style: none;
}

.album-editions > summary::-webkit-details-marker {
  display: none;
}

.album-editions > summary::before {
  content: "＋";
  margin-right: 7px;
}

.album-editions[open] > summary::before {
  content: "−";
}

.album-edition-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 10px 10px;
}

.album-row-alternative {
  background: #10151c;
  border-style: dashed;
}

@media (max-width: 1180px) {
  .album-edition-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .album-edition-grid {
    grid-template-columns: 1fr;
  }
}


.setting-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}

.setting-toggle-row > span {
  display: grid;
  gap: 4px;
}

.setting-toggle-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-height: auto;
  flex: 0 0 auto;
}


.local-only-section {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #29313d;
}

.section-heading.compact {
  margin-bottom: 10px;
}

.artist-result-unavailable {
  cursor: default;
  opacity: .9;
}

.artist-result-unavailable:hover {
  background: #12171e;
}

.artist-result-unavailable .status {
  margin-top: 0;
  white-space: normal;
  text-align: center;
}

@media (max-width: 680px) {
  .artist-result-unavailable .status {
    grid-column: 1 / -1;
    justify-self: start;
  }
}


/* optional simplified user view.
   Presentation only; no catalog/matching/playback behavior changes. */
.simple-mode-button[aria-pressed="true"] {
  border-color: #5d8ed8;
  background: #182538;
  color: #e7f0ff;
}

body.simple-mode .simple-hide,
body.simple-mode .album-info .muted.small,
body.simple-mode .similar-artist-badges,
body.simple-mode .library-awareness-info.success,
body.simple-mode .album-editions,
body.simple-mode .result-technical {
  display: none !important;
}

body.simple-mode .music-search-card,
body.simple-mode .artist-selection-card,
body.simple-mode #addResultCard {
  padding: 28px;
}

body.simple-mode .search-row input {
  min-height: 54px;
  font-size: 1.08rem;
}

body.simple-mode .primary-button,
body.simple-mode .secondary-button,
body.simple-mode .ghost-button {
  min-height: 50px;
  padding: 11px 17px;
  font-size: 1rem;
}

body.simple-mode .artist-result {
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 16px;
  padding: 14px;
}

body.simple-mode .artist-cover {
  width: 68px;
  height: 68px;
}

body.simple-mode .artist-result-body strong,
body.simple-mode .album-info strong {
  font-size: 1.04rem;
}

body.simple-mode .album-list {
  gap: 13px;
  padding: 13px;
}

body.simple-mode .album-row {
  grid-template-columns: 24px 72px minmax(0, 1fr);
  gap: 13px;
  min-height: 98px;
  padding: 13px;
}

body.simple-mode .album-row .album-cover {
  width: 72px;
  height: 72px;
}

body.simple-mode .album-row input[type="checkbox"],
body.simple-mode .group-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

body.simple-mode .album-row .status {
  grid-column: 2 / -1;
  font-size: .83rem;
  padding: 7px 10px;
}

body.simple-mode #selectionCount {
  font-size: 1.05rem;
}

body.simple-mode .similar-artists-section .eyebrow {
  display: none;
}

body.simple-mode .similar-artist-card {
  padding: 12px;
  font-size: 1rem;
}

@media (max-width: 680px) {
  .simple-mode-button {
    width: 100%;
  }

  body.simple-mode .music-search-card,
  body.simple-mode .artist-selection-card,
  body.simple-mode #addResultCard {
    padding: 18px;
  }

  body.simple-mode .search-row {
    grid-template-columns: 1fr;
  }

  body.simple-mode .artist-result {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  body.simple-mode .artist-cover {
    width: 60px;
    height: 60px;
  }

  body.simple-mode .artist-result > .secondary-button,
  body.simple-mode .artist-result > .status {
    grid-column: 1 / -1;
    width: 100%;
  }

  body.simple-mode .album-row {
    grid-template-columns: 24px 60px minmax(0, 1fr);
  }

  body.simple-mode .album-row .album-cover {
    width: 60px;
    height: 60px;
  }
}


.library-admin-entry { margin-bottom: 18px; }
.library-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.library-manager-card { margin-bottom: 18px; }

.library-artist-list { display: grid; gap: 10px; margin-top: 18px; }

.library-artist {
  border: 1px solid #2b3440;
  border-radius: 13px;
  overflow: hidden;
  background: #12171e;
}

.library-artist-heading {
  min-height: 64px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  background: #171d25;
}

.library-artist-heading::-webkit-details-marker { display: none; }

.library-artist-identity,
.library-album-info {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.library-albums { display: grid; }

.library-album-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-top: 1px solid #29313d;
}

.activity-card { margin-top: 18px; }
.event-list { display: grid; gap: 8px; }

.event-row {
  display: grid;
  gap: 6px;
  border: 1px solid #29313d;
  border-radius: 11px;
  padding: 11px 13px;
  background: #12171e;
}

.event-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.event-top .status { margin-top: 0; }

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 7, 11, .78);
  backdrop-filter: blur(6px);
}

.confirm-dialog { width: min(500px, 100%); }

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

@media (max-width: 900px) {
  .library-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .library-summary { grid-template-columns: 1fr; }

  .library-artist-heading,
  .library-album-row {
    align-items: stretch;
    flex-direction: column;
  }

  .library-artist-heading .danger-button,
  .library-album-row .danger-button { width: 100%; }

  .confirm-actions { flex-direction: column-reverse; }
  .confirm-actions button { width: 100%; }
}


.admin-account-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.account-health-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.mapping-health-status {
  display: grid;
  gap: 5px;
  align-content: center;
  min-width: 160px;
}

.mapping-health-status .status {
  margin-top: 0;
}

.tiny {
  font-size: .72rem;
  overflow-wrap: anywhere;
}

@media (max-width: 1050px) {
  .admin-account-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mapping-controls {
    grid-template-columns: minmax(220px, 1fr) minmax(170px, auto) auto auto;
  }
}

@media (max-width: 680px) {
  .admin-account-summary {
    grid-template-columns: 1fr;
  }

  .account-health-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .account-health-actions .secondary-button {
    width: 100%;
  }

  .mapping-health-status {
    min-width: 0;
  }
}


/* smaller admin account controls without changing user UI */
.mapping-action-button {
  min-height: 31px;
  padding: 5px 9px;
  border-radius: 8px;
  font-size: .80rem;
  line-height: 1.1;
  white-space: nowrap;
}

.admin-toolbar-button {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: .84rem;
}

.mapping-controls {
  align-items: center;
}

.mapping-health-status .status {
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  padding-block: 5px;
}

@media (max-width: 680px) {
  .mapping-action-button {
    min-height: 34px;
    padding: 6px 10px;
  }

  .admin-toolbar-button {
    min-height: 36px;
  }
}


/* calmer admin action sizing */
.admin-card-action {
  align-self: center;
  min-height: 36px;
  height: auto;
  padding: 7px 12px;
  border-radius: 9px;
  font-size: .86rem;
  white-space: nowrap;
}

.admin-inline-action {
  min-height: 36px;
  height: auto;
  padding: 7px 12px;
  border-radius: 9px;
  font-size: .86rem;
}

/* Do not stretch card CTAs to the section/card height. */
.library-admin-entry .section-heading,
.lidarr-admin-entry .section-heading {
  align-items: center;
}

.library-admin-entry .admin-card-action,
.lidarr-admin-entry .admin-card-action {
  flex: 0 0 auto;
}

/* Keep the main save action visually primary. */
#saveSettingsButton {
  min-height: 42px;
  padding: 9px 14px;
  font-size: .92rem;
}

@media (max-width: 680px) {
  .admin-card-action,
  .admin-inline-action {
    min-height: 38px;
    width: 100%;
  }
}


/* compact activity category */
.event-category {
  width: fit-content;
  color: #86b6ff;
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .06em;
  text-transform: uppercase;
}


/* v0.9 playlist PoC */
.playlist-browser-card {
  margin-bottom: 18px;
}

.playlist-index-warning {
  margin: 0 0 16px;
  border: 1px solid #66532d;
  background: #282216;
  color: #ead7a5;
  border-radius: 12px;
  padding: 12px 14px;
  line-height: 1.45;
}

.playlist-grid {
  display: grid;
  gap: 10px;
}

.playlist-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 11px;
  border: 1px solid #2b3440;
  background: #12171e;
  border-radius: 13px;
}

.playlist-cover {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  background: #1b222c;
}

.playlist-card-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.playlist-card-body strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playlist-card-body .status {
  width: fit-content;
  margin-top: 2px;
}

.playlist-detail-card {
  margin-bottom: 18px;
}

.playlist-track-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.playlist-track-row {
  display: grid;
  grid-template-columns: 30px 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 10px;
  background: #12171e;
  border: 1px solid #252e39;
}

.playlist-track-position {
  color: #7f8998;
  text-align: center;
  font-size: .82rem;
}

.playlist-track-cover {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 8px;
  background: #1b222c;
}

.playlist-track-info {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.playlist-track-info strong,
.playlist-track-info span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .playlist-card {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .playlist-cover {
    width: 54px;
    height: 54px;
  }

  .playlist-card > button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .playlist-track-row {
    grid-template-columns: 24px 42px minmax(0, 1fr);
  }

  .playlist-track-cover {
    width: 42px;
    height: 42px;
  }
}


/* v0.9.0-alpha4: one consistent button size across the WebUI.
   Target: the normal "Suchen" action (~42px high). */
.primary-button,
.secondary-button,
.ghost-button,
.danger-button,
.compact,
.admin-card-action,
.admin-inline-action,
.admin-toolbar-button,
.mapping-action-button,
.simple-mode-button,
body.simple-mode .primary-button,
body.simple-mode .secondary-button,
body.simple-mode .ghost-button,
body.simple-mode .danger-button {
  min-height: 42px;
  height: auto;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: .92rem;
  line-height: 1.15;
  white-space: nowrap;
  width: auto;
  max-width: 100%;
}

/* Link-style buttons should size to their label just like real buttons. */
.button-link {
  width: auto;
  max-width: 100%;
  align-self: center;
}

/* Keep controls readable on narrow screens. Long labels may wrap rather than
   becoming clipped; the minimum target height remains 42px. */
@media (max-width: 680px) {
  .primary-button,
  .secondary-button,
  .ghost-button,
  .danger-button,
  .compact,
  .admin-card-action,
  .admin-inline-action,
  .admin-toolbar-button,
  .mapping-action-button,
  .simple-mode-button,
  body.simple-mode .primary-button,
  body.simple-mode .secondary-button,
  body.simple-mode .ghost-button,
  body.simple-mode .danger-button {
    min-height: 42px;
    padding: 9px 14px;
    white-space: normal;
    text-align: center;
  }

  /* Existing mobile full-width actions stay full width where the layout
     intentionally uses them. */
  .playlist-card > button,
  .account-health-actions .secondary-button,
  .library-artist-heading .danger-button,
  .library-album-row .danger-button,
  .confirm-actions button {
    width: 100%;
  }
}


/* v0.9.0-alpha5: prevent parent layouts from stretching buttons.
   Button dimensions remain based on the 42px "Suchen" reference. */

/* Headings such as "Meine Playlists" must vertically center their action
   instead of stretching it to the full text block height. */
.section-heading {
  align-items: center;
}

.section-heading > button,
.section-heading > .button-link,
.hero > button,
.hero > .button-link,
.artist-selection-head > button,
.artist-selection-head > .button-link {
  flex: 0 0 auto;
  align-self: center;
}

/* CSS Grid stretches children by default. Button-like controls should size
   to their contents unless a mobile rule explicitly asks for full width. */
.connection-panel > button,
.mapping-controls > button,
.search-row > button,
.playlist-card > button,
.result-album > button,
.artist-result > button,
.add-bar > button {
  justify-self: start;
  width: auto;
}

/* Admin connection buttons were the most visible remaining stretch case. */
.connection-panel .admin-inline-action {
  justify-self: start;
  width: auto;
}

/* Keep the settings footer naturally content-sized. */
.settings-actions > button {
  flex: 0 0 auto;
  width: auto;
}

/* The normal desktop playlist action must never inherit card height. */
.playlist-browser-card .section-heading > #loadPlaylistsButton {
  align-self: center;
  width: auto;
}

/* Same rule for top/admin toolbar actions. */
.admin-toolbar-button,
.admin-card-action,
.admin-inline-action,
.mapping-action-button {
  align-self: center;
  justify-self: start;
  width: auto;
}

/* On phones readability wins. Only layouts that intentionally stack actions
   may use the available width. */
@media (max-width: 680px) {
  .search-row > button,
  .playlist-card > button,
  .artist-result > button,
  .add-bar > button,
  .connection-panel > button,
  .settings-actions > button {
    justify-self: stretch;
    width: 100%;
  }

  .section-heading {
    align-items: flex-start;
  }

  .section-heading > button,
  .section-heading > .button-link {
    align-self: flex-start;
    width: auto;
  }
}


/* v0.9.0-alpha9: playlist privacy + auto-sync options */
.playlist-options {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #2b3440;
  border-radius: 13px;
  background: #12171e;
}

.playlist-options > label:not(.setting-toggle-row) {
  display: grid;
  gap: 7px;
}

.playlist-options-label {
  font-weight: 680;
}

.playlist-share-users {
  display: grid;
  gap: 9px;
}

.playlist-share-user-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.playlist-share-user {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid #323b48;
  border-radius: 10px;
  background: #171d25;
  cursor: pointer;
}

.playlist-share-user input {
  width: 18px;
  height: 18px;
  min-height: 0;
}

.playlist-sync-toggle {
  border-top: 1px solid #29313d;
  padding-top: 14px;
}

@media (max-width: 680px) {
  .playlist-share-user-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .playlist-share-user {
    width: 100%;
  }
}

/* Neutral public login: intentionally no product/backend identity. */
.public-auth-page,
.public-page {
  min-height: 100vh;
}
.public-page {
  display: grid;
  place-items: center;
  padding: 24px;
}
.public-login-shell {
  width: min(100%, 390px);
}
.public-login-card h1 {
  margin-top: 0;
  margin-bottom: 24px;
}
.public-login-card .stack {
  gap: 18px;
}

.media-results {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}
.media-result-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border, rgba(255,255,255,.12));
  border-radius: 14px;
}
.media-poster {
  width: 92px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 9px;
  background: rgba(127,127,127,.12);
}
.media-poster-placeholder {
  display: grid;
  place-items: center;
  font-size: 1.5rem;
}
.media-result-body h3 {
  margin: 2px 0 8px;
}
.media-overview {
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.media-result-actions {
  align-self: center;
}
.request-history {
  display: grid;
  gap: 10px;
}
.request-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.1));
}
.request-history-row:last-child { border-bottom: 0; }
@media (max-width: 720px) {
  .media-result-card {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .media-poster { width: 72px; }
  .media-result-actions { grid-column: 1 / -1; }
  .media-result-actions .primary-button { width: 100%; }
}

/* === HomefliX Portal Phase 1: visual layer only === */
:root { color-scheme:dark; --hf-text:#ebf2ff; --hf-muted:#a3b2c9; --hf-border:rgba(146,172,212,.16); }
body.hf-logged-in { background:radial-gradient(ellipse at 75% 5%,rgba(55,55,121,.21),transparent 45rem),#080f1d; color:var(--hf-text); }
.hf-logged-in .hf-sidebar {width:250px;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:20;background:linear-gradient(170deg,#0d192e,#091120 60%,#0b172c);border-right:1px solid #25364c;padding:29px 17px 17px;overflow-y:auto;}
.hf-brand{text-decoration:none;display:flex;align-items:center;gap:11px;padding:0 12px;color:#fff;}
.hf-brand-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;color:#fff;font-size:1.55rem;background:linear-gradient(135deg,#1c9fe0,#7564e8 75%,#b741d2);box-shadow:0 6px 28px #447bdf3b;}
.hf-brand strong{display:block;font-size:1.56rem;letter-spacing:-.065em;line-height:1.04}.hf-brand small{display:block;letter-spacing:.2em;font-size:.61rem;text-align:center;color:#becfe9;margin-top:6px;font-weight:800;}.hf-brand-x{background:linear-gradient(120deg,#6ce4ff 15%,#c87cf6 80%);background-clip:text;-webkit-background-clip:text;color:transparent;}.hf-side-caption{text-align:center;font-size:.73rem;color:#b0c1dd;margin:19px 0 37px;}
.hf-nav{display:grid;gap:6px}.hf-nav-link{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:11px;text-decoration:none;color:#b6c6e0;font-size:.94rem;font-weight:580;transition:background .15s,color .15s;}.hf-nav-link span{font-size:1.38rem;width:23px;text-align:center;font-weight:480;line-height:1}.hf-nav-link:hover{background:#1b3053;color:#fff}.hf-nav-link.active{background:linear-gradient(100deg,#134e90,#403d9e);color:white;box-shadow:inset 3px 0 #4bc7fd}.hf-nav-section{margin:28px 12px 5px;font-size:.66rem;letter-spacing:.16em;font-weight:800;color:#768fad;text-transform:uppercase}.hf-sidebar-bottom{margin-top:auto;border-top:1px solid #25364c;padding:19px 11px 4px}.hf-user{display:flex;align-items:center;gap:9px}.hf-avatar{width:37px;height:37px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(130deg,#334d85,#7760a8);font-weight:800}.hf-user-name{font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:125px}.hf-logout{background:none;border:none;color:#b1c3dc;min-height:35px;margin-top:13px;padding:7px 0;font-size:.82rem}.hf-logout:hover{color:#fff}
.hf-app-main{margin-left:250px;min-height:100vh}.hf-logged-in .topbar.hf-topbar{padding:0 33px;height:66px;min-height:66px;border-bottom:1px solid #233047;background:rgba(9,17,31,.76)}.hf-topbar-label{font-size:.82rem;color:#93a6c5}.hf-topbar-actions{margin-left:auto;display:flex;align-items:center;gap:25px;color:#c1d4f0}.hf-topbar-actions>a{text-decoration:none;font-size:1.65rem}.hf-user-chip{font-size:.8rem;max-width:165px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hf-mobile-title{display:none;font-size:1.1rem;font-weight:800}.hf-mobile-title a{text-decoration:none}.hf-mobile-title span{color:#89caff}
.hf-logged-in .page.hf-page{width:min(1510px,calc(100% - 60px));margin:0 auto;padding:28px 0 65px}.hf-logged-in .card{background:linear-gradient(150deg,#15233a,#111b2d);border-color:#2a3b54;box-shadow:0 12px 34px rgba(0,0,0,.2)}.hf-logged-in input,.hf-logged-in select{background:#0d1729;border-color:#344762}.hf-logged-in .primary-button{background:linear-gradient(110deg,#147fc9,#524abe)}.hf-logged-in .secondary-button{background:#1c2b43;border-color:#3b5272}.hf-logged-in .ghost-button{border-color:#3b5272}
.hf-hero-banner{min-height:272px;border:1px solid #334361;border-radius:20px;background-image:linear-gradient(90deg,rgba(2,10,23,.16),rgba(6,13,28,.08)),url('homeflix/homeflix-hero.webp');background-position:center;background-size:cover;box-shadow:0 22px 55px rgba(0,0,0,.28);overflow:hidden;display:grid;place-items:center;text-align:center;padding:32px;}
.hf-banner-content{position:relative;text-shadow:0 2px 20px #020b19;}.hf-banner-kicker{font-size:.77rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#add8ff;margin-bottom:10px}.hf-hero-banner h1{font-size:clamp(2.7rem,5vw,5.25rem);color:white;font-weight:850;letter-spacing:-.065em;line-height:1.04}.hf-hero-banner p{font-size:clamp(1rem,1.9vw,1.6rem);margin:13px 0 0;color:#dbecff}.hf-banner-meta{margin-top:22px;display:inline-flex;align-items:center;gap:12px;background:rgba(7,14,27,.74);border:1px solid #4a5d78;border-radius:99px;padding:9px 18px;letter-spacing:.1em;font-size:.71rem;color:#c5d9f4;font-weight:650}.hf-banner-meta span{color:#69a8ff}
.hf-page-intro{margin:31px 2px 19px}.hf-page-intro h2{font-size:clamp(1.3rem,2vw,1.8rem);margin:7px 0}.hf-page-intro p{font-size:.92rem;color:var(--hf-muted);margin:4px 0}.hf-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.hf-category-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:196px;padding:23px 23px 19px;border-radius:18px;text-decoration:none;color:#fff;border:1px solid #34486b;overflow:hidden;transition:transform .15s,border-color .15s;box-shadow:0 10px 24px #0003}.hf-category-card:hover{transform:translateY(-3px);border-color:#68aaff}.hf-category-card:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.85}.hf-film{background:linear-gradient(130deg,#1a3454,#15223c 65%,#5b2a46)}.hf-film:before{background:radial-gradient(circle at 90% 6%,#dd89465c,transparent 57%)}.hf-series{background:linear-gradient(130deg,#123f58,#19213b 65%,#172d4a)}.hf-series:before{background:radial-gradient(circle at 90% 7%,#55b0e15c,transparent 50%)}.hf-music{background:linear-gradient(130deg,#37225d,#25204c 65%,#102a49)}.hf-music:before{background:radial-gradient(circle at 95% 5%,#b552d261,transparent 54%)}.hf-category-symbol{font-size:2.4rem;line-height:1;color:#e1ecff;position:relative}.hf-category-card h3{font-size:1.47rem;margin:0 0 5px;position:relative}.hf-category-card p{color:#d2e0f0;margin:0;font-size:.88rem;position:relative}.hf-card-arrow{position:absolute;right:20px;bottom:21px;display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:#0f203cbd;font-size:1.2rem}
.hf-lower-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:23px}.hf-widget{background:linear-gradient(140deg,#121f35,#0e1a2e);border:1px solid #283c59;border-radius:19px;padding:23px;min-height:245px}.hf-widget-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.hf-widget-heading h2{font-size:1.2rem;margin:7px 0 0}.hf-widget-heading a{text-decoration:none;color:#7ecefc;font-size:.77rem}.hf-request-stat{display:flex;align-items:center;gap:17px;margin:25px 0 11px}.hf-request-icon{display:grid;place-items:center;width:57px;height:57px;font-size:2rem;border-radius:16px;color:#83c4ff;background:#123f6c}.hf-request-stat>div{display:grid;gap:2px}.hf-request-stat strong{font-size:1.8rem}.hf-request-stat span:not(.hf-request-icon){font-size:.82rem;color:#adbfdd}.hf-widget-muted{font-size:.8rem;color:#8eabc9}.hf-quicklinks{display:grid;gap:9px;margin-top:22px}.hf-quicklinks a{display:flex;justify-content:space-between;text-decoration:none;padding:11px 13px;border-radius:9px;border:1px solid #30445f;background:#162840;font-size:.85rem}.hf-quicklinks a:hover{border-color:#5b9de7}.hf-phase-note{color:#7e93af;font-size:.76rem;margin:20px 2px 0}
.public-auth-page{background:radial-gradient(circle at 50% 5%,#1c2c47,#0a101d 64%)}.public-auth-page .public-login-card{background:#142038;border:1px solid #31425f;border-radius:19px;box-shadow:0 25px 80px #0006}.public-auth-page .public-login-card h1{font-size:1.65rem}.public-auth-page .primary-button{background:#2778d0}
@media(max-width:1080px){.hf-logged-in .hf-sidebar{width:211px}.hf-app-main{margin-left:211px}.hf-category-card{min-height:170px}.hf-logged-in .page.hf-page{width:calc(100% - 40px)}}
@media(max-width:820px){.hf-logged-in .hf-sidebar{position:static;width:100%;height:auto;padding:11px 16px;background:#0e1b30}.hf-brand{padding:0;gap:9px}.hf-brand-mark{width:32px;height:32px;border-radius:9px;font-size:1rem}.hf-brand strong{font-size:1.13rem}.hf-brand small,.hf-side-caption,.hf-nav-section,.hf-sidebar-bottom{display:none}.hf-nav{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:5px;margin-top:13px;padding-bottom:3px}.hf-nav-link{white-space:nowrap;padding:9px 11px;font-size:.82rem}.hf-nav-link span{font-size:1rem;width:auto}.hf-app-main{margin-left:0}.hf-logged-in .topbar.hf-topbar{padding:0 19px;height:48px;min-height:48px}.hf-topbar-label{display:none}.hf-mobile-title{display:block}.hf-topbar-actions{gap:15px}.hf-logged-in .page.hf-page{width:calc(100% - 28px);padding-top:16px}.hf-hero-banner{min-height:232px}.hf-banner-meta{font-size:.62rem;gap:6px}.hf-category-grid{gap:9px}.hf-category-card{padding:15px;min-height:160px}.hf-category-card h3{font-size:1.23rem}.hf-category-card p{font-size:.77rem}.hf-card-arrow{right:12px;bottom:12px;width:28px;height:28px}}
@media(max-width:600px){.hf-category-grid,.hf-lower-grid{grid-template-columns:1fr}.hf-category-card{min-height:145px}.hf-widget{min-height:0}.hf-hero-banner{min-height:224px;padding:15px}.hf-hero-banner h1{font-size:clamp(2.2rem,9vw,3.15rem)}.hf-banner-kicker{font-size:.65rem}.hf-banner-meta{white-space:normal;justify-content:center;max-width:100%;font-size:.55rem;letter-spacing:.05em;padding:8px 11px}.hf-nav-link{padding:8px 9px}.hf-page-intro{margin-top:21px}}