/* 7Loop UX refresh. This file is the final, intentionally scoped component layer. */

:root {
  --tap: 44px;
  --client-shell-w: 860px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --mobile-nav-space: calc(var(--nav-h) + 24px + var(--safe-bottom));
  --card-radius: 22px;
}

html { scroll-padding-top: calc(74px + var(--safe-top)); }

body:not(.admin-body) {
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

body.dialog-open,
body.sheet-open,
body.mix-detail-open { overflow: hidden; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 12000;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface-solid);
  box-shadow: var(--shadow);
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

button,
[role="button"],
a,
input,
select,
textarea { -webkit-tap-highlight-color: transparent; }

button,
[role="button"] { touch-action: manipulation; }

button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 72%, white);
  outline-offset: 3px;
}

.icon-btn,
.avatar-btn,
.round-btn,
.quiet-btn,
.secondary-btn,
.chip,
.segmented button { min-height: var(--tap); }

.icon-btn,
.avatar-btn,
.round-btn { width: var(--tap); height: var(--tap); }

body:not(.admin-body) .app-shell,
body:not(.admin-body) .topbar,
body:not(.admin-body) .content {
  width: min(100%, var(--client-shell-w));
  margin-inline: auto;
}

body:not(.admin-body) .app-shell {
  display: block !important;
  padding: 0 0 var(--mobile-nav-space) !important;
}

body:not(.admin-body) .sidebar,
body:not(.admin-body) .preview-panel { display: none !important; }

body:not(.admin-body) .app-topbar {
  top: 0;
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: calc(62px + var(--safe-top));
  padding: calc(10px + var(--safe-top)) 14px 8px !important;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  border-bottom: 1px solid var(--line);
}

body:not(.admin-body) .mobile-brand { display: inline-flex !important; }

body:not(.admin-body) .app-topbar .icon-btn,
body:not(.admin-body) .app-topbar .avatar-btn {
  display: grid !important;
  width: var(--tap);
  height: var(--tap);
  min-height: var(--tap);
}

.content { padding-bottom: 32px; }

.bottom-nav {
  right: auto !important;
  bottom: calc(8px + var(--safe-bottom)) !important;
  left: 50% !important;
  z-index: 90 !important;
  width: min(calc(100vw - 16px - var(--safe-left) - var(--safe-right)), var(--client-shell-w));
  min-height: var(--nav-h);
  transform: translateX(-50%);
}

.bottom-nav .nav-item {
  min-height: 58px;
  height: auto;
  border-radius: 14px;
}

.bottom-nav .nav-item[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--text);
}

.bottom-nav .nav-item:nth-child(3) {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
}

.nav-item { position: relative; }
.nav-attention {
  position: absolute;
  top: 8px;
  right: 20%;
  width: 9px;
  height: 9px;
  border: 2px solid var(--surface-solid);
  border-radius: 50%;
  background: #d36b4f;
  box-shadow: 0 0 0 3px color-mix(in srgb, #d36b4f 18%, transparent);
}
.nav-item.has-attention svg { color: #b34f37; }

/* Search and horizontally scrollable filters */
.client-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-solid);
}

.client-search svg { color: var(--muted); }
.client-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); }

