html,
body,
button,
input,
select,
dialog,
a {
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

:focus-visible {
  outline: 3px solid rgba(41, 164, 190, 0.32);
  outline-offset: 2px;
}

.theme-toggle {
  flex: 0 0 auto;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

html[data-theme="dark"] .theme-icon-moon,
html[data-theme="light"] .theme-icon-sun {
  display: none;
}

.auth-theme-toggle {
  position: fixed;
  z-index: 2;
  top: 20px;
  right: 20px;
  border: 1px solid #30383e;
  background: #101417;
}

.identity img,
.join-brand img,
.auth-heading > img,
.download-copy img {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.summary-band,
.server-band,
.network-download,
.install-flow,
.module-table,
.account-directory-heading,
.account-list,
.track-list,
.plugin-list,
.auth-panel,
.setup-panel,
.token-section,
.devices-section,
.profile-dialog {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.module-table,
.announcement-heading,
.announcement-form,
.announcement-list,
.track-list,
.plugin-list {
  overflow: hidden;
  border: 1px solid #293036;
  border-radius: 7px;
}

.module-row:last-child,
.track-row:last-child,
.plugin-row:last-child {
  border-bottom: 0;
}

.topbar {
  backdrop-filter: blur(12px);
}

.account-link,
.account-button {
  max-width: 220px;
}

.account-link span,
.account-button > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme="light"] {
  color-scheme: light;
  color: #172027;
  background: #f3f6f7;
}

html[data-theme="light"] body {
  background: #f3f6f7;
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .join-bar {
  border-color: #d8dee1;
  background: #ffffff;
}

html[data-theme="light"] .join-brand {
  color: #172027;
}

html[data-theme="light"] .topbar {
  border-color: #d8dee1;
  background: rgba(248, 250, 250, 0.92);
}

html[data-theme="light"] .identity span,
html[data-theme="light"] .topbar p,
html[data-theme="light"] .summary-band span,
html[data-theme="light"] .server-band span,
html[data-theme="light"] .module-row small,
html[data-theme="light"] .product-label,
html[data-theme="light"] .download-copy p:last-child,
html[data-theme="light"] .release-details dt,
html[data-theme="light"] .track-row span,
html[data-theme="light"] .plugin-row span,
html[data-theme="light"] .empty-state,
html[data-theme="light"] .module-state {
  color: #6d787f;
}

html[data-theme="light"] .account-directory-heading p,
html[data-theme="light"] .announcement-heading p,
html[data-theme="light"] .announcement-row-heading span,
html[data-theme="light"] .announcement-content p,
html[data-theme="light"] .account-identity small,
html[data-theme="light"] .account-devices,
html[data-theme="light"] .account-role {
  color: #6d787f;
}

html[data-theme="light"] nav a {
  color: #4c575e;
}

html[data-theme="light"] nav a:hover,
html[data-theme="light"] .icon-button:hover,
html[data-theme="light"] .module-row:hover,
html[data-theme="light"] .track-row:hover {
  background: #edf2f3;
}

html[data-theme="light"] nav a.active {
  background: #1e292f;
  color: #ffffff;
}

html[data-theme="light"] .sidebar-status,
html[data-theme="light"] .module-table,
html[data-theme="light"] .announcement-heading,
html[data-theme="light"] .announcement-form,
html[data-theme="light"] .announcement-list,
html[data-theme="light"] .account-directory-heading,
html[data-theme="light"] .account-list,
html[data-theme="light"] .release-details,
html[data-theme="light"] .track-list,
html[data-theme="light"] .plugin-list {
  border-color: #d8dee1;
}

html[data-theme="light"] .icon-button,
html[data-theme="light"] .search-field,
html[data-theme="light"] .account-link {
  border-color: #cbd3d7;
  background: #ffffff;
  color: #37434a;
}

html[data-theme="light"] .icon-button:hover,
html[data-theme="light"] .account-link:hover {
  border-color: #96a2a8;
  background: #f5f7f8;
}

html[data-theme="light"] .summary-band,
html[data-theme="light"] .server-band,
html[data-theme="light"] .install-flow {
  border-color: #d8dee1;
  background: #d8dee1;
}

html[data-theme="light"] .summary-band > div,
html[data-theme="light"] .server-band > div,
html[data-theme="light"] .module-row,
html[data-theme="light"] .announcement-heading,
html[data-theme="light"] .announcement-form,
html[data-theme="light"] .announcement-list,
html[data-theme="light"] .account-directory-heading,
html[data-theme="light"] .account-list,
html[data-theme="light"] .network-download,
html[data-theme="light"] .install-flow li,
html[data-theme="light"] .track-list,
html[data-theme="light"] .plugin-list {
  background: #ffffff;
}

html[data-theme="light"] .module-row,
html[data-theme="light"] .announcement-row,
html[data-theme="light"] .account-row,
html[data-theme="light"] .release-details div,
html[data-theme="light"] .track-row,
html[data-theme="light"] .plugin-row {
  border-color: #dfe4e6;
}

html[data-theme="light"] .announcement-heading > span {
  background: #edf1f2;
  color: #4e5960;
}

html[data-theme="light"] .announcement-form input,
html[data-theme="light"] .announcement-form select,
html[data-theme="light"] .announcement-form textarea {
  border-color: #cbd3d7;
  background: #f8f9f9;
  color: #172027;
}

html[data-theme="light"] .announcement-error {
  background: #ffffff;
  color: #c63827;
}

html[data-theme="light"] .announcement-remove {
  border-color: #cbd3d7;
  color: #69747a;
}

html[data-theme="light"] .network-download {
  border-color: #d8dee1;
}

html[data-theme="light"] .search-field input {
  color: #172027;
}

html[data-theme="light"] .install-flow li span {
  border-color: #b8c2c7;
  color: #4f5b62;
}

html[data-theme="light"] .empty-state strong {
  color: #3f4a50;
}

html[data-theme="light"] .account-directory-heading > span {
  background: #edf1f2;
  color: #4e5960;
}

html[data-theme="light"] .auth-panel,
html[data-theme="light"] .setup-panel,
html[data-theme="light"] .token-section,
html[data-theme="light"] .file-transfer-section,
html[data-theme="light"] .devices-section,
html[data-theme="light"] .profile-dialog {
  border-color: #d8dee1;
  background: #ffffff;
  color: #172027;
}

html[data-theme="light"] .eyebrow,
html[data-theme="light"] .setup-copy > p:last-child,
html[data-theme="light"] .device-row div span,
html[data-theme="light"] .empty-state,
html[data-theme="light"] .token-output > span {
  color: #6d787f;
}

html[data-theme="light"] .auth-tabs {
  border-color: #d8dee1;
  background: #edf2f3;
}

html[data-theme="light"] .auth-tab {
  color: #647078;
}

html[data-theme="light"] .auth-tab.active {
  background: #ffffff;
  color: #172027;
  box-shadow: 0 2px 8px rgba(23, 32, 39, 0.1);
}

html[data-theme="light"] form label,
html[data-theme="light"] .form-grid label {
  color: #465158;
}

html[data-theme="light"] .text-input,
html[data-theme="light"] .password-field,
html[data-theme="light"] .token-output input {
  border-color: #bdc7cc;
  background: #ffffff;
  color: #172027;
}

html[data-theme="light"] .text-input.readonly,
html[data-theme="light"] .token-output input {
  background: #f1f4f5;
  color: #5f6b72;
}

html[data-theme="light"] .password-field input {
  color: #172027;
}

html[data-theme="light"] .password-field button,
html[data-theme="light"] .icon-button {
  color: #4f5b62;
}

html[data-theme="light"] .password-field button:hover,
html[data-theme="light"] .icon-button:hover,
html[data-theme="light"] .account-button:hover {
  background: #edf2f3;
}

html[data-theme="light"] .file-button,
html[data-theme="light"] .secondary-button {
  border-color: #aeb9be;
  background: #ffffff;
  color: #2f3a40;
}

html[data-theme="light"] .file-button:hover,
html[data-theme="light"] .secondary-button:hover {
  background: #edf2f3;
}

html[data-theme="light"] .transfer-form {
  border-color: #d8dee1;
}

html[data-theme="light"] .field-label {
  color: #566269;
}

html[data-theme="light"] .delivery-segments {
  border-color: #c7d0d4;
  background: #edf1f2;
}

html[data-theme="light"] .delivery-segments span {
  color: #5f6a71;
}

html[data-theme="light"] .delivery-segments input:checked + span {
  background: #ffffff;
  color: #172027;
  box-shadow: 0 1px 4px rgba(23, 32, 39, 0.12);
}

html[data-theme="light"] .recipient-field select {
  border-color: #c7d0d4;
  background: #ffffff;
  color: #273239;
}

html[data-theme="light"] .file-drop {
  border-color: #aeb9be;
  background: #f7f9f9;
}

html[data-theme="light"] .file-drop:hover,
html[data-theme="light"] .file-drop.dragging {
  border-color: #e95039;
  background: #fff8f6;
}

html[data-theme="light"] .file-drop small,
html[data-theme="light"] .upload-progress span,
html[data-theme="light"] .online-members,
html[data-theme="light"] .transfer-identity span,
html[data-theme="light"] .transfer-meta span {
  color: #6d787f;
}

html[data-theme="light"] .transfer-meter {
  background: #dce2e4;
}

html[data-theme="light"] .transfer-list,
html[data-theme="light"] .device-list,
html[data-theme="light"] .join-flow {
  border-color: #d8dee1;
  background: #d8dee1;
}

html[data-theme="light"] .transfer-row,
html[data-theme="light"] .device-row,
html[data-theme="light"] .empty-state,
html[data-theme="light"] .join-flow li {
  background: #ffffff;
}

html[data-theme="light"] .file-type-icon,
html[data-theme="light"] .device-icon {
  background: #edf2f3;
  color: #58646b;
}

html[data-theme="light"] .transfer-badge {
  background: #e6f1f3;
  color: #237d91 !important;
}

html[data-theme="light"] .transfer-badge.broadcast {
  background: #f7e8e4;
  color: #b64735 !important;
}

html[data-theme="light"] .transfer-badge.complete {
  background: #e5f2eb;
  color: #27845b !important;
}

html[data-theme="light"] .transfer-action {
  border-color: #c7d0d4;
  background: #ffffff;
  color: #465158;
}

html[data-theme="light"] .transfer-action:hover {
  border-color: #98a4aa;
  background: #edf2f3;
}

html[data-theme="light"] .transfer-action.delete {
  border-color: #dfc2bd;
  color: #b64735;
}

html[data-theme="light"] .avatar-preview,
html[data-theme="light"] .device-count {
  border-color: #c6d5da;
  background: #e6f1f3;
  color: #237d91;
}

html[data-theme="light"] .account-button {
  color: #303b41;
}

html[data-theme="light"] .account-button:hover {
  border-color: #d2d9dc;
}

html[data-theme="light"] .join-flow span {
  border-color: #b8c2c7;
  color: #4f5b62;
}

html[data-theme="light"] .profile-dialog {
  box-shadow: 0 24px 70px rgba(32, 42, 48, 0.2);
}

html[data-theme="light"] .profile-dialog::backdrop {
  background: rgba(35, 43, 48, 0.48);
}

html[data-theme="light"] .profile-editor {
  border-color: #d8dee1;
  background: #f7f9f9;
}

html[data-theme="light"] .revoke-button {
  border-color: #dfc2bd;
  background: #fff8f6;
  color: #b64735;
}

html[data-theme="light"] .revoke-button:hover {
  border-color: #ca8f85;
  background: #fbe9e6;
}

html[data-theme="light"] .revoke-button:disabled {
  border-color: #d8dee1;
  background: #f1f4f5;
  color: #95a0a6;
}

html[data-theme="light"] .exit-switch i {
  border-color: #aeb8bd;
  background: #dce2e4;
}

html[data-theme="light"] .exit-switch i::after {
  background: #758087;
}

html[data-theme="light"] .auth-theme-toggle {
  border-color: #cbd3d7;
  background: #ffffff;
}

@media (max-width: 620px) {
  .auth-theme-toggle {
    top: 14px;
    right: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  button,
  input,
  select,
  dialog,
  a {
    transition: none;
  }
}