:root {
  --primary: #bd8218;
  --special: #d59a2d;
  --brand-white: #ffffff;
  --brand-black: #12110f;
  --primary-hover: color-mix(in srgb, var(--primary) 86%, var(--brand-black));
  --primary-deep: color-mix(in srgb, var(--primary) 76%, var(--brand-black));
  --primary-soft: color-mix(in srgb, var(--primary) 11%, transparent);
  --primary-border: color-mix(in srgb, var(--primary) 38%, transparent);
  --secondary-soft: color-mix(in srgb, var(--special) 12%, transparent);
  --brand-gradient: linear-gradient(135deg, var(--primary), var(--special));
  --gold: var(--primary);
  --gold-light: color-mix(in srgb, var(--special) 76%, var(--brand-white));
  --gold-deep: var(--primary-deep);
}

.brand-studio-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 10020;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 48%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-black) 94%, var(--primary));
  box-shadow: 0 14px 36px rgba(0, 0, 0, .32);
  color: var(--primary);
  cursor: pointer;
  font: 400 22px/1 sans-serif;
  transition: transform .18s ease, border-color .18s ease;
}

.brand-studio-launcher:hover { transform: translateY(-2px); border-color: var(--primary); }
.brand-studio-launcher::before {
  content: "";
  width: 22px;
  height: 22px;
  border: 3px solid color-mix(in srgb, var(--brand-white) 78%, transparent);
  border-radius: 50%;
  background: conic-gradient(var(--primary) 0 50%, var(--special) 50% 100%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

.brand-studio-panel {
  position: fixed;
  right: 22px;
  bottom: 88px;
  z-index: 10021;
  width: min(360px, calc(100vw - 28px));
  display: flex;
  max-height: calc(100vh - 110px);
  overflow: hidden;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, #45424f);
  border-radius: 16px;
  background: color-mix(in srgb, #0b0d11 96%, var(--primary));
  box-shadow: 0 26px 70px rgba(0, 0, 0, .48);
  color: #f5f1e8;
  font-family: "Poppins", sans-serif;
}

.brand-studio-panel[hidden] { display: none; }
.brand-studio-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 18px 15px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-studio-head span { display: block; color: var(--primary); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.brand-studio-head h2 { margin: 4px 0 0; font: 400 23px/1 "Bebas Neue", Impact, sans-serif; letter-spacing: .035em; }
.brand-studio-close { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background: transparent; color: #ddd8ce; cursor: pointer; font-size: 20px; }
.brand-studio-body { display: grid; gap: 15px; min-height: 0; padding: 18px; overflow-y: auto; scrollbar-color: color-mix(in srgb,var(--primary) 55%,transparent) transparent; scrollbar-width: thin; }
.brand-studio-help { margin: 0; color: #9b9892; font-size: 12px; line-height: 1.55; }
.brand-color-row { display: grid; grid-template-columns: 44px 1fr 86px; align-items: center; gap: 10px; }
.brand-color-row input[type="color"] { width: 44px; height: 44px; padding: 3px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; background: transparent; cursor: pointer; }
.brand-color-row label strong,.brand-color-row label small { display: block; }
.brand-color-row label strong { font-size: 12px; font-weight: 500; }
.brand-color-row label small { margin-top: 2px; color: #817f85; font-size: 12px; }
.brand-color-row input[type="text"] { width: 86px; height: 36px; padding: 0 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; outline: none; background: #07090c; color: #d9d5ce; font-size: 12px; text-transform: uppercase; }
.brand-palette-preview { display: grid; grid-template-columns: 1fr 1fr; height: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; }
.brand-palette-preview i:first-child { background: var(--primary); }
.brand-palette-preview i:last-child { background: var(--special); }
.brand-presets { display: flex; gap: 8px; }
.brand-preset-group { display: grid; gap: 8px; }
.brand-preset-group > span { color: #817f85; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.brand-preset { width: 34px; height: 34px; border: 2px solid #0b0d11; border-radius: 50%; outline: 1px solid rgba(255,255,255,.13); cursor: pointer; }
.brand-preset.is-brand-base { outline: 2px solid color-mix(in srgb,#fff 72%,var(--primary)); outline-offset: 2px; }
.brand-studio-message { min-height: 16px; margin: 0; color: #99969d; font-size: 12px; }
.brand-studio-message.is-error { color: #e08e82; }
.brand-studio-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.brand-studio-actions button { min-height: 40px; border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 500; letter-spacing: .06em; }
.brand-reset { border: 1px solid rgba(255,255,255,.12); background: transparent; color: #aaa7ad; }
.brand-save { border: 1px solid color-mix(in srgb, var(--primary) 65%, transparent); background: var(--brand-gradient); color: #12110f; }
.brand-save:disabled { opacity: .55; cursor: wait; }

@media (max-width: 560px) {
  .brand-studio-launcher { right: 14px; bottom: 14px; }
  .brand-studio-panel { right: 14px; bottom: 78px; }
}

/* Global scrollbar · Firma limpia
   Shared by every vertical and horizontal scroll area across Mixing Noise. */
:root {
  scrollbar-color: var(--primary) #eee9e2;
  scrollbar-width: thin;
}

* {
  scrollbar-color: var(--primary) #eee9e2 !important;
  scrollbar-width: thin !important;
}

*::-webkit-scrollbar {
  display: block !important;
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-track {
  background: #eee9e2;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  min-width: 30px;
  min-height: 30px;
  border: 2px solid #eee9e2;
  border-radius: 999px;
  background: var(--primary);
}

*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--primary) 88%, #11100f);
}

*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* En móvil, la barra horizontal de categorías respira debajo de las tarjetas. */
@media (max-width: 780px) {
  .feed-controls > div {
    padding-bottom: 8px;
  }
}