.horizontal-filter-scroll {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 2px 9px;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.horizontal-filter-scroll::-webkit-scrollbar { display: none; }
.horizontal-filter-track { display: flex !important; width: max-content; min-width: max-content; flex-wrap: nowrap !important; gap: 8px; }
.horizontal-filter-track .chip { flex: 0 0 auto; min-width: max-content; white-space: nowrap; }

/* Home */
.home-view { gap: 24px; }
.home-view .hero { min-height: clamp(300px, 62dvh, 430px); padding: clamp(20px, 5vw, 30px); border-radius: 26px; }
.home-view .hero-actions { align-items: stretch; }
.home-view .hero-actions > * { min-height: 46px; }
.quick-modes { display: grid; gap: 12px; }
.mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mode-card { min-height: 150px; padding: 14px; }
.mode-card p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.home-drop-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.home-drop-card p { margin-bottom: 0; }
.section-more-btn { width: 100%; margin-top: 12px; }

.music-home { gap: 30px; }
.music-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 354px;
  padding: 22px;
  overflow: hidden;
  border-radius: 30px;
  color: #fff;
  background: var(--hero-image) center/cover;
  box-shadow: 0 26px 64px rgba(20,28,31,.24);
}
.music-hero::before {
  position: absolute;
  z-index: -2;
  content: "";
  inset: 0;
  background: var(--hero-image) center/cover;
  transform: scale(1.08);
  filter: saturate(.85) contrast(1.08);
}
.music-hero::after {
  position: absolute;
  z-index: -1;
  content: "";
  inset: 0;
  background: linear-gradient(180deg, rgba(10,15,17,.08), rgba(10,15,17,.82) 78%), linear-gradient(90deg, rgba(10,15,17,.52), transparent 70%);
}
.music-hero-art {
  position: relative;
  display: grid;
  width: 132px;
  aspect-ratio: 1;
  padding: 0;
  place-items: center;
  appearance: none;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 24px;
  color: #fff;
  background: color-mix(in srgb, #101719 44%, transparent);
  box-shadow: 0 18px 42px rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.music-hero-art:hover { border-color: rgba(255,255,255,.46); background: color-mix(in srgb, #172326 58%, transparent); }
.music-hero-art:active { transform: scale(.975); }
.music-hero-art:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 78%, white); outline-offset: 4px; }
.music-disc {
  position: relative;
  display: grid;
  width: 76px;
  aspect-ratio: 1;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  color: rgba(255,255,255,.92);
  background:
    radial-gradient(circle at 49% 48%, rgba(255,255,255,.55) 0 1.4%, transparent 1.8%),
    radial-gradient(circle, #d2b879 0 10%, #172326 10.5% 18%, transparent 18.5%),
    repeating-radial-gradient(circle, #111719 0 2px, #202a2c 2.5px 3.5px, #090d0f 4px 6px);
  box-shadow: inset -8px -9px 18px rgba(0,0,0,.36), inset 7px 7px 14px rgba(255,255,255,.05), 0 8px 25px rgba(0,0,0,.34);
  will-change: transform;
}
.music-disc::before {
  position: absolute;
  content: "";
  inset: 4%;
  border-radius: 50%;
  background: conic-gradient(from 25deg, transparent, rgba(255,255,255,.12), transparent 11%, transparent 48%, rgba(255,255,255,.07), transparent 62%);
}
.music-disc-label { position: relative; z-index: 1; display: grid; width: 27%; aspect-ratio: 1; place-items: center; border-radius: 50%; color: #182123; font-size: .62rem; font-weight: 950; letter-spacing: -.08em; background: #d2b879; box-shadow: 0 0 0 2px rgba(12,18,20,.68); }
.music-disc-state { position: absolute; z-index: 4; right: 9px; bottom: 9px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: #162022; background: rgba(248,244,232,.94); box-shadow: 0 8px 18px rgba(0,0,0,.28); transition: transform .18s ease; }
.music-disc-state svg { width: 17px; height: 17px; }
.music-hero-art:hover .music-disc-state { transform: scale(1.08); }
.music-hero-art.is-playing .music-disc { animation: music-disc-spin 3.7s linear infinite; box-shadow: inset -8px -9px 18px rgba(0,0,0,.36), inset 7px 7px 14px rgba(255,255,255,.05), 0 0 0 4px rgba(255,255,255,.09), 0 13px 30px rgba(0,0,0,.42); }
.music-hero-art.is-playing .music-disc-state { color: #fff; background: color-mix(in srgb, var(--accent) 88%, #172022); }
@keyframes music-disc-spin { to { transform: rotate(360deg); } }
.music-hero-art .wave { position: absolute; right: 8px; bottom: 8px; }
.music-hero-copy { display: grid; gap: 10px; min-width: 0; }
.music-hero-copy .eyebrow { color: rgba(255,255,255,.72); }
.music-hero-copy h1 { max-width: 620px; margin: 0; color: #fff; font-size: clamp(2rem, 8vw, 3.9rem); line-height: .96; letter-spacing: -.055em; }
.music-hero-copy > p:not(.eyebrow) { max-width: 620px; margin: 0; color: rgba(255,255,255,.78); }
.music-hero-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; color: rgba(255,255,255,.76); font-size: .8rem; }
.music-hero-meta span { display: inline-flex; gap: 5px; align-items: center; }
.music-hero-meta svg { width: 15px; height: 15px; }
.music-hero-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 4px; }
.hero-play-btn,
.music-hero-secondary { min-height: 52px; border: 0; border-radius: 999px; font-weight: 850; }
.hero-play-btn { display: inline-flex; gap: 9px; align-items: center; padding: 0 22px; color: #172021; background: #f6f0df; box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.hero-play-btn svg { width: 22px; height: 22px; }
.music-hero-secondary { padding: 0 18px; color: #fff; background: rgba(255,255,255,.14); backdrop-filter: blur(14px); }
.music-shelf { display: grid; gap: 12px; min-width: 0; }
.music-rail,
.mood-rail { display: grid; grid-auto-flow: column; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x proximity; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
.music-rail[data-home-rail],
.mood-rail[data-home-rail] { cursor: grab; }
.music-rail.is-dragging,
.mood-rail.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.music-rail::-webkit-scrollbar,
.mood-rail::-webkit-scrollbar { display: none; }
.music-rail { grid-auto-columns: 158px; gap: 13px; padding: 2px 3px 8px; }
.music-tile { display: grid; gap: 6px; min-width: 0; cursor: pointer; scroll-snap-align: start; }
.music-tile-art { position: relative; display: grid; aspect-ratio: 1; place-items: center; overflow: hidden; border-radius: 20px; background: var(--visual); box-shadow: 0 13px 30px rgba(34,43,45,.13); }
.music-tile-art::after { position: absolute; content: ""; inset: 35% 0 0; background: linear-gradient(transparent, rgba(9,14,16,.58)); }
.music-tile-art > span { position: absolute; z-index: 2; right: 9px; bottom: 8px; left: 9px; overflow: hidden; color: rgba(255,255,255,.84); font-size: .72rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.music-tile-play { position: relative; z-index: 3; display: grid; width: 48px; height: 48px; padding: 0; place-items: center; border: 0; border-radius: 50%; color: #172021; background: rgba(248,244,232,.92); box-shadow: 0 9px 26px rgba(0,0,0,.24); transform: translateY(3px); transition: transform .18s ease; }
.music-tile:hover .music-tile-play { transform: translateY(0) scale(1.06); }
.music-tile.is-playing .music-tile-art { box-shadow: 0 0 0 3px var(--accent), 0 13px 30px rgba(34,43,45,.16); }
.music-tile > strong,
.music-tile > p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-tile > p { margin: 0; color: var(--muted); font-size: .76rem; }
.music-tile-stats { display: flex; gap: 9px; color: var(--muted); font-size: .7rem; }
.music-tile-stats span { display: inline-flex; gap: 3px; align-items: center; }
.music-tile-stats svg { width: 12px; height: 12px; }
.mood-rail { grid-auto-columns: minmax(185px, 44%); gap: 10px; padding-bottom: 5px; }
.mood-pill { display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; gap: 1px 10px; min-height: 76px; padding: 11px; text-align: left; scroll-snap-align: start; border: 1px solid var(--line); border-radius: 20px; color: var(--text); background: var(--mode-bg); }
.mood-pill > span { display: grid; grid-row: 1 / 3; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--surface-solid) 76%, transparent); }
.mood-pill small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.music-drop-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 20px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface)); }
.music-drop-card p { margin-bottom: 0; }

/* Mix cards: spacious social card. */
.recipe-grid,
.feed-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; align-items: stretch; }

.mui-card,
.feed-card.recipe-card,
.mui-card-home {
  display: grid !important;
  grid-template-rows: 136px minmax(0, 1fr) auto !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "visual" "body" "actions" !important;
  gap: 0 !important;
  overflow: hidden !important;
  min-width: 0;
  height: 100%;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--card-radius) !important;
  background: var(--surface) !important;
  box-shadow: 0 14px 38px rgba(48,57,56,.075) !important;
}

.feed-card-visual {
  grid-area: visual;
  position: relative;
  display: grid;
  width: 100%;
  height: 136px;
  min-height: 136px;
  place-items: center;
  overflow: hidden;
  border-radius: 0 !important;
  background: var(--visual);
  cursor: pointer;
}

.feed-card-visual::after {
  position: absolute;
  content: "";
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(21,27,32,.25));
  pointer-events: none;
}

.feed-card-visual > * { z-index: 1; }
.feed-card-body { grid-area: body; padding: 14px 14px 8px; cursor: pointer; }
.feed-card-actions { grid-area: actions; grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap) !important; gap: 8px; padding: 0 14px 14px; overflow: visible !important; }
.feed-card-actions .feed-play-btn,
.feed-card-actions .feed-save-btn { width: var(--tap) !important; min-width: var(--tap) !important; height: var(--tap) !important; min-height: var(--tap) !important; }
.feed-card-actions .secondary-btn { min-height: var(--tap); }
.feed-card-title p { -webkit-line-clamp: 2; }
.mui-card-feed.is-now-playing { border-color: var(--accent) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent), 0 14px 38px rgba(48,57,56,.09) !important; }

/* Sound cards: calm preview cards with fixed controls and a full detail view. */
.collection-sound-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 9px !important;
}

