:root{
  --ubg-demo-bar-h: 56px;
  --ubg-demo-bg: #0b1220;
  --ubg-demo-text: #ffffff;
  --ubg-demo-btn-bg: rgba(255,255,255,.14);
  --ubg-demo-btn-text: #ffffff;
  --ubg-demo-border: rgba(255,255,255,.18);
  --ubg-logo-size-desktop: 34px;
  --ubg-logo-size-mobile: 28px;
  --ubg-dd-bg: rgba(255,255,255,.08);
  --ubg-dd-bg-hover: rgba(255,255,255,.12);
  --ubg-dd-panel: #0f172a;
  --ubg-dd-panel-border: rgba(255,255,255,.12);
  --ubg-dd-item-hover: rgba(255,255,255,.10);
  --ubg-dd-item-active: rgba(59,130,246,.26);
}

/* Bar */
.ubg-demo-bar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--ubg-demo-bar-h);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  gap: 14px;
  background: var(--ubg-demo-bg);
  color: var(--ubg-demo-text);
  box-shadow: 0 8px 26px rgba(0,0,0,.22);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.ubg-demo-bar a{ color: var(--ubg-demo-text); text-decoration: none; }

/* Left cluster */
.ubg-demo-left{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width: 0;
  flex: 1 1 auto;
}

/* Brand */
.ubg-demo-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: .2px;
  min-width: 0;
}

.ubg-demo-logo{
  height: var(--ubg-logo-size-desktop);
  width: auto;
  display:block;
  flex: 0 0 auto;
}

.ubg-demo-bar.hide-brand-text .ubg-demo-brand-text{ display:none; }

.ubg-demo-brand-text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  font-size: 18px;
}

/* Custom dropdown */
.ubg-dd{
  position: relative;
  flex: 0 0 auto;
}

.ubg-dd-btn{
  height: 40px;
  width: 320px;
  max-width: min(46vw, 520px);
  border-radius: 14px;
  border: 1px solid var(--ubg-demo-border);
  background: var(--ubg-dd-bg);
  color: var(--ubg-demo-text);
  padding: 0 42px 0 14px;
  outline: none;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.ubg-dd-btn:hover{ background: var(--ubg-dd-bg-hover); }

.ubg-dd-btn:focus{
  box-shadow: 0 0 0 4px rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.35);
}

.ubg-dd-label{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.ubg-dd-chevron{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,.85);
  border-bottom: 2px solid rgba(255,255,255,.85);
  transform: rotate(45deg);
  margin-top: -3px;
  flex: 0 0 auto;
  opacity: .9;
}

.ubg-dd.is-open .ubg-dd-chevron{
  transform: rotate(-135deg);
  margin-top: 3px;
}

.ubg-dd-menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 100%;
  max-height: 320px;
  overflow: auto;
  background: var(--ubg-dd-panel);
  border: 1px solid var(--ubg-dd-panel-border);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  padding: 8px;
  display: none;
  z-index: 100000;
}

.ubg-dd.is-open .ubg-dd-menu{ display:block; }

.ubg-dd-item{
  padding: 10px 10px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--ubg-demo-text);
  font-weight: 550;
  user-select: none;
}

.ubg-dd-item:hover,
.ubg-dd-item.is-hover{
  background: var(--ubg-dd-item-hover);
}

.ubg-dd-item.is-active{
  background: var(--ubg-dd-item-active);
  border: 1px solid rgba(59,130,246,.35);
}

/* When dropdown hidden (1 item), show title */
.ubg-demo-title{
  font-weight: 650;
  opacity: .95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(46vw, 520px);
  font-size: 16px;
}

/* Badge */
.ubg-demo-badge{
  display:inline-flex;
  align-items:center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: .3px;
}

/* Right cluster */
.ubg-demo-right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

.ubg-demo-btn{
  display:inline-flex;
  align-items:center;
  height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: var(--ubg-demo-btn-bg);
  color: var(--ubg-demo-btn-text);
  font-weight: 600;
}

.ubg-demo-btn:hover{ filter: brightness(1.08); }

.ubg-demo-close{
  height: 40px;
  width: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: transparent;
  color: var(--ubg-demo-text);
  cursor: pointer;
}

.ubg-demo-close:hover{ background: rgba(255,255,255,.08); }

/* Mobile polish */
@media (max-width: 820px){
  .ubg-demo-logo{ height: var(--ubg-logo-size-mobile); }
  .ubg-demo-brand-text{ font-size: 16px; max-width: 160px; }
  .ubg-dd-btn{ width: 240px; max-width: 56vw; }
}

@media (max-width: 620px){
  .ubg-demo-btn{ display:none; }
  .ubg-dd-btn{ width: 200px; max-width: 60vw; }
  .ubg-demo-title{ max-width: 60vw; }
}