.opt-progress-tree{
  display:flex;
  gap:16px;
  align-items:center;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  max-width: 860px;
}
.opt-progress-tree .opt-tree-wrap{
  flex: 0 0 auto;
}
.opt-progress-tree .opt-thermo{
  display:block;
  width: 150px;
  height: auto;
}
.opt-size-sm .opt-thermo{ width: 120px; }
.opt-size-lg .opt-thermo{ width: 190px; }

.opt-tree-meta{
  flex: 1 1 auto;
  min-width: 220px;
}
.opt-title{
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.opt-desc{
  margin: 8px 0 12px;
}

.opt-milestone-summary{
  font-size: 0.95rem;
  opacity: 0.9;
  margin-top: 6px;
}

.opt-last-milestone{
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
}

.opt-last-label{
  font-weight: 700;
  margin-right: 6px;
}
.opt-percent-row{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 10px;
}
.opt-percent-label{
  font-weight: 700;
  min-width: 3.5rem;
}
.opt-bar{
  flex:1 1 auto;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  overflow:hidden;
}
.opt-bar-fill{
  height: 100%;
  border-radius: 999px;
  background: rgba(46,125,50,0.85);
}

.opt-list{
  display:grid;
  gap: 16px;
}
.opt-cols-1{ grid-template-columns: 1fr; }
.opt-cols-2{ grid-template-columns: 1fr 1fr; }
.opt-cols-3{ grid-template-columns: 1fr 1fr 1fr; }
.opt-cols-4{ grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 1100px){
  .opt-cols-3, .opt-cols-4{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px){
  .opt-cols-2, .opt-cols-3, .opt-cols-4{ grid-template-columns: 1fr; }
  .opt-progress-tree{ flex-direction: column; align-items: stretch; }
  .opt-progress-tree .opt-thermo{ width: 150px; margin: 0 auto; }
}

.opt-list-item .opt-shortcode-hint{
  font-size: 12px;
  opacity: 0.75;
  margin-top: 8px;
  text-align: center;
}
.opt-empty{
  padding: 12px 14px;
  border: 1px dashed rgba(0,0,0,0.25);
  border-radius: 12px;
}

/* outline always visible */
.opt-thermo *{
  vector-effect: non-scaling-stroke;
}

/* completion flourish */
.opt-complete .opt-progress-tree, .opt-progress-tree.opt-complete{
  border-color: rgba(46,125,50,0.35);
}
.opt-progress-tree.opt-complete .opt-bar-fill{
  background: rgba(46,125,50,0.95);
}


/* Completion star */
.opt-progress-tree .opt-visual-wrap{ position: relative; }
.opt-complete-star{
  position:absolute;
  top:-20px;
  left:50%;
  transform: translateX(-50%);
  font-size: 28px;
  line-height: 1;
  color: #d4af37; /* gold */
  text-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* Pop animation when a project reaches 100% */
@keyframes optStarPop {
  0%   { transform: translateX(-50%) scale(0.20) rotate(-10deg); opacity: 0; }
  60%  { transform: translateX(-50%) scale(1.28) rotate(4deg);  opacity: 1; }
  100% { transform: translateX(-50%) scale(1.00) rotate(0deg);  opacity: 1; }
}

.opt-progress-tree.opt-complete .opt-complete-star{
  animation: optStarPop 650ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce){
  .opt-progress-tree.opt-complete .opt-complete-star{ animation: none; }
}