/*
 * Mimic Me Creator Studio refresh
 * A deliberately quiet, studio-like layer that sits after the legacy portal
 * stylesheet.  It keeps the existing DOM and JavaScript contracts intact.
 */
:root {
  --studio-ink: #18212b;
  --studio-ink-2: #263443;
  --studio-paper: #f5f2ed;
  --studio-card: #fffdf9;
  --studio-line: #ded8cf;
  --studio-muted: #66727d;
  --studio-accent: #e76143;
  --studio-accent-dark: #bf432a;
  --studio-accent-soft: #fce6df;
  --studio-blue: #267d9b;
  --studio-blue-soft: #dff0f4;
  --studio-green: #28725e;
  --studio-green-soft: #dff1e9;
  --studio-yellow: #f4bd47;
  --studio-shadow: 0 14px 34px rgba(24, 33, 43, .08);
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  color: var(--studio-ink);
  background:
    linear-gradient(rgba(24, 33, 43, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 33, 43, .025) 1px, transparent 1px),
    var(--studio-paper);
  background-size: 28px 28px;
  font-family: "DM Sans", "Nunito", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.01em;
}

button,
input,
textarea,
select {
  font-family: inherit;
}

button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(231, 97, 67, .42);
  outline-offset: 3px;
}

::selection {
  color: #fff;
  background: var(--studio-accent);
}

.app {
  grid-template-columns: 264px minmax(0, 1fr);
  background: transparent;
}

.sidebar {
  position: sticky;
  z-index: 10;
  height: 100dvh;
  padding: 26px 16px 18px;
  overflow-y: auto;
  color: #f8f4ed;
  background: var(--studio-ink);
  border-right: 1px solid rgba(255, 255, 255, .09);
}

.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 28px 28px;
}

.sidebar > * {
  position: relative;
  z-index: 1;
}

.brand,
.mobile-brand {
  gap: 10px;
  font-family: "Space Grotesk", "Fredoka", sans-serif;
  font-weight: 700;
  letter-spacing: -.055em;
  text-decoration: none;
}

.brand {
  margin: 0 12px 48px;
  font-size: 1.1rem;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 11px;
  background-color: #f7efe4;
  background-size: 225% auto;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 5px 13px rgba(0, 0, 0, .24);
  transform: none;
}

.side-label {
  margin: 0 12px 10px;
  color: rgba(248, 244, 237, .46);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .13em;
}

.side-nav {
  gap: 4px;
}

.side-nav a {
  position: relative;
  gap: 11px;
  min-height: 45px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: rgba(248, 244, 237, .66);
  font-size: .83rem;
  font-weight: 700;
  letter-spacing: -.015em;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

.side-nav a::before {
  content: "";
  position: absolute;
  left: -16px;
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--studio-accent);
  opacity: 0;
  transform: scaleY(.5);
  transition: opacity .18s ease, transform .18s ease;
}

.side-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .055);
}

.side-nav a.active {
  color: #fff;
  background: rgba(231, 97, 67, .16);
  border-color: rgba(231, 97, 67, .18);
}

.side-nav a.active::before {
  opacity: 1;
  transform: scaleY(1);
}

.nav-icon {
  flex-basis: 25px;
  width: 25px;
  height: 25px;
  border-radius: 8px;
  color: #f8f4ed;
  background: rgba(255, 255, 255, .09);
  box-shadow: none;
  font-size: .72rem;
}

.side-nav a.active .nav-icon {
  color: var(--studio-ink);
  background: var(--studio-accent);
}

.nav-count {
  min-width: 22px;
  padding: 3px 7px;
  color: var(--studio-ink);
  background: var(--studio-yellow);
  font-size: .63rem;
  font-variant-numeric: tabular-nums;
}

.back-link {
  margin: 0 12px 17px;
  color: rgba(248, 244, 237, .54);
  font-size: .72rem;
  font-weight: 700;
}

.back-link:hover {
  color: #fff;
}

.account-mini {
  gap: 10px;
  padding: 12px;
  border-color: rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .055);
}

.account-mini strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: .77rem;
}

.account-mini span:not(.avatar) {
  color: rgba(248, 244, 237, .47);
  font-size: .64rem;
}

.avatar {
  border-radius: 10px;
  color: #fff;
  background: var(--studio-accent);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
}

.content {
  width: min(100%, 1560px);
  min-height: 100vh;
  padding: 29px clamp(24px, 4.3vw, 72px) 52px;
}

.topbar {
  min-height: 42px;
  margin-bottom: 32px;
}

.topbar-label {
  color: var(--studio-muted);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .015em;
}

.topbar-label::before {
  content: "STUDIO";
  margin-right: 11px;
  color: var(--studio-accent);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.topbar-label span {
  color: #a4abae;
}

.top-actions {
  gap: 9px;
}

.circle-button,
.icon-button,
.logout-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--studio-line);
  border-radius: 12px;
  color: var(--studio-ink-2);
  background: rgba(255, 253, 249, .84);
  box-shadow: 0 4px 12px rgba(24, 33, 43, .04);
  transition: transform .18s ease, color .18s ease, border-color .18s ease, background-color .18s ease;
}

.circle-button:hover,
.icon-button:hover {
  color: var(--studio-accent-dark);
  border-color: rgba(231, 97, 67, .46);
  background: #fffdf9;
  transform: translateY(-1px);
}

.logout-button,
.icon-button.logout-button {
  color: #b23d36;
  background: #fffaf7;
}

.logout-button:hover,
.icon-button.logout-button:hover {
  color: #fff;
  border-color: #b23d36;
  background: #b23d36;
}

.user-pill {
  gap: 9px;
  min-height: 40px;
  padding: 4px 10px 4px 5px;
  border-color: var(--studio-line);
  color: var(--studio-ink);
  background: rgba(255, 253, 249, .88);
  box-shadow: 0 4px 12px rgba(24, 33, 43, .04);
  font-size: .73rem;
  font-weight: 700;
  transition: transform .18s ease, border-color .18s ease;
}

.user-pill:hover {
  border-color: rgba(231, 97, 67, .55);
  transform: translateY(-1px);
}

.user-pill .avatar {
  border-radius: 9px;
}

.mobile-brand {
  color: var(--studio-ink);
}

.mobile-brand .brand-mark {
  box-shadow: 0 3px 10px rgba(24, 33, 43, .12);
}

/* Dashboard and page heroes share the same calm, durable visual language. */
.account-overview,
.page-hero {
  isolation: isolate;
  min-height: 238px;
  padding: 32px clamp(26px, 3.3vw, 48px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  color: #fffdf9;
  background: #1b2732;
  box-shadow: 0 18px 0 #dcd5ca, 0 25px 42px rgba(24, 33, 43, .14);
}

.account-overview::before,
.page-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  width: auto;
  height: auto;
  right: auto;
  bottom: auto;
  left: 0;
  top: 0;
  border-radius: inherit;
  opacity: .6;
  background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 28px 28px;
}

.account-overview::after,
.page-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: auto;
  left: auto;
  right: clamp(23px, 5vw, 78px);
  bottom: 26px;
  width: min(25vw, 300px);
  height: 62px;
  border-top: 1px solid rgba(255, 255, 255, .24);
  border-bottom: 1px solid rgba(255, 255, 255, .11);
  border-radius: 0;
  opacity: .72;
  background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(231, 97, 67, .94) 12px 17px, transparent 17px 26px);
  clip-path: polygon(0 62%, 9% 62%, 9% 34%, 18% 34%, 18% 79%, 29% 79%, 29% 9%, 39% 9%, 39% 50%, 50% 50%, 50% 24%, 60% 24%, 60% 88%, 70% 88%, 70% 41%, 80% 41%, 80% 67%, 90% 67%, 90% 16%, 100% 16%, 100% 100%, 0 100%);
}

.page-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  min-height: 220px;
}

.page-hero > div,
.balance-summary,
.account-balances {
  position: relative;
  z-index: 1;
}

.kicker,
.section-kicker {
  margin-bottom: 9px;
  color: var(--studio-accent);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .15em;
}

