:root {
  --lg-community-red: #9f302f;
  --lg-community-red-deep: #792221;
  --lg-community-cream: #fff9f1;
  --lg-community-ink: #2c2522;
  --lg-account-desktop-width: 112px;
  --lg-account-desktop-gap: 24px;
}

.lg-community-float,
.lg-community-float *,
.lg-account-control,
.lg-account-control *,
.lg-account-overlay,
.lg-account-overlay * {
  box-sizing: border-box;
}

.lg-community-float {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 9997;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 7px 8px 7px 11px;
  border: 1px solid rgba(83, 57, 49, 0.12);
  border-radius: 17px;
  color: var(--lg-community-ink);
  background: rgba(255, 253, 249, 0.96);
  box-shadow: 0 12px 34px rgba(54, 36, 30, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  font-family: MiSans, "PingFang SC", "Microsoft YaHei", sans-serif;
  transform: translateX(-50%);
}

.lg-community-invitation {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.lg-community-icon,
.lg-account-button-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
}

.lg-community-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  color: var(--lg-community-red);
  background: rgba(159, 48, 47, 0.08);
}

.lg-community-icon svg,
.lg-community-copy-button svg,
.lg-account-button-icon svg,
.lg-account-close svg,
.lg-account-submit svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.lg-community-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
  white-space: nowrap;
}

.lg-community-copy strong {
  color: var(--lg-community-ink);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.045em;
}

.lg-community-copy > span:first-child {
  color: #81736d;
  font-size: 9px;
  font-weight: 600;
}

.lg-community-copy-button,
.lg-account-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: MiSans, "PingFang SC", "Microsoft YaHei", sans-serif;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease, border-color 150ms ease;
}

.lg-community-copy-button {
  height: 32px;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid rgba(159, 48, 47, 0.14);
  border-radius: 10px;
  color: var(--lg-community-red);
  background: rgba(159, 48, 47, 0.055);
  font-size: 9.5px;
  font-weight: 650;
}

.lg-community-copy-button:hover {
  border-color: rgba(159, 48, 47, 0.27);
  background: rgba(159, 48, 47, 0.1);
  transform: translateY(-1px);
}

.lg-community-copy-button.is-copied {
  color: #fff;
  background: var(--lg-community-red);
}

.lg-account-control {
  position: relative;
  flex: 0 0 auto;
}

.lg-account-bootstrap {
  position: fixed;
  z-index: 10010;
}

.lg-account-bootstrap--mobile {
  display: none;
}

.lg-navbar-account-host {
  display: flex;
  width: var(--lg-account-desktop-width);
  align-items: center;
  white-space: nowrap;
}

#topbar-cta-button {
  margin-right: calc(var(--lg-account-desktop-width) + var(--lg-account-desktop-gap));
}

.lg-account-desktop-mounted #topbar-cta-button {
  margin-right: 0;
}

.lg-account-button {
  height: 34px;
  min-width: 72px;
  gap: 7px;
  padding: 0 11px 0 8px;
  border: 1px solid rgba(73, 57, 50, 0.13);
  border-radius: 11px;
  color: #625650;
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 650;
}

.lg-account-button:hover {
  border-color: rgba(159, 48, 47, 0.24);
  color: var(--lg-community-red);
  background: rgba(159, 48, 47, 0.055);
  transform: translateY(-1px);
}

.lg-account-button-icon {
  width: 18px;
  height: 18px;
}

.lg-account-avatar {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 7px;
  color: var(--lg-community-red-deep);
  background: #fff8ef;
  font-size: 10px;
  font-weight: 800;
}

