.ls-account-identity, .ls-profile-settings, .ls-signin-dialog, .ls-account-welcome {
  --profile-ink: #182437;
  --profile-muted: #526078;
  --profile-paper: #fbfdff;
  --profile-line: rgba(30, 43, 68, 0.14);
  color: var(--profile-ink);
}
html.ls-dark-mode :is(.ls-account-identity, .ls-profile-settings, .ls-signin-dialog, .ls-account-welcome) {
  --profile-ink: #e6edf5;
  --profile-muted: #b4c3d5;
  --profile-paper: #101b2a;
  --profile-line: rgba(200, 215, 232, 0.1);
}
.ls-account-identity { display: flex; justify-content: flex-end; align-items: baseline; flex-wrap: wrap; gap: .35rem .75rem; margin: -.5rem 0 1rem; font-size: .8125rem; }
.ls-account-state { color: var(--profile-muted); }
.ls-account-name { max-width: 100%; overflow-wrap: anywhere; background: transparent; color: inherit; font-weight: 650; border: 0; padding: .25rem 0; cursor: pointer; }
.ls-account-name:focus-visible, .ls-profile-button:focus-visible { outline: 2px solid #657492; outline-offset: 3px; }
.ls-account-welcome { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; transition: opacity 450ms ease-out; }
.ls-account-welcome.is-faded { opacity: 0; visibility: hidden; }
.ls-profile-settings { min-width: 0; padding: .75rem 0 1.25rem; border-bottom: 1px solid var(--profile-line); }
.ls-profile-state { color: var(--profile-muted); margin: 0 0 1rem; font-size: .875rem; }
.ls-profile-details { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .65rem 1rem; margin: 0 0 1rem; }
.ls-profile-details dt { color: var(--profile-muted); }
.ls-profile-details dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }
.ls-profile-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.ls-profile-utilities { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.ls-profile-utilities a { display: inline-flex; align-items: center; text-decoration: none; }
.ls-profile-button { color: inherit; background: var(--profile-paper); border: 1px solid var(--profile-line); border-radius: var(--radius-sm, 5px); padding: .6rem .85rem; font: inherit; font-size: .875rem; cursor: pointer; }
.ls-profile-button:disabled { opacity: .6; cursor: default; }
.ls-profile-note, .ls-profile-result { font-size: .875rem; line-height: 1.5; color: var(--profile-muted); margin: .75rem 0 0; }
.ls-profile-result:empty { display: none; }
.ls-profile-edit label, .ls-signin-dialog label { display: grid; gap: .35rem; font-size: .875rem; }
.ls-profile-edit input, .ls-signin-dialog input:not([type=checkbox]) { width: 100%; box-sizing: border-box; background: var(--profile-paper); color: var(--profile-ink); border: 1px solid var(--profile-line); border-radius: var(--radius-xs, 4px); padding: .65rem; font: inherit; }
.ls-profile-edit .ls-profile-actions { margin-top: .75rem; }
.ls-signin-dialog { width: min(28rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; margin: auto; padding: 1.5rem; border: 1px solid var(--profile-line); border-radius: var(--radius-lg, 9px); background: var(--profile-paper); }
.ls-signin-dialog::backdrop { background: rgba(10, 18, 30, .55); }
.ls-signin-dialog h2 { font-size: 1.35rem; margin: 0 0 1.25rem; }
.ls-signin-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.ls-signin-modes .ls-profile-button[aria-pressed="true"] { border-color: #119a88; color: var(--profile-ink); background: color-mix(in srgb, #119a88 12%, var(--profile-paper)); }
.ls-signin-dialog form { display: grid; gap: .85rem; }
.ls-signin-dialog button[type=submit] { background: #098a79; color: #fff; border-color: #098a79; font-weight: 650; }
.ls-signin-dialog button[type=submit]:hover:not(:disabled) { background: #087d6e; }
.ls-signin-link { justify-self: start; border: 0; background: transparent; color: var(--profile-ink); padding: .2rem 0; text-decoration: underline; text-underline-offset: .2em; font: inherit; font-size: .875rem; cursor: pointer; }
.ls-signin-link:focus-visible { outline: 2px solid #657492; outline-offset: 3px; }
.ls-signin-dialog .ls-signin-check { display: block; }
.ls-signin-check input { margin-right: .5rem; }
.ls-signin-check a { text-decoration: underline; }
.ls-profile-settings [hidden], .ls-signin-dialog [hidden], .ls-settings-dialog > [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .ls-account-welcome { transition: none; } }

/* One quiet settings surface, with separate navigation and readable sections. */
.ls-settings-dialog {
  z-index: 100 !important;
  width: min(46rem, calc(100vw - 2rem)) !important;
  max-width: 46rem !important;
  max-height: calc(100dvh - 3rem) !important;
  grid-template-columns: 9.5rem minmax(0, 1fr) !important;
  gap: 1.25rem 1.5rem !important;
  padding: 1.5rem !important;
  border-radius: 9px !important;
}
body:has(.ls-settings-dialog) [data-slot="dialog-overlay"] { z-index: 90 !important; }
.ls-settings-dialog .ls-settings-sidebar {
  grid-row: 2 / span 8;
  border: 0 !important;
  border-right: 1px solid rgba(100, 120, 140, .12) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 .75rem 0 0 !important;
  gap: .375rem;
}
.ls-settings-dialog .ls-settings-nav-button {
  min-height: 2.75rem;
  padding: .625rem;
  border-radius: 5px;
  font-size: .8125rem;
  font-weight: 600;
}
.ls-settings-dialog :is(.ls-settings-nav-dark, .ls-settings-nav-sound).is-active {
  background: transparent !important;
  border-color: transparent !important;
}
.ls-settings-dialog .ls-settings-nav-status {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: 0;
  background: transparent !important;
  color: inherit !important;
  font-size: .6875rem;
}
.ls-settings-dialog .ls-settings-nav-status::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #78869a;
}
.ls-settings-dialog [aria-pressed="true"] .ls-settings-nav-status::before { background: #119a88; }
.ls-settings-dialog :is(.ls-billing-settings, .ls-delete-account, .ls-guest-settings) {
  border: 0 !important;
  border-top: 1px solid rgba(100, 120, 140, .14) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 1.25rem 0 0 !important;
}
.ls-settings-dialog .ls-profile-settings { padding: 0; border: 0; }
.ls-settings-dialog .ls-profile-details { gap: .75rem 1rem; }
.ls-settings-dialog .ls-profile-note { margin-top: 1rem; }
.ls-settings-dialog .ls-profile-state { font-size: .8125rem; margin-bottom: 1.25rem; }
.ls-settings-dialog h3 { margin-top: 0; font-size: 1rem; }
.ls-settings-dialog button { transition-property: background-color, border-color, color; }
.ls-settings-dialog .ls-settings-original-close { display: none !important; }
.ls-settings-close-rail {
  position: sticky;
  top: -1.5rem;
  z-index: 3;
  grid-column: 1 / -1 !important;
  grid-row: 1;
  display: flex;
  justify-content: flex-end;
  background: #fbfdff;
  padding: .35rem 0;
  margin-top: -1.5rem;
}
.ls-settings-persistent-close {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(100, 120, 140, .18);
  border-radius: var(--radius-sm, 5px);
  background: transparent;
  color: inherit;
  padding: .5rem .75rem;
  font: inherit;
  font-size: .8125rem;
  cursor: pointer;
}
.ls-settings-persistent-close svg { width: 1.125rem; height: 1.125rem; }
.ls-settings-persistent-close:focus-visible { outline: 2px solid #657492; outline-offset: 2px; }
html.ls-dark-mode .ls-settings-close-rail { background: #101b2a; }
@media (max-width: 600px) {
  .ls-settings-dialog {
    width: calc(100vw - 1.5rem) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 1.25rem !important;
    gap: 1.25rem !important;
  }
  .ls-settings-dialog > :not(.ls-settings-sidebar) { grid-column: 1 !important; }
  .ls-settings-dialog [data-slot="dialog-header"] { grid-row: 2; text-align: left; padding-right: 0; }
  .ls-settings-dialog .ls-settings-close-rail { top: -1.25rem; margin-top: -1.25rem; }
  .ls-settings-dialog .ls-settings-sidebar {
    position: static;
    grid-column: 1 !important;
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-right: 0 !important;
    border-bottom: 1px solid rgba(100, 120, 140, .14) !important;
    padding: 0 0 .75rem !important;
    margin-top: 0;
  }
}