.account-overview .kicker,
.page-hero .kicker {
  color: #f7c869;
}

.balance-summary h1,
.page-hero h1 {
  max-width: 660px;
  font-family: "Space Grotesk", "Fredoka", sans-serif;
  font-size: clamp(2rem, 3.7vw, 3.55rem);
  font-weight: 650;
  letter-spacing: -.075em;
  line-height: .98;
}

.page-hero h1 {
  color: #fffdf9;
}

.balance-summary p:last-child,
.page-hero p {
  max-width: 535px;
  margin-top: 11px;
  color: rgba(255, 253, 249, .68);
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.55;
}

.account-balances {
  grid-template-columns: repeat(3, minmax(135px, 1fr));
  gap: 10px;
  max-width: 706px;
  margin-top: 27px;
}

.balance-card,
.balance-card.coins,
.balance-card.gems,
.balance-card.trophies {
  gap: 10px;
  min-height: 70px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 13px;
  background: rgba(255, 255, 255, .065);
  backdrop-filter: blur(6px);
}

.balance-card.coins { border-left: 3px solid #f7c869; }
.balance-card.gems { border-left: 3px solid #83c8dc; }
.balance-card.trophies { border-left: 3px solid #e76143; }

.balance-icon {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #f7c869;
  background: rgba(255, 255, 255, .1);
  font-size: .82rem;
}

.balance-card.gems .balance-icon { color: #9bd9e9; }
.balance-card.trophies .balance-icon { color: #f3856d; }

.balance-label {
  color: rgba(255, 253, 249, .58);
  font-size: .61rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.balance-value {
  margin-top: 3px;
  color: #fffdf9;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.35rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.button {
  min-height: 42px;
  padding: 10px 15px;
  border: 1px solid var(--studio-accent);
  border-radius: 10px;
  color: #fff;
  background: var(--studio-accent);
  box-shadow: 0 4px 0 var(--studio-accent-dark);
  font-family: "Space Grotesk", "Fredoka", sans-serif;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: -.02em;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

.button:hover {
  color: #fff;
  background: var(--studio-accent-dark);
  border-color: var(--studio-accent-dark);
  box-shadow: 0 6px 0 #98321f;
  transform: translateY(-2px);
}

.button:active {
  box-shadow: 0 1px 0 #98321f;
  transform: translateY(3px);
}

.button-purple {
  color: #fff;
  background: var(--studio-accent);
}

.button-ghost {
  color: var(--studio-ink);
  border-color: var(--studio-line);
  background: #fffdf9;
  box-shadow: none;
}

.button-ghost:hover {
  color: var(--studio-ink);
  border-color: var(--studio-ink);
  background: #f3ede5;
  box-shadow: none;
}

.page-hero .button {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  color: #1b2732;
  border-color: #f7c869;
  background: #f7c869;
  box-shadow: 0 4px 0 #b78329;
}

.page-hero .button:hover {
  color: #1b2732;
  border-color: #f5b940;
  background: #f5b940;
  box-shadow: 0 6px 0 #9e701f;
}

.stats {
  gap: 13px;
  margin: 38px 0 44px;
}

.stat {
  position: relative;
  gap: 12px;
  min-height: 106px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--studio-line);
  border-radius: 16px;
  background: rgba(255, 253, 249, .9);
  box-shadow: var(--studio-shadow);
}

.stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  width: 40px;
  height: 3px;
  border-radius: 0 0 5px 5px;
  background: var(--studio-accent);
}

.stat:nth-child(2)::before { background: var(--studio-blue); }
.stat:nth-child(3)::before { background: #c28a1b; }

.stat-icon {
  flex-basis: 43px;
  width: 43px;
  height: 43px;
  border-radius: 12px;
  color: var(--studio-accent-dark);
  background: var(--studio-accent-soft) !important;
  box-shadow: none;
}

.stat:nth-child(2) .stat-icon {
  color: #176b88;
  background: var(--studio-blue-soft) !important;
}

.stat:nth-child(3) .stat-icon {
  color: #8d6414;
  background: #fbefd0 !important;
}

.stat strong {
  color: var(--studio-ink);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.55rem;
  font-weight: 650;
  letter-spacing: -.07em;
  font-variant-numeric: tabular-nums;
}

.stat span {
  margin-top: 5px;
  color: var(--studio-muted);
  font-size: .7rem;
  font-weight: 600;
}

.section-head {
  gap: 22px;
  margin: 0 0 16px;
}

.section-head h2 {
  color: var(--studio-ink);
  font-family: "Space Grotesk", "Fredoka", sans-serif;
  font-size: clamp(1.42rem, 2.2vw, 1.85rem);
  font-weight: 650;
  letter-spacing: -.065em;
}

.section-head p {
  margin-top: 6px;
  color: var(--studio-muted);
  font-size: .76rem;
  font-weight: 500;
}

.section-actions {
  gap: 15px;
}

.text-link {
  color: var(--studio-ink);
  font-size: .73rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(231, 97, 67, .48);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.text-link:hover {
  color: var(--studio-accent-dark);
}

.panel,
.pack-list,
.side-card,
.settings-card {
  border-color: var(--studio-line);
  border-radius: 16px;
  background: rgba(255, 253, 249, .93);
  box-shadow: var(--studio-shadow);
}

.pack-list {
  overflow: hidden;
}

.pack-row {
  gap: 14px;
  min-height: 83px;
  padding: 16px 19px;
  transition: background-color .16s ease;
}

.pack-row:hover {
  background: #fffbf5;
}

.pack-row + .pack-row {
  border-top-color: #e7e1d8;
}

.pack-avatar {
  border: 1px solid #e4ded5;
  border-radius: 13px;
  color: var(--studio-accent-dark);
  background: var(--studio-accent-soft);
  box-shadow: none;
}

.my-sounds-page .pack-avatar {
  border-radius: 15px;
}

.pack-info strong,
.pack-row strong {
  color: var(--studio-ink);
  font-family: "Space Grotesk", "Fredoka", sans-serif;
  font-weight: 650;
  letter-spacing: -.04em;
}

.pack-info p,
.pack-row p {
  color: var(--studio-muted);
  font-size: .69rem;
  font-weight: 500;
}

.pack-status {
  border: 1px solid #c8e4d8;
  color: var(--studio-green);
  background: var(--studio-green-soft);
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.pack-status.inactive {
  border-color: #ead8b1;
  color: #936411;
  background: #fbf0d5;
}

.pack-action {
  border-color: transparent;
  border-radius: 9px;
  color: #67737d;
}

.pack-action:hover {
  color: var(--studio-accent-dark);
  background: var(--studio-accent-soft);
  transform: none;
}

.pack-action.toggle {
  color: var(--studio-green);
}

.pack-action.toggle:hover {
  color: var(--studio-green);
  background: var(--studio-green-soft);
}

.pack-action.delete {
  color: #ba3e41;
}

.pack-action.delete:hover {
  color: #a52f33;
  background: #fde5e4;
}

.pack-preview-trigger,
.preview-button {
  padding: 5px 9px;
  border-color: #d7d2ca;
  color: var(--studio-ink-2);
  background: #fffdf9;
  font-size: .64rem;
  font-weight: 700;
}

.pack-preview-trigger:hover,
.preview-button:hover {
  color: var(--studio-accent-dark);
  border-color: rgba(231, 97, 67, .46);
  background: #fff8f4;
}

.pack-preview-trigger[aria-expanded="true"] {
  color: #fff;
  border-color: var(--studio-ink);
  background: var(--studio-ink);
}

.pack-preview,
.preview-panel {
  border-color: #e3ddd3;
  border-radius: 12px;
  background: #f7f3ed;
}

.clip-preview-row,
.clip-row {
  border-color: #e6e0d7;
  background: #fffdf9;
}

.clip-preview-button,
.clip-row button,
.detail-play {
  border-radius: 8px;
  background: var(--studio-ink);
  box-shadow: none;
}

.clip-preview-button:hover,
.clip-row button:hover,
.detail-play:hover,
.detail-play.is-playing,
.clip-preview-button.is-playing {
  background: var(--studio-accent);
}

.empty-state {
  min-height: 180px;
  color: var(--studio-muted);
  font-size: .78rem;
  font-weight: 500;
}

.empty-state strong {
  color: var(--studio-ink);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 650;
}

/* Collection page */
.my-sounds-page .page-hero,
body:not(.my-sounds-page) .page-hero {
  margin-bottom: 0;
}

.my-sounds-page .section-head,
.content > .notice + .section-head {
  margin-top: 45px;
}

/* Discover uses a flexible editorial grid instead of a gallery of pills. */
.discover-grid {
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: 16px;
}

.discover-card {
  max-width: none;
  min-height: 100%;
  padding: 10px;
  border: 1px solid var(--studio-line);
  border-radius: 16px;
  background: rgba(255, 253, 249, .93);
  box-shadow: var(--studio-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.discover-card:hover {
  border-color: rgba(231, 97, 67, .45);
  box-shadow: 0 18px 32px rgba(24, 33, 43, .12);
  transform: translateY(-3px);
}

.discover-cover {
  border: 1px solid #e6dfd4;
  border-radius: 11px;
  background: #eee7dd;
  box-shadow: none;
}

.discover-cover::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(24, 33, 43, .84);
  box-shadow: 0 2px 8px rgba(24, 33, 43, .2);
}

.discover-cover::before {
  content: "\f04b";
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #fff;
  font-family: "Font Awesome 6 Free";
  font-size: .7rem;
  font-weight: 900;
}

.discover-cover-placeholder {
  border-radius: 14px;
  color: var(--studio-accent-dark);
  background: #fffaf5;
  box-shadow: none;
}

.discover-body {
  margin: 12px 4px 4px;
}

.discover-title,
.discover-card strong {
  color: var(--studio-ink);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 650;
  letter-spacing: -.045em;
}

.discover-creator,
.discover-card p {
  color: var(--studio-muted);
  font-weight: 500;
}

.discover-creator i {
  color: var(--studio-accent);
}

.discover-badge {
  border: 1px solid #d9d2c9;
  color: var(--studio-ink-2);
  background: #f6f2ec;
  font-size: .62rem;
  font-weight: 700;
}

.discover-badge-sfx {
  border-color: #c8e4d8;
  color: var(--studio-green);
  background: var(--studio-green-soft);
}

.discover-badge-plays {
  border-color: #f0d7cc;
  color: var(--studio-accent-dark);
  background: var(--studio-accent-soft);
}

.discover-open {
  min-height: 39px;
  border: 1px solid var(--studio-ink);
  border-radius: 9px;
  color: #fff;
  background: var(--studio-ink);
  box-shadow: none;
  font-family: "Space Grotesk", sans-serif;
  font-size: .75rem;
  font-weight: 650;
}

.discover-open:hover {
  color: #fff;
  background: var(--studio-accent);
  border-color: var(--studio-accent);
  box-shadow: none;
  transform: none;
}

/* Settings */
.settings-grid {
  gap: 17px;
}

.settings-card {
  padding: clamp(20px, 2.3vw, 29px);
}

.settings-card h3 {
  margin-bottom: 20px;
  color: var(--studio-ink);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: -.055em;
}

.profile-strip {
  padding-bottom: 19px;
  border-bottom: 1px solid #e4ded5;
}

.profile-strip .avatar {
  border-radius: 14px;
  box-shadow: none;
}

.profile-strip strong {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 650;
  letter-spacing: -.05em;
}

.profile-strip p {
  color: var(--studio-muted);
  font-weight: 500;
}

.upload-avatar {
  border-color: #d9d2c8;
  border-radius: 8px;
  color: var(--studio-ink-2);
  background: #fffdf9;
  font-size: .66rem;
  font-weight: 700;
}

.upload-avatar:hover {
  border-color: rgba(231, 97, 67, .45);
  color: var(--studio-accent-dark);
  background: #fff8f4;
}

.settings-fields label,
.field label,
.report-label {
  color: var(--studio-ink-2);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .015em;
}

.settings-fields input,
.field input,
.field textarea,
.report-select {
  border-color: #dcd5cb;
  border-radius: 9px;
  color: var(--studio-ink);
  background: #fffdf9;
  font-size: .78rem;
  font-weight: 500;
}

.settings-fields input:focus,
.field input:focus,
.field textarea:focus,
.report-select:focus {
  border-color: var(--studio-accent);
  box-shadow: 0 0 0 3px rgba(231, 97, 67, .13);
}

.settings-status,
.notice {
  color: var(--studio-blue);
  font-weight: 600;
}

.notice {
  border: 1px solid #c9e4eb;
  border-radius: 10px;
  background: #eaf6f8;
}

.settings-status.error,
.notice.error {
  color: #ae3b3c;
}

/* Dialogs retain their data attributes and behavior while using the same system. */
.modal-backdrop,
.detail-backdrop {
  z-index: 100;
  background: rgba(24, 33, 43, .72);
  backdrop-filter: blur(5px);
}

.modal,
.detail-card,
.report-card {
  border: 1px solid #e0d9cf;
  border-radius: 18px;
  color: var(--studio-ink);
  background: #fffdf9;
  box-shadow: 0 30px 85px rgba(9, 15, 21, .38);
}

.modal-head h2,
.detail-title h2,
.report-card h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 650;
  letter-spacing: -.065em;
}

.modal-head p,
.detail-title p,
.report-card > p,
.detail-description {
  color: var(--studio-muted);
  font-weight: 500;
}

.close-modal,
.detail-close {
  border: 1px solid #e4ddd3;
  border-radius: 9px;
  color: var(--studio-ink-2);
  background: #f7f3ed;
}

.close-modal:hover,
.detail-close:hover {
  color: var(--studio-accent-dark);
  background: var(--studio-accent-soft);
}

.auth-tabs {
  border: 1px solid #e2dcd3;
  border-radius: 10px;
  background: #f4f0ea;
}

.auth-tab {
  color: var(--studio-muted);
  font-weight: 700;
}

.auth-tab.active {
  color: var(--studio-ink);
  background: #fffdf9;
  box-shadow: 0 2px 8px rgba(24, 33, 43, .08);
}

.google-button {
  border-color: #ded8cf;
  border-radius: 10px;
  color: var(--studio-ink);
  background: #fffdf9;
  font-weight: 700;
}

.google-button:hover {
  border-color: rgba(231, 97, 67, .42);
  box-shadow: none;
}

.dropzone,
.icon-dropzone {
  border-color: #d8cfc4;
  border-radius: 12px;
  color: var(--studio-muted);
  background: #f8f4ee;
}

.dropzone.dragging,
.dropzone:hover,
.icon-dropzone:hover,
.icon-dropzone:focus-within,
.icon-dropzone.dragging {
  border-color: var(--studio-accent);
  background: #fff5f0;
}

.drop-icon {
  color: var(--studio-accent-dark);
  background: var(--studio-accent-soft);
  box-shadow: none;
}

.dropzone strong,
.icon-placeholder strong {
  color: var(--studio-ink);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 650;
}

.icon-placeholder i {
  color: var(--studio-accent-dark);
}

.visibility input:checked + span {
  border-color: rgba(231, 97, 67, .48);
  color: var(--studio-accent-dark);
  background: #fff2ec;
}

.edit-clips-list,
.upload-result,
.detail-clip {
  border-color: #e2dcd2;
  background: #f8f4ee;
}

.edit-clip-row,
.clip-preview-row {
  border-color: #e4ded4;
  background: #fffdf9;
}

.edit-clip-play {
  background: var(--studio-ink);
  box-shadow: none;
}

.edit-clip-play:hover,
.edit-clip-play.is-playing {
  background: var(--studio-accent);
}

.detail-report {
  border-radius: 9px;
  color: #ae3b3c;
  background: #fde7e5;
}

.detail-report:hover {
  color: #fff;
  background: #ae3b3c;
}

.report-submit {
  border-radius: 9px;
  background: #ae3b3c;
  box-shadow: 0 3px 0 #7e252a;
}

.report-cancel {
  border-color: #ded8cf;
  border-radius: 9px;
  color: var(--studio-ink-2);
  background: #fffdf9;
}

.toast {
  z-index: 110;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 12px;
  background: var(--studio-ink);
  box-shadow: 0 18px 40px rgba(24, 33, 43, .28);
}

/* Information pages share the same hierarchy without turning them into a dashboard. */
.info-page {
  background: var(--studio-paper);
}

.info-header {
  padding: 20px max(24px, calc((100% - 1220px) / 2));
  background: var(--studio-ink);
}

.info-header .button {
  color: var(--studio-ink);
  border-color: #f7c869;
  background: #f7c869;
  box-shadow: 0 3px 0 #b78329;
}

.info-main {
  width: min(790px, calc(100% - 48px));
}

.info-main h1 {
  color: var(--studio-ink);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 650;
  letter-spacing: -.085em;
}

.info-main > p {
  color: var(--studio-muted);
  font-weight: 500;
}

.info-card {
  border-color: var(--studio-line);
  border-radius: 16px;
  background: #fffdf9;
  box-shadow: var(--studio-shadow);
}

.info-card a {
  color: var(--studio-accent-dark);
  font-weight: 700;
}

.policy-page .policy-lead {
  max-width: 680px;
  margin-top: 16px;
  font-size: 1.04rem;
}

.policy-page .policy-date {
  margin-top: 10px;
  color: var(--studio-muted);
  font-size: .82rem;
  font-weight: 600;
}

.policy-page .info-card h2 {
  margin: 25px 0 8px;
  color: var(--studio-ink);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.025em;
}

.policy-page .info-card h2:first-child { margin-top: 0; }

.policy-page .info-card p,
.policy-page .info-card li {
  color: var(--studio-muted);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.75;
}

.policy-page .info-card p + p { margin-top: 10px; }

.policy-page .info-card ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 22px;
}

.policy-page .info-card li { padding-left: 3px; }
.policy-page .info-card strong { color: var(--studio-ink); }

.account-deletion-form {
  display: grid;
  gap: 17px;
  margin-top: 24px;
}

.account-deletion-form .field { display: grid; gap: 7px; }
.account-deletion-form .conditional-field[hidden] { display: none; }
.account-deletion-form .field label { color: var(--studio-ink); font-size: .82rem; font-weight: 700; }
.account-deletion-form .field label span { color: var(--studio-muted); font-size: .74rem; font-weight: 500; }
.account-deletion-form .field input,
.account-deletion-form .field select,
.account-deletion-form .field textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--studio-line); border-radius: 10px; color: var(--studio-ink); background: #f8fdff; font: inherit; font-size: .92rem; }
.account-deletion-form .field textarea { resize: vertical; }
.account-deletion-form .field input:focus,
.account-deletion-form .field select:focus,
.account-deletion-form .field textarea:focus { outline: 0; border-color: var(--studio-accent); box-shadow: 0 0 0 3px rgba(22,143,218,.14); }
.account-deletion-form .button { justify-self: start; }
.deletion-form-status { min-height: 1.5em; margin: 0 !important; color: var(--studio-blue); font-size: .9rem !important; font-weight: 700 !important; }
.deletion-form-status.error { color: #ae3b3c; }
.deletion-privacy-note { margin-top: 22px !important; font-size: .82rem !important; }

@media (max-width: 1120px) {
  .app { grid-template-columns: 88px minmax(0, 1fr); }
  .sidebar { padding-inline: 12px; }
  .brand { justify-content: center; margin: 0 0 43px; }
  .brand > span:last-child,
  .side-label,
  .back-link,
  .account-mini > div { display: none; }
  .side-nav a { justify-content: center; padding-inline: 0; font-size: 0; }
  .side-nav a::before { left: -12px; }
  .nav-icon { flex-basis: 31px; width: 31px; height: 31px; font-size: .82rem; }
  .nav-count { position: absolute; top: 4px; right: 5px; min-width: 17px; padding: 2px 4px; font-size: .56rem; }
  .account-mini { justify-content: center; padding: 9px; }
  .content { padding-inline: clamp(24px, 4.2vw, 48px); }
}

@media (max-width: 860px) {
  .content { padding-top: 23px; }
  .topbar { margin-bottom: 25px; }
  .account-overview,
  .page-hero { min-height: 215px; }
  .account-overview::after,
  .page-hero::after { width: 210px; opacity: .48; }
  .stats { margin: 33px 0 39px; }
  .discover-grid { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); }
}

@media (max-width: 700px) {
  body { background-size: 22px 22px; }
  .app { display: block; }
  .sidebar { display: none; }
  .content { min-height: 100dvh; padding: 16px 14px calc(100px + env(safe-area-inset-bottom)); }
  .topbar { min-height: 38px; margin-bottom: 21px; }
  .mobile-brand { display: inline-flex; font-size: .98rem; }
  .mobile-brand .brand-mark { width: 31px; height: 31px; border: 0; }
  .topbar-label { display: none; }
  .top-actions { gap: 6px; }
  .top-actions .circle-button { display: none; }
  .circle-button,
  .icon-button,
  .logout-button { width: 38px; height: 38px; }
  .user-pill { max-width: 150px; min-height: 38px; }
  .user-pill [data-user-name] { max-width: 78px; }
  .mobile-nav {
    position: fixed;
    z-index: 60;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    margin: 0;
    padding: 6px;
    border: 1px solid rgba(222, 216, 207, .92);
    border-radius: 16px;
    background: rgba(255, 253, 249, .94);
    box-shadow: 0 14px 32px rgba(24, 33, 43, .2);
    backdrop-filter: blur(13px);
  }
  .mobile-nav a {
    gap: 4px;
    padding: 7px 2px;
    border-radius: 11px;
    color: var(--studio-muted);
    font-size: .58rem;
    font-weight: 700;
  }
  .mobile-nav a i { font-size: .84rem; }
  .mobile-nav a.active { color: #fff; background: var(--studio-ink); }
  .account-overview,
  .page-hero { min-height: 0; padding: 25px 20px 23px; border-radius: 18px; box-shadow: 0 10px 0 #dcd5ca, 0 18px 30px rgba(24, 33, 43, .12); }
  .account-overview::after,
  .page-hero::after { right: 20px; bottom: 18px; width: 142px; height: 44px; opacity: .32; }
  .balance-summary h1,
  .page-hero h1 { font-size: clamp(2rem, 10.5vw, 2.65rem); }
  .balance-summary p:last-child,
  .page-hero p { max-width: 330px; font-size: .78rem; }
  .account-balances { grid-template-columns: 1fr; gap: 7px; margin-top: 21px; }
  .balance-card { min-height: 57px; padding: 9px 10px; }
  .balance-icon { flex-basis: 31px; width: 31px; height: 31px; }
  .balance-value { font-size: 1.2rem; }
  .page-hero { display: block; }
  .page-hero .button { width: 100%; margin-top: 21px; }
  .stats { grid-template-columns: 1fr; gap: 9px; margin: 28px 0 34px; }
  .stat { min-height: 78px; padding: 14px; }
  .stat::before { left: 14px; }
  .stat-icon { flex-basis: 39px; width: 39px; height: 39px; }
  .section-head { align-items: flex-start; flex-direction: column; gap: 14px; }
  .section-actions { width: 100%; align-items: stretch; flex-direction: column; gap: 11px; }
  .section-actions .button { width: 100%; }
  .text-link { align-self: flex-start; }
  .pack-row,
  .my-sounds-page .pack-row { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 11px; padding: 14px; }
  .pack-avatar,
  .my-sounds-page .pack-avatar { width: 56px; height: 56px; border-radius: 13px; }
  .pack-row > .pack-status { grid-column: 2; justify-self: start; }
  .pack-row > .pack-actions { grid-column: 3; grid-row: 1 / span 2; }
  .preview-panel { margin-left: 14px; margin-right: 14px; }
  .pack-preview { margin-inline: 0; }
  .my-sounds-page .section-head,
  .content > .notice + .section-head { margin-top: 33px; }
  .discover-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .discover-card { padding: 7px; border-radius: 13px; }
  .discover-body { margin: 9px 3px 3px; }
  .discover-title { font-size: .84rem; }
  .discover-creator { margin-bottom: 7px; font-size: .62rem; }
  .discover-meta { gap: 4px; margin-bottom: 8px; }
  .discover-badge { padding: 3px 6px; font-size: .55rem; }
  .discover-open { min-height: 34px; padding: 7px; border-radius: 8px; font-size: .66rem; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-fields { grid-template-columns: 1fr; }
  .settings-card { padding: 19px; }
  .profile-strip { align-items: flex-start; }
  .modal-backdrop,
  .detail-backdrop { padding: 11px; }
  .modal,
  .create-modal,
  .detail-card,
  .report-card { width: 100%; max-height: calc(100dvh - 22px); padding: 20px 16px; border-radius: 15px; }
  .modal-actions { gap: 9px; }
  .modal-actions .button { width: 100%; }
  .detail-title h2 { font-size: 1.25rem; }
  .detail-icon { flex-basis: 46px; width: 46px; height: 46px; border-radius: 12px; }
  .toast { right: 14px; bottom: calc(88px + env(safe-area-inset-bottom)); left: 14px; }
  .info-header { padding: 15px; }
  .info-header .brand { margin: 0; }
  .info-main { width: min(calc(100% - 30px), 560px); padding: 50px 0 70px; }
}

/* Party-game finish: larger rounded type, cheerful yellow accents and softer
   cards, while preserving the existing responsive dashboard structure. */
body { font-family: "Nunito", system-ui, sans-serif; }
.brand, .mobile-brand, .balance-summary h1, .page-hero h1, .section-head h2, .settings-card h3, .pack-info strong, .pack-row strong, .discover-title, .discover-card strong, .info-main h1, .button, .discover-open, .pack-status, .kicker, .section-kicker { font-family: "Baloo 2", "Fredoka", system-ui, sans-serif; }
.sidebar { background: linear-gradient(180deg, #087bc5 0%, #159de0 59%, #54cdf2 100%); }
.brand { font-size: 1.28rem; }.brand-mark { width: 41px; height: 41px; border-radius: 15px; }
.side-label { margin-top: 4px; color: rgba(255,255,255,.68); font-size: .66rem; }
.side-nav { gap: 8px; }.side-nav a { min-height: 50px; border-radius: 16px; font-size: .9rem; }.side-nav a.active { color: #075e97; box-shadow: 0 5px 0 rgba(4,90,143,.2); }.nav-icon { flex-basis: 29px; width: 29px; height: 29px; border-radius: 10px; }
.content { padding-top: 25px; }
.topbar-label { font-family: "Baloo 2", "Fredoka", system-ui, sans-serif; font-size: .88rem; }.topbar-label::before { color: #168fda; letter-spacing: .1em; }
.account-overview, .page-hero { border-radius: 30px; background: linear-gradient(128deg, #0876be 0%, #168fd7 52%, #58cbed 100%); }
.account-overview::before, .page-hero::before { background-image: radial-gradient(circle at 88% 18%, rgba(255,255,255,.22) 0 16%, transparent 16.4%), radial-gradient(circle at 8% 100%, rgba(255,255,255,.14) 0 18%, transparent 18.4%); opacity: 1; }
.account-overview::after, .page-hero::after { display: none; }
.kicker, .section-kicker { color: #0872ba; font-size: .76rem; letter-spacing: .09em; }.account-overview .kicker, .page-hero .kicker { color: #fff0a0; }
.balance-summary h1, .page-hero h1 { font-size: clamp(2.35rem, 4vw, 3.9rem); letter-spacing: -.045em; line-height: .92; }.balance-summary p:last-child, .page-hero p { font-size: .92rem; }
.account-balances { gap: 13px; }.balance-card, .balance-card.coins, .balance-card.gems, .balance-card.trophies { min-height: 77px; border-radius: 18px; background: rgba(255,255,255,.18); }.balance-icon { border-radius: 13px; }.balance-value { font-size: 1.48rem; }
.button { min-height: 45px; border-radius: 15px; font-size: .92rem; letter-spacing: 0; }.page-hero .button { border-radius: 15px; }
.stats { gap: 16px; }.stat, .panel, .pack-list, .side-card, .settings-card, .discover-card { border-radius: 22px; }.stat { min-height: 112px; padding: 19px; }.stat::before { left: 17px; width: 48px; height: 5px; border-radius: 0 0 8px 8px; }.stat-icon { width: 47px; height: 47px; border-radius: 15px; }.stat strong { font-family: "Baloo 2", "Fredoka", system-ui, sans-serif; font-size: 1.7rem; }.stat span { font-size: .76rem; }
.section-head h2 { font-size: clamp(1.7rem, 2.4vw, 2.1rem); letter-spacing: -.04em; }.section-head p { font-size: .82rem; }
.pack-row { min-height: 92px; border-radius: 0; }.pack-avatar { border-radius: 17px; }.my-sounds-page .pack-avatar { border-radius: 20px; }.pack-info strong, .pack-row strong { font-size: 1.08rem; }.pack-info p, .pack-row p { font-size: .75rem; }.pack-status { padding: 6px 11px; font-size: .68rem; }.pack-action { width: 34px; height: 34px; border-radius: 11px; }
.discover-grid { gap: 18px; }.discover-card { padding: 11px; border-radius: 22px; }.discover-cover { border-radius: 16px; }.discover-body { margin: 13px 6px 6px; }.discover-title { font-size: 1.12rem; }.discover-open { min-height: 42px; border-radius: 13px; font-size: .88rem; }
.settings-card { padding: clamp(22px, 2.6vw, 32px); }.settings-card h3 { font-size: 1.45rem; }.profile-strip .avatar { border-radius: 20px; }.input, .select, .settings-fields input, .field input, .report-select { border-radius: 13px; }
.mobile-nav { border-radius: 22px; }.mobile-nav a { border-radius: 14px; font-family: "Baloo 2", "Fredoka", system-ui, sans-serif; }
@media (max-width: 700px) {
  .mobile-brand { font-size: 1.08rem; }.mobile-brand .brand-mark { width: 36px; height: 36px; border-radius: 13px; }
  .account-overview, .page-hero { border-radius: 24px; }.balance-summary h1, .page-hero h1 { font-size: clamp(2.35rem, 11vw, 3rem); }.balance-card { min-height: 61px; border-radius: 15px; }
  .stat, .panel, .pack-list, .side-card, .settings-card, .discover-card { border-radius: 18px; }.stat { min-height: 84px; }.settings-card h3 { font-size: 1.3rem; }
}

@media (max-width: 420px) {
  .user-pill .fa-chevron-down { display: none; }
  .user-pill [data-user-name] { max-width: 67px; }
  .logout-button { width: 36px; }
  .pack-row,
  .my-sounds-page .pack-row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px; padding: 12px; }
  .pack-avatar,
  .my-sounds-page .pack-avatar { width: 48px; height: 48px; }
  .pack-actions { gap: 0; }
  .pack-action { width: 28px; height: 28px; }
  .clip-preview-row { align-items: flex-start; }
  .discover-grid { grid-template-columns: 1fr; }
  .discover-card { max-width: none; flex-direction: row; gap: 9px; padding: 8px; }
  .discover-cover { flex: 0 0 88px; width: 88px; aspect-ratio: 1; }
  .discover-cover::before { display: none; }
  .discover-cover::after { right: 7px; bottom: 7px; width: 24px; height: 24px; }
  .discover-body { margin: 3px 3px 3px 0; }
  .discover-title { white-space: normal; }
  .discover-meta { margin-top: auto; }
  .discover-open { width: max-content; min-height: 28px; margin-top: 4px; padding: 5px 8px; }
  .discover-open i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Friendly blue-and-white game skin.  This intentionally comes last so the
   visual layer does not change any dashboard markup or JavaScript behaviour. */
:root {
  --studio-ink: #103d63;
  --studio-ink-2: #17577f;
  --studio-paper: #effaff;
  --studio-card: #ffffff;
  --studio-line: #c9eafd;
  --studio-muted: #5d7d96;
  --studio-accent: #168fda;
  --studio-accent-dark: #0872ba;
  --studio-accent-soft: #e0f5ff;
  --studio-blue: #29b8ea;
  --studio-blue-soft: #ddf7ff;
  --studio-green: #16876d;
  --studio-green-soft: #e1f8f0;
  --studio-yellow: #ffd449;
  --studio-shadow: 0 14px 30px rgba(24, 119, 178, .11);
}

body {
  color: var(--studio-ink);
  background: linear-gradient(180deg, #f8fdff 0%, #eaf8ff 100%);
  background-size: auto;
  font-family: "Nunito", "DM Sans", system-ui, sans-serif;
  font-weight: 800;
}

button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline-color: rgba(22, 143, 218, .55); }
::selection { background: var(--studio-accent); }
.sidebar { color: #fff; background: linear-gradient(165deg, #0d77be 0%, #1698dd 58%, #42c6ed 100%); border-right-color: rgba(255,255,255,.16); }
.sidebar::before { opacity: .32; }
.brand, .mobile-brand, .balance-summary h1, .page-hero h1, .section-head h2, .settings-card h3, .pack-info strong, .pack-row strong, .discover-title, .discover-card strong, .info-main h1 { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; }
.brand { color: #fff; text-shadow: 0 2px 0 rgba(2, 75, 125, .2); }
.brand-mark { border: 3px solid #fff; background-color: #61d2f3; box-shadow: 0 4px 0 rgba(4, 85, 136, .24); transform: rotate(-6deg); }
.side-label, .back-link, .account-mini span:not(.avatar) { color: rgba(255,255,255,.75); }
.side-nav a { color: rgba(255,255,255,.88); font-family: "Nunito", system-ui, sans-serif; font-weight: 900; }
.side-nav a:hover { color: #fff; background: rgba(255,255,255,.13); }
.side-nav a.active { color: #0b679f; border-color: rgba(255,255,255,.55); background: #fff; box-shadow: 0 5px 0 rgba(4, 90, 143, .18); }
.side-nav a::before { background: #ffd449; }
.nav-icon { color: #fff; background: rgba(255,255,255,.18); }
.side-nav a.active .nav-icon { color: #0872ba; background: #dff6ff; }
.nav-count { color: #075e97; background: #ffd449; }
.account-mini { border-color: rgba(255,255,255,.21); background: rgba(255,255,255,.13); }
.avatar { color: #075e97; background: #ffd449; }

.content { background: transparent; }
.topbar-label { color: var(--studio-muted); font-weight: 900; }
.topbar-label::before { content: "MIMIC ME"; color: var(--studio-accent); }
.topbar-label span { color: #7ca3bf; }
.circle-button, .icon-button, .logout-button, .user-pill { border-color: var(--studio-line); background: #fff; box-shadow: 0 4px 12px rgba(18, 119, 181, .07); }
.circle-button, .icon-button { color: var(--studio-ink-2); }
.circle-button:hover, .icon-button:hover { color: var(--studio-accent-dark); border-color: #91d7f5; background: #f8fdff; }
.user-pill { color: var(--studio-ink); }
.user-pill:hover { border-color: #91d7f5; }

.account-overview, .page-hero { border-color: rgba(255,255,255,.42); color: #fff; background: linear-gradient(120deg, #0879c1 0%, #159cdf 57%, #61d3f4 100%); box-shadow: 0 12px 0 rgba(8, 104, 165, .15), 0 22px 38px rgba(15, 112, 174, .16); }
.account-overview::before, .page-hero::before { opacity: .25; }
.account-overview::after, .page-hero::after { opacity: .55; background: repeating-linear-gradient(90deg, transparent 0 12px, #ffd449 12px 17px, transparent 17px 26px); }
.account-overview .kicker, .page-hero .kicker { color: #fff2a4; }
.balance-summary p:last-child, .page-hero p { color: rgba(255,255,255,.9); font-weight: 800; }
.balance-card, .balance-card.coins, .balance-card.gems, .balance-card.trophies { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.14); }
.balance-card.coins { border-left-color: #ffd449; }.balance-card.gems { border-left-color: #b3f1ff; }.balance-card.trophies { border-left-color: #fff; }
.balance-icon { color: #ffd449; background: rgba(255,255,255,.17); }.balance-card.gems .balance-icon { color: #b7f3ff; }.balance-card.trophies .balance-icon { color: #fff; }
.balance-label { color: rgba(255,255,255,.77); }.balance-value { color: #fff; font-family: "Fredoka", system-ui, sans-serif; }
.page-hero .button { color: #075e97; border-color: #fff; background: #fff; box-shadow: 0 4px 0 rgba(4, 91, 142, .24); }.page-hero .button:hover { color: #075e97; border-color: #fff; background: #e9f8ff; box-shadow: 0 6px 0 rgba(4, 91, 142, .24); }

.button { border-color: var(--studio-accent); background: var(--studio-accent); box-shadow: 0 4px 0 var(--studio-accent-dark); font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; }.button:hover { border-color: var(--studio-accent-dark); background: var(--studio-accent-dark); box-shadow: 0 6px 0 #05619d; }.button:active { box-shadow: 0 1px 0 #05619d; }
.button-ghost { color: var(--studio-ink); border-color: var(--studio-line); background: #fff; }.button-ghost:hover { color: var(--studio-accent-dark); border-color: #8ed5f4; background: #f4fcff; }
.stat, .panel, .pack-list, .side-card, .settings-card, .discover-card { border-color: var(--studio-line); background: rgba(255,255,255,.96); box-shadow: var(--studio-shadow); }
.stat::before { background: var(--studio-accent); }.stat:nth-child(2)::before { background: #25bce9; }.stat:nth-child(3)::before { background: #f3b93f; }
.stat-icon { color: #0872ba; background: #e0f5ff !important; }.stat:nth-child(2) .stat-icon { color: #087d9f; background: #dff8ff !important; }.stat:nth-child(3) .stat-icon { color: #a26908; background: #fff3ce !important; }
.stat strong, .section-head h2, .settings-card h3, .pack-info strong, .pack-row strong, .discover-title, .discover-card strong { color: var(--studio-ink); }
.stat span, .section-head p, .pack-info p, .pack-row p, .discover-creator, .discover-card p, .profile-strip p { color: var(--studio-muted); font-weight: 800; }
.pack-row:hover { background: #f4fcff; }.pack-row + .pack-row { border-top-color: #d9effb; }.pack-avatar { border-color: #c9eafd; color: #0872ba; background: #e0f5ff; }.pack-action:hover { color: #0872ba; background: #e0f5ff; }
.pack-preview-trigger, .preview-button, .upload-avatar { border-color: #c9eafd; color: #0872ba; background: #fff; }.pack-preview-trigger:hover, .preview-button:hover, .upload-avatar:hover { color: #075e97; border-color: #91d7f5; background: #f0faff; }.pack-preview-trigger[aria-expanded="true"] { border-color: #0872ba; background: #0872ba; }.pack-preview, .preview-panel { border-color: #c9eafd; background: #f4fcff; }.clip-preview-row, .clip-row { border-color: #d8effb; background: #fff; }.clip-preview-button, .clip-row button, .detail-play { background: #168fda; }.clip-preview-button:hover, .clip-row button:hover, .detail-play:hover, .detail-play.is-playing, .clip-preview-button.is-playing { background: #0872ba; }
.discover-card:hover { border-color: #91d7f5; box-shadow: 0 18px 32px rgba(18, 119, 181, .16); }.discover-cover { border-color: #c9eafd; background: #e5f7ff; }.discover-cover::after { background: rgba(8, 114, 186, .9); }.discover-cover-placeholder { color: #0872ba; background: #f5fcff; }.discover-badge { border-color: #c9eafd; color: #17577f; background: #f0faff; }.discover-badge-plays { border-color: #c5efdf; color: #087c62; background: #e5fbf3; }.discover-open { border-color: #168fda; background: #168fda; }.discover-open:hover { border-color: #0872ba; background: #0872ba; }
.input, .select, .settings-fields input, .field input, .report-select { border-color: #c9eafd; color: var(--studio-ink); background: #f8fdff; }.input:focus, .select:focus, .settings-fields input:focus, .field input:focus, .report-select:focus { border-color: #168fda; box-shadow: 0 0 0 3px rgba(22,143,218,.14); }
.notice { color: #075e97; background: #e0f5ff; }.modal-backdrop, .detail-backdrop { background: rgba(5, 81, 132, .55); }.modal, .create-modal, .detail-card, .report-card { border-color: #c9eafd; background: #fff; box-shadow: 0 25px 75px rgba(5, 81, 132, .3); }.detail-close { color: #5d7d96; background: #eef9ff; }.detail-close:hover { color: #0872ba; background: #e0f5ff; }
.toast { background: #0872ba; box-shadow: 0 18px 40px rgba(5, 81, 132, .28); }
.info-page { background: #effaff; }.info-header { background: linear-gradient(120deg, #0879c1, #28b2e5); }.info-header .button { color: #075e97; border-color: #fff; background: #fff; box-shadow: 0 3px 0 rgba(4,91,142,.24); }.info-card { border-color: #c9eafd; background: #fff; }.info-card a { color: #0872ba; }

@media (max-width: 700px) {
  .mobile-nav { border-color: #c9eafd; background: rgba(255,255,255,.95); box-shadow: 0 14px 32px rgba(18,119,181,.2); }
  .mobile-nav a { color: var(--studio-muted); }.mobile-nav a.active { color: #fff; background: #168fda; }
  .account-overview, .page-hero { box-shadow: 0 9px 0 rgba(8,104,165,.14), 0 18px 30px rgba(15,112,174,.14); }
}

/* Final playful typography and settings layout safeguards. */
.brand, .mobile-brand, .balance-summary h1, .page-hero h1, .section-head h2, .settings-card h3, .pack-info strong, .pack-row strong, .discover-title, .discover-card strong, .info-main h1, .button, .discover-open, .pack-status, .kicker, .section-kicker, .topbar-label, .mobile-nav a, .stat strong { font-family: "Lilita One", "Fredoka", system-ui, sans-serif; font-weight: 400; }
.settings-grid { align-items: start; margin-top: 18px; }
.settings-card, .settings-card form, .profile-strip > div, .settings-fields label { min-width: 0; }
.profile-strip { align-items: flex-start; }
.profile-strip > div { flex: 1; }
.profile-strip [data-user-email] { overflow-wrap: anywhere; }
.upload-avatar { max-width: 100%; margin-right: 0; white-space: normal; }
.settings-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-fields input { min-width: 0; }
.settings-status:empty { display: none; }
.settings-card .modal-actions { min-width: 0; padding-top: 4px; }
.settings-card .modal-actions .button { white-space: nowrap; }
@media (max-width: 980px) and (min-width: 701px) { .settings-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .content { padding-bottom: calc(118px + env(safe-area-inset-bottom)); }
  .settings-card { padding: 20px 17px; }
  .profile-strip { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; }
  .profile-strip .avatar { flex-basis: auto; width: 60px; height: 60px; border-radius: 18px; }
  .settings-fields { grid-template-columns: 1fr; }
  .settings-card .modal-actions .button { width: 100%; }
}

/* Creator Studio refinement: clearer hierarchy and calmer, more practical
   surfaces for the workspace where creators manage packs. */
body { background: #f6fbff; }
.sidebar { background: linear-gradient(165deg, #0b6faa 0%, #168fda 63%, #42bfe8 100%); }
.side-nav { gap: 5px; }
.side-nav a { min-height: 46px; border-radius: 11px; }
.side-nav a.active { border-color: transparent; box-shadow: 0 3px 0 rgba(4, 90, 143, .16); }
.content { padding-top: 30px; }
.account-overview,
.page-hero { border-radius: 20px; box-shadow: 0 8px 0 rgba(8, 104, 165, .12), 0 18px 34px rgba(15, 112, 174, .12); }
.account-overview::before,
.page-hero::before { opacity: .16; }
.balance-card,
.balance-card.coins,
.balance-card.gems,
.balance-card.trophies { min-height: 69px; border-radius: 12px; background: rgba(255,255,255,.17); }
.balance-icon { border-radius: 10px; }
.button { min-height: 43px; border-radius: 10px; box-shadow: 0 3px 0 var(--studio-accent-dark); }
.button:hover { box-shadow: 0 4px 0 #05619d; }
.stat,
.panel,
.pack-list,
.side-card,
.settings-card,
.discover-card { border-radius: 15px; box-shadow: 0 8px 22px rgba(24, 119, 178, .09); }
.stat { min-height: 94px; padding: 16px; }
.stat-icon,
.pack-avatar { border-radius: 11px; }
.section-head { margin-bottom: 17px; }
.section-head h2 { letter-spacing: -.025em; }
.pack-row { min-height: 78px; padding-block: 13px; }
.pack-action { border-radius: 8px; }
.settings-card { padding: clamp(20px, 2.3vw, 28px); }
.input,
.select,
.settings-fields input,
.field input,
.report-select { border-radius: 9px; }
.mobile-nav { border-radius: 14px; }
.mobile-nav a { border-radius: 9px; }
@media (max-width: 700px) {
  .content { padding-top: 18px; }
  .account-overview,
  .page-hero { border-radius: 16px; box-shadow: 0 6px 0 rgba(8, 104, 165, .11), 0 14px 26px rgba(15, 112, 174, .11); }
  .balance-card,
  .balance-card.coins,
  .balance-card.gems,
  .balance-card.trophies { min-height: 57px; border-radius: 10px; }
  .stat,
  .panel,
  .pack-list,
  .side-card,
  .settings-card,
  .discover-card { border-radius: 13px; }
  .section-actions { gap: 9px; }
}

/* Product-interface pass: quieter surfaces and denser, more legible creator
   tools. This is visual-only and preserves all existing dashboard behaviour. */
:root {
  --studio-ink: #153347;
  --studio-ink-2: #28526a;
  --studio-paper: #f6f8fa;
  --studio-card: #ffffff;
  --studio-line: #d9e3e8;
  --studio-muted: #627987;
  --studio-accent: #168fda;
  --studio-accent-dark: #0872ae;
  --studio-accent-soft: #e3f5ff;
  --studio-shadow: 0 8px 22px rgba(18, 49, 68, .07);
}

body { color: var(--studio-ink); background: var(--studio-paper); font-family: "DM Sans", system-ui, sans-serif; font-weight: 600; }
.brand, .mobile-brand, .balance-summary h1, .page-hero h1, .section-head h2, .settings-card h3, .pack-info strong, .pack-row strong, .discover-title, .discover-card strong, .info-main h1 { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; }
.sidebar { background: #0e80c3; border-right: 1px solid rgba(255,255,255,.12); }
.sidebar::before, .sidebar::after { display: none; }
.brand { margin-bottom: 34px; text-shadow: none; }.brand-mark { border-radius: 9px; box-shadow: none; transform: none; }
.side-label { color: #9ab2c0; }.side-nav { gap: 3px; }.side-nav a { min-height: 42px; padding: 9px 10px; border-radius: 7px; font-family: "DM Sans", system-ui, sans-serif; font-size: .82rem; }
.side-nav a:hover { background: rgba(255,255,255,.07); }.side-nav a.active { color: #fff; border-color: transparent; background: rgba(255,255,255,.13); box-shadow: none; }
.nav-icon { border-radius: 6px; color: #cde7f4; background: rgba(255,255,255,.09); }.side-nav a.active .nav-icon { color: #fff; background: var(--studio-accent); }
.back-link { color: #b7cbd5; }.back-link:hover { color: #fff; }

.content { padding-top: 27px; background: var(--studio-paper); }.topbar { margin-bottom: 27px; }.topbar-label, .topbar-label::before { color: var(--studio-muted); font-family: "DM Sans", system-ui, sans-serif; font-size: .76rem; font-weight: 700; letter-spacing: .02em; }.topbar-label::before { color: var(--studio-accent); }
.circle-button, .icon-button, .logout-button, .user-pill { border-color: var(--studio-line); border-radius: 7px; box-shadow: none; }.user-pill { border-radius: 7px; }.avatar { border-radius: 7px; color: #fff; background: var(--studio-accent); }

.account-overview, .page-hero { min-height: 0; padding: 27px 30px; border: 1px solid var(--studio-line); border-left: 4px solid var(--studio-accent); border-radius: 10px; color: var(--studio-ink); background: #fff; box-shadow: var(--studio-shadow); }
.account-overview::before, .account-overview::after, .page-hero::before, .page-hero::after { display: none; }
.account-overview .kicker, .page-hero .kicker { color: var(--studio-accent); }.balance-summary h1, .page-hero h1 { color: var(--studio-ink); font-size: clamp(1.9rem, 3.4vw, 2.9rem); letter-spacing: -.035em; line-height: 1; }.balance-summary p:last-child, .page-hero p { color: var(--studio-muted); font-size: .84rem; font-weight: 600; }
.account-balances { max-width: 840px; gap: 8px; margin-top: 20px; }.balance-card, .balance-card.coins, .balance-card.gems, .balance-card.trophies { min-height: 64px; border-color: var(--studio-line); border-left: 2px solid var(--studio-accent); border-radius: 7px; background: #f8fbfc; }.balance-card.gems { border-left-color: #298a7c; }.balance-card.trophies { border-left-color: #c99021; }.balance-icon, .balance-card.gems .balance-icon, .balance-card.trophies .balance-icon { border-radius: 6px; color: var(--studio-accent); background: var(--studio-accent-soft); }.balance-card.gems .balance-icon { color: #217d70; background: #e8f5f1; }.balance-card.trophies .balance-icon { color: #9a6715; background: #fbf1dc; }.balance-label { color: var(--studio-muted); }.balance-value { color: var(--studio-ink); font-family: "DM Sans", system-ui, sans-serif; font-size: 1.3rem; font-weight: 700; }

.button { min-height: 40px; border-radius: 7px; border-color: var(--studio-accent); background: var(--studio-accent); box-shadow: none; font-family: "DM Sans", system-ui, sans-serif; font-size: .78rem; font-weight: 700; }.button:hover { border-color: var(--studio-accent-dark); background: var(--studio-accent-dark); box-shadow: none; }.button-ghost { color: var(--studio-accent-dark); border-color: var(--studio-line); background: #fff; }.button-ghost:hover { border-color: #abc9d8; background: #f6fafc; }
.stats { gap: 0; margin: 23px 0 32px; overflow: hidden; border: 1px solid var(--studio-line); border-radius: 10px; background: #fff; box-shadow: var(--studio-shadow); }.stat { min-height: 82px; padding: 15px 18px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }.stat + .stat { border-left: 1px solid var(--studio-line); }.stat::before { display: none; }.stat-icon, .stat:nth-child(2) .stat-icon, .stat:nth-child(3) .stat-icon { width: 38px; height: 38px; border-radius: 7px; color: var(--studio-accent); background: var(--studio-accent-soft) !important; box-shadow: none; }.stat:nth-child(2) .stat-icon { color: #217d70; background: #e8f5f1 !important; }.stat:nth-child(3) .stat-icon { color: #9a6715; background: #fbf1dc !important; }.stat strong { color: var(--studio-ink); font-family: "DM Sans", system-ui, sans-serif; font-size: 1.35rem; font-weight: 700; }.stat span { color: var(--studio-muted); font-size: .7rem; }

.section-head { margin-bottom: 13px; }.section-kicker { color: var(--studio-accent); font-family: "DM Sans", system-ui, sans-serif; font-size: .62rem; letter-spacing: .08em; }.section-head h2 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); }.section-head p { color: var(--studio-muted); font-size: .78rem; }.text-link { color: var(--studio-accent-dark); font-size: .74rem; }
.pack-list, .side-card, .settings-card, .discover-card, .panel { border-color: var(--studio-line); border-radius: 10px; background: #fff; box-shadow: var(--studio-shadow); }.pack-row { min-height: 76px; padding: 13px 16px; }.pack-row:hover { background: #f8fbfc; }.pack-row + .pack-row { border-top-color: var(--studio-line); }.pack-avatar, .my-sounds-page .pack-avatar { border-color: transparent; border-radius: 8px; color: var(--studio-accent); background: var(--studio-accent-soft); box-shadow: none; }.pack-preview, .preview-panel { border-color: var(--studio-line); border-radius: 8px; background: #f8fbfc; }.pack-preview-trigger, .preview-button, .upload-avatar { border-color: var(--studio-line); border-radius: 6px; color: var(--studio-accent-dark); background: #fff; }.pack-preview-trigger:hover, .preview-button:hover, .upload-avatar:hover { border-color: #a9c8d8; color: var(--studio-accent-dark); background: #f6fafc; }.pack-status { border-radius: 5px; }.pack-action { border-radius: 6px; }.pack-action:hover { color: var(--studio-accent-dark); background: var(--studio-accent-soft); }
.discover-grid { gap: 14px; }.discover-card { padding: 9px; border-radius: 9px; }.discover-cover { border-radius: 7px; }.discover-open { min-height: 38px; border-radius: 6px; font-family: "DM Sans", system-ui, sans-serif; }

.settings-grid { gap: 14px; }.settings-card { padding: clamp(20px, 2.4vw, 27px); }.settings-card h3 { font-size: 1.25rem; }.input, .select, .settings-fields input, .field input, .field textarea, .report-select { border-color: var(--studio-line); border-radius: 7px; color: var(--studio-ink); background: #fbfcfd; }.input:focus, .select:focus, .settings-fields input:focus, .field input:focus, .field textarea:focus, .report-select:focus { border-color: var(--studio-accent); box-shadow: 0 0 0 3px rgba(18,111,159,.12); }
.notice { border-radius: 7px; color: var(--studio-accent-dark); background: var(--studio-accent-soft); }.modal-backdrop, .detail-backdrop { background: rgba(11, 36, 50, .62); }.modal, .create-modal, .detail-card, .report-card { border-color: var(--studio-line); border-radius: 10px; box-shadow: 0 20px 50px rgba(9, 34, 48, .22); }.detail-close { border-radius: 6px; }.toast { border-radius: 7px; background: var(--studio-ink); box-shadow: 0 12px 28px rgba(9, 34, 48, .2); }

.info-page { background: var(--studio-paper); }.info-header { background: #0e80c3; }.info-header .button { color: #fff; border-color: rgba(255,255,255,.4); background: transparent; }.info-main { max-width: 850px; }.info-card { border-color: var(--studio-line); border-radius: 9px; box-shadow: var(--studio-shadow); }

@media (max-width: 700px) {
  .sidebar { border-top: 1px solid rgba(255,255,255,.12); background: #0e80c3; box-shadow: 0 -8px 22px rgba(9, 84, 131, .18); }.side-nav a { min-height: 49px; border-radius: 6px; font-size: .58rem; }
  .content { padding: 17px 15px calc(104px + env(safe-area-inset-bottom)); }.topbar { margin-bottom: 20px; }
  .account-overview, .page-hero { padding: 22px 18px; border-radius: 8px; }.balance-summary h1, .page-hero h1 { font-size: clamp(1.8rem, 9vw, 2.45rem); }.account-balances { gap: 7px; }.balance-card, .balance-card.coins, .balance-card.gems, .balance-card.trophies { min-height: 55px; border-radius: 6px; }
  .stats { display: grid; grid-template-columns: 1fr; margin: 18px 0 27px; border-radius: 8px; }.stat { min-height: 69px; padding: 13px 15px; }.stat + .stat { border-top: 1px solid var(--studio-line); border-left: 0; }
  .pack-list, .side-card, .settings-card, .discover-card, .panel { border-radius: 8px; }.pack-row, .my-sounds-page .pack-row { min-height: 70px; padding: 12px; }.pack-avatar, .my-sounds-page .pack-avatar { border-radius: 7px; }
  .mobile-nav { border-radius: 9px; }.mobile-nav a { border-radius: 6px; font-family: "DM Sans", system-ui, sans-serif; }
}