.mui-card-collection {
  position: relative;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 132px minmax(116px, 1fr) auto !important;
  grid-template-areas: "visual" "body" "actions" !important;
  min-height: 316px !important;
  cursor: pointer;
}
.mui-card-collection.is-now-playing { border-color: var(--accent) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent), 0 14px 38px rgba(48,57,56,.09) !important; }

.mui-card-collection::before,
.mui-card-collection::after { display: none !important; }

.mui-card-collection .feed-card-visual {
  grid-area: visual !important;
  width: 100% !important;
  height: 132px !important;
  min-height: 132px !important;
}

.mui-card-collection .feed-card-body { display: grid; align-content: start; gap: 10px; padding: 13px 14px 8px; }
.mui-card-collection .feed-card-title p { -webkit-line-clamp: 2; font-size: .82rem; }
.mui-card-collection .feed-card-foot,
.mui-card-collection .feed-card-progress { display: none; }
.mui-card-collection .feed-card-actions { align-self: end; padding-top: 8px; }
.sound-card-more { color: var(--accent); font-size: .76rem; font-weight: 800; }
.sound-card-stats { display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: .72rem; }
.sound-card-stats span { display: inline-flex; gap: 4px; align-items: center; }
.sound-card-stats svg { width: 13px; height: 13px; }
.sound-unlock-hint { margin: 0; color: color-mix(in srgb, var(--text) 72%, var(--accent)); font-size: .74rem; line-height: 1.35; }
.sound-unlock-hint.is-owned { color: var(--muted); }
.sound-card-menu { position: absolute; z-index: 12; right: 10px; bottom: 64px; display: grid; width: min(240px, calc(100% - 20px)); padding: 7px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-solid); box-shadow: 0 18px 44px rgba(20,28,31,.2); }
.sound-card-menu button { min-height: 42px; padding: 0 11px; text-align: left; border: 0; border-radius: 11px; color: var(--text); background: transparent; }
.sound-card-menu button:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sound-card-menu button:disabled { color: var(--muted); opacity: .55; }
.catalog-sort-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.catalog-sort-bar > span { color: var(--muted); font-size: .78rem; font-weight: 750; }
.catalog-sort-bar .horizontal-filter-scroll { padding-bottom: 4px; }
.mix-card-stats { display: flex; gap: 12px; color: var(--muted); font-size: .75rem; }
.mix-card-stats span { display: inline-flex; gap: 4px; align-items: center; }
.mix-card-stats svg { width: 14px; height: 14px; }

/* Details and expandable panels */
details > summary {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap);
  cursor: pointer;
  list-style: none;
}

details > summary::-webkit-details-marker { display: none; }
details > summary > span:first-child { display: grid; gap: 3px; }
.summary-action { color: var(--accent); font-size: .82rem; font-weight: 800; }
details[open] > summary { margin-bottom: 16px; }
.collection-promo-panel form { margin-top: 4px; }

/* Player is a persistent overlay, not a navigation page. */
.quick-track-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.quick-track-grid .track-slot { padding: 10px; }
.quick-track-grid .slot-surface { min-height: 84px; }
.create-mix-cta { width: 100%; }

/* Floating player: one compact row or a real mobile sheet. */
body:not(.admin-body):has(.mini-player:not([hidden])) .app-shell {
  padding-bottom: calc(var(--mobile-nav-space) + 88px) !important;
}

