style.css

@import 'tailwindcss';

:host {
  all: initial;
}

.user-settings {
  @apply fixed top-3 right-3 z-[2147483647];
  /* Tailwind ring color proxy */
  --tw-ring-color: var(--user-color-ring, #111827);
}

.user-settings .panel {
  @apply bg-gray-100 rounded-b-xl shadow-xl px-4 pb-4 pt-0 w-[420px] max-h-[90vh] overflow-y-auto font-sans text-[14px] text-gray-900;
  background: #f2f2f7;
  -webkit-box-shadow: 0 10px 39px 10px #3e424238;
  -moz-box-shadow: 0 10px 39px 10px #3e424238;
  box-shadow: 0 10px 39px 10px #3e424238 !important;
  scrollbar-color: rgba(156, 163, 175, 0.25) transparent;
  scrollbar-width: thin;
}

.user-settings .grid {
  @apply flex flex-col gap-3;
}

.user-settings .row {
  @apply flex items-center justify-between gap-3 px-4 py-3;
}

.user-settings .group {
  @apply bg-white rounded-xl overflow-hidden gap-0;
}

.user-settings .group .row {
  @apply bg-white rounded-none border-0 px-4 py-3 relative;
}

.user-settings .group .row:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #e5e7eb;
}

.user-settings .header-row {
  @apply rounded-none px-0 pb-3 pt-0 flex items-center justify-center;
}
.user-settings .panel-stuck .header-row .panel-title {
  opacity: 0;
  transform: translateY(-2px);
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.user-settings label {
  @apply text-gray-600;
}

.user-settings .label-wrap {
  @apply flex flex-col gap-1 text-left min-w-[60px];
}

.user-settings .btn {
  @apply px-3 py-1 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50;
  white-space: nowrap;
}

.user-settings .btn-danger {
  @apply border-red-500 text-red-500 hover:bg-red-50;
}

.user-settings .btn-ghost {
  @apply px-2 py-1 rounded-md text-gray-500 hover:bg-gray-100;
}

.user-settings input[type='text'] {
  @apply px-3 py-2 rounded-md border border-transparent text-gray-700 w-[180px] text-right outline-none;
}
.user-settings input[type='text']:hover,
.user-settings input[type='text']:focus {
  @apply border-gray-300;
}

.user-settings select {
  @apply px-3 py-2 rounded-md border border-transparent text-gray-700 w-[180px] text-right outline-none bg-white;
}
.user-settings select:hover,
.user-settings select:focus {
  @apply border-gray-300;
}

.user-settings input[type='color'] {
  @apply rounded-md border border-gray-300 w-[80px] h-8 p-0;
}

.user-settings textarea {
  @apply px-3 py-2 rounded-md border border-transparent text-gray-700 w-full text-right outline-none;
}
.user-settings textarea:hover,
.user-settings textarea:focus {
  @apply border-gray-300;
}

.user-settings .switch {
  @apply flex items-center gap-2;
}

.user-settings .toggle-wrap {
  @apply flex items-center gap-2;
}

.user-settings .toggle-checkbox {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
  border-radius: 9999px;
  background: #e5e5ea;
  border: 1px solid #d1d1d6;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.user-settings .toggle-checkbox::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    left 0.2s ease,
    right 0.2s ease;
  transform: translateY(-50%);
}

.user-settings .toggle-checkbox:checked {
  background: var(--user-toggle-on-bg, #34c759);
  border-color: var(--user-toggle-on-bg, #34c759);
}

.user-settings .panel-title {
  @apply text-[20px] font-bold text-gray-800;
}

.user-settings .outer-header {
  @apply bg-gray-100 relative flex items-center justify-center h-11 rounded-t-xl font-sans;
  background: #f2f2f7;
}
.user-settings .outer-header .outer-title {
  opacity: 0;
  transition: opacity 150ms ease;
  @apply text-[20px] font-bold text-gray-800;
}
.user-settings .outer-header.stuck .outer-title {
  opacity: 1;
}
.user-settings .outer-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #e5e7eb;
  opacity: 0;
  transition: opacity 150ms ease;
}
.user-settings .outer-header.stuck::after {
  opacity: 1;
}

.user-settings .group-title {
  @apply text-[13px] font-semibold text-gray-600 px-1;
}

.user-settings .btn-ghost.icon {
  transition:
    background-color 150ms ease,
    color 150ms ease;
  @apply w-9 h-9 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-100 hover:text-gray-700 text-[16px] cursor-pointer select-none;
}
.user-settings .close-btn:hover {
  @apply bg-gray-300 text-gray-900;
  transform: translateY(-50%);
  font-size: 19px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.user-settings .close-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  transition:
    transform 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    font-size 150ms ease;
}

.user-settings .toggle-checkbox:checked::before {
  left: auto;
  right: 2px;
  transform: translateY(-50%);
  background: #ffffff;
}

.user-settings .color-row {
  @apply flex items-center gap-1.5;
}

.user-settings .color-swatch {
  @apply w-6 h-6 rounded-md cursor-pointer;
}

.user-settings .color-swatch.active {
  @apply ring-2 ring-offset-2;
  --tw-ring-color: var(--user-color-ring, #111827);
}

.user-settings .seg {
  @apply flex items-center gap-2;
  flex-wrap: wrap;
}

.user-settings .seg.vertical {
  @apply flex-col items-end;
}

.user-settings .seg-btn {
  @apply px-3 py-1 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50 cursor-pointer select-none;
}

.user-settings .seg-btn.active {
  background: var(--user-active-bg, #111827);
  color: var(--user-active-fg, #ffffff);
  border-color: var(--user-active-bg, #111827);
}

.user-settings .value-wrap {
  @apply flex flex-col items-end gap-1 text-right;
}

.user-settings .tabs {
  @apply flex items-center gap-2 mb-2;
}

.user-settings .tab-btn {
  @apply px-3 py-1 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50 cursor-pointer select-none;
}

.user-settings .tab-btn.active {
  background: var(--user-active-bg, #111827);
  color: var(--user-active-fg, #ffffff);
  border-color: var(--user-active-bg, #111827);
}

.user-settings .field-help {
  @apply text-gray-400 text-[11px];
}

.row.help-row .field-help {
  @apply ml-0;
}

.user-settings .field-help a {
  @apply text-blue-600 hover:text-blue-700;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  .user-settings .panel {
    @apply bg-gray-800 rounded-b-xl text-gray-100;
    -webkit-box-shadow: 0 10px 39px 10px #00000040;
    -moz-box-shadow: 0 10px 39px 10px #00000040;
    box-shadow: 0 10px 39px 10px #00000040 !important;
  }
  .user-settings .row {
    @apply bg-transparent border-0;
  }
  .user-settings .header-row {
    @apply bg-gray-800 border-gray-700;
  }
  .user-settings .outer-header {
    @apply bg-gray-800 rounded-t-xl;
  }
  .user-settings .outer-header::after {
    background: #4b5563;
  }
  .user-settings .footer a.issue-link {
    @apply text-gray-300 hover:text-gray-100;
  }
  .user-settings .footer .brand {
    @apply text-gray-400;
  }
  .user-settings label {
    @apply text-gray-300;
  }
  .user-settings .field-help {
    @apply text-gray-400;
  }
  .user-settings .field-help a {
    @apply text-blue-400 hover:text-blue-300;
  }
  .user-settings .group {
    @apply bg-gray-700;
  }
  .user-settings .group .row:not(:last-child)::after {
    background: #4b5563;
  }
}

.user-settings .panel::-webkit-scrollbar {
  width: 4px;
}
.user-settings .panel::-webkit-scrollbar-track {
  background: transparent;
}
.user-settings .panel::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.25);
  border-radius: 9999px;
  opacity: 0.25;
}
.user-settings .footer {
  @apply text-[12px] text-gray-500 flex flex-col items-center gap-1 pt-6 pb-3;
}
.user-settings .footer a.issue-link {
  @apply text-gray-600 hover:text-gray-800 underline underline-offset-2 cursor-pointer select-none;
}
.user-settings .footer .brand {
  @apply text-gray-500 hover:text-gray-700 cursor-pointer select-none;
}
.user-settings button {
  user-select: none;
}