:root{
  --brand-blue:#224876;
  --brand-blue-bright:#2f639f;
  --brand-blue-deep:#142e4c;
  --brand-gold:#99773b;
  --brand-gold-bright:#c09a55;
  --accent:var(--brand-gold);
  --accent-2:var(--brand-blue);
  --utm-logo:url('../images/utmCircle.png');
}

/* UTM V2 brand layer
   Keep the cinematic dark V2 foundation, restore the original UTM blue + gold identity. */
body{
  background:
    radial-gradient(circle at 78% 3%,rgba(34,72,118,.22),transparent 31%),
    radial-gradient(circle at 18% 92%,rgba(153,119,59,.08),transparent 28%),
    var(--bg);
}

/* Bring the original UTM mark into the application shell. */
.sidebar{
  overflow:hidden;
}
.sidebar::before{
  content:"";
  position:absolute;
  width:330px;
  height:330px;
  left:-38px;
  top:43%;
  transform:translateY(-50%);
  background-image:var(--utm-logo);
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.035;
  filter:saturate(.75);
  pointer-events:none;
  z-index:0;
}
.sidebar>*{
  position:relative;
  z-index:1;
}

.brand{
  gap:14px;
}
.brand-mark{
  width:56px;
  height:56px;
  flex:0 0 56px;
  border-radius:16px;
  background-color:rgba(34,72,118,.16);
  background-image:var(--utm-logo);
  /* The source PNG has transparent breathing room, so zoom it slightly
     while keeping the outer 56px brand box unchanged. */
  background-size:126%;
  background-repeat:no-repeat;
  background-position:center;
  color:transparent;
  font-size:0;
  border:1px solid rgba(153,119,59,.18);
  box-shadow:0 12px 32px rgba(0,0,0,.22),0 0 0 4px rgba(34,72,118,.055);
}
.brand-copy strong{
  color:#f4f7fa;
  font-size:16px;
  letter-spacing:-.02em;
}
.brand-copy small{
  color:var(--brand-gold-bright);
  opacity:.82;
}

.nav-item.active{
  background:rgba(34,72,118,.22);
  color:var(--brand-gold-bright);
  box-shadow:inset 3px 0 0 var(--brand-gold);
}
.nav-item.active .nav-icon{color:#fff}
.nav-dot{
  background:var(--brand-gold-bright);
  box-shadow:0 0 0 4px rgba(153,119,59,.10),0 0 14px rgba(153,119,59,.28);
}

.mini-progress span,
.song-progress span,
.timeline span{
  background:linear-gradient(90deg,var(--brand-blue-bright),var(--brand-gold-bright));
}

.avatar{
  background:rgba(34,72,118,.28);
  color:var(--brand-gold-bright);
  border:1px solid rgba(153,119,59,.20);
}

.environment-badge span{
  background:var(--brand-gold-bright);
  box-shadow:0 0 14px rgba(153,119,59,.65);
}
.notification-button span{background:var(--brand-gold-bright)}

.create-button{
  background:linear-gradient(135deg,var(--brand-blue-bright),var(--brand-blue));
  color:#fff;
  box-shadow:0 10px 28px rgba(34,72,118,.20);
  transition:.2s ease;
}
.create-button:hover{
  background:linear-gradient(135deg,var(--brand-gold-bright),var(--brand-gold));
  color:#080b10;
  transform:translateY(-1px);
}

.hero h1 span{color:var(--brand-gold-bright)}

.stat-card.attention{
  border-color:rgba(153,119,59,.42);
  box-shadow:inset 0 0 0 1px rgba(153,119,59,.04),0 10px 28px rgba(0,0,0,.08);
}
.stat-card.attention strong{color:var(--brand-gold-bright)}

.text-button:hover{color:var(--brand-gold-bright)}

.pipeline-stage:hover,
.pipeline-stage.selected{
  border-color:rgba(34,72,118,.62);
  background:linear-gradient(180deg,rgba(34,72,118,.14),rgba(34,72,118,.045));
  box-shadow:inset 0 -2px 0 rgba(153,119,59,.55);
}
.pipeline-stage.selected strong{color:var(--brand-gold-bright)}

.artwork{
  background:
    radial-gradient(circle at 25% 20%,rgba(47,99,159,.62),transparent 38%),
    linear-gradient(145deg,#172638,#080d13);
}
.artwork::after{
  background:linear-gradient(135deg,transparent 40%,rgba(153,119,59,.24));
}
.play-icon{
  border:1px solid rgba(153,119,59,.28);
  color:var(--brand-gold-bright);
}

.status-pill.develop{
  color:#7faee1;
  background:rgba(34,72,118,.20);
}
.status-pill.mix{
  color:#a8bfd9;
  background:rgba(34,72,118,.12);
}
.status-pill.review{
  color:var(--brand-gold-bright);
  background:rgba(153,119,59,.14);
}

.live-indicator{
  color:var(--brand-gold-bright);
  border-color:rgba(153,119,59,.30);
  background:rgba(153,119,59,.05);
}
.activity-icon{
  background:rgba(34,72,118,.22);
  color:var(--brand-gold-bright);
}

.brief-item:hover{
  border-color:rgba(153,119,59,.38);
  background:rgba(153,119,59,.025);
}
.match-ring{
  border-color:rgba(153,119,59,.58);
  color:var(--brand-gold-bright);
  box-shadow:inset 0 0 14px rgba(153,119,59,.05);
}

.player-art{
  background-color:rgba(34,72,118,.22);
  background-image:var(--utm-logo);
  background-size:90%;
  background-position:center;
  background-repeat:no-repeat;
  color:transparent;
  font-size:0;
  border:1px solid rgba(153,119,59,.18);
}
.player-main{
  background:var(--brand-gold-bright)!important;
  color:#091019!important;
  box-shadow:0 0 0 5px rgba(153,119,59,.08);
}

.command-results button>span{
  background:rgba(34,72,118,.26);
  color:var(--brand-gold-bright);
}
.command-results button:hover{
  background:linear-gradient(90deg,rgba(34,72,118,.12),rgba(153,119,59,.04));
}

::selection{
  background:rgba(153,119,59,.55);
  color:#fff;
}