.be-stage-shell{
  display:flex; flex-direction:column; align-items:center;
  min-height:360px;
}

.be-stage{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; flex:1; width:100%; padding:20px 10px 6px; text-align:center;
}

.be-stage-hint{
  font-size:12.5px; line-height:1.6; color:var(--dc-text-faint); max-width:280px;
}

.be-badge-row{
  display:flex; align-items:center; justify-content:center;
  margin-top:4px;
}


.be-stage .dc-badges-row{ overflow:visible; }

.be-stage-caption{
  font-size:12px; color:var(--dc-text-faint); max-width:260px; line-height:1.6;
}

@media (max-width:900px){
  .be-stage-shell{ min-height:0; }
}


.pf-panel-head-actions{
  display:flex; flex-wrap:wrap; gap:8px;
}

.pf-reset:disabled{
  opacity:0.4; cursor:not-allowed;
}


.pf-embed-link-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; margin-top:10px;
  padding:11px 18px; border-radius:30px;
  font:inherit; font-size:13px; font-weight:600;
  cursor:pointer;
  color:var(--dc-text, #fff);
  background:transparent;
  border:1px solid var(--dc-border, rgba(255,255,255,0.16));
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}

.pf-embed-link-btn:hover:not(:disabled){
  background:var(--dc-card-bg-hover, rgba(255,255,255,0.06));
  border-color:var(--dc-accent, rgba(143,125,255,0.45));
}

.pf-embed-link-btn:disabled{
  opacity:0.4; cursor:not-allowed;
}

.pf-embed-link-btn.copied{
  color:#7be08c; border-color:rgba(123,224,140,0.4);
}

.pf-embed-link-btn .pf-share-icon{ width:16px; height:16px; flex-shrink:0; }


.be-export-tray{ margin-top:14px; }

.be-export-tray-head{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}

.be-export-list{
  display:flex; flex-direction:column; gap:6px; margin-top:10px;
}

.be-export-row{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-radius:8px;
  border:1px solid var(--dc-border, rgba(255,255,255,0.08));
  background:var(--dc-card-bg, rgba(255,255,255,0.03));
}

.be-export-row img{
  width:20px; height:20px; border-radius:50%; object-fit:cover;
  background:rgba(255,255,255,0.06);
}