body:not(.admin-body) .mini-player {
  position: fixed !important;
  right: auto !important;
  bottom: calc(var(--nav-h) + 18px + var(--safe-bottom)) !important;
  left: 50% !important;
  z-index: 80 !important;
  display: block;
  width: min(calc(100vw - 20px - var(--safe-left) - var(--safe-right)), var(--client-shell-w)) !important;
  max-width: var(--client-shell-w) !important;
  max-height: calc(100dvh - var(--nav-h) - var(--safe-top) - 30px) !important;
  padding: 8px !important;
  overflow: hidden !important;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-solid) 92%, transparent);
  box-shadow: 0 20px 60px rgba(22,30,33,.18);
  backdrop-filter: blur(22px);
  transform: translate(-50%, var(--player-drag-y, 0px)) !important;
  transition: transform .22s ease, border-radius .22s ease, box-shadow .22s ease;
}

.mini-player[hidden] { display: none !important; }
.player-compact { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: center; border-radius: 15px; cursor: pointer; }
.player-compact,
.player-expanded-head { position: relative; }
.player-compact::before,
.player-expanded-head::before { position: absolute; content: ""; top: -3px; left: 50%; width: 30px; height: 3px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 40%, transparent); transform: translateX(-50%); }
.mini-player.is-gesturing { transition: none !important; }
[data-player-gesture-surface] { touch-action: pan-x; }
.player-compact:focus-within,
.player-compact:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.mini-liquid-btn { width: 48px; height: 48px; }
.player-compact .mini-title { min-width: 0; }
.player-compact .mini-title strong,
.player-compact .mini-title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-compact .mini-actions { display: flex; gap: 6px; }
.player-compact .mini-actions .round-btn,
.mini-expand-btn { display: grid !important; width: var(--tap) !important; height: var(--tap) !important; min-height: var(--tap) !important; padding: 0 !important; }
.player-chevron svg { transition: transform .2s ease; }
.player-chevron.is-open svg { transform: rotate(180deg); }

.player-loading { display: grid; grid-template-columns: 44px minmax(0, 1fr) var(--tap); gap: 10px; align-items: center; min-height: 54px; }
.loading-orb { width: 38px; height: 38px; border: 3px solid color-mix(in srgb, var(--accent) 22%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: mui-loading-spin .9s linear infinite; }
.player-loading-copy { display: grid; gap: 3px; min-width: 0; }
.player-loading-copy strong,
.player-loading-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-loading-copy > span { color: var(--muted); font-size: .76rem; }
.player-loading-progress { height: 4px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, var(--line)); }
.player-loading-progress span { display: block; width: var(--value); height: 100%; border-radius: inherit; background: var(--accent); transition: width .2s ease; }
@keyframes mui-loading-spin { to { transform: rotate(1turn); } }

body:not(.admin-body) .mini-player.is-expanded {
  top: calc(var(--safe-top) + 8px) !important;
  bottom: calc(var(--nav-h) + 14px + var(--safe-bottom)) !important;
  max-height: none !important;
  border-radius: 24px;
}

body:not(.admin-body) .mini-player.is-fullscreen {
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
}

.mini-player.is-expanded .player-compact { display: none; }
.player-expanded {
  display: grid;
  gap: 12px;
  height: 100%;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 2px 6px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  border: 0 !important;
  background: transparent !important;
}

.player-expanded-head {
  position: sticky;
  z-index: 8;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 3px 2px 10px;
  background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
  backdrop-filter: blur(18px);
}