.lg-account-button-name {
  min-width: 0;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lg-account-control--desktop,
.lg-account-control--desktop .lg-account-button {
  width: var(--lg-account-desktop-width);
}

.lg-account-menu {
  position: absolute;
  z-index: 10010;
  top: 42px;
  right: 0;
  display: flex;
  width: 220px;
  flex-direction: column;
  padding: 15px;
  border: 1px solid rgba(67, 45, 39, 0.12);
  border-radius: 14px;
  color: var(--lg-community-ink);
  background: #fffdf9;
  box-shadow: 0 18px 50px rgba(51, 30, 25, 0.18);
}

.lg-account-menu[hidden] { display: none; }
.lg-account-menu strong { font-size: 13px; }
.lg-account-menu span { margin-top: 3px; color: #81736d; font-size: 10px; }
.lg-account-menu button {
  margin-top: 13px;
  padding: 8px 10px;
  border: 1px solid rgba(159, 48, 47, 0.18);
  border-radius: 9px;
  color: var(--lg-community-red);
  background: rgba(159, 48, 47, 0.05);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.lg-account-overlay {
  position: fixed;
  z-index: 10030;
  inset: 0;
  display: grid;
  padding: 24px;
  place-items: center;
  background: rgba(31, 22, 20, 0.56);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 180ms ease;
  font-family: MiSans, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.lg-account-overlay[hidden] { display: none; }
.lg-account-overlay.is-visible { opacity: 1; }
.lg-account-modal-open { overflow: hidden; }

.lg-account-modal {
  display: grid;
  width: min(780px, 100%);
  min-height: 520px;
  overflow: hidden;
  grid-template-columns: minmax(250px, 0.82fr) minmax(360px, 1.18fr);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  background: #fffdf9;
  box-shadow: 0 42px 120px rgba(31, 16, 13, 0.38);
  transform: translateY(12px) scale(0.985);
  transition: transform 220ms cubic-bezier(0.22, 0.8, 0.24, 1);
}

.is-visible .lg-account-modal { transform: translateY(0) scale(1); }

.lg-account-story {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-end;
  padding: 38px 32px;
  color: #fff;
  background:
    radial-gradient(circle at 85% 12%, rgba(255, 205, 172, 0.24), transparent 34%),
    linear-gradient(145deg, #611c1c 0%, #942b2b 55%, #b64238 100%);
}

.lg-account-story::before {
  position: absolute;
  top: -55px;
  right: -70px;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 50%;
  box-shadow: 0 0 0 32px rgba(255, 255, 255, 0.035), 0 0 0 64px rgba(255, 255, 255, 0.025);
  content: "";
}

.lg-account-story-kicker {
  position: absolute;
  top: 30px;
  left: 32px;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.2em;
}

.lg-account-story h2 {
  position: relative;
  max-width: 250px;
  margin: 0;
  font-size: 27px;
  font-weight: 750;
  line-height: 1.24;
  letter-spacing: -0.035em;
}

.lg-account-story p {
  position: relative;
  margin: 17px 0 25px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.75;
}

.lg-account-quota-note {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding-top: 17px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.lg-account-quota-note strong { font-size: 27px; }
.lg-account-quota-note span { color: rgba(255, 255, 255, 0.66); font-size: 10px; }

.lg-account-content {
  position: relative;
  padding: 52px 52px 38px;
  color: var(--lg-community-ink);
}

.lg-account-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 10px;
  color: #8c7e77;
  background: transparent;
  cursor: pointer;
}

.lg-account-close:hover { color: var(--lg-community-ink); background: #f3ece5; }
.lg-account-content > h2 { margin: 0; font-size: 24px; letter-spacing: -0.025em; }
.lg-account-subtitle { margin: 8px 0 22px; color: #81736d; font-size: 11px; }

.lg-account-error {
  min-height: 17px;
  margin-bottom: 4px;
  color: #b12f2f;
  font-size: 10.5px;
}

.lg-account-form { display: flex; flex-direction: column; gap: 13px; }
.lg-account-field { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.lg-account-field > span { color: #574b46; font-size: 10.5px; font-weight: 650; }

.lg-account-input {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  border: 1px solid rgba(78, 58, 50, 0.14);
  border-radius: 11px;
  outline: 0;
  color: var(--lg-community-ink);
  background: #fff;
  font: inherit;
  font-size: 12px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.lg-account-input:focus {
  border-color: rgba(159, 48, 47, 0.45);
  box-shadow: 0 0 0 3px rgba(159, 48, 47, 0.08);
}

.lg-account-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 9px;
  align-items: end;
}

.lg-account-code-button {
  height: 42px;
  border: 1px solid rgba(159, 48, 47, 0.2);
  border-radius: 11px;
  color: var(--lg-community-red);
  background: rgba(159, 48, 47, 0.055);
  font: inherit;
  font-size: 10.5px;
  cursor: pointer;
}

.lg-account-code-button:disabled { cursor: wait; opacity: 0.55; }

.lg-account-submit {
  display: flex;
  height: 44px;
  align-items: center;
  justify-content: space-between;
  margin-top: 3px;
  padding: 0 15px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #a93633, #832524);
  box-shadow: 0 10px 24px rgba(133, 37, 36, 0.2);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.lg-account-submit:hover:not(:disabled) { filter: saturate(1.08); transform: translateY(-1px); }
.lg-account-submit:disabled { cursor: wait; opacity: 0.6; }

.lg-account-switcher {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.lg-account-mode-button {
  padding: 3px 0;
  border: 0;
  color: #8e3b38;
  background: transparent;
  font: inherit;
  font-size: 10.5px;
  cursor: pointer;
}

.lg-community-copy-button:focus-visible,
.lg-account-button:focus-visible,
.lg-account-close:focus-visible,
.lg-account-submit:focus-visible,
.lg-account-mode-button:focus-visible,
.lg-account-code-button:focus-visible {
  outline: 3px solid rgba(255, 185, 175, 0.45);
  outline-offset: 2px;
}

.dark .lg-account-menu,
.dark .lg-account-modal {
  color: #f3ece7;
  background: #211d1b;
}

.dark .lg-community-float {
  border-color: rgba(255, 244, 235, 0.11);
  color: #f3ece7;
  background: rgba(33, 29, 27, 0.95);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dark .lg-community-copy strong { color: #f3ece7; }
.dark .lg-community-copy > span:first-child { color: #aa9f99; }
.dark .lg-account-button {
  border-color: rgba(255, 244, 235, 0.12);
  color: #d7cdc7;
  background: rgba(43, 38, 35, 0.78);
}
.dark .lg-account-button:hover { color: #e2716c; background: rgba(209, 90, 86, 0.09); }

.dark .lg-account-menu span,
.dark .lg-account-subtitle { color: #aa9f99; }
.dark .lg-account-field > span { color: #d7cdc7; }
.dark .lg-account-input { border-color: rgba(255, 244, 235, 0.12); color: #f3ece7; background: #2b2623; }
.dark .lg-account-close:hover { color: #fff; background: #312b28; }

@media (max-width: 760px) {
  .lg-account-bootstrap--desktop { display: none; }
  .lg-account-bootstrap--mobile { display: block; }
  #search-bar-entry-mobile { margin-right: 42px; }
  .lg-account-mobile-mounted #search-bar-entry-mobile { margin-right: 0; }
  .lg-community-float { bottom: 14px; min-height: 45px; padding: 6px 7px 6px 9px; }
  .lg-community-invitation { gap: 7px; }
  .lg-community-icon { width: 25px; height: 25px; }
  .lg-community-copy > span:first-child { display: none; }
  .lg-community-copy strong { font-size: 10.5px; }
  .lg-community-copy-button { width: 29px; height: 29px; padding: 0; }
  .lg-community-copy-button span { display: none; }
  .lg-account-control--mobile .lg-account-button { width: 30px; min-width: 30px; height: 30px; padding: 0; border: 0; background: transparent; }
  .lg-account-control--mobile .lg-account-button-name { display: none; }
  .lg-account-control--mobile .lg-account-avatar { width: 25px; height: 25px; border-radius: 9px; }
  .lg-account-control--mobile .lg-account-menu { top: 38px; right: -29px; }
  .lg-account-modal { min-height: 0; grid-template-columns: 1fr; }
  .lg-account-story { display: none; }
  .lg-account-content { padding: 48px 25px 28px; }
}

@media (max-width: 390px) {
  .lg-account-overlay { padding: 10px; }
  .lg-account-code-row { grid-template-columns: 1fr; }
  .lg-account-code-button { height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-account-overlay,
  .lg-account-modal,
  .lg-community-copy-button,
  .lg-account-button { transition: none !important; }
}

@media print {
  .lg-community-float,
  .lg-account-control,
  .lg-account-overlay { display: none !important; }
}