.topbar {
  position: relative;
  gap: 8px;
  min-width: 0;
}

.topbar .founder,
.topbar .credit,
.topbar .bell,
.topbar .language > summary,
.topbar .create-action {
  height: 48px;
  min-height: 48px;
  border: 1px solid rgba(140, 157, 235, .2);
  background: linear-gradient(145deg, rgba(14, 24, 52, .82), rgba(6, 13, 31, .7));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 10px 28px rgba(0, 0, 0, .16);
  backdrop-filter: blur(18px);
}

.topbar .founder {
  min-width: 156px;
  padding: 5px 9px;
  border-radius: 16px;
}

.topbar .founder em {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(221, 211, 255, .24);
  box-shadow: 0 0 18px rgba(137, 92, 255, .2);
}

.topbar .founder span {
  min-width: 82px;
}

.topbar .founder strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar .founder small {
  margin-top: 2px;
  direction: ltr;
  color: #989fbd;
  letter-spacing: .3px;
}

.topbar .founder b {
  margin-right: auto;
  color: #aeb4ca;
}

.language {
  position: relative;
}

.language > summary {
  width: 48px;
  display: grid;
  place-items: center;
  list-style: none;
  border-radius: 15px;
  color: #c7ccef;
  font-size: 22px;
  cursor: pointer;
}

.language > summary::-webkit-details-marker {
  display: none;
}

.language[open] > summary,
.language > summary:hover,
.topbar .bell:hover,
.topbar .create-action:hover {
  border-color: rgba(170, 135, 255, .48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 22px rgba(116, 80, 228, .18);
}

.language > div {
  position: absolute;
  z-index: 80;
  top: calc(100% + 9px);
  right: 0;
  width: 170px;
  padding: 7px;
  border: 1px solid rgba(142, 157, 232, .24);
  border-radius: 15px;
  background: rgba(6, 13, 31, .96);
  box-shadow: 0 22px 55px rgba(0, 0, 0, .42);
  backdrop-filter: blur(22px);
}

.language > div button {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 8px;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  text-align: right;
  background: rgba(118, 87, 216, .12);
}

.language > div button span {
  font-size: 11px;
  font-weight: 700;
}

.language > div button small {
  grid-column: 1;
  color: #858eac;
  font-size: 8px;
}

.language > div button b {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  color: #69dfc8;
}

.topbar .bell {
  width: 48px;
  border-radius: 15px;
  color: #d1d5ed;
}

.topbar .credit {
  min-width: 116px;
  padding: 5px 12px;
  border-radius: 16px;
}

.topbar .credit > span {
  font-size: 18px;
}

.topbar .credit small {
  min-width: 58px;
}

.topbar .credit strong {
  line-height: 1.2;
}

.create-action {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
  border-radius: 16px;
  color: #e8e3ff;
  font-size: 10px;
  font-weight: 750;
}

.create-action span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, rgba(111, 125, 255, .8), rgba(166, 78, 231, .78));
  box-shadow: 0 0 16px rgba(132, 77, 236, .28);
  font-size: 17px;
}

@media (max-width: 980px) {
  .topbar .founder {
    min-width: 136px;
  }

  .topbar .credit {
    min-width: 102px;
  }

  .create-action {
    padding: 0 11px;
  }
}

@media (max-width: 600px) {
  .topbar {
    gap: 6px;
  }

  .topbar .founder,
  .topbar .language > summary,
  .topbar .bell,
  .topbar .credit,
  .topbar .create-action {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 4px;
    border-radius: 14px;
  }

  .topbar .founder {
    display: grid;
    place-items: center;
  }

  .topbar .founder em {
    width: 34px;
    height: 34px;
  }

  .topbar .founder span,
  .topbar .founder b,
  .topbar .credit small {
    font-size: 0;
  }

  .topbar .credit {
    display: grid;
    place-items: center;
  }

  .topbar .bell {
    margin-right: 0;
  }

  .topbar .credit > span {
    font-size: 18px;
  }

  .create-action {
    display: grid;
    place-items: center;
    font-size: 0;
  }

  .create-action span {
    width: 30px;
    height: 30px;
  }

}

/* Responsive tone lift only. Desktop remains unchanged. */
@media (min-width: 601px) and (max-width: 1024px) {
  .hero-shade {
    background:
      linear-gradient(90deg, rgba(2, 7, 19, .46), rgba(2, 6, 17, .01) 31%, rgba(2, 7, 20, .01) 72%, rgba(2, 7, 20, .34)),
      linear-gradient(0deg, rgba(2, 6, 17, .68), transparent 57%);
  }

  .hero-slogan {
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .88), 0 0 16px rgba(112, 123, 255, .12);
  }

  .composer {
    border-color: rgba(176, 163, 255, .78);
    background: linear-gradient(90deg, rgba(14, 27, 61, .91), rgba(23, 46, 94, .78));
    box-shadow: inset 0 0 24px rgba(107, 132, 255, .13), 0 0 27px rgba(83, 88, 255, .25);
  }

  .composer textarea::placeholder {
    color: #d0d4e5;
  }

  .composer button {
    color: #eef0ff;
    border-color: rgba(169, 184, 255, .24);
    background: rgba(17, 34, 72, .9);
  }

  .topbar .founder,
  .topbar .credit,
  .topbar .bell,
  .topbar .language > summary,
  .topbar .create-action {
    border-color: rgba(157, 174, 246, .28);
    background: linear-gradient(145deg, rgba(19, 32, 67, .9), rgba(9, 19, 43, .82));
  }

  .mobile-nav {
    border-color: rgba(149, 169, 244, .25);
    background: rgba(7, 15, 34, .88);
  }
}

@media (max-width: 600px) {
  .hero-shade {
    background: linear-gradient(0deg, rgba(3, 7, 19, .76) 0, rgba(3, 7, 19, .3) 55%, rgba(2, 6, 17, .025) 100%);
  }

  .hero-slogan {
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .92), 0 0 15px rgba(121, 125, 255, .13);
  }

  .composer {
    border-color: rgba(183, 169, 255, .82);
    background: linear-gradient(90deg, rgba(15, 29, 64, .92), rgba(24, 48, 96, .8));
    box-shadow: inset 0 0 22px rgba(117, 139, 255, .15), 0 0 25px rgba(91, 88, 255, .27);
  }

  .composer textarea {
    color: #fff;
  }

  .composer textarea::placeholder {
    color: #d5d8e8;
  }

  .composer button {
    color: #f4f2ff;
    border-color: rgba(180, 193, 255, .25);
    background: rgba(18, 36, 77, .92);
  }

  .quick button {
    color: #e0e3f2;
    border-color: rgba(143, 164, 245, .4);
    background: rgba(10, 24, 55, .78);
  }

  .topbar .founder,
  .topbar .credit,
  .topbar .bell,
  .topbar .language > summary,
  .topbar .create-action {
    color: #eef0ff;
    border-color: rgba(165, 181, 248, .3);
    background: linear-gradient(145deg, rgba(21, 36, 73, .92), rgba(10, 21, 47, .86));
  }

  .mobile-nav {
    border-color: rgba(151, 172, 246, .28);
    background: rgba(8, 17, 38, .9);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, .28);
  }

  .mobile-nav a,
  .mobile-nav button {
    color: #adb5d2;
  }
}