.player-expanded-head > div:nth-child(2) { display: grid; min-width: 0; }
.player-expanded-head span { overflow: hidden; color: var(--muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.player-expanded-head .row-actions { flex-wrap: nowrap; }
.player-visual-card,
.player-control-card { padding: 13px; border-radius: 18px; }
.player-layer-row { grid-template-columns: auto minmax(0, 1fr) var(--tap) !important; }
.player-layer-row > .round-btn { grid-column: auto !important; width: var(--tap) !important; border-radius: 50% !important; }

/* Picker bottom sheet */
.sheet-backdrop { background: rgba(12,17,19,.42); backdrop-filter: blur(5px); }
body:not(.admin-body) .bottom-sheet {
  right: max(8px, var(--safe-right)) !important;
  bottom: 0 !important;
  left: max(8px, var(--safe-left)) !important;
  z-index: 110 !important;
  width: auto !important;
  max-height: calc(92dvh - var(--safe-top)) !important;
  padding: 10px 16px calc(18px + var(--safe-bottom)) !important;
  border-radius: 26px 26px 0 0 !important;
  transform: translateY(110%) !important;
}

body:not(.admin-body) .bottom-sheet.open { transform: translateY(0) !important; }
.sheet-handle { width: 42px; height: 5px; margin: 0 auto 4px; border-radius: 999px; background: var(--line-strong); }
.sound-picker-list { max-height: min(60dvh, 560px); overflow-y: auto; overscroll-behavior: contain; }
.sound-choice { min-height: 58px; }

/* Mix details become a mobile bottom sheet with sticky actions. */
.mix-detail-modal { padding: 0 !important; align-items: end !important; }
.mix-detail-card {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 132px minmax(0, 1fr);
  width: 100% !important;
  max-height: calc(96dvh - var(--safe-top)) !important;
  border-radius: 26px 26px 0 0 !important;
}
.mix-detail-visual { min-height: 132px !important; }
.mix-detail-content { min-height: 0;}
.mix-detail-content h2 { font-size: clamp(1.7rem, 9vw, 2.5rem); }
.mix-detail-actions {
  position: sticky;
  z-index: 4;
  bottom: calc(-18px - var(--safe-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto var(--tap) var(--tap);
  gap: 8px;
  margin: 2px -16px calc(-18px - var(--safe-bottom));
  padding: 12px 16px calc(12px + var(--safe-bottom));
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
  backdrop-filter: blur(18px);
}
.mix-detail-actions .primary-btn { min-width: 0; }
.mix-detail-actions .mix-detail-share-btn,
.mix-detail-actions .mix-detail-save-btn { display: grid; width: var(--tap); min-width: var(--tap); height: var(--tap); padding: 0; place-items: center; }
.sound-detail-actions { grid-template-columns: minmax(0, 1fr) var(--tap); }
.sound-detail-favorite { display: grid; width: var(--tap); height: var(--tap); min-height: var(--tap); padding: 0; place-items: center; font-size: 1.35rem; }
.sound-detail-help p { margin-bottom: 0; color: var(--muted); }
.unlock-guide { padding: 14px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.unlock-guide h3 { margin: 2px 0 9px; font-size: 1rem; }
.unlock-guide ul { display: grid; gap: 7px; margin: 0; padding-left: 18px; color: var(--muted); font-size: .82rem; }
.sound-acquired-note { padding: 10px 12px; border-radius: 14px; color: var(--muted); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.mix-detail-close { top: 10px; right: 10px; }

/* Create flow */
.studio-flow { display: grid; gap: 14px; }
.studio-page .studio-panel { padding: 16px; border-radius: 22px; }
.step-label { margin: 0 0 3px; color: var(--accent); font-size: .76rem; font-weight: 850; text-transform: uppercase; }
.autosave-status { color: var(--muted); font-size: .82rem; }
.studio-layer-grid { grid-template-columns: minmax(0, 1fr) !important; }
.studio-save-bar { position: sticky; z-index: 6; bottom: calc(var(--mobile-nav-space) - 4px); padding: 8px 0; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); }
.studio-save-bar .primary-btn { width: 100%; }

@media (max-width: 719px) {
  .studio-settings-panel { position: static !important; min-width: 0; overflow: visible !important; }
  .studio-settings { min-width: 0; gap: 14px; }
  .studio-settings > *,
  .studio-settings .field,
  .studio-settings input,
  .studio-settings select,
  .studio-settings textarea { min-width: 0; max-width: 100%; }
  .studio-settings .segmented { grid-template-columns: minmax(0, 1fr); }
  .studio-settings .segmented button { width: 100%; white-space: normal; }
  .studio-settings .anonymous-template-check { align-items: start; }
  .studio-save-bar { position: static !important; bottom: auto !important; margin-top: 2px; padding: 0; background: transparent; backdrop-filter: none; }
  .studio-save-bar .primary-btn { min-height: 52px; white-space: normal; }
}

/* Auth and notifications */
.auth-modal { padding: calc(16px + var(--safe-top)) 14px calc(16px + var(--safe-bottom)); overflow-y: auto; }
.auth-card { max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 28px); overflow-y: auto; }
.toast { bottom: calc(var(--mobile-nav-space) + 80px); }

/* Weekly drop fits short mobile screens. */
.drop-ritual { min-height: min(620px, calc(100dvh - var(--mobile-nav-space) - 76px)) !important; padding: 18px !important; }
.drop-reveal-stage { min-height: 250px; }

@media (min-width: 720px) {
  .music-hero { grid-template-columns: 188px minmax(0, 1fr); min-height: 220px; padding: 30px; }
  .music-hero-art { width: 188px; border-radius: 30px; }
  .music-disc { width: 108px; }
  .music-rail { grid-auto-columns: 184px; }
  .mood-rail { grid-auto-columns: 220px; }
  .recipe-grid,
  .feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .collection-sound-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .quick-track-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .studio-flow { grid-template-columns: minmax(0, 1.15fr) minmax(290px, .85fr); align-items: start; }
  .studio-settings-panel { position: sticky; top: calc(76px + var(--safe-top)); }
  .studio-save-bar { bottom: 0; }
  .mix-detail-modal { padding: 18px !important; align-items: center !important; }
  .mix-detail-card { grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr) !important; grid-template-rows: minmax(0, 1fr); width: min(980px, 100%) !important; max-height: 88dvh !important; border-radius: 28px !important; }
  .mix-detail-visual { min-height: 100% !important; }
  .mix-detail-actions { bottom: -30px; margin-bottom: -30px; }
  .player-expanded { grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); align-items: start; }
  .player-expanded-head { grid-column: 1 / -1; }
  .session-control-card { grid-column: 1 / -1; }
}

@media (max-width: 460px) {
  .content { padding-inline: 11px; }
  .brand-wordmark small { display: none; }
  .topbar-actions { gap: 6px; }
  body:not(.admin-body) .app-topbar #themeToggle { display: none; }
  body:not(.admin-body) .app-topbar .avatar-btn { display: grid !important; }
  .account-pill { display: none; }
  .mode-grid { grid-template-columns: minmax(0, 1fr); }
  .mode-card { min-height: 128px; }
  .home-drop-card { grid-template-columns: minmax(0, 1fr); }
  .music-hero { grid-template-columns: 92px minmax(0, 1fr); gap: 13px; min-height: 370px; padding: 17px; border-radius: 25px; }
  .music-hero-art { width: 92px; border-radius: 20px; }
  .music-disc { width: 58px; }
  .music-hero-copy h1 { font-size: clamp(1.85rem, 10vw, 2.65rem); }
  .music-hero-copy > p:not(.eyebrow) { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .music-hero-actions { grid-column: 1 / -1; }
  .hero-play-btn { flex: 1 1 auto; justify-content: center; }
  .music-rail { grid-auto-columns: 148px; }
  .mood-rail { grid-auto-columns: 78%; }
  .music-drop-card { grid-template-columns: minmax(0, 1fr); }
  .quick-track-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .mui-card-collection { min-height: 304px !important; }
  .player-compact { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 7px; }
  .mini-liquid-btn { width: 44px; height: 44px; }
  .player-compact .mini-actions { gap: 4px; }
  .player-compact .mini-actions .round-btn { width: 42px !important; height: 42px !important; min-height: 42px !important; }
  .player-layer-row { grid-template-columns: 36px minmax(0, 1fr) var(--tap) !important; gap: 8px; }
}

/* Preserved mobile card actions: stable single-row controls. */
@media (max-width: 460px) {
  .feed-card:not(.mui-card-collection) .card-actions.feed-card-actions {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    grid-template-areas: "play like save" !important;
    gap: 8px;
    align-items: center;
    width: 100%;
  }

  .feed-card:not(.mui-card-collection) .feed-play-btn {
    grid-area: play;
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
  }

  .feed-card:not(.mui-card-collection) [data-like] {
    grid-area: like;
    min-width: 0;
    overflow: hidden;
    justify-content: center;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .feed-card:not(.mui-card-collection) [data-save] {
    grid-area: save;
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
  }

  .mui-card-collection .card-actions.feed-card-actions {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    gap: 8px;
    align-items: center;
  }

  .mui-card-collection .feed-play-btn { grid-area: play; }

  .mui-card-collection .feed-card-primary-action {
    grid-area: main;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .mui-card-collection .sound-favorite-btn { grid-area: favorite; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .music-hero-art.is-playing .music-disc { animation: none; }
}

/* Mobile-first admin navigation and dialogs */
.admin-mobile-header {
  position: sticky;
  z-index: 80;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(62px + var(--safe-top));
  padding: calc(8px + var(--safe-top)) 14px 8px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px);
}

.admin-mobile-menu {
  position: fixed;
  z-index: 79;
  top: calc(62px + var(--safe-top));
  right: 10px;
  left: 10px;
  display: grid;
  gap: 14px;
  max-height: calc(100dvh - 74px - var(--safe-top));
  padding: 14px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 0 0 22px 22px;
  background: var(--surface-solid);
  box-shadow: var(--shadow);
}

.admin-mobile-menu[hidden] { display: none !important; }
.admin-mobile-menu nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.admin-mobile-menu nav a { display: flex; min-height: var(--tap); align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; font-weight: 800; }
.admin-pro-main { padding-bottom: calc(20px + var(--safe-bottom)); }
.admin-pro-body section[id],
.admin-pro-body main[id] { scroll-margin-top: calc(76px + var(--safe-top)); }

.admin-action-modal {
  position: fixed;
  z-index: 12000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
}
.admin-action-modal[hidden] { display: none; }
.admin-action-backdrop { position: absolute; inset: 0; background: rgba(13,18,20,.46); backdrop-filter: blur(8px); }
.admin-action-card { position: relative; z-index: 1; display: grid; width: min(460px, 100%); gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface-solid); box-shadow: var(--shadow); }
.admin-action-card h2,
.admin-action-card p { margin-bottom: 0; }
.danger-action { background: var(--danger) !important; color: white !important; }

@media (max-width: 719px) {
  .admin-pro-main { padding-inline: 10px; }
  .admin-hero { padding: 16px; }
  .admin-hero-actions > * { flex: 1 1 100%; }
  .admin-toolbelt { gap: 9px; }
  .admin-panel-pro,
  .admin-pro-body .panel { padding: 13px; }
  .admin-form-pro,
  .admin-form { grid-template-columns: minmax(0, 1fr) !important; }
  .admin-card-grid-pro,
  .card-grid,
  #soundGrid > .admin-draft-section > .admin-card-grid-pro,
  #soundGrid > .admin-published-section > .admin-card-grid-pro { grid-template-columns: minmax(0, 1fr) !important; }
  .sound-admin-card { grid-template-columns: minmax(0, 1fr) !important; min-height: 0 !important; }
  .sound-admin-card .admin-art { min-height: 128px !important; }
  .admin-table-pro,
  .table-wrap { overflow: visible; border: 0; background: transparent; }
  .admin-table-pro table,
  .table-wrap table { display: block; min-width: 0; }
  .admin-table-pro thead,
  .table-wrap thead { display: none; }
  .admin-table-pro tbody,
  .table-wrap tbody { display: grid; gap: 10px; }
  .admin-table-pro tr,
  .table-wrap tr { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-solid); }
  .admin-table-pro td,
  .table-wrap td { display: grid; grid-template-columns: minmax(90px, .42fr) minmax(0, 1fr); gap: 10px; padding: 0; border: 0; align-items: start; }
  .admin-table-pro td::before,
  .table-wrap td::before { content: attr(data-label); color: var(--muted); font-size: .72rem; font-weight: 850; text-transform: uppercase; }
  .admin-table-actions { display: flex !important; grid-template-columns: none !important; }
  .admin-grant-cell { min-width: 0; }
  .admin-opened-list { max-width: none; }
}

@media (min-width: 1080px) {
  .admin-mobile-header,
  .admin-mobile-menu { display: none !important; }
}

/* Contextual acoustic echo for wide desktop margins. */
.side-mix-rail {
  position: fixed;
  z-index: 4;
  top: 46%;
  display: none;
  height: clamp(230px, 30vh, 310px);
  width: calc((100vw - var(--client-shell-w)) / 2 - 24px);
  min-width: 0;
  overflow: hidden;
  contain: layout paint style;
  container-type: inline-size;
  transform: translateY(-50%);
  user-select: none;
}

.side-mix-rail[hidden] { display: none !important; }
.side-mix-rail-left { left: max(12px, var(--safe-left)); }
.side-mix-rail-right { right: max(12px, var(--safe-right)); }

.side-echo-panel {
  position: relative;
  display: grid;
  height: 100%;
  align-items: center;
  padding: clamp(16px, 2vw, 28px);
  isolation: isolate;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity .24s ease, transform .32s cubic-bezier(.22, .8, .24, 1);
}

.side-mix-rail.is-changing .side-echo-panel {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
}

.side-echo-watermark {
  position: absolute;
  z-index: -2;
  top: 50%;
  right: 0;
  left: 0;
  width: 100%;
  max-height: 100%;
  box-sizing: border-box;
  padding: 8px;
  overflow: visible;
  color: var(--text);
  font: inherit;
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: .88;
  white-space: nowrap;
  text-transform: uppercase;
  opacity: .038;
  transform: translateY(-50%);
  transition: opacity .28s ease, filter .28s ease;
  pointer-events: none;
}

.side-echo-watermark.is-short { font-size: 4rem; font-size: clamp(2.35rem, 18cqi, 5.6rem); }
.side-echo-watermark.is-medium { font-size: 2.8rem; font-size: clamp(1.85rem, 12cqi, 4.2rem); }
.side-echo-watermark.is-long { font-size: 2rem; font-size: clamp(1.45rem, 8.5cqi, 3rem); }
.side-mix-rail-left .side-echo-watermark { text-align: right; }
.side-mix-rail-right .side-echo-watermark { text-align: left; }
.side-echo-panel.is-playing .side-echo-watermark {
  background-image: var(--current-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: saturate(.82);
  opacity: .105;
}

.side-echo-copy { position: relative; z-index: 2; display: grid; gap: 10px; }
.side-mix-rail-left .side-echo-copy { justify-items: end; text-align: right; }
.side-mix-rail-right .side-echo-copy { justify-items: start; text-align: left; }
.side-echo-relation {
  color: var(--muted);
  font-size: .62rem;
  font-weight: 760;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .58;
}

.side-echo-link {
  position: relative;
  display: grid;
  max-width: min(260px, 100%);
  gap: 5px;
  padding: 10px 0;
  border: 0;
  color: color-mix(in srgb, var(--text) 68%, var(--muted));
  font: inherit;
  text-align: inherit;
  background: transparent;
  cursor: pointer;
}

.side-echo-link::before {
  position: absolute;
  z-index: -1;
  content: "";
  top: 50%;
  width: 130%;
  height: 82px;
  background: var(--mix-gradient);
  filter: blur(42px) saturate(.85);
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity .28s ease;
  pointer-events: none;
}
.side-mix-rail-left .side-echo-link::before { right: -8%; }
.side-mix-rail-right .side-echo-link::before { left: -8%; }

.side-echo-link strong {
  font-size: clamp(.98rem, 1.25vw, 1.34rem);
  font-weight: 680;
  letter-spacing: .015em;
  line-height: 1.12;
  transition: opacity .2s ease, letter-spacing .28s ease;
}
.side-echo-link small { color: var(--muted); font-size: .72rem; opacity: .7; }
.side-echo-link:hover::before,
.side-echo-link:focus-visible::before { opacity: .12; }
.side-echo-link:hover strong,
.side-echo-link:focus-visible strong {
  color: transparent;
  background-image: var(--mix-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: .035em;
}
.side-echo-link:disabled { cursor: not-allowed; opacity: .4; }
.side-mix-rail.is-held .side-echo-panel,
[data-side-rail-motion="off"] .side-echo-panel,
[data-animation-complexity="low"] .side-echo-panel { transition: none; }

@media (min-width: 1240px) {
  .side-mix-rail { display: block; }
}

@media (max-width: 1379px) {
  .side-echo-panel { padding-inline: 12px; }
  .side-echo-link strong { font-size: .94rem; }
}

/* Settings links and the mobile performance offer. */
.settings-actions { display: grid; gap: 9px; padding-top: 2px; }
.settings-card { max-height: calc(100dvh - 36px); overflow-y: auto; }
.settings-action-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  text-decoration: none;
}

.settings-action-card > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

.settings-action-card > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.settings-action-card small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.settings-action-card:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.settings-action-support { border-color: color-mix(in srgb, #d36b6b 28%, var(--line)); }
.settings-action-support > span:first-child { color: #bd5151; background: color-mix(in srgb, #d36b6b 14%, transparent); }

.animation-offer-modal {
  position: fixed;
  z-index: 13000;
  inset: 0;
  display: grid;
  align-items: end;
  padding: 14px max(12px, var(--safe-right)) max(14px, calc(14px + var(--safe-bottom))) max(12px, var(--safe-left));
}

.animation-offer-modal[hidden] { display: none !important; }
.animation-offer-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: rgba(13, 19, 22, .48); backdrop-filter: blur(9px); }
.animation-offer-card { position: relative; z-index: 1; display: grid; width: min(460px, 100%); gap: 11px; justify-self: center; padding: 22px; border: 1px solid var(--line); border-radius: 26px; color: var(--text); background: var(--surface-solid); box-shadow: 0 28px 80px rgba(20, 28, 31, .3); }
.animation-offer-card h2,
.animation-offer-card p { margin: 0; }
.animation-offer-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }
.animation-offer-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 16px; font-size: 1.4rem; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.animation-offer-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding-top: 4px; }
.animation-offer-actions > * { min-height: 48px; }

[data-theme="dark"] .animation-offer-card {
  border-color: rgba(225, 235, 240, .11);
  background: #151e28;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .58);
}

@media (min-width: 821px), (pointer: fine) {
  .animation-offer-modal { display: none !important; }
}

@media (max-width: 390px) {
  .animation-offer-card { padding: 19px 16px; }
  .animation-offer-actions { grid-template-columns: minmax(0, 1fr); }
  .settings-action-card small { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .side-echo-panel,
  .side-echo-watermark,
  .side-echo-link,
  .side-echo-link::before,
  .side-echo-link strong { transition: none !important; }
}

/* Animation complexity control. */
.settings-complexity-option { grid-template-columns: minmax(0, 1fr); cursor: default; }
.animation-complexity-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.animation-complexity-options label { position: relative; min-width: 0; cursor: pointer; }
.animation-complexity-options input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.animation-complexity-options label > span {
  display: grid;
  min-height: 62px;
  gap: 3px;
  align-content: center;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--text);
  text-align: center;
  background: color-mix(in srgb, var(--surface-solid) 70%, transparent);
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.animation-complexity-options label small { color: var(--muted); font-size: .66rem; line-height: 1.2; }
.animation-complexity-options input:checked + span { border-color: color-mix(in srgb, var(--accent) 64%, var(--line)); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent); }
.animation-complexity-options input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: 3px; }
.animation-complexity-options label:hover > span { transform: translateY(-1px); }

@media (max-width: 390px) {
  .animation-complexity-options { grid-template-columns: minmax(0, 1fr); }
  .animation-complexity-options label > span { min-height: 52px; }
}

/* Optimized ambient field: transform-only motion and bounded layer counts. */
.ambient-site-background,
[data-theme="dark"] .ambient-site-background {
  inset: -14vmax;
  contain: layout paint style;
  filter: none !important;
  transition: opacity 1s ease;
}

.ambient-site-blob,
[data-theme="dark"] .ambient-site-blob {
  border-radius: 48% 52% 58% 42% / 46% 44% 56% 54%;
  mix-blend-mode: normal;
  filter: blur(clamp(46px, 5.5vw, 82px));
  backface-visibility: hidden;
  will-change: auto;
  animation: none !important;
  transition: background-color 1.5s ease, opacity .8s ease;
}

[data-animation-complexity="medium"] .ambient-site-blob-1,
[data-animation-complexity="medium"] .ambient-site-blob-2,
[data-animation-complexity="medium"] .ambient-site-blob-3,
[data-animation-complexity="high"] .ambient-site-blob-1,
[data-animation-complexity="high"] .ambient-site-blob-2,
[data-animation-complexity="high"] .ambient-site-blob-3,
[data-animation-complexity="high"] .ambient-site-blob-4,
[data-animation-complexity="high"] .ambient-site-blob-5 { display: block; }

[data-animation-complexity="medium"] .ambient-site-blob-4,
[data-animation-complexity="medium"] .ambient-site-blob-5,
[data-animation-complexity="medium"] .ambient-site-blob-6,
[data-animation-complexity="high"] .ambient-site-blob-6 { display: none; }

[data-animation-complexity="medium"] .ambient-site-blob { width: 56vmax; opacity: .36; }
[data-animation-complexity="medium"] .ambient-site-blob-1 { animation: ambientFloatA 44s ease-in-out infinite alternate !important; }
[data-animation-complexity="medium"] .ambient-site-blob-2 { animation: ambientFloatB 52s ease-in-out -17s infinite alternate !important; }
[data-animation-complexity="medium"] .ambient-site-blob-3 { animation: ambientFloatC 60s ease-in-out -29s infinite alternate !important; }
[data-animation-complexity="medium"] .ambient-site-background.is-playing .ambient-site-blob { opacity: .43; }
[data-animation-complexity="medium"] .ambient-site-grain { display: none; }

[data-animation-complexity="high"] .ambient-site-blob { opacity: .43; }
[data-animation-complexity="high"] .ambient-site-blob-1 { animation: ambientFloatA 32s ease-in-out infinite alternate !important; }
[data-animation-complexity="high"] .ambient-site-blob-2 { animation: ambientFloatB 38s ease-in-out -13s infinite alternate !important; }
[data-animation-complexity="high"] .ambient-site-blob-3 { animation: ambientFloatC 46s ease-in-out -23s infinite alternate !important; }
[data-animation-complexity="high"] .ambient-site-blob-4 { animation: ambientFloatB 54s ease-in-out -31s infinite alternate-reverse !important; }
[data-animation-complexity="high"] .ambient-site-blob-5 { animation: ambientFloatA 62s ease-in-out -37s infinite alternate-reverse !important; }
[data-animation-complexity="high"] .ambient-site-background.is-playing .ambient-site-blob { opacity: .5; }
[data-animation-complexity="high"] .ambient-site-grain { display: block; opacity: .035; }

[data-animation-complexity="low"] .ambient-site-background { transition: opacity .6s ease; }
[data-animation-complexity="low"] .ambient-site-blob,
[data-animation-complexity="low"] .ambient-site-grain { display: none !important; }

@keyframes ambientFloatA {
  from { transform: translate3d(-6%, -4%, 0) scale(.98); }
  to { transform: translate3d(9%, 7%, 0) scale(1.05); }
}
@keyframes ambientFloatB {
  from { transform: translate3d(7%, -6%, 0) scale(1.03); }
  to { transform: translate3d(-8%, 10%, 0) scale(.97); }
}
@keyframes ambientFloatC {
  from { transform: translate3d(-5%, 8%, 0) scale(.96); }
  to { transform: translate3d(8%, -7%, 0) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-site-blob { animation: none !important; transform: none !important; }
}