.be-export-row-name{
  flex:1; font-size:12.5px; color:var(--dc-text, #fff);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.be-export-row-remove{
  background:transparent; border:none; color:var(--dc-text-faint);
  cursor:pointer; font-size:16px; line-height:1; padding:2px 6px;
}

.be-export-row-remove:hover{ color:#ff5c72; }


.be-import-panel{ max-width:none; }

.be-import-textarea{
  width:100%; resize:vertical;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:12.5px;
  color:var(--dc-text, #fff);
  background:var(--dc-card-bg, rgba(255,255,255,0.03));
  border:1px solid var(--dc-border, rgba(255,255,255,0.1));
  border-radius:8px;
  padding:10px 12px;
  transition:border-color .15s ease;
}

.be-import-textarea:focus{
  outline:none;
  border-color:var(--dc-accent, rgba(255,255,255,0.35));
}

.be-import-textarea.be-import-error{
  border-color:#ff5c72;
}


.be-recent-section{ padding-top:0; }

.be-recent-panel{ max-width:none; }

.be-recent-list{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; margin-top:12px;
}

.be-recent-chip{
  display:flex; align-items:center; gap:6px; flex:0 0 auto;
  padding:6px 10px; border-radius:20px;
  border:1px solid var(--dc-border, rgba(255,255,255,0.1));
  background:var(--dc-card-bg, rgba(255,255,255,0.03));
  color:var(--dc-text, #fff);
  font-size:11.5px; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}

.be-recent-chip:hover{
  background:var(--dc-card-bg-hover, rgba(255,255,255,0.06));
  border-color:var(--dc-accent, rgba(255,255,255,0.25));
}

.be-recent-chip img{
  width:18px; height:18px; border-radius:50%; object-fit:cover;
  background:rgba(255,255,255,0.06);
}


.be-public-section{ padding-top:0; }

.be-public-panel{ max-width:none; }

.be-public-collapse{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  pointer-events:none;
  transition:grid-template-rows .42s cubic-bezier(.22,1,.36,1), opacity .28s ease;
}

.be-public-collapse.open{
  grid-template-rows:1fr;
  opacity:1;
  pointer-events:auto;
}

.be-public-collapse > .be-public-grid{
  min-height:0;
  overflow:hidden;
}

.be-public-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:10px;
  margin-top:14px;
}

.be-public-collapse.open .be-public-card{
  animation:bePublicCardIn .42s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--i, 0) * 28ms);
}

@keyframes bePublicCardIn{
  from{ opacity:0; transform:translateY(6px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .be-public-collapse{ transition:opacity .15s ease; }
  .be-public-collapse.open .be-public-card{ animation:none; }
}

.be-public-card{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:14px 10px; border-radius:12px;
  border:1px solid var(--dc-border, rgba(255,255,255,0.08));
  background:var(--dc-card-bg, rgba(255,255,255,0.03));
  cursor:pointer;
  text-align:center;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}

.be-public-tooltip{
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translate(-50%, -4px) scale(0.94);
  margin-bottom:8px;
  padding:6px 11px;
  border-radius:8px;
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
  box-shadow:0 8px 20px rgba(0,0,0,0.35);
  z-index:5;
}

.be-public-tooltip::after{
  content:'';
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  width:9px; height:9px;
  background:inherit;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
}

.be-public-card:hover .be-public-tooltip,
.be-public-card:focus-visible .be-public-tooltip{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, -8px) scale(1);
}

.be-public-card:hover,
.be-public-card:focus-visible{
  transform:translateY(-2px);
  border-color:var(--dc-accent, rgba(255,255,255,0.25));
  background:var(--dc-card-bg-hover, rgba(255,255,255,0.06));
  outline:none;
}

.be-public-card img{
  width:32px; height:32px; object-fit:cover;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
}

.be-public-card-name{
  font-size:12px; line-height:1.4; color:var(--dc-text, #fff);
  word-break:break-word;
}

.be-public-copy{
  border:1px solid var(--dc-border, rgba(255,255,255,0.12));
  background:var(--dc-card-bg, rgba(255,255,255,0.04));
  color:var(--dc-text, #fff);
  font-size:11px; padding:4px 9px; border-radius:6px; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}

.be-public-copy:hover{
  background:var(--dc-card-bg-hover, rgba(255,255,255,0.08));
  border-color:var(--dc-accent, rgba(255,255,255,0.25));
}

.be-public-copy.copied{ color:#7be08c; border-color:rgba(123,224,140,0.4); }

.be-public-empty{
  font-size:12.5px; color:var(--dc-text-faint); padding:10px 0;
}


.pf-hex-input{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:12.5px;
  letter-spacing:.02em;
  color:var(--dc-text, #fff);
  background:transparent;
  border:1px solid transparent;
  border-radius:6px;
  padding:3px 6px;
  width:7.5ch;
  text-transform:uppercase;
}

.pf-hex-input:hover{
  border-color:var(--dc-border, rgba(255,255,255,0.12));
}

.pf-hex-input:focus{
  outline:none;
  border-color:var(--dc-accent, rgba(255,255,255,0.35));
  background:var(--dc-card-bg, rgba(255,255,255,0.04));
}

.pf-hex-input.pf-hex-invalid{
  border-color:#ff5c72;
  color:#ff5c72;
}


.bsp-icon,
.badge-detail-icon{
  background:transparent !important;
  padding:0 !important;
  box-shadow:none !important;
  border:none !important;
  border-radius:50% !important;
}