@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap");

:root {
  --profile-banner-ratio: 4 / 1;
  --font-ui: "Manrope", "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Plus Jakarta Sans", "Manrope", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", "Consolas", monospace;
  --theme-font-scale: 1;
  --theme-spacing-scale: 1;
  --theme-ui-scale: 1;
  --theme-blur: 12px;
  --theme-panel-alpha: 0.94;
  --theme-border-width: 1px;
  --focus-ring: rgba(88, 101, 242, 0.44);
  --selection-bg: rgba(88, 101, 242, 0.64);
  --color-link: #9ec3ff;

  --bg-main: #14161b;
  --bg-deep: #0d0f14;
  --bg-angle: 180deg;

  --surface-0: rgba(33, 36, 43, 0.9);
  --surface-1: rgba(26, 29, 35, 0.94);
  --surface-2: rgba(21, 24, 30, 0.97);
  --surface-row: rgba(255, 255, 255, 0.03);
  --surface-row-hover: rgba(88, 101, 242, 0.18);

  --stroke: rgba(200, 232, 255, 0.14);
  --stroke-strong: rgba(200, 232, 255, 0.24);

  --text-main: #eaf6ff;
  --text-soft: rgba(234, 246, 255, 0.74);
  --text-muted: rgba(234, 246, 255, 0.52);

  --accent: #5865f2;
  --accent-strong: #7983f5;
  --accent-soft: rgba(88, 101, 242, 0.24);

  --ok: #49d17f;
  --warn: #f5c354;
  --bad: #f26f6f;

  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --left-sidebar-width: 340px;
  --right-sidebar-width: 320px;
  --dm-stage-height: 56vh;

  --shadow-main: 0 24px 70px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.28);
  --arrow-nav-shell-border: transparent;
  --arrow-nav-shell-bg: transparent;
  --arrow-nav-btn-border: rgba(229, 235, 244, 0.18);
  --arrow-nav-btn-border-hover: rgba(237, 241, 248, 0.3);
  --arrow-nav-btn-bg: linear-gradient(180deg, rgba(49, 55, 66, 0.96), rgba(36, 41, 50, 0.96));
  --arrow-nav-btn-bg-hover: linear-gradient(180deg, rgba(59, 66, 79, 0.97), rgba(43, 49, 59, 0.97));
  --arrow-nav-btn-icon: rgba(236, 243, 251, 0.96);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  color: var(--text-main);
  font-family: var(--font-ui);
  font-size: calc(16px * var(--theme-font-scale, 1));
  background:
    radial-gradient(1100px 680px at 12% -8%, rgba(88, 101, 242, 0.18), transparent 58%),
    radial-gradient(900px 620px at 92% 8%, rgba(73, 209, 127, 0.08), transparent 54%),
    linear-gradient(var(--bg-angle, 180deg), #171a20, var(--bg-main) 45%, var(--bg-deep));
  overflow: hidden;
}

/* Default app behavior: prevent accidental text selection/copy drag on UI chrome.
   Re-enable selection explicitly on copy/edit surfaces below. */
body,
body * {
  -webkit-user-select: none;
  user-select: none;
}

/* Allow selection/copy where it makes sense. */
input,
textarea,
select,
option,
[contenteditable],
pre,
code,
.msg__text,
.msg__text *,
.msg__systemText,
.msg__replyText,
.msg__fileName,
.msg__fileMeta,
.msg__attachmentInfo,
.msg__link,
.debug,
#debug,
#debugProfile,
[data-allow-select="1"] {
  -webkit-user-select: text;
  user-select: text;
}

body.authPage,
body.authPage * {
  -webkit-app-region: no-drag !important;
}

body.authPage .authDesktopDragRegion {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 42px;
  z-index: 24;
  pointer-events: auto;
  -webkit-app-region: drag !important;
}

body.authPage .authLangDock,
body.authPage .authLangDock * {
  -webkit-app-region: no-drag !important;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  background-image: linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 40%, black 35%, transparent 88%);
}

body::after {
  background: radial-gradient(80% 65% at 50% 100%, rgba(2, 7, 12, 0.55), transparent 72%);
}

::selection {
  color: #eef2ff;
  background: var(--selection-bg, rgba(88, 101, 242, 0.64));
}

a {
  color: var(--color-link, inherit);
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

.wrap {
  width: min(1300px, calc(100% - 28px));
  margin: 14px auto;
}

.wrap.app {
  width: min(1600px, calc(100% - 24px));
  height: calc(100vh - 24px);
  margin: 12px auto;
}

.appGrid {
  --app-grid-gap: calc(16px * var(--theme-spacing-scale, 1));
  height: 100%;
  display: grid;
  grid-template-columns: var(--left-sidebar-width) minmax(540px, 1fr) var(--right-sidebar-width);
  gap: var(--app-grid-gap);
  position: relative;
}

.app:not(.wrap) {
  --app-grid-gap: calc(16px * var(--theme-spacing-scale, 1));
  height: 100%;
  padding: 14px;
  display: grid;
  grid-template-columns: var(--left-sidebar-width) minmax(540px, 1fr) var(--right-sidebar-width);
  gap: var(--app-grid-gap);
  position: relative;
}

.card,
.panel {
  position: relative;
  border: var(--theme-border-width, 1px) solid var(--stroke);
  border-radius: var(--radius-xl);
  background: linear-gradient(170deg, var(--surface-0) 0%, var(--surface-1) 42%, var(--surface-2) 100%);
  box-shadow: var(--shadow-main);
  backdrop-filter: blur(var(--theme-blur, 12px));
}

.panel {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card::before,
.panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(235, 255, 255, 0.5), transparent);
  opacity: 0.4;
  pointer-events: none;
}

.padded {
  padding: 18px;
}

.leftCol,
.midCol,
.rightCol,
.left,
.mid,
.right {
  min-height: 0;
}

.leftSidebarResizer {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: calc(clamp(300px, var(--left-sidebar-width), 420px) + (var(--app-grid-gap, 10px) / 2) - 6px);
  width: 12px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: col-resize;
  z-index: 18;
  touch-action: none;
  user-select: none;
}

.leftSidebarResizer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 74px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: rgba(142, 160, 255, 0.36);
  box-shadow: 0 0 0 1px rgba(22, 28, 42, 0.55);
  opacity: 0.35;
  transition: opacity 0.14s ease, background-color 0.14s ease;
}

.leftSidebarResizer:hover::before,
.leftSidebarResizer:focus-visible::before,
.leftSidebarResizer.is-dragging::before {
  opacity: 0.95;
  background: rgba(142, 160, 255, 0.9);
}

.leftSidebarResizer:focus-visible {
  outline: none;
}

body.is-resizing-sidebar,
body.is-resizing-sidebar * {
  cursor: col-resize !important;
  user-select: none !important;
}

.leftSidebarPeekZone {
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 14px;
  display: none;
  z-index: 33;
}

.leftSidebarPeekZone::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 76px;
  border-radius: 999px;
  background: rgba(142, 160, 255, 0.62);
  opacity: 0;
  transition: opacity 0.16s ease;
}

.left-collapsed .leftSidebarPeekZone {
  display: block;
}

.left-collapsed .leftSidebarPeekZone:hover::before {
  opacity: 0.9;
}

.left-collapsed .leftSidebarResizer {
  display: none;
}

.left-collapsed .panel.left {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  width: clamp(300px, var(--left-sidebar-width), 420px);
  max-width: calc(100vw - 24px);
  z-index: 34;
  transform: translateX(calc(-100% - 18px));
  opacity: 0;
  pointer-events: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.left-collapsed.left-overlay-open .panel.left {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.app.left-collapsed,
.appGrid.left-collapsed {
  grid-template-columns: minmax(0, 1fr) 250px;
}

.app.left-collapsed.dm-focus,
.appGrid.left-collapsed.dm-focus {
  grid-template-columns: minmax(0, 1fr);
}

.rightSidebarResizer {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: calc(100% - clamp(220px, var(--right-sidebar-width), 420px) - (var(--app-grid-gap, 10px) / 2) - 6px);
  width: 12px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: col-resize;
  z-index: 18;
  touch-action: none;
  user-select: none;
}

.rightSidebarResizer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 74px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: rgba(142, 160, 255, 0.36);
  box-shadow: 0 0 0 1px rgba(22, 28, 42, 0.55);
  opacity: 0.35;
  transition: opacity 0.14s ease, background-color 0.14s ease;
}

.rightSidebarResizer:hover::before,
.rightSidebarResizer:focus-visible::before,
.rightSidebarResizer.is-dragging::before {
  opacity: 0.95;
  background: rgba(142, 160, 255, 0.9);
}

.rightSidebarResizer:focus-visible {
  outline: none;
}

.rightSidebarPeekZone {
  position: absolute;
  right: 0;
  top: 10px;
  bottom: 10px;
  width: 14px;
  display: none;
  z-index: 33;
}

.rightSidebarPeekZone::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 76px;
  border-radius: 999px;
  background: rgba(142, 160, 255, 0.62);
  opacity: 0;
  transition: opacity 0.16s ease;
}

.right-collapsed .rightSidebarPeekZone {
  display: none;
  pointer-events: none;
}

.right-collapsed .rightSidebarPeekZone:hover::before {
  opacity: 0;
}

.right-no-peek.right-collapsed .rightSidebarPeekZone {
  display: none !important;
  pointer-events: none !important;
}

.right-collapsed .rightSidebarResizer {
  display: none;
}

.right-collapsed .panel.right {
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 10px;
  width: clamp(220px, var(--right-sidebar-width), 420px);
  max-width: calc(100vw - 24px);
  z-index: 34;
  transform: translateX(calc(100% + 18px));
  opacity: 0;
  pointer-events: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.right-collapsed.right-overlay-open .panel.right {
  transform: none;
  opacity: 0;
  pointer-events: none;
}

.app.right-collapsed,
.appGrid.right-collapsed {
  grid-template-columns: var(--left-sidebar-width) minmax(0, 1fr);
}

.panelHeader,
.leftTop,
.midTop,
.rightTop {
  position: relative;
  padding: 14px;
  border-bottom: 1px solid rgba(200, 232, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
}

.panelBody,
.leftList,
.midBody,
.rightBody {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.serverMembersPanel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}

.serverMembersPanel.hidden {
  display: none !important;
}

.serverMembersSearchWrap {
  min-height: 0;
}

.serverMembersSearch {
  width: 100%;
  min-height: 36px;
  border-radius: 10px;
  background: var(--altara-sidebar-input-bg, rgba(18, 18, 18, 0.94));
  border: 1px solid var(--altara-sidebar-border, rgba(255, 255, 255, 0.085));
  color: var(--text-main);
}

.serverMembersSearch:focus {
  outline: none;
  border-color: var(--altara-sidebar-focus-border, rgba(232, 207, 174, 0.36));
  box-shadow: var(--altara-sidebar-focus-ring, 0 0 0 3px rgba(232, 207, 174, 0.1));
  background: var(--altara-sidebar-input-focus-bg, rgba(21, 21, 21, 0.96));
}

.serverMembersList {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 12px;
  padding-right: 2px;
}

.serverMembersGroup {
  display: grid;
  gap: 4px;
}

.serverMembersGroup__title {
  margin: 0;
  color: rgba(214, 220, 232, 0.72);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 4px;
}

.serverMemberRow {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  cursor: pointer;
}

.serverMemberRow:hover,
.serverMemberRow:focus-visible {
  outline: none;
  border-color: var(--altara-sidebar-hover-border, rgba(232, 207, 174, 0.2));
  background: var(--altara-sidebar-hover-bg, rgba(232, 207, 174, 0.07));
  box-shadow: var(--altara-sidebar-hover-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.035));
}

.serverMemberRow__avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
}

.serverMemberRow__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.serverMemberRow__avatar .statusDot {
  position: absolute !important;
  right: 2px !important;
  bottom: 2px !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(18, 23, 34, 0.92);
  box-shadow: none;
  z-index: 5;
}

.serverMemberRow__text {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.serverMemberRow__name {
  font-size: 14px;
  color: rgba(244, 247, 252, 0.97);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.serverMemberRow__meta {
  font-size: 12px;
  color: rgba(189, 196, 210, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panelBody {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panelTitle,
.hTitle,
.authTitle,
.brand,
.sectionTitle {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.panelTitle,
.hTitle {
  font-size: 20px;
}

.uName,
.meName,
.name,
.dm-name,
.dmTitle,
.dm__title,
.presenceName {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.uSub,
.hSub,
.meta,
.meTag,
.presenceHandle,
.dm-handle,
.hint,
.muted,
.callModal__hint,
.callStage__sub,
.callBarText,
.count {
  color: var(--text-muted);
  font-size: 13px;
}

.sectionTitle,
.rightSectionLabel {
  margin: 8px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  color: var(--text-soft);
}

.search {
  position: relative;
}

.friendsSearch {
  margin-bottom: 10px;
}

.search input,
.input,
input:not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
textarea,
select {
  width: 100%;
  border: 1px solid rgba(200, 232, 255, 0.14);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-main);
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.search input,
.input,
input:not([type="range"]):not([type="file"]):not([type="hidden"]) {
  height: 40px;
}

textarea {
  min-height: 98px;
  resize: vertical;
}

.search input:focus,
.input:focus,
input:not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus,
textarea:focus,
select:focus {
  border-color: rgba(30, 227, 255, 0.56);
  box-shadow: 0 0 0 3px rgba(30, 227, 255, 0.18);
  background: rgba(4, 14, 20, 0.84);
}

input::placeholder,
textarea::placeholder {
  color: rgba(234, 246, 255, 0.48);
}

.btn,
.smallBtn {
  height: 36px;
  border: 1px solid rgba(200, 232, 255, 0.18);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  padding: 0 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform 0.14s ease, border-color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease;
}

.btn:hover,
.smallBtn:hover {
  transform: translateY(-1px);
  border-color: rgba(88, 101, 242, 0.58);
  background: rgba(88, 101, 242, 0.2);
  box-shadow: var(--shadow-soft);
}

.btn.primary,
.smallBtn.primary,
.btn.btn--accent {
  border-color: rgba(121, 131, 245, 0.75);
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.45), rgba(88, 101, 242, 0.32));
  color: #eaffff;
}

.btn.primary:hover,
.smallBtn.primary:hover,
.btn.btn--accent:hover {
  border-color: rgba(149, 158, 248, 0.95);
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.58), rgba(88, 101, 242, 0.45));
}

.btn.danger,
.smallBtn.danger,
.btn.btn--danger {
  border-color: rgba(242, 111, 111, 0.6);
  background: rgba(242, 111, 111, 0.17);
}

.btn.danger:hover,
.smallBtn.danger:hover,
.btn.btn--danger:hover {
  border-color: rgba(242, 111, 111, 0.86);
  background: rgba(242, 111, 111, 0.25);
}

.btn.ghost {
  background: rgba(0, 0, 0, 0.28);
}

.btn-mini {
  height: 30px;
  border-radius: 9px;
  padding: 0 11px;
  font-size: 12px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(242, 111, 111, 0.56);
  background: rgba(242, 111, 111, 0.22);
  color: #ffdede;
  font-size: 11px;
  font-weight: 700;
}

.pillTabs,
.midTabs,
.leftTabsSingle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.midTop {
  display: flex;
  align-items: center;
  gap: 10px;
}

.midNavButtons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  flex: 0 0 auto;
}

.midNavBtn {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
}

.midNavBtn:disabled {
  opacity: 0.5;
  cursor: default;
}

.midTabs {
  flex: 1 1 auto;
  min-width: 0;
}

.desktopUpdatePrompt {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(560px, calc(100vw - 26px));
  border-radius: 14px;
  border: 1px solid var(--altara-border-strong, rgba(255, 255, 255, 0.1));
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--altara-surface, #181818) 96%, var(--altara-accent, #e8cfae) 4%), var(--altara-surface, #181818));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
  padding: 11px 12px;
}

.desktopUpdatePrompt.hidden {
  display: none !important;
}

.desktopUpdatePrompt__meta {
  min-width: 0;
  flex: 1;
}

.desktopUpdatePrompt__title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--altara-accent-strong, #f0d3aa);
}

.desktopUpdatePrompt__text {
  margin-top: 2px;
  color: var(--altara-text, #f2f0ec);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.desktopUpdateProgressWrap {
  margin-top: 6px;
  height: 4px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--altara-border, rgba(255, 255, 255, 0.08)) 72%, transparent);
  overflow: hidden;
  max-width: 260px;
}

.desktopUpdateProgressWrap.hidden {
  display: none !important;
}

.desktopUpdateProgressBar {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--altara-accent, #e8cfae), var(--altara-accent-strong, #f0d3aa));
  transition: width 0.3s ease;
  min-width: 0;
}

.desktopUpdatePrompt__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.desktopUpdateBtn {
  min-width: 90px;
  border-radius: 9px;
  height: 34px;
}

.desktopUpdateBtn--download,
.desktopUpdateBtn--install {
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.36)) !important;
  background: linear-gradient(160deg, var(--altara-accent, #e8cfae), var(--altara-accent-strong, #cda97b)) !important;
  color: color-mix(in srgb, var(--altara-bg, #101010) 90%, #000 10%) !important;
  font-weight: 700;
}

.desktopUpdateBtn--download:hover,
.desktopUpdateBtn--install:hover {
  border-color: color-mix(in srgb, var(--altara-accent, #e8cfae) 76%, #fff 24%) !important;
  background: linear-gradient(160deg, color-mix(in srgb, var(--altara-accent, #e8cfae) 88%, #fff 12%), var(--altara-accent-strong, #cda97b)) !important;
}

.desktopUpdateBtn--dismiss {
  min-width: 32px;
  width: 32px;
  height: 32px;
  padding: 0;
}

.desktopUpdatingOverlay {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: grid;
  place-items: center;
  background-color: var(--altara-bg, #101010);
  background:
    radial-gradient(900px 500px at 16% -10%, color-mix(in srgb, var(--altara-accent, #e8cfae) 18%, transparent), transparent 64%),
    radial-gradient(800px 440px at 110% 110%, rgba(255, 255, 255, 0.035), transparent 62%),
    color-mix(in srgb, var(--altara-bg, #101010) 86%, #000 14%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.desktopUpdatingOverlay.hidden {
  display: none !important;
}

.desktopUpdatingOverlay__card {
  width: min(460px, calc(100vw - 34px));
  border-radius: 18px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  background: linear-gradient(180deg, color-mix(in srgb, var(--altara-surface, #181818) 94%, #fff 3%), var(--altara-surface, #181818));
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  padding: 20px 20px 18px;
  display: grid;
  gap: 10px;
}

.desktopUpdatingOverlay__logo {
  width: 78px;
  height: 78px;
  border-radius: 20px;
  border: 1px solid var(--altara-border-strong, rgba(255, 255, 255, 0.12));
  background: linear-gradient(180deg, var(--altara-surface-elevated, #202020), var(--altara-surface, #181818));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
  display: grid;
  place-items: center;
  justify-self: center;
}

.desktopUpdatingOverlay__logoImg {
  width: 58px;
  height: 58px;
  object-fit: contain;
  display: block;
}

.desktopUpdatingOverlay__brand {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--altara-accent-strong, #f0d3aa);
}

.desktopUpdatingOverlay__title {
  font-size: clamp(20px, 2.8vw, 28px);
  line-height: 1.12;
  font-weight: 800;
  color: var(--altara-text, #f2f0ec);
}

.desktopUpdatingOverlay__text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
}

.desktopUpdatingOverlay.is-boot .desktopUpdatingOverlay__card {
  width: min(330px, calc(100vw - 36px));
  min-height: 350px;
  border-color: var(--altara-border-strong, rgba(255, 255, 255, 0.12));
  padding: 26px 20px 22px;
  justify-content: center;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 14px;
}

.desktopUpdatingOverlay.is-boot .desktopUpdatingOverlay__brand {
  display: none;
}

.desktopUpdatingOverlay.is-boot .desktopUpdatingOverlay__title {
  font-size: clamp(24px, 3.1vw, 31px);
  line-height: 1.08;
}

.desktopUpdatingOverlay.is-boot .desktopUpdatingOverlay__text {
  max-width: 240px;
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
}

.desktopUpdatingOverlay__loader {
  margin-top: 4px;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--altara-border, rgba(255, 255, 255, 0.08)) 72%, transparent);
}

.desktopUpdatingOverlay__loader::before {
  content: "";
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--altara-accent, #e8cfae), var(--altara-accent-strong, #f0d3aa));
  box-shadow: 0 0 18px color-mix(in srgb, var(--altara-accent, #e8cfae) 36%, transparent);
  animation: desktopUpdatingOverlayPulse 1.15s ease-in-out infinite;
}

@keyframes desktopUpdatingOverlayPulse {
  0% {
    transform: translateX(-125%);
  }
  100% {
    transform: translateX(330%);
  }
}

body.desktop-install-welcome-open {
  overflow: hidden;
}

.desktopInstallWelcomeOverlay {
  position: fixed;
  inset: 0;
  z-index: 1855;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.desktopInstallWelcomeOverlay.hidden {
  display: none !important;
}

.desktopInstallWelcomeOverlay__backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 720px at 8% -10%, rgba(136, 193, 255, 0.3), rgba(136, 193, 255, 0)),
    radial-gradient(860px 620px at 90% 120%, rgba(96, 235, 185, 0.24), rgba(96, 235, 185, 0)),
    linear-gradient(165deg, #222730 0%, #181c25 48%, #0f141f 100%);
}

.desktopInstallWelcomeOverlay__glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(18px);
  opacity: 0.88;
  pointer-events: none;
}

.desktopInstallWelcomeOverlay__glow--one {
  width: 640px;
  height: 640px;
  left: -180px;
  top: -200px;
  background: radial-gradient(circle at center, rgba(120, 188, 255, 0.34) 0%, rgba(120, 188, 255, 0) 70%);
  animation: desktopInstallWelcomeDriftA 12s ease-in-out infinite alternate;
}

.desktopInstallWelcomeOverlay__glow--two {
  width: 560px;
  height: 560px;
  right: -150px;
  bottom: -180px;
  background: radial-gradient(circle at center, rgba(112, 233, 189, 0.27) 0%, rgba(112, 233, 189, 0) 72%);
  animation: desktopInstallWelcomeDriftB 11s ease-in-out infinite alternate;
}

.desktopInstallWelcomeOverlay__noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    radial-gradient(rgba(233, 241, 255, 0.17) 0.85px, transparent 0.85px);
  background-size: 8px 8px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.15));
  animation: desktopInstallWelcomeNoise 14s linear infinite;
}

.desktopInstallWelcomeOverlay__card {
  position: relative;
  z-index: 2;
  width: min(920px, calc(100vw - 36px));
  min-height: min(560px, calc(100vh - 44px));
  border-radius: 28px;
  border: 1px solid rgba(184, 210, 255, 0.42);
  background:
    linear-gradient(180deg, rgba(36, 42, 56, 0.56), rgba(21, 25, 35, 0.68)),
    radial-gradient(120% 120% at 50% 18%, rgba(111, 165, 255, 0.23), rgba(111, 165, 255, 0));
  box-shadow:
    0 30px 85px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -16px 30px rgba(9, 13, 20, 0.25);
  backdrop-filter: blur(8px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  text-align: center;
  padding: 52px 34px;
  overflow: hidden;
}

.desktopInstallWelcomeOverlay__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(130deg, rgba(236, 246, 255, 0.08) 0%, rgba(236, 246, 255, 0) 32%),
    radial-gradient(700px 200px at 50% 110%, rgba(80, 130, 220, 0.2), rgba(80, 130, 220, 0));
  pointer-events: none;
}

.desktopInstallWelcomeOverlay__brand {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(203, 225, 255, 0.94);
  animation: desktopInstallWelcomeReveal 700ms cubic-bezier(0.2, 0.92, 0.2, 1) both;
}

.desktopInstallWelcomeOverlay__title {
  margin: 0;
  font-size: clamp(42px, 7.8vw, 88px);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f3f8ff;
  text-wrap: balance;
  max-width: min(760px, 90%);
  animation: desktopInstallWelcomeReveal 860ms cubic-bezier(0.2, 0.92, 0.2, 1) 80ms both;
}

.desktopInstallWelcomeOverlay__line {
  margin: 0;
  max-width: min(680px, 92%);
  font-size: clamp(16px, 2.2vw, 25px);
  line-height: 1.32;
  font-weight: 500;
  color: rgba(229, 238, 255, 0.92);
  text-wrap: balance;
  animation: desktopInstallWelcomeReveal 880ms cubic-bezier(0.2, 0.92, 0.2, 1) 180ms both;
}

.desktopInstallWelcomeOverlay__line--sub {
  font-size: clamp(14px, 1.8vw, 20px);
  color: rgba(202, 217, 242, 0.88);
  animation-delay: 260ms;
}

.desktopInstallWelcomeOverlay__cta {
  margin-top: 8px;
  min-width: 180px;
  height: 48px;
  border-radius: 14px;
  border-color: rgba(193, 214, 255, 0.56) !important;
  background: linear-gradient(160deg, rgba(156, 190, 255, 0.88), rgba(129, 168, 255, 0.82)) !important;
  color: #0d1a33 !important;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(98, 142, 243, 0.28);
  animation: desktopInstallWelcomeReveal 920ms cubic-bezier(0.2, 0.92, 0.2, 1) 330ms both;
}

.desktopInstallWelcomeOverlay__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 15px 34px rgba(98, 142, 243, 0.35);
}

.desktopInstallWelcomeOverlay__cta:active {
  transform: translateY(0);
}

@keyframes desktopInstallWelcomeDriftA {
  0% {
    transform: translate(-20px, -10px) scale(1);
  }
  100% {
    transform: translate(26px, 16px) scale(1.08);
  }
}

@keyframes desktopInstallWelcomeDriftB {
  0% {
    transform: translate(18px, 10px) scale(1);
  }
  100% {
    transform: translate(-24px, -14px) scale(1.09);
  }
}

@keyframes desktopInstallWelcomeNoise {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-20px);
  }
}

@keyframes desktopInstallWelcomeReveal {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (max-width: 720px) {
  .desktopInstallWelcomeOverlay__card {
    min-height: min(560px, calc(100vh - 28px));
    padding: 40px 22px;
    border-radius: 22px;
  }
}

.uiZoomHud {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 3200;
  pointer-events: none;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(136, 186, 255, 0.28);
  background: linear-gradient(180deg, rgba(10, 16, 28, 0.92), rgba(8, 13, 22, 0.86));
  color: #dbe8ff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 28px rgba(4, 8, 15, 0.45);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.uiZoomHud.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.pill,
.chip {
  height: 31px;
  border-radius: 999px;
  border: 1px solid rgba(200, 232, 255, 0.18);
  background: rgba(255, 255, 255, 0.035);
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.14s ease, background-color 0.14s ease, transform 0.14s ease;
}

.pill:hover,
.chip:hover {
  border-color: rgba(88, 101, 242, 0.6);
  transform: translateY(-1px);
}

.pill.active,
.chip.active {
  border-color: rgba(121, 131, 245, 0.88);
  background: rgba(88, 101, 242, 0.32);
  color: #e6fcff;
}

.userCard,
.meRow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.meRow {
  justify-content: space-between;
}

.meText {
  min-width: 0;
}

.meBtns,
.navRow,
.rowActions,
.dmHeaderActions,
.callModal__actions,
.callStage__controls,
.avatar-editor__actions,
.callBar__right {
  display: flex;
  align-items: center;
  gap: 9px;
}

.pendingReqKind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(200, 232, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#meAvatar,
#meAvatar.avatar,
#meAvatar.meAvatar,
.avatarBig {
  --status-dot-size: 14px;
  --status-dot-inset: 1px;
  width: 62px;
  height: 62px;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(200, 232, 255, 0.24);
  background: linear-gradient(150deg, rgba(0, 188, 212, 0.18), rgba(0, 0, 0, 0.24));
  box-shadow: 0 0 0 4px rgba(30, 227, 255, 0.08);
}

.avatar,
.presenceAvatar,
.callStage__avatar {
  --status-dot-size: 11px;
  --status-dot-inset: 1px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(200, 232, 255, 0.2);
  overflow: hidden;
  position: relative;
  flex: 0 0 auto;
  background: linear-gradient(160deg, rgba(30, 227, 255, 0.18), rgba(6, 13, 20, 0.42));
}

.avatar img,
.presenceAvatar img,
#meAvatar img,
.avatarBig img,
.callStage__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: 50%;
}

.statusDot,
.dotMini {
  border-radius: 999px;
}

.statusDot {
  position: absolute;
  right: var(--status-dot-inset, 0px);
  bottom: var(--status-dot-inset, 0px);
  transform: translate(14%, 14%);
  z-index: 2;
  width: var(--status-dot-size, 12px);
  height: var(--status-dot-size, 12px);
  border: 2px solid rgba(18, 23, 34, 0.88);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  background: rgba(220, 235, 255, 0.38);
  pointer-events: none;
}

.statusDot--me {
  --status-dot-size: 11px;
}

#meAvatar,
#meAvatar.avatar,
#meAvatar.meAvatar,
.avatar,
.presenceAvatar {
  overflow: visible;
}

.statusDot[data-status="online"],
.dotMini[data-status-mini="online"] {
  background: var(--ok);
}

.statusDot[data-status="idle"],
.dotMini[data-status-mini="idle"] {
  background: var(--warn);
}

.statusDot[data-status="dnd"],
.dotMini[data-status-mini="dnd"] {
  background: var(--bad);
}

.statusDot[data-status="offline"],
.dotMini[data-status-mini="offline"] {
  background: rgba(220, 235, 255, 0.38);
}

.statusDot[data-status="invisible"],
.dotMini[data-status-mini="invisible"] {
  background: #111;
}

.statusPill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(200, 232, 255, 0.2);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-soft);
}

.dotMini {
  width: 10px;
  height: 10px;
}

.list,
#dmList,
#leftFriends,
#leftDms,
#leftGroups,
#friendsList,
#friendsMain,
#incomingList,
#outgoingList,
#activeNow,
#offlineList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#dmList {
  gap: 8px;
}

.hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.row,
.presenceRow,
.dm-item {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(200, 232, 255, 0.11);
  background: var(--surface-row);
  padding: 11px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: transform 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

.row:hover,
.presenceRow:hover,
.dm-item:hover {
  transform: translateY(-1px);
  border-color: rgba(88, 101, 242, 0.58);
  background: var(--surface-row-hover);
}

.dm-item.is-active {
  border-color: rgba(150, 167, 255, 0.72);
  background: linear-gradient(180deg, rgba(132, 150, 255, 0.16), rgba(132, 150, 255, 0.08));
}

.row.is-clickable,
.dm-item.is-clickable {
  cursor: pointer;
}

.row.is-clickable:active,
.dm-item.is-clickable:active {
  transform: translateY(0);
}

.row.is-clickable:focus-visible,
.dm-item.is-clickable:focus-visible {
  outline: none;
  border-color: rgba(149, 158, 248, 0.9);
  box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.32);
}

.rowLeft,
.presenceLeft {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.rowMain,
.presenceText {
  min-width: 0;
}

.friendsSectionTitle {
  margin: 6px 2px 2px;
  color: rgba(206, 214, 230, 0.72);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.friendsSection {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dm-item .dm-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.name,
.presenceName,
.dm-name,
.dmTitle,
.dm__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.userNameCustom {
  color: var(--user-name-color) !important;
}

.meta,
.presenceHandle,
.dm-handle,
.callOverlaySub {
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.presenceRow {
  cursor: pointer;
}

.presenceState {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
}

.presenceRight {
  flex: 0 0 auto;
}

.dm-item {
  gap: 10px;
}

.dm-item .btn {
  flex: 0 0 auto;
}

.split2,
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.rowInline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rowInline .input {
  flex: 1;
}

.addToolsStack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.addToolCard {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.addFriendPreviewHost {
  margin-top: 8px;
}

.addFriendPreviewEmpty {
  border: 1px dashed rgba(200, 232, 255, 0.18);
  border-radius: 14px;
  padding: 14px 16px;
  background: rgba(8, 12, 18, 0.34);
  color: var(--text-soft);
  font-size: 13px;
}

.addFriendPreviewCard {
  border: 1px solid rgba(200, 232, 255, 0.12);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(9, 13, 20, 0.98), rgba(7, 10, 16, 0.98));
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.2);
}

.addFriendPreviewBanner {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--profile-banner-ratio);
  background: linear-gradient(140deg, rgba(150, 160, 248, 0.32), rgba(15, 20, 30, 0.92));
  background-size: cover;
  background-position: center;
}

.addFriendPreviewBody {
  padding: 0 16px 16px;
  display: grid;
  gap: 14px;
}

.addFriendPreviewIdentity {
  display: grid;
  gap: 12px;
  margin-top: -38px;
}

.addFriendPreviewAvatar {
  width: 82px;
  height: 82px;
  position: relative;
  border-radius: 50%;
  overflow: visible;
  border: 4px solid rgba(10, 14, 22, 0.96);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
  background: linear-gradient(160deg, rgba(105, 174, 255, 0.2), rgba(6, 13, 20, 0.52));
}

.addFriendPreviewAvatarMedia {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.addFriendPreviewAvatarMedia img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.addFriendPreviewMeta {
  display: grid;
  gap: 4px;
}

.addFriendPreviewName {
  font-size: 28px;
  line-height: 1.08;
  font-weight: 800;
  color: #f2f5ff;
  word-break: break-word;
}

.addFriendPreviewHandle {
  color: var(--text-soft);
  font-size: 14px;
}

.addFriendPreviewBadgeRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.addFriendPreviewBio {
  min-height: 84px;
  border: 1px solid rgba(200, 232, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  padding: 12px 14px;
  color: var(--text-main);
  white-space: pre-wrap;
  word-break: break-word;
}

.addFriendPreviewActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.addFriendPreviewActions .btn {
  min-width: 140px;
}

.partyFriendPicker {
  margin-top: 6px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: var(--ui-row-bg);
  padding: 8px;
  min-height: 72px;
  max-height: 260px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.partyPickItem {
  width: 100%;
  border-radius: 9px;
  border: 1px solid rgba(196, 214, 240, 0.2);
  background: rgba(16, 22, 34, 0.64);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.14s ease, background-color 0.14s ease, transform 0.14s ease;
}

.partyPickItem:hover {
  border-color: rgba(149, 166, 248, 0.52);
  background: rgba(32, 41, 62, 0.82);
  transform: translateY(-1px);
}

.partyPickItem.is-on {
  border-color: rgba(149, 166, 248, 0.84);
  background: linear-gradient(180deg, rgba(126, 144, 248, 0.22), rgba(126, 144, 248, 0.12));
}

.partyPickAvatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(210, 224, 248, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 16, 26, 0.8);
  flex: 0 0 auto;
}

.partyPickAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.partyPickAvatarFallback {
  color: rgba(232, 238, 248, 0.9);
  font-weight: 800;
  font-size: 14px;
}

.partyPickMain {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}

.partyPickName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 650;
}

.partyPickHandle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted);
  font-size: 12px;
}

.partyPickCheck {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(202, 220, 248, 0.26);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  color: rgba(232, 241, 255, 0.9);
}

#partySelectionMeta[data-tone="warn"] {
  color: #ffb0b0;
}

.dmGroupCreateCard {
  width: min(620px, 96vw);
  max-height: min(86vh, 760px);
  display: flex;
  flex-direction: column;
}

.dmGroupCreateTop {
  align-items: flex-start;
}

.dmGroupCreateBody {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.dmGroupCreateBody .partyFriendPicker {
  margin-top: 0;
  min-height: 120px;
  max-height: min(46vh, 360px);
}

.dmGroupAvatarEditorRow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dmGroupAvatarEditorPreview {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 1px solid rgba(206, 216, 236, 0.34);
  background: rgba(16, 22, 34, 0.84);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.dmGroupAvatarEditorPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dmGroupAvatarEditorActions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dmGroupCreateFooter {
  padding: 12px 14px;
  border-top: 1px solid rgba(200, 232, 255, 0.12);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.serverCreateCard {
  width: min(520px, 96vw);
  max-height: min(84vh, 720px);
  display: flex;
  flex-direction: column;
}

.serverSettingsCard {
  width: min(760px, 96vw);
  max-height: min(90vh, 860px);
  display: flex;
  flex-direction: column;
}

.serverChannelCreateCard {
  width: min(480px, 96vw);
  max-height: min(80vh, 620px);
  border: 1px solid var(--stroke);
  background: var(--surface-1);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
  display: flex;
  flex-direction: column;
}

.serverChannelCreateCard .modalTop {
  border-bottom: 1px solid var(--stroke);
  background: var(--surface-1);
}

.serverChannelCreateCard .hint {
  color: var(--text-muted);
}

.serverCreateTop {
  align-items: flex-start;
}

.serverCreateBody {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.serverSettingsCard .serverCreateBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 18px;
}

.serverChannelCreateBody {
  gap: 18px;
}

.serverChannelCreateSection {
  display: grid;
  gap: 10px;
}

.serverChannelCreateSectionTitle {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
}

.serverChannelTypeList {
  display: grid;
  gap: 10px;
}

.serverChannelTypeOption {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  cursor: pointer;
}

.serverChannelTypeOption__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.serverChannelTypeOption__radio {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 999px;
  border: 1px solid var(--stroke-strong);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
  position: relative;
}

.serverChannelTypeOption__input:checked + .serverChannelTypeOption__radio {
  border-color: rgba(241, 242, 245, 0.74);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.serverChannelTypeOption__input:checked + .serverChannelTypeOption__radio::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 999px;
  background: #f1f2f5;
}

.serverChannelTypeOption__content {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.serverChannelTypeOption__top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.serverChannelTypeOption__icon {
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  font-size: 20px;
  line-height: 1;
  flex: 0 0 auto;
}

.serverChannelTypeOption__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.serverChannelTypeOption__desc {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

.serverChannelCreateSelectWrap {
  position: relative;
}

.serverChannelCreateSelectWrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid rgba(241, 242, 245, 0.72);
  border-bottom: 1.5px solid rgba(241, 242, 245, 0.72);
  transform: translateY(-62%) rotate(45deg);
  pointer-events: none;
}

.serverChannelCreateCategorySelect {
  width: 100%;
  min-height: 42px;
  padding: 0 40px 0 12px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: var(--ui-input-bg);
  color: var(--text-main);
  appearance: none;
}

.serverChannelCreateCategorySelect:focus {
  border-color: var(--stroke-strong);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.04);
  outline: none;
}

.serverChannelNameField {
  min-height: 40px;
  border: 1px solid var(--stroke);
  border-radius: 11px;
  background: var(--ui-input-bg);
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
}

.serverChannelNameField:focus-within {
  border-color: var(--stroke-strong);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.04);
}

.serverChannelNameField__prefix {
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}

.serverChannelNameField__prefix.is-voice {
  font-size: 18px;
  font-weight: 400;
}

.serverChannelNameField__prefix.is-category {
  font-size: 18px;
}

.serverChannelNameField__input {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text-main) !important;
  padding: 0 !important;
  outline: none;
  box-shadow: none !important;
}

.serverChannelNameField__input:focus {
  border: 0 !important;
  background: transparent !important;
}

.serverChannelCreatePrivate {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.serverChannelCreatePrivate__text {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.serverChannelCreatePrivate__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.serverChannelCreatePrivate__hint {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

.serverChannelCreatePrivate__switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  cursor: pointer;
}

.serverChannelCreatePrivate__switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.serverChannelCreatePrivate__slider {
  width: 46px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.28);
  position: relative;
}

.serverChannelCreatePrivate__slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #f7f9ff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}

.serverChannelCreatePrivate__switch input:checked + .serverChannelCreatePrivate__slider {
  border-color: #505664;
  background: #3a404d;
}

.serverChannelCreatePrivate__switch input:checked + .serverChannelCreatePrivate__slider::after {
  transform: translateX(22px);
}

.serverChannelCreateAccess {
  gap: 12px;
}

.serverChannelCreateAccessGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.serverChannelCreateAccessGroup {
  min-width: 0;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.serverChannelCreateAccessGroup__title {
  padding: 10px 12px;
  border-bottom: 1px solid var(--stroke);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
}

.serverChannelCreateAccessList {
  max-height: 168px;
  overflow: auto;
  padding: 6px;
  display: grid;
  gap: 6px;
}

.serverChannelCreateAccessRow {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 9px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
}

.serverChannelCreateAccessRow:hover {
  background: rgba(255, 255, 255, 0.05);
}

.serverChannelCreateAccessRow.is-locked {
  cursor: default;
}

.serverChannelCreateAccessRow input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent-strong);
}

.serverChannelCreateAccessRow input[disabled] {
  cursor: default;
}

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

.serverChannelCreateAccessRow__avatar,
.serverChannelCreateAccessRow__swatch {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
  overflow: hidden;
}

.serverChannelCreateAccessRow__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.serverChannelCreateAccessRow__swatch {
  border-radius: 8px;
  background: var(--role-color, #d8b98f);
}

.serverChannelCreateAccessRow__text {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.serverChannelCreateAccessRow__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.serverChannelCreateAccessRow__meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.serverChannelCreateCard .serverCreateFooter {
  border-top: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.02);
  justify-content: stretch;
  gap: 12px;
}

.serverChannelCreateCard .serverCreateFooter .btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
}

.serverChannelCreateCard .serverCreateFooter .btn.ghost {
  border-color: var(--stroke);
  background: var(--ui-card-bg);
}

.serverChannelCreateCard .serverCreateFooter .btn.primary {
  border-color: #505766;
  background: #383e4b;
  color: var(--text-main);
}

.serverChannelCreateCard .serverCreateFooter .btn.primary:hover {
  border-color: #5b6271;
  background: #434a58;
}

#serverChannelCreateModal .serverChannelCreateCard {
  width: min(520px, 96vw) !important;
  max-height: calc(100vh - 48px) !important;
  border: 1px solid #2a2f38 !important;
  background: #121418 !important;
  background-image: none !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.42) !important;
}

#serverChannelCreateModal {
  align-items: center;
  justify-items: center;
  overflow: hidden;
  padding: 18px;
}

#serverChannelCreateModal .modalTop {
  border-bottom: 1px solid #2a2f38 !important;
  background: #171a21 !important;
  background-image: none !important;
}

#serverChannelCreateModal .serverCreateBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #121418 !important;
  background-image: none !important;
}

#serverChannelCreateModal .serverCreateFooter {
  border-top: 1px solid #2a2f38 !important;
  background: #171a21 !important;
  background-image: none !important;
}

#serverChannelCreateModal .modalTitle,
#serverChannelCreateModal .serverChannelCreateSectionTitle,
#serverChannelCreateModal .serverChannelTypeOption__title,
#serverChannelCreateModal .serverChannelCreatePrivate__title,
#serverChannelCreateModal .serverChannelNameField__input,
#serverChannelCreateModal .serverChannelCreateCategorySelect {
  color: #f1f2f5 !important;
}

#serverChannelCreateModal .hint,
#serverChannelCreateModal .serverChannelTypeOption__desc,
#serverChannelCreateModal .serverChannelCreatePrivate__hint,
#serverChannelCreateModal .serverChannelNameField__prefix {
  color: #9ea4af !important;
}

#serverChannelCreateModal .serverChannelTypeOption__icon {
  color: #f1f2f5 !important;
}

#serverChannelCreateModal .serverChannelTypeOption__radio {
  border-color: #4a505d !important;
  background: #0d1015 !important;
  box-shadow: none !important;
}

#serverChannelCreateModal .serverChannelTypeOption__input:checked + .serverChannelTypeOption__radio {
  border-color: #d7dbe3 !important;
  background: #232831 !important;
  box-shadow: none !important;
}

#serverChannelCreateModal .serverChannelTypeOption__input:checked + .serverChannelTypeOption__radio::after {
  background: #f1f2f5 !important;
}

#serverChannelCreateModal.is-edit-mode .serverChannelTypeList {
  pointer-events: none;
}

#serverChannelCreateModal.is-edit-mode #serverChannelCreateTypeSection.is-readonly .serverChannelTypeOption {
  opacity: 0.62;
  cursor: default;
}

#serverChannelCreateModal.is-edit-mode #serverChannelCreateTypeSection.is-readonly .serverChannelTypeOption__input:checked + .serverChannelTypeOption__radio {
  border-color: #8b93a3 !important;
  background: #20252d !important;
}

#serverChannelCreateModal .serverChannelCreateCategorySelect,
#serverChannelCreateModal .serverChannelNameField,
#serverChannelCreateModal .serverChannelCreatePrivate__slider,
#serverChannelCreateModal .serverChannelCreateAccessGroup,
#serverChannelCreateModal .serverChannelCreateAccessRow {
  border-color: #2a2f38 !important;
  background: #0c0e12 !important;
  background-image: none !important;
  box-shadow: none !important;
}

#serverChannelCreateModal .serverChannelCreateCategorySelect:focus,
#serverChannelCreateModal .serverChannelNameField:focus-within {
  border-color: #434955 !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.03) !important;
}

#serverChannelCreateModal .serverChannelCreateSelectWrap::after {
  border-right-color: #9ea4af !important;
  border-bottom-color: #9ea4af !important;
}

#serverChannelCreateModal .serverChannelCreatePrivate__switch input:checked + .serverChannelCreatePrivate__slider {
  border-color: #505664 !important;
  background: #3a404d !important;
}

#serverChannelCreateModal .serverChannelCreatePrivate__switch input:checked + .serverChannelCreatePrivate__slider::after {
  transform: translateX(22px);
}

#serverChannelCreateModal .serverChannelCreateAccessGroup__title,
#serverChannelCreateModal .serverChannelCreateAccessRow__title {
  color: #f1f2f5 !important;
}

#serverChannelCreateModal .serverChannelCreateAccessRow__meta {
  color: #9ea4af !important;
}

#serverChannelCreateModal .serverChannelCreateAccessRow__avatar {
  border-color: #343944 !important;
  background: #1a1e26 !important;
}

#serverChannelCreateModal .serverCreateFooter .btn.ghost {
  border-color: #343944 !important;
  background: #2a2f38 !important;
  color: #f1f2f5 !important;
}

#serverChannelCreateModal .serverCreateFooter .btn.primary {
  border-color: #444a57 !important;
  background: #3a404d !important;
  color: #f1f2f5 !important;
}

#serverChannelCreateModal .serverCreateFooter .btn.primary:hover {
  border-color: #505664 !important;
  background: #454c5a !important;
}

@media (max-width: 640px) {
  .serverChannelCreateAccessGrid {
    grid-template-columns: 1fr;
  }
}

.serverSettingsRolesSection {
  border: 1px solid rgba(232, 207, 174, 0.16);
  border-radius: 14px;
  background: rgba(16, 15, 14, 0.72);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.serverSettingsRolesHead {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.serverSettingsRoleCreateRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(170px, 210px) auto;
  align-items: center;
  gap: 8px;
}

.serverSettingsRoleColorInput {
  width: 44px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(232, 207, 174, 0.2);
  background: rgba(16, 15, 14, 0.9);
  padding: 2px;
  cursor: pointer;
}

.serverSettingsRolePresetSelect {
  min-width: 170px;
}

.serverSettingsRolesMeta {
  min-height: 18px;
}

.serverSettingsRolesMeta.error {
  color: #ff9aa8;
}

.serverSettingsRolesGrid {
  display: grid;
  grid-template-columns: minmax(220px, 248px) minmax(0, 1fr);
  gap: 10px;
  min-height: 230px;
}

.serverSettingsRolesList,
.serverSettingsRoleMembers {
  border: 1px solid rgba(232, 207, 174, 0.12);
  border-radius: 12px;
  background: rgba(12, 12, 12, 0.5);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(42vh, 360px);
  overflow: auto;
}

.serverSettingsRoleRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.serverSettingsRolePick {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  border: 1px solid rgba(232, 207, 174, 0.12);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-strong);
  padding: 8px 10px;
  cursor: pointer;
}

.serverSettingsRolePick:hover {
  border-color: rgba(232, 207, 174, 0.28);
}

.serverSettingsRolePick.active {
  border-color: rgba(232, 207, 174, 0.42);
  background: rgba(232, 207, 174, 0.09);
  box-shadow: inset 3px 0 0 rgba(232, 207, 174, 0.82);
}

.serverSettingsRoleSwatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--role-color, #99aab5);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}

.serverSettingsRoleName {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.serverSettingsRoleCount {
  font-size: 12px;
  color: var(--text-soft);
}

.serverSettingsRolePermsBadge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(246, 232, 210, 0.92);
  border: 1px solid rgba(232, 207, 174, 0.24);
  background: rgba(232, 207, 174, 0.09);
  border-radius: 999px;
  padding: 2px 6px;
  line-height: 1.2;
}

.serverSettingsRoleDelete {
  white-space: nowrap;
  padding-inline: 10px;
}

.serverSettingsRoleMembersHead {
  margin: 0;
  font-size: 12px;
  color: var(--text-soft);
}

.serverSettingsRolePermsPanel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.serverSettingsRolePermsHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.serverSettingsRolePermsActions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.serverSettingsRolePermsActions .btn {
  padding-inline: 8px;
}

.serverSettingsRolePermRow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 10px;
  border: 1px solid rgba(232, 207, 174, 0.11);
  background: rgba(255, 255, 255, 0.035);
  padding: 8px 10px;
}

.serverSettingsRolePermRow input[type="checkbox"] {
  margin-top: 2px;
}

.serverSettingsRolePermText {
  min-width: 0;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.serverSettingsRolePermName {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-strong);
}

.serverSettingsRolePermHint {
  font-size: 11px;
  color: var(--text-soft);
}

.serverSettingsRoleMemberRow {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  border: 1px solid rgba(232, 207, 174, 0.11);
  background: rgba(255, 255, 255, 0.035);
  padding: 7px 9px;
}

.serverSettingsRoleMemberRow input[type="checkbox"] {
  margin: 0;
}

.serverSettingsRoleMemberAvatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(232, 207, 174, 0.16);
  background: rgba(24, 23, 22, 0.96);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.serverSettingsRoleMemberAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.serverSettingsRoleMemberAvatar .groupDmAvatarFallback {
  font-size: 12px;
}

.serverSettingsRoleMemberText {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.serverSettingsRoleMemberName {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.serverSettingsRoleMemberMeta {
  font-size: 12px;
  color: var(--text-soft);
}

@media (max-width: 860px) {
  .serverSettingsRolesGrid {
    grid-template-columns: 1fr;
  }

  .serverSettingsRoleCreateRow {
    grid-template-columns: 1fr auto;
  }

  .serverSettingsRoleCreateRow .serverSettingsRolePresetSelect,
  .serverSettingsRoleCreateRow .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.serverInviteLinkRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.serverInviteLinkRow .input {
  flex: 1;
  min-width: 0;
}

#serverInviteModal .serverChannelCreateCard {
  --accent: #6f7684;
  --ui-primary-bg: #383e4b;
  --ui-primary-border: #505766;
  --ui-primary-hover-bg: #434a58;
  --ui-primary-hover-border: #5b6271;
  --accent-strong: #6f7684;
  --accent-soft: rgba(255, 255, 255, 0.03);
  width: min(780px, 96vw) !important;
  max-height: calc(100vh - 48px) !important;
  border: 1px solid #2a2f38 !important;
  background: #121418 !important;
  background-image: none !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.42) !important;
}

#serverInviteModal .modalTop {
  border-bottom: 1px solid #2a2f38 !important;
  background: #171a21 !important;
  background-image: none !important;
}

#serverInviteModal .serverCreateBody {
  background: #121418 !important;
  background-image: none !important;
}

#serverInviteModal .serverCreateFooter {
  border-top: 1px solid #2a2f38 !important;
  background: #171a21 !important;
  background-image: none !important;
}

#serverInviteModal .modalTitle,
#serverInviteModal .serverInviteSettingsCard__title,
#serverInviteModal .serverInviteFriendName,
#serverInviteModal .serverInviteLinkRow .input,
#serverInviteModal .serverInviteSettingsCard .input,
#serverInviteModal #serverInviteFriendSearch {
  color: #f1f2f5 !important;
}

#serverInviteModal .hint,
#serverInviteModal .field label,
#serverInviteModal .serverInviteSettingsCard__summary,
#serverInviteModal .serverInviteSettingsCard__note,
#serverInviteModal .serverInviteFriendUsername {
  color: #9ea4af !important;
}

#serverInviteSub,
#serverInviteMeta {
  color: #9ea4af !important;
}

.serverInviteSettingsCard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #2a2f38;
  background: #10141d;
}

.serverInviteSettingsCard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.serverInviteSettingsCard__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-strong);
}

.serverInviteSettingsCard__summary {
  font-size: 12px;
  color: var(--text-soft);
}

.serverInviteSettingsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.serverInviteSettingsCard__note {
  font-size: 12px;
  color: var(--text-soft);
}

@media (max-width: 720px) {
  .serverInviteSettingsCard__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .serverInviteSettingsGrid {
    grid-template-columns: 1fr;
  }
}

.serverInviteFriendsList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding-right: 2px;
}

.serverInviteFriendRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid #2a2f38;
  background: #0f131c;
}

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

.serverInviteFriendAvatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #161b25;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.serverInviteFriendAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.serverInviteFriendText {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.serverInviteFriendName {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.serverInviteFriendUsername {
  font-size: 12px;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.serverInviteFriendAction {
  min-width: 78px;
}

.serverInviteFriendAction.is-ok {
  border-color: rgba(74, 214, 138, 0.58);
  color: #e9fff1;
  background: rgba(34, 136, 74, 0.3);
}

#serverInviteModal .serverInviteLinkRow .input,
#serverInviteModal .serverInviteSettingsCard .input,
#serverInviteModal #serverInviteFriendSearch {
  border-color: #2a2f38 !important;
  background: #17191f !important;
  box-shadow: none !important;
}

#serverInviteModal .serverInviteLinkRow .input:focus,
#serverInviteModal .serverInviteSettingsCard .input:focus,
#serverInviteModal #serverInviteFriendSearch:focus,
#serverInviteModal .serverInviteSettingsCard select:focus {
  border-color: #434955 !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.03) !important;
  background: #17191f !important;
}

#serverInviteModal .serverInviteSettingsCard select.input {
  background-image: none;
}

#serverInviteModal .serverCreateFooter .btn.primary {
  border-color: #505766;
  background: #383e4b;
  color: var(--text-main);
}

#serverInviteModal .serverCreateFooter .btn.primary:hover {
  border-color: #5b6271;
  background: #434a58;
}

.serverCreateIconRow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.serverCreateIconPreview {
  width: 84px;
  height: 84px;
  border-radius: 999px;
  border: 2px dashed rgba(206, 216, 236, 0.54);
  background: rgba(16, 22, 34, 0.84);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  padding: 0;
}

.serverCreateIconPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.serverCreateIconPlus {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(200, 216, 255, 0.46);
  background: rgba(84, 111, 255, 0.92);
  color: #f3f6ff;
  font-size: 16px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

.serverCreateIconActions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.serverCreateFooter {
  padding: 12px 16px;
  border-top: 1px solid rgba(200, 232, 255, 0.12);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.passwordToggleWrap {
  position: relative;
  width: 100%;
}

.passwordToggleWrap > input,
.passwordToggleWrap > .input,
.passwordToggleWrap > .passwordToggleInput {
  padding-right: 70px !important;
}

.passwordToggleBtn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  height: 26px;
  min-width: 54px;
  border: 1px solid var(--stroke, rgba(200, 232, 255, 0.18));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-soft, #b9bfce);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  z-index: 2;
}

.passwordToggleBtn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-main, #eceef2);
}

.passwordToggleBtn:focus-visible {
  outline: 0;
  border-color: var(--accent-strong, rgba(30, 227, 255, 0.56));
  box-shadow: 0 0 0 2px var(--accent-soft, rgba(30, 227, 255, 0.2));
}

.field label,
.label {
  font-size: 12px;
  color: var(--text-soft);
}

.w100 {
  width: 100%;
}

.themeCard {
  margin-top: 12px;
  padding: 12px;
}

.themeGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}

.themePresetInline {
  display: grid;
  gap: 6px;
}

.themePresetInline__row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.themePresetInline__row .input {
  flex: 1;
  min-width: 120px;
}

.themePresetInline__row .btn {
  min-width: 74px;
}

.themeColorSections {
  display: grid;
  gap: 12px;
  grid-column: 1 / -1;
}

.themeColorSection {
  display: grid;
  gap: 10px;
}

.themeColorSectionTitle {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.themeColorGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.themeColorGrid--core {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.themeColorField {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-soft);
}

.themeColorInput {
  width: 100%;
  min-height: 38px;
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: var(--surface-2);
  cursor: pointer;
}

.themeColorInput.themeColorInput--custom {
  --theme-color-preview-bg: var(--theme-color-preview, #8ea0ff);
  position: relative;
  height: 40px;
  min-height: 40px;
  padding: 10px 12px 10px 44px;
  border-radius: 11px;
  border: 1px solid var(--stroke);
  background-image:
    linear-gradient(180deg, rgba(12, 16, 23, 0.95), rgba(18, 24, 34, 0.95));
  color: var(--text-main);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  caret-color: transparent;
  overflow: hidden;
}

.themeColorInput.themeColorInput--custom::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid rgba(244, 249, 255, 0.92);
  background: var(--theme-color-preview-bg, var(--theme-color-preview, #8ea0ff));
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(0, 0, 0, 0.22);
  transform: translateY(-50%);
  pointer-events: none;
}

.themeColorInput.themeColorInput--custom:hover {
  border-color: rgba(126, 188, 255, 0.64);
  background-image:
    linear-gradient(180deg, rgba(15, 20, 28, 0.96), rgba(25, 32, 44, 0.96));
}

.themeColorInput.themeColorInput--custom:hover::before {
  border-color: rgba(250, 253, 255, 0.98);
}

.themeColorInput.themeColorInput--custom:focus-visible {
  outline: 0;
  border-color: rgba(142, 196, 255, 0.86);
  box-shadow:
    0 0 0 3px rgba(120, 178, 255, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.themeColorInput.themeColorInput--custom.themeColorInput--has-gradient {
  border-style: solid;
}

.themeLivePreviewBlock {
  grid-column: 1 / -1;
  margin-top: 2px;
  display: grid;
  gap: 8px;
}

.themeLivePreview {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  padding: 10px;
  background:
    radial-gradient(760px 320px at 18% -14%, var(--bg-glow, rgba(142, 160, 255, 0.26)), transparent 60%),
    linear-gradient(var(--bg-angle, 180deg), var(--bg-main, #131417), var(--bg-deep, #0d1016));
  overflow: hidden;
}

.themeLivePreview__frame {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 8px;
  min-height: 148px;
  border-radius: 11px;
  border: 1px solid var(--stroke);
  background: var(--ui-shell-bg, #131519);
  padding: 8px;
}

.themeLivePreview__sidebar {
  display: grid;
  grid-template-rows: 26px 1fr;
  border-radius: 9px;
  border: 1px solid var(--stroke);
  background: var(--left-sidebar-bg, var(--surface-1, #1c1e23));
  overflow: hidden;
}

.themeLivePreview__sidebarTop {
  border-bottom: 1px solid var(--stroke);
  background: var(--left-sidebar-top-bg, var(--surface-1, #1c1e23));
}

.themeLivePreview__sidebarList {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 8px;
}

.themeLivePreview__dot {
  height: 14px;
  border-radius: 999px;
  background: var(--ui-row-bg, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--stroke);
}

.themeLivePreview__dot--active {
  background: var(--surface-row-hover, rgba(142, 160, 255, 0.24));
  border-color: var(--accent, #8ea0ff);
}

.themeLivePreview__main {
  display: grid;
  grid-template-rows: 28px 1fr;
  border-radius: 9px;
  border: 1px solid var(--stroke);
  background: var(--surface-1, #1c1e23);
  overflow: hidden;
}

.themeLivePreview__topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border-bottom: 1px solid var(--stroke);
  background: var(--ui-top-bg, #1f2126);
}

.themeLivePreview__topPill {
  width: 30px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
}

.themeLivePreview__content {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 8px;
  background: var(--ui-panel-soft-bg, rgba(0, 0, 0, 0.2));
}

.themeLivePreview__row {
  height: 12px;
  border-radius: 999px;
  background: var(--ui-row-bg, rgba(255, 255, 255, 0.1));
  border: 1px solid var(--stroke);
}

.themeLivePreview__row--accent {
  width: 78%;
  background: var(--ui-primary-bg, rgba(142, 160, 255, 0.35));
  border-color: var(--ui-primary-border, rgba(142, 160, 255, 0.5));
}

.themeLivePreview__composer {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--ui-input-bg, rgba(0, 0, 0, 0.34));
  padding: 0 8px;
}

.themeLivePreview__composerLine {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

.themeLivePreview__composerSend {
  width: 26px;
  height: 16px;
  border-radius: 999px;
  background: var(--accent, #8ea0ff);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.themeLivePreviewHint {
  color: var(--text-muted);
}

.themeGradientHint {
  grid-column: 1 / -1;
  color: var(--text-muted);
  margin-top: -2px;
}

.appColorPicker {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 5605;
}

.appColorPicker.hidden {
  display: none !important;
}

.appColorPicker__card {
  width: min(352px, calc(100vw - 20px));
  border-radius: 16px;
  border: 1px solid rgba(202, 224, 255, 0.2);
  background:
    radial-gradient(circle at 18% -8%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 38%),
    linear-gradient(180deg, rgba(38, 42, 49, 0.96), rgba(26, 29, 36, 0.98));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  padding: 10px;
  display: grid;
  gap: 9px;
}

.appColorPicker__sv {
  position: relative;
  height: 220px;
  border-radius: 12px;
  border: 1px solid rgba(206, 226, 255, 0.22);
  cursor: crosshair;
  overflow: hidden;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 1), var(--picker-hue, hsl(0 100% 50%)));
}

.appColorPicker__sv::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 0.8px, transparent 0.9px);
  background-size: 6px 6px;
  opacity: 0.28;
}

.appColorPicker__svHandle {
  position: absolute;
  left: 0;
  top: 0;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  border: 3px solid rgba(248, 251, 255, 0.95);
  background: var(--picker-preview, #8ea0ff);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.48);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.appColorPicker__tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.appColorPicker__preview {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 2px solid rgba(248, 251, 255, 0.85);
  background: var(--picker-preview, #8ea0ff);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.35);
}

.appColorPicker__hue {
  appearance: none;
  width: 100%;
  height: 12px;
  margin: 0;
  border-radius: 999px;
  border: 1px solid rgba(206, 226, 255, 0.26);
  background: linear-gradient(
    90deg,
    #ff0037 0%,
    #ff7b00 17%,
    #ffe100 33%,
    #00e36f 50%,
    #00c6ff 67%,
    #4f6bff 83%,
    #ff00c8 100%
  );
  cursor: pointer;
}

.appColorPicker__hue::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.96);
  background: #111319;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.appColorPicker__hue::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.96);
  background: #111319;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.appColorPicker__hue::-moz-range-track {
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(206, 226, 255, 0.26);
  background: linear-gradient(
    90deg,
    #ff0037 0%,
    #ff7b00 17%,
    #ffe100 33%,
    #00e36f 50%,
    #00c6ff 67%,
    #4f6bff 83%,
    #ff00c8 100%
  );
}

.appColorPicker__swatches {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}

.appColorPicker__gradientRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.appColorPicker__gradientRow.hidden {
  display: none !important;
}

.appColorPicker__intensityRow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}

.appColorPicker__intensityRow.hidden {
  display: none !important;
}

.appColorPicker__intensityLabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(220, 232, 250, 0.86);
}

.appColorPicker__intensity {
  appearance: none;
  width: 100%;
  height: 9px;
  margin: 0;
  border-radius: 999px;
  border: 1px solid rgba(206, 226, 255, 0.24);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06));
  cursor: pointer;
}

.appColorPicker__intensity::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.95);
  background: #111319;
}

.appColorPicker__intensity::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.95);
  background: #111319;
}

.appColorPicker__intensityValue {
  min-width: 40px;
  text-align: right;
  font-size: 11px;
  color: rgba(220, 232, 250, 0.86);
  font-variant-numeric: tabular-nums;
}

.appColorPicker__chipBtn {
  height: 30px;
  border: 1px solid rgba(200, 224, 255, 0.24);
  border-radius: 9px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(232, 241, 255, 0.88);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.appColorPicker__chipBtn.is-on {
  border-color: rgba(156, 204, 255, 0.86);
  background: rgba(93, 151, 255, 0.24);
  color: #f3f7ff;
}

.appColorPicker__stopBtn {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid rgba(248, 251, 255, 0.66);
  background: var(--picker-stop, #8ea0ff);
  color: #0d1118;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.appColorPicker__stopBtn.is-on {
  border-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 0 0 2px rgba(96, 155, 255, 0.35);
}

.appColorPicker__stopBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.appColorPicker__angle {
  appearance: none;
  width: 100%;
  height: 9px;
  margin: 0;
  border-radius: 999px;
  border: 1px solid rgba(206, 226, 255, 0.24);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06));
  cursor: pointer;
}

.appColorPicker__angle::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.95);
  background: #111319;
}

.appColorPicker__angle::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.95);
  background: #111319;
}

.appColorPicker__angleValue {
  min-width: 40px;
  text-align: right;
  font-size: 11px;
  color: rgba(220, 232, 250, 0.86);
  font-variant-numeric: tabular-nums;
}

.appColorPicker__swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--swatch, #8ea0ff);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.appColorPicker__swatch:hover {
  transform: translateY(-1px) scale(1.04);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.appColorPicker__footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.appColorPicker__hex {
  height: 34px;
  min-height: 34px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 8px 10px;
}

.appColorPicker__done {
  height: 34px;
  min-width: 92px;
  border-radius: 10px;
}

.appColorPicker__eyedropperBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid rgba(200, 224, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(215, 230, 255, 0.7);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.appColorPicker__eyedropperBtn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(215, 230, 255, 1);
  border-color: rgba(200, 224, 255, 0.34);
}

.appColorPicker__eyedropperBtn:active {
  background: rgba(255, 255, 255, 0.18);
}

.appColorPicker__eyedropperBtn[hidden] {
  display: none !important;
}

.themeActions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.themeActions .btn {
  min-width: 100px;
}

.themeAppearanceMetaGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#themeAutoAdjustHint {
  color: var(--warn);
}

#tabWidgets,
#tabFriends,
#tabPending,
#tabAdd,
#dmMain,
.dmMain {
  min-height: 0;
}

.widgetsGrid {
  position: relative;
  isolation: isolate;
  display: grid;
  --widgets-cols: 4;
  --widgets-gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row;
  --widgets-row-size: 164px;
  grid-auto-rows: var(--widgets-row-size);
  gap: var(--widgets-gap);
  align-content: start;
  padding-bottom: 4px;
}

.widgetsTab.is-edit-mode .widgetsGrid {
  grid-auto-flow: row;
  min-height: calc((var(--widgets-row-size) * 3) + (var(--widgets-gap) * 2));
}

.widgetsTab.is-edit-mode .widgetsGrid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 16px;
  --widgets-cell-w: calc((100% - ((var(--widgets-cols) - 1) * var(--widgets-gap))) / var(--widgets-cols));
  background-image:
    linear-gradient(to right, rgba(236, 242, 250, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(236, 242, 250, 0.1) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  background-size:
    calc(var(--widgets-cell-w) + var(--widgets-gap)) calc(var(--widgets-row-size) + var(--widgets-gap)),
    calc(var(--widgets-cell-w) + var(--widgets-gap)) calc(var(--widgets-row-size) + var(--widgets-gap)),
    100% 100%;
  box-shadow:
    inset 0 0 0 1px rgba(236, 242, 250, 0.08),
    inset 0 0 0 999px rgba(5, 9, 14, 0.12);
  z-index: 0;
}

.widgetsGrid.is-grid-dropping::before {
  box-shadow:
    inset 0 0 0 1px rgba(236, 242, 250, 0.12),
    inset 0 0 0 999px rgba(6, 10, 16, 0.08);
}

.widgetsTab.is-edit-mode .widgetsGrid > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 1320px) {
  .widgetsGrid {
    --widgets-cols: 3;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .widgetsGrid {
    --widgets-cols: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .widgetsGrid {
    --widgets-cols: 1;
    grid-template-columns: 1fr;
  }
}

.widgetsTab {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 70px;
}

.widgetsEditBar {
  border: 1px dashed rgba(214, 223, 238, 0.34);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.widgetsEditBar.hidden {
  display: none;
}

.widgetsEditBar__title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #e9ecf2;
  font-weight: 700;
}

.widgetsEditBar__hint {
  font-size: 12px;
  color: var(--text-soft);
}

.widgetsAddPanel {
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.widgetsAddPanel.hidden {
  display: none;
}

.widgetsAddPanel__title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  font-weight: 700;
}

.widgetsAddPanel__list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.widgetsAddPanel__empty {
  font-size: 13px;
  color: var(--text-soft);
}

.widgetsAddBtn {
  min-width: 0;
  height: 32px;
  padding: 0 10px;
}

.widgetsEditFab {
  position: static;
  align-self: auto;
  width: fit-content;
  margin: 8px 0 0 0;
  z-index: 8;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.widgetsEditFabRow {
  display: flex;
  justify-content: flex-end;
}

.widgetChecklistToast {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 11;
  max-width: min(380px, calc(100% - 24px));
  border: 1px solid rgba(138, 238, 181, 0.48);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(20, 36, 28, 0.96), rgba(11, 24, 18, 0.97));
  color: #d8ffe8;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.widgetChecklistToast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.widgetChecklistToast[data-tone="warn"] {
  border-color: rgba(255, 209, 130, 0.6);
  background: linear-gradient(180deg, rgba(44, 35, 22, 0.96), rgba(28, 21, 12, 0.97));
  color: #ffe7c2;
}

.widgetCard {
  position: relative;
  border: 1px solid rgba(214, 223, 238, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(130% 120% at -8% -12%, rgba(255, 255, 255, 0.06), transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 42%, rgba(255, 255, 255, 0.01) 100%),
    linear-gradient(180deg, rgba(15, 18, 24, 0.92), rgba(9, 12, 17, 0.96));
  padding: 14px;
  display: grid;
  gap: 8px;
  transition:
    border-color 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.2s ease;
  min-height: 148px;
  align-content: start;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 16px 34px rgba(5, 8, 15, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.widgetCard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 90% 120%, rgba(255, 255, 255, 0.06), transparent 52%),
    radial-gradient(100% 100% at 0% 0%, rgba(255, 255, 255, 0.08), transparent 40%);
  opacity: 0.85;
}

.widgetCard:hover {
  transform: translateY(-2px) translateZ(0);
  border-color: rgba(224, 231, 243, 0.28);
  box-shadow:
    0 18px 36px rgba(5, 8, 15, 0.38),
    0 0 0 1px rgba(224, 231, 243, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.widgetCard--primary {
  background:
    radial-gradient(150% 120% at -6% -12%, rgba(255, 255, 255, 0.12), transparent 58%),
    radial-gradient(120% 130% at 102% 100%, rgba(255, 255, 255, 0.06), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 42%, rgba(255, 255, 255, 0.01) 100%),
    linear-gradient(180deg, rgba(16, 19, 26, 0.94), rgba(10, 13, 18, 0.97));
}

.widgetCard.is-highlighted {
  transform: translateZ(0) scale(1.025);
  min-height: 172px;
  z-index: 4;
  border-color: rgba(226, 234, 245, 0.78);
  box-shadow:
    0 18px 34px rgba(8, 12, 22, 0.42),
    0 0 0 1px rgba(224, 231, 243, 0.24),
    0 0 0 4px rgba(255, 255, 255, 0.08);
}

.widgetCard--size-sm { grid-column: span 1; grid-row: span 1; }
.widgetCard--size-md { grid-column: span 2; grid-row: span 1; }
.widgetCard--size-lg { grid-column: span 2; grid-row: span 2; }
.widgetCard--size-xl { grid-column: span 4; grid-row: span 3; }

@media (max-width: 1320px) {
  .widgetCard--size-xl { grid-column: span 3; grid-row: span 3; }
}

@media (max-width: 980px) {
  .widgetCard--size-md,
  .widgetCard--size-lg,
  .widgetCard--size-xl {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .widgetsGrid {
    --widgets-row-size: 148px;
    grid-auto-rows: var(--widgets-row-size);
  }
  .widgetCard--size-sm,
  .widgetCard--size-md,
  .widgetCard--size-lg,
  .widgetCard--size-xl {
    grid-column: span 1;
    grid-row: span 1;
  }
}

.widgetCard.is-editing {
  border-style: dashed;
  border-color: rgba(214, 223, 238, 0.5);
  padding-top: 34px;
  padding-bottom: 34px;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.widgetCard[draggable="true"] {
  cursor: grab;
}

.widgetCard.is-dragging {
  opacity: 0.16;
  transform: scale(0.985) translateZ(0);
  filter: saturate(0.72) brightness(1.04);
  cursor: grabbing;
  border-style: dashed;
  border-color: rgba(231, 237, 246, 0.72);
}

.widgetCard.is-drag-placeholder {
  box-shadow:
    inset 0 0 0 1px rgba(231, 237, 246, 0.2),
    inset 0 0 0 2px rgba(231, 237, 246, 0.12),
    0 14px 28px rgba(5, 8, 15, 0.18);
}

.widgetCard.is-layout-animating {
  z-index: 3;
}

.widgetsTab.is-widget-dragging .widgetCard:not(.is-dragging) {
  filter: saturate(0.92) brightness(0.96);
}

.widgetCard.is-drop-target {
  border-color: rgba(214, 223, 238, 0.78);
  box-shadow: inset 0 0 0 2px rgba(214, 223, 238, 0.24);
}

.widgetCard.is-drop-target.is-drop-before {
  box-shadow:
    inset 0 0 0 2px rgba(214, 223, 238, 0.24),
    inset 0 4px 0 rgba(214, 223, 238, 0.82);
}

.widgetCard.is-drop-target.is-drop-after {
  box-shadow:
    inset 0 0 0 2px rgba(214, 223, 238, 0.24),
    inset 0 -4px 0 rgba(214, 223, 238, 0.82);
}

.widgetCard.is-drop-target.is-drop-left {
  box-shadow:
    inset 0 0 0 2px rgba(214, 223, 238, 0.24),
    inset 4px 0 0 rgba(214, 223, 238, 0.82);
}

.widgetCard.is-drop-target.is-drop-right {
  box-shadow:
    inset 0 0 0 2px rgba(214, 223, 238, 0.24),
    inset -4px 0 0 rgba(214, 223, 238, 0.82);
}

.widgetsGrid.is-drop-end {
  outline: 2px dashed rgba(214, 223, 238, 0.72);
  outline-offset: -6px;
  border-radius: 12px;
}

.widgetsDropGhost {
  position: absolute;
  z-index: 16;
  pointer-events: none;
  border-radius: 14px;
  border: 2px dashed rgba(236, 242, 250, 0.9);
  background:
    radial-gradient(110% 120% at 14% 0%, rgba(255, 255, 255, 0.14), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  box-shadow:
    0 18px 40px rgba(7, 11, 22, 0.44),
    0 0 0 2px rgba(236, 242, 250, 0.22) inset;
  backdrop-filter: blur(5px);
  animation: widgetDropGhostPulse 1.25s ease-in-out infinite alternate;
  transition:
    left 0.12s cubic-bezier(0.2, 0.85, 0.2, 1),
    top 0.12s cubic-bezier(0.2, 0.85, 0.2, 1),
    width 0.12s cubic-bezier(0.2, 0.85, 0.2, 1),
    height 0.12s cubic-bezier(0.2, 0.85, 0.2, 1),
    opacity 0.18s ease;
}

.widgetsDropGhost::after {
  content: attr(data-drop-label);
  position: absolute;
  left: 8px;
  top: 8px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(238, 244, 252, 0.42);
  background: rgba(6, 10, 16, 0.9);
  color: #eef3fb;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 22px;
  white-space: nowrap;
}

.widgetDragPreview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1200;
  pointer-events: none;
  opacity: 0;
  will-change: left, top, transform, opacity;
  transform: translate3d(14px, 12px, 0) scale(var(--widget-preview-scale, 0.78)) rotate(-0.85deg);
  transform-origin: top left;
  transition:
    opacity 0.14s ease,
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  filter:
    drop-shadow(0 18px 34px rgba(7, 11, 22, 0.44))
    drop-shadow(0 8px 18px rgba(7, 11, 22, 0.28));
}

.widgetDragPreview.is-visible {
  opacity: 0.98;
  transform: translate3d(14px, 12px, 0) scale(var(--widget-preview-scale, 0.78)) rotate(-0.35deg);
}

.widgetDragPreview__card {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  border-style: solid !important;
  background:
    radial-gradient(150% 120% at 8% 0%, rgba(255, 255, 255, 0.08), transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.015)),
    var(--surface-row);
}

.widgetDragPreview__card .widgetCard__tools,
.widgetDragPreview__card .widgetResizeHandle {
  display: none !important;
}

@keyframes widgetDropGhostPulse {
  from {
    box-shadow:
      0 16px 34px rgba(7, 11, 22, 0.36),
      inset 0 0 0 1px rgba(226, 234, 245, 0.2);
  }
  to {
    box-shadow:
      0 22px 48px rgba(7, 11, 22, 0.48),
      inset 0 0 0 1px rgba(226, 234, 245, 0.3);
  }
}

.widgetCard__tools {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}

.widgetCardTool {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(214, 223, 238, 0.22);
  background: rgba(13, 16, 22, 0.78);
  color: #e4e8ef;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.widgetCardTool--drag {
  cursor: grab;
}

.widgetCardTool--remove {
  font-size: 18px;
}

.widgetCardTool:hover {
  border-color: rgba(224, 231, 243, 0.42);
  background: rgba(34, 40, 51, 0.86);
}

.widgetCardTool--drag:active,
.widgetResizeHandle:active {
  transform: scale(0.96);
}

.widgetCardTool:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.widgetCardSizeBadge {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(214, 223, 238, 0.18);
  background: rgba(13, 16, 22, 0.78);
  color: #e4e8ef;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.18s ease,
    background-color 0.18s ease;
}

.widgetCardSizeBadge--btn {
  cursor: pointer;
  padding: 0 9px;
}

.widgetCardSizeBadge--btn:hover {
  border-color: rgba(224, 231, 243, 0.42);
  background: rgba(34, 40, 51, 0.86);
  transform: translateY(-1px);
}

.widgetResizeHandle {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(214, 223, 238, 0.22);
  background: rgba(13, 16, 22, 0.82);
  color: #e4e8ef;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: nwse-resize;
  line-height: 1;
  z-index: 2;
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.widgetResizeHandle:hover {
  border-color: rgba(224, 231, 243, 0.42);
  background: rgba(34, 40, 51, 0.88);
  transform: scale(1.06);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
}

.widgetCard.is-resizing {
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
  border-color: rgba(214, 223, 238, 0.78);
  box-shadow:
    inset 0 0 0 2px rgba(214, 223, 238, 0.24),
    0 18px 38px rgba(6, 10, 18, 0.34);
}

.widgetCard.is-resizing .widgetResizeHandle,
.widgetCard.is-resizing .widgetCardSizeBadge {
  border-color: rgba(224, 231, 243, 0.42);
  background: rgba(34, 40, 51, 0.88);
  transform: scale(1.04);
}

.widgetCard.is-resizing::after {
  content: attr(data-resize-size-label);
  position: absolute;
  left: 10px;
  bottom: 10px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(238, 244, 252, 0.42);
  background: rgba(6, 10, 16, 0.9);
  color: #eef3fb;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 24px;
  z-index: 4;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .widgetCard,
  .widgetCardSizeBadge,
  .widgetResizeHandle,
  .widgetChecklistToast,
  .widgetsDropGhost,
  .widgetDragPreview {
    transition: none !important;
    animation: none !important;
  }
}

.widgetCard__label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(225, 231, 241, 0.82);
  font-weight: 680;
  position: relative;
  z-index: 1;
}

.widgetCard__value {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.05;
  font-weight: 800;
  color: #f4f6fa;
  text-shadow: 0 1px 10px rgba(6, 10, 18, 0.26);
  position: relative;
  z-index: 1;
}

.widgetCard__value--small {
  font-size: 24px;
}

.widgetCard__meta {
  color: rgba(204, 211, 223, 0.76);
  font-size: 13px;
  position: relative;
  z-index: 1;
}

.widgetCard__action {
  justify-self: start;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
}

.widgetCard__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.widgetQuickActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.widgetCard__miniBtn {
  min-width: 0;
  height: 32px;
  padding: 0 10px;
}

.widgetNotesInput {
  width: 100%;
  min-height: 132px;
  resize: vertical;
  border: 1px solid rgba(214, 223, 238, 0.16);
  border-radius: 10px;
  background: rgba(8, 12, 20, 0.54);
  color: var(--text-main);
  padding: 10px 11px;
  line-height: 1.45;
}

.widgetNotesInput:focus {
  outline: none;
  border-color: rgba(224, 231, 243, 0.6);
  box-shadow: 0 0 0 3px rgba(236, 242, 250, 0.12);
}

.widgetStatusPill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.02);
  font-size: 13px;
  text-transform: capitalize;
}

.widgetStatusDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #8f96a9;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.36);
}

.widgetStatusDot[data-status="online"] {
  background: #43b581;
}

.widgetStatusDot[data-status="idle"] {
  background: #f0b232;
}

.widgetStatusDot[data-status="dnd"] {
  background: #f26f6f;
}

.widgetStatusDot[data-status="invisible"],
.widgetStatusDot[data-status="offline"] {
  background: #8f96a9;
}

.widgetStatusActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.widgetStatusBtn {
  min-width: 86px;
}

.widgetStatusBtn.is-on {
  border-color: rgba(224, 231, 243, 0.38);
  background: rgba(255, 255, 255, 0.08);
}

.widgetCard--calendar {
  gap: 10px;
}

.widgetCalendarTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.widgetCalendarIdentity {
  display: grid;
  gap: 3px;
}

.widgetCalendarWeekday {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 109, 115, 0.96);
  font-weight: 700;
}

.widgetCalendarDate {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  line-height: 1;
}

.widgetCalendarDateDay {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 820;
  color: #f4f6fa;
}

.widgetCalendarDateMonth {
  font-size: 21px;
  font-weight: 650;
  color: rgba(224, 231, 241, 0.78);
  padding-bottom: 3px;
}

.widgetCalendarMonthChip {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(218, 226, 237, 0.72);
  border: 1px solid rgba(214, 223, 238, 0.16);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}

.widgetCalendarGrid {
  display: grid;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.widgetCalendarWeekdays,
.widgetCalendarDays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.widgetCalendarWeekdayCell {
  font-size: 10px;
  text-align: center;
  color: rgba(213, 221, 233, 0.62);
  font-weight: 700;
  text-transform: uppercase;
}

.widgetCalendarDayCell {
  min-height: 22px;
  border-radius: 9px;
  border: 1px solid rgba(214, 223, 238, 0.1);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(232, 237, 245, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 630;
}

.widgetCalendarDayCell.is-other {
  opacity: 0.36;
}

.widgetCalendarDayCell.is-today {
  border-color: rgba(255, 110, 116, 0.75);
  background: linear-gradient(180deg, rgba(255, 103, 110, 0.24), rgba(255, 103, 110, 0.1));
  color: #ffffff;
  box-shadow: 0 5px 12px rgba(255, 95, 103, 0.24);
}

.widgetCalendarAgenda {
  display: grid;
  gap: 7px;
  position: relative;
  z-index: 1;
}

.widgetCalendarAgendaTitle {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(214, 223, 235, 0.74);
  font-weight: 700;
}

.widgetCalendarAgendaList {
  display: grid;
  gap: 6px;
}

.widgetCalendarAgendaRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(214, 223, 238, 0.12);
  padding-bottom: 5px;
}

.widgetCalendarAgendaLabel {
  font-size: 12px;
  color: rgba(229, 235, 244, 0.88);
  font-weight: 600;
}

.widgetCalendarAgendaDay {
  font-size: 12px;
  color: rgba(214, 223, 235, 0.72);
  max-width: 180px;
  line-height: 1.3;
}

.widgetCard--calendar.widgetCard--size-sm .widgetCalendarGrid,
.widgetCard--calendar.widgetCard--size-sm .widgetCalendarAgenda {
  display: none;
}

.widgetCard--calendar.widgetCard--size-sm .widgetCalendarMonthChip {
  display: none;
}

.widgetCard--calendar.widgetCard--size-sm .widgetCalendarDateDay {
  font-size: 48px;
}

.widgetCard--calendar.widgetCard--size-md .widgetCalendarAgenda {
  display: none;
}

.widgetCard--calendar.widgetCard--size-md .widgetCalendarDateDay {
  font-size: 36px;
}

.widgetCard--calendar.widgetCard--size-lg,
.widgetCard--calendar.widgetCard--size-xl {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  grid-template-areas:
    "top top"
    "month agenda";
  align-content: start;
}

.widgetCard--calendar.widgetCard--size-lg .widgetCalendarTop,
.widgetCard--calendar.widgetCard--size-xl .widgetCalendarTop {
  grid-area: top;
}

.widgetCard--calendar.widgetCard--size-lg .widgetCalendarGrid,
.widgetCard--calendar.widgetCard--size-xl .widgetCalendarGrid {
  grid-area: month;
}

.widgetCard--calendar.widgetCard--size-lg .widgetCalendarAgenda,
.widgetCard--calendar.widgetCard--size-xl .widgetCalendarAgenda {
  grid-area: agenda;
}

.widgetTodoList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
  max-height: 170px;
  overflow: auto;
}

.widgetTodoItem {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(214, 223, 238, 0.14);
  border-radius: 10px;
  padding: 7px 8px;
  background: rgba(255, 255, 255, 0.02);
  min-height: 36px;
}

.widgetTodoItem--empty {
  color: var(--text-soft);
}

.widgetTodoItem.is-done .widgetTodoText {
  text-decoration: line-through;
  color: var(--text-muted);
}

.widgetTodoItem.is-done .widgetTodoToggle {
  color: #9be3b0;
  border-color: rgba(155, 227, 176, 0.34);
  background: rgba(22, 48, 33, 0.72);
}

.widgetTodoText {
  min-width: 0;
  flex: 1;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.widgetTodoToggle,
.widgetTodoRemove,
.widgetTodoMove,
.widgetTodoEdit {
  border: 1px solid rgba(214, 223, 238, 0.22);
  background: rgba(10, 14, 23, 0.65);
  color: #e2e7ef;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  line-height: 1;
}

.widgetTodoToggle:hover,
.widgetTodoRemove:hover,
.widgetTodoMove:hover,
.widgetTodoEdit:hover {
  border-color: rgba(224, 231, 243, 0.42);
  background: rgba(34, 40, 51, 0.86);
}

.widgetTodoMove:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.widgetTodoIcon {
  width: 14px;
  height: 14px;
  display: block;
  flex: 0 0 auto;
}

.widgetTodoIcon--toggle {
  width: 15px;
  height: 15px;
}

.widgetTodoComposer {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.widgetTodoInput {
  min-width: 0;
  height: 34px;
  padding: 0 10px;
}

.widgetChecklistFooter {
  margin-top: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.widgetChecklistProgress {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 6px;
}

.widgetChecklistProgressBar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.widgetChecklistProgressBar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6f7784, #a3abb7);
  transition: width 0.2s ease;
}

.widgetCalendarDayCell {
  position: relative;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 6px 7px;
  min-height: 28px;
}

.widgetCalendarDayCell.has-tasks {
  border-color: rgba(150, 198, 255, 0.24);
  background: linear-gradient(180deg, rgba(76, 122, 170, 0.18), rgba(255, 255, 255, 0.03));
}

.widgetCalendarDayCell.is-overdue:not(.is-today) {
  border-color: rgba(255, 125, 125, 0.28);
  background: linear-gradient(180deg, rgba(96, 31, 41, 0.28), rgba(255, 255, 255, 0.03));
}

.widgetCalendarDayNumber {
  line-height: 1;
}

.widgetCalendarDayMarker {
  position: absolute;
  right: 5px;
  bottom: 4px;
  min-width: 14px;
  height: 14px;
  border-radius: 999px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #f4f7fb;
  background: rgba(146, 189, 244, 0.92);
  box-shadow: 0 4px 10px rgba(45, 74, 112, 0.22);
}

.widgetCalendarAgendaRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
}

.widgetCalendarAgendaRow.is-overdue {
  border-bottom-color: rgba(255, 123, 123, 0.18);
}

.widgetCalendarAgendaMain {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.widgetCalendarAgendaTask {
  font-size: 13px;
  color: rgba(241, 245, 251, 0.94);
  font-weight: 620;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.widgetCalendarAgendaMeta {
  display: grid;
  gap: 4px;
  justify-items: end;
  text-align: right;
}

.widgetCalendarAgendaReminder {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(145, 198, 255, 0.88);
}

.widgetCalendarAgendaEmpty {
  padding: 8px 0 4px;
  color: rgba(214, 223, 235, 0.68);
  font-size: 12px;
}

.widgetTodoHero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid rgba(214, 223, 238, 0.12);
  background:
    radial-gradient(circle at top left, rgba(153, 201, 255, 0.16), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
}

.widgetTodoHeroMain {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.widgetTodoHeroValue {
  font-family: var(--font-display);
  font-size: 31px;
  font-weight: 820;
  line-height: 0.95;
  color: #f5f8fd;
}

.widgetTodoHeroChips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.widgetTodoHeroChip {
  border-radius: 999px;
  border: 1px solid rgba(214, 223, 238, 0.16);
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(235, 241, 250, 0.9);
  white-space: nowrap;
}

.widgetTodoHeroChip.is-accent {
  border-color: rgba(123, 188, 255, 0.28);
  background: rgba(37, 66, 102, 0.58);
  color: #d9ecff;
}

.widgetTodoHeroChip.is-danger {
  border-color: rgba(255, 125, 125, 0.3);
  background: rgba(78, 25, 35, 0.62);
  color: #ffdadd;
}

.widgetTodoComposer {
  margin-top: 10px;
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(214, 223, 238, 0.12);
  background: rgba(255, 255, 255, 0.028);
}

.widgetTodoComposerTop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.widgetTodoComposerMeta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 8px;
  align-items: end;
}

.widgetTodoField {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.widgetTodoFieldLabel {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(215, 224, 236, 0.66);
  font-weight: 700;
}

.widgetTodoDateInput,
.widgetTodoTimeInput,
.widgetTodoReminderSelect,
.widgetTodoSubmitBtn {
  min-width: 0;
  height: 36px;
}

.widgetTodoDateInput,
.widgetTodoTimeInput {
  color-scheme: dark;
}

.widgetTodoList {
  margin-top: 10px;
  gap: 9px;
  max-height: 260px;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
  align-content: start;
}

.widgetTodoItem {
  align-items: flex-start;
  gap: 10px;
  min-height: 54px;
  padding: 10px 11px;
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018)),
    rgba(9, 13, 20, 0.7);
}

.widgetTodoItem.is-overdue {
  border-color: rgba(255, 123, 123, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 94, 94, 0.08);
}

.widgetTodoItem.is-soon:not(.is-overdue) {
  border-color: rgba(255, 203, 128, 0.22);
}

.widgetTodoItem.is-done {
  opacity: 0.82;
}

.widgetTodoBody {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 6px;
}

.widgetTodoTextRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.widgetTodoText {
  font-size: 13px;
  line-height: 1.4;
}

.widgetTodoActions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.widgetTodoStatusChip,
.widgetTodoMetaChip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
  white-space: nowrap;
}

.widgetTodoStatusChip {
  border: 1px solid rgba(214, 223, 238, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(236, 241, 248, 0.86);
}

.widgetTodoStatusChip.is-accent {
  border-color: rgba(123, 188, 255, 0.24);
  background: rgba(31, 60, 96, 0.58);
  color: #deefff;
}

.widgetTodoStatusChip.is-danger {
  border-color: rgba(255, 123, 123, 0.24);
  background: rgba(81, 24, 35, 0.62);
  color: #ffd9de;
}

.widgetTodoMetaRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.widgetTodoMetaChip {
  border: 1px solid rgba(214, 223, 238, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(214, 223, 236, 0.76);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 11px;
  font-weight: 700;
}

.widgetTodoMetaChip--reminder {
  border-color: rgba(123, 188, 255, 0.18);
  color: rgba(173, 214, 255, 0.94);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  font-weight: 800;
}

.widgetCard[data-widget-id="checklist"]:not(.is-editing) {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-content: stretch;
}

.widgetCard[data-widget-id="checklist"]:not(.is-editing) .widgetTodoList {
  max-height: none;
}

.widgetCard[data-widget-id="checklist"]:not(.is-editing) .widgetChecklistFooter {
  margin-top: 8px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg:not(.is-editing) {
  grid-template-rows: auto minmax(92px, 1fr) auto auto;
  gap: 5px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoHero {
  padding: 8px 10px;
  gap: 10px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoHero--compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoHero--compact .widgetTodoHeroMain {
  gap: 2px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoHeroValue {
  font-size: 24px;
  line-height: 1;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoHero--compact .widgetCard__meta {
  font-size: 11px;
  line-height: 1.2;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoHeroChips {
  gap: 5px;
  align-self: start;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoHeroChips:empty {
  display: none;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoHeroChip {
  padding: 4px 7px;
  font-size: 9px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoComposer {
  margin-top: 0;
  padding: 8px;
  gap: 6px;
  border-radius: 13px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoComposerTop {
  gap: 8px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoComposerMeta {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr) minmax(0, 1.08fr) auto;
  gap: 6px;
  align-items: end;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoField {
  gap: 4px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoFieldLabel {
  font-size: 9px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoDateInput,
.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoTimeInput,
.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoReminderSelect,
.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoSubmitBtn,
.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoInput {
  height: 30px;
  font-size: 12px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoList {
  margin-top: 0;
  gap: 5px;
  min-height: 90px;
  max-height: 98px;
  overflow: auto;
  padding-right: 2px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoItem {
  min-height: 40px;
  padding: 7px 8px;
  gap: 8px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoItem--compact {
  align-items: center;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoItem--compact .widgetTodoBody {
  gap: 3px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoItem--compact .widgetTodoTextRow {
  align-items: center;
  gap: 6px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoText {
  font-size: 12px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoItem--compact .widgetTodoText {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoMetaChip,
.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoStatusChip {
  padding: 4px 7px;
  font-size: 9px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoStatusChip {
  flex: 0 0 auto;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoMetaInline {
  min-width: 0;
  font-size: 10px;
  line-height: 1.2;
  color: rgba(214, 223, 236, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoToggle,
.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoRemove,
.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoMove,
.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoEdit {
  width: 20px;
  height: 20px;
  border-radius: 6px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoIcon {
  width: 12px;
  height: 12px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoIcon--toggle {
  width: 13px;
  height: 13px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetTodoActions {
  gap: 4px;
  flex-wrap: nowrap;
  align-self: center;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetChecklistFooter {
  margin-top: 0;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetChecklistProgress {
  gap: 3px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetChecklistProgressBar {
  height: 7px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetChecklistProgress .widgetCard__meta {
  font-size: 11px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-lg .widgetChecklistFooter .widgetCard__miniBtn {
  min-height: 30px;
  padding: 0 12px;
  white-space: nowrap;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-md:not(.is-editing) {
  grid-template-rows: auto minmax(74px, 1fr) auto auto;
  gap: 6px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-md .widgetTodoHero {
  padding: 8px 10px;
  gap: 8px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-md .widgetTodoHeroValue {
  font-size: 20px;
  line-height: 1;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-md .widgetTodoHeroChip {
  padding: 4px 7px;
  font-size: 9px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-md .widgetTodoList {
  margin-top: 0;
  gap: 6px;
  max-height: none;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-md .widgetTodoItem {
  min-height: 38px;
  padding: 6px 8px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-md .widgetTodoText {
  font-size: 12px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-md .widgetTodoToggle,
.widgetCard[data-widget-id="checklist"].widgetCard--size-md .widgetTodoRemove,
.widgetCard[data-widget-id="checklist"].widgetCard--size-md .widgetTodoMove,
.widgetCard[data-widget-id="checklist"].widgetCard--size-md .widgetTodoEdit {
  width: 22px;
  height: 22px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-md .widgetTodoComposer {
  margin-top: 0;
  padding: 8px;
  gap: 6px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-md .widgetTodoInput,
.widgetCard[data-widget-id="checklist"].widgetCard--size-md .widgetTodoSubmitBtn {
  height: 30px;
}

.widgetCard[data-widget-id="checklist"].widgetCard--size-md .widgetChecklistFooter {
  margin-top: 0;
}

.widgetTodoComposer--compact {
  padding-top: 6px;
}

.widgetTodoComposer--compact .widgetTodoComposerTop {
  grid-template-columns: minmax(0, 1fr) auto;
}

.widgetTodoPreviewMore {
  list-style: none;
  margin: 0;
  padding: 4px 6px 0;
  font-size: 11px;
  font-weight: 700;
  color: rgba(214, 223, 236, 0.72);
}

@media (max-width: 980px) {
  .widgetTodoComposerMeta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .widgetTodoHero,
  .widgetTodoComposerTop {
    grid-template-columns: 1fr;
    display: grid;
  }

  .widgetTodoHeroChips {
    justify-content: flex-start;
  }

  .widgetTodoComposerMeta {
    grid-template-columns: 1fr;
  }

  .widgetCalendarAgendaRow {
    grid-template-columns: 1fr;
  }

  .widgetCalendarAgendaMeta {
    justify-items: start;
    text-align: left;
  }
}

#dmMain,
.dmMain {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dmMainBody {
  position: relative;
  min-height: 0;
  flex: 1;
  display: flex;
  gap: 10px;
  padding: 10px 10px 0;
}

.dmMainBody.is-server-layout {
  gap: 12px;
}

.serverChannelsPanel {
  width: 256px;
  min-width: 220px;
  max-width: 300px;
  min-height: 0;
  border: 1px solid var(--altara-sidebar-border, rgba(255, 255, 255, 0.085));
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), transparent 18%),
    var(--altara-sidebar-bg, rgba(13, 13, 13, 0.94));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.serverChannelsPanel.hidden {
  display: none !important;
}

.serverChannelsPanel__top {
  padding: 10px;
  border-bottom: 1px solid var(--altara-sidebar-border, rgba(255, 255, 255, 0.085));
  display: block;
}

.serverChannelsPanel__identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
}

.serverChannelsPanel__identityBtn {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(232, 207, 174, 0.12);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    rgba(18, 18, 18, 0.92);
  padding: 6px 10px;
  color: var(--altara-sidebar-text, #f2f0ec);
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease, color .14s ease, box-shadow .14s ease, transform .12s ease;
}

.serverChannelsPanel__identityBtn:hover,
.serverChannelsPanel__identityBtn:focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.26);
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.075), rgba(255, 255, 255, 0.016)),
    rgba(23, 22, 21, 0.96);
  box-shadow:
    0 0 0 2px rgba(232, 207, 174, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.serverChannelsPanel__identityBtn:focus-visible {
  box-shadow:
    0 0 0 1px rgba(232, 207, 174, 0.32),
    0 0 0 4px rgba(232, 207, 174, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.serverChannelsPanel__identityBtn:active {
  border-color: rgba(232, 207, 174, 0.34);
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.11), rgba(255, 255, 255, 0.02)),
    rgba(27, 25, 22, 0.98);
  transform: translateY(1px);
}

.serverChannelsPanel__icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  border: 1px solid var(--altara-sidebar-icon-border, rgba(232, 207, 174, 0.2));
  background:
    linear-gradient(145deg, rgba(232, 207, 174, 0.1), rgba(255, 255, 255, 0.024)),
    var(--altara-sidebar-surface, #181818);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--altara-sidebar-accent-text, #f0d8b8);
  font-size: 15px;
  font-weight: 800;
  overflow: hidden;
}

.serverChannelsPanel__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.serverChannelsPanel__identityMeta {
  min-width: 0;
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
}

.serverChannelsPanel__name {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--altara-sidebar-text, #f2f0ec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.serverChannelsPanel__meta {
  display: block;
  margin-top: 0;
  font-size: 12px;
  color: var(--altara-sidebar-muted, rgba(242, 240, 236, 0.56));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.serverChannelsPanel__invite {
  width: 31px;
  height: 31px;
  border-radius: 8px;
  border: 1px solid var(--altara-sidebar-icon-btn-border, rgba(232, 207, 174, 0.22));
  background: var(--altara-sidebar-icon-btn-bg, rgba(24, 24, 24, 0.96));
  color: var(--altara-sidebar-accent-text, #f0d8b8);
  font-size: 19px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.serverChannelsPanel__invite:hover,
.serverChannelsPanel__invite:focus-visible {
  outline: none;
  border-color: var(--altara-sidebar-icon-btn-hover-border, rgba(232, 207, 174, 0.34));
  background: var(--altara-sidebar-icon-btn-hover-bg, rgba(232, 207, 174, 0.09));
  color: var(--altara-sidebar-text, #f2f0ec);
  box-shadow: var(--altara-sidebar-focus-ring-soft, 0 0 0 2px rgba(232, 207, 174, 0.08));
}

.serverChannelsPanel__invite:active {
  border-color: var(--altara-sidebar-icon-btn-active-border, rgba(232, 207, 174, 0.4));
  background: var(--altara-sidebar-icon-btn-active-bg, rgba(232, 207, 174, 0.13));
}

.serverChannelsPanel__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
}

.serverChannelsPanel__menuBtn {
  width: auto;
  max-width: min(132px, 44vw);
  min-width: 0;
  height: 34px;
  padding: 0 11px 0 12px;
  border: 1px solid var(--altara-sidebar-icon-btn-border, rgba(232, 207, 174, 0.22));
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    var(--altara-sidebar-icon-btn-bg, rgba(24, 24, 24, 0.96));
  color: var(--altara-sidebar-text, #f2f0ec);
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
  text-align: left;
  transition: border-color .14s ease, background-color .14s ease, color .14s ease, box-shadow .14s ease, transform .12s ease;
}

.serverChannelsPanel__menuBtn:hover,
.serverChannelsPanel__menuBtn:focus-visible {
  outline: none;
  border-color: var(--altara-sidebar-icon-btn-hover-border, rgba(232, 207, 174, 0.36));
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.09), rgba(255, 255, 255, 0.018)),
    var(--altara-sidebar-icon-btn-hover-bg, rgba(30, 29, 27, 0.98));
  color: var(--altara-sidebar-text, #f2f0ec);
  box-shadow:
    var(--altara-sidebar-focus-ring-soft, 0 0 0 2px rgba(232, 207, 174, 0.08)),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.serverChannelsPanel__menuBtn:focus-visible {
  box-shadow:
    0 0 0 1px rgba(232, 207, 174, 0.32),
    0 0 0 4px rgba(232, 207, 174, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.serverChannelsPanel__menuBtn:active {
  border-color: var(--altara-sidebar-icon-btn-active-border, rgba(232, 207, 174, 0.42));
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.13), rgba(255, 255, 255, 0.02)),
    var(--altara-sidebar-icon-btn-active-bg, rgba(34, 31, 27, 0.98));
  transform: translateY(1px);
}

.serverChannelsPanel__menuLabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serverChannelsPanel__menuChevron {
  color: var(--altara-sidebar-accent-text, #f0d8b8);
  font-size: 11px;
  line-height: 1;
  opacity: 0.86;
}

.serverChannelsPanel__body {
  min-height: 0;
  overflow: auto;
  padding: 10px;
  display: grid;
  gap: 12px;
}

.serverChannelsQuick {
  display: grid;
  gap: 6px;
}

.serverQuickItem {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--altara-sidebar-border, rgba(255, 255, 255, 0.085));
  border-radius: 9px;
  background: var(--altara-sidebar-item-bg, rgba(255, 255, 255, 0.026));
  color: var(--altara-sidebar-soft, rgba(242, 240, 236, 0.72));
  text-align: left;
  padding: 0 9px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  opacity: 0.72;
}

.serverQuickItem__icon {
  font-size: 15px;
  line-height: 1;
  opacity: 0.86;
}

.serverQuickItem__label {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.serverChannelsGroup {
  display: grid;
  gap: 6px;
}

.serverChannelsGroup__head {
  margin: 0 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.serverChannelsGroup__title {
  margin: 0;
  color: var(--altara-sidebar-muted, rgba(242, 240, 236, 0.54));
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.serverChannelsGroup__add,
.serverChannelsCategory__add {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  padding: 0;
  color: var(--altara-sidebar-soft, rgba(242, 240, 236, 0.66));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
  opacity: 0.76;
}

.serverChannelsGroup__add:hover,
.serverChannelsCategory__add:hover,
.serverChannelsGroup__add:focus-visible,
.serverChannelsCategory__add:focus-visible {
  outline: none;
  background: var(--altara-sidebar-hover-bg, rgba(232, 207, 174, 0.07));
  color: var(--altara-sidebar-accent-text, #f0d8b8);
  opacity: 1;
  box-shadow: var(--altara-sidebar-focus-ring-soft, 0 0 0 2px rgba(232, 207, 174, 0.08));
}

.serverChannelsGroup__add:disabled,
.serverChannelsCategory__add:disabled {
  background: transparent;
  color: var(--altara-sidebar-disabled, rgba(242, 240, 236, 0.28));
  opacity: 0.34;
  cursor: not-allowed;
}

.serverChannelsCategory {
  display: grid;
  gap: 6px;
  position: relative;
}

.serverChannelsCategory__head {
  width: 100%;
  min-height: 28px;
  margin: 0 1px;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.serverChannelsCategory__toggle {
  width: 100%;
  min-height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--altara-sidebar-soft, rgba(242, 240, 236, 0.68));
  padding: 0 4px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  text-align: left;
  cursor: pointer;
  flex: 1 1 auto;
  transition: background-color .14s ease, box-shadow .14s ease, color .14s ease;
}

.serverChannelsCategory__toggle:hover,
.serverChannelsCategory__toggle:focus-visible {
  outline: none;
  background: var(--altara-sidebar-hover-bg, rgba(232, 207, 174, 0.07));
  box-shadow: var(--altara-sidebar-focus-ring-soft, 0 0 0 2px rgba(232, 207, 174, 0.08));
}

.serverChannelsCategory__toggle.is-static {
  cursor: default;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-left: 20px;
}

.serverChannelsCategory__toggle.is-static:hover {
  background: transparent;
}

.serverChannelsCategory__caret {
  font-size: 12px;
  line-height: 1;
  opacity: 0.88;
}

.serverChannelsCategory__name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.serverChannelsCategory__count {
  font-size: 11px;
  font-weight: 700;
  color: var(--altara-sidebar-muted, rgba(242, 240, 236, 0.52));
}

.serverChannelsCategory.has-unread > .serverChannelsCategory__head::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 12px;
  border-radius: 999px;
  background: rgba(238, 244, 252, 0.95);
  box-shadow: 0 0 0 1px rgba(11, 15, 22, 0.84);
}

.serverChannelsCategory.is-active > .serverChannelsCategory__head .serverChannelsCategory__toggle {
  color: var(--altara-sidebar-text, #f2f0ec);
}

.serverChannelsCategory__body {
  display: grid;
  gap: 6px;
}

.serverChannelsCategory.is-collapsed .serverChannelsCategory__body {
  display: none;
}

.serverChannelsCategory__body > .serverChannelItem,
.serverChannelsCategory__body > .serverVoiceRoomWrap {
  margin-left: 8px;
}

.serverChannelsCategory--uncategorized > .serverChannelsCategory__body {
  min-height: 8px;
}

.serverChannelsCategory--uncategorized > .serverChannelsCategory__body > .serverChannelItem,
.serverChannelsCategory--uncategorized > .serverChannelsCategory__body > .serverVoiceRoomWrap {
  margin-left: 0;
}

.serverChannelItem {
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--altara-sidebar-soft, rgba(242, 240, 236, 0.78));
  text-align: left;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  position: relative;
  cursor: pointer;
  transition: background .14s ease, box-shadow .14s ease, color .14s ease;
}

.serverChannelItem[draggable="true"],
.serverVoiceRoomWrap[draggable="true"],
.serverChannelsCategory__toggle[draggable="true"] {
  -webkit-user-drag: element;
}

.serverChannelItem.is-dragging,
.serverVoiceRoomWrap.is-dragging,
.serverChannelsCategory__toggle.is-dragging {
  opacity: 0.48;
  filter: saturate(0.86);
}

.serverChannelItem:hover,
.serverChannelItem:focus-visible {
  outline: none;
  background: var(--altara-sidebar-hover-bg, rgba(232, 207, 174, 0.07));
  box-shadow: var(--altara-sidebar-focus-ring-soft, 0 0 0 2px rgba(232, 207, 174, 0.08));
}

.serverChannelItem.is-active {
  background: var(--altara-sidebar-selected-bg, linear-gradient(90deg, rgba(232, 207, 174, 0.14), rgba(232, 207, 174, 0.07)));
  color: var(--altara-sidebar-selected-text, #f6efe4);
  box-shadow: var(--altara-sidebar-selected-shadow, inset 0 0 0 1px rgba(232, 207, 174, 0.3));
}

.serverChannelItem.is-active:focus-visible {
  outline: none;
  box-shadow:
    var(--altara-sidebar-selected-shadow, inset 0 0 0 1px rgba(232, 207, 174, 0.3)),
    var(--altara-sidebar-focus-ring, 0 0 0 3px rgba(232, 207, 174, 0.1));
}

.serverChannelItem.has-unread::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(238, 244, 252, 0.95);
  box-shadow: 0 0 0 1px rgba(11, 15, 22, 0.84);
}

.serverChannelItem.is-active.has-unread::before {
  left: -9px;
  width: 4px;
  height: 20px;
  border-radius: 999px;
}

.serverChannelItem__icon {
  color: var(--altara-sidebar-icon, rgba(242, 240, 236, 0.58));
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

.serverChannelItem__label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 600;
}

.serverChannelItem__badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  border: 1px solid var(--altara-sidebar-badge-border, rgba(232, 207, 174, 0.28));
  background: var(--altara-sidebar-badge-bg, rgba(232, 207, 174, 0.1));
  color: var(--altara-sidebar-badge-text, #f0d8b8);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.serverChannelsHint {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.serverVoiceRoomWrap {
  display: grid;
  gap: 6px;
  position: relative;
}

.serverVoiceRoomWrap + .serverVoiceRoomWrap {
  margin-top: 8px;
}

.serverVoiceRoomMembers {
  margin-left: 18px;
  display: grid;
  gap: 5px;
}

.serverVoiceRoom {
  border: 0;
  background: transparent;
  color: var(--altara-sidebar-soft, rgba(242, 240, 236, 0.78));
  opacity: 1;
  padding: 7px 10px;
  gap: 8px;
  transition: background .14s ease, transform .12s ease, box-shadow .14s ease, color .14s ease;
}

.serverVoiceRoom:hover,
.serverVoiceRoom:focus-visible {
  outline: none;
  background: var(--altara-sidebar-hover-bg, rgba(232, 207, 174, 0.07));
  box-shadow: var(--altara-sidebar-focus-ring-soft, 0 0 0 2px rgba(232, 207, 174, 0.08));
}

.serverVoiceRoom:active {
  transform: translateY(1px);
}

.serverVoiceRoom.is-active {
  background: var(--altara-sidebar-selected-bg, linear-gradient(90deg, rgba(232, 207, 174, 0.14), rgba(232, 207, 174, 0.07)));
  color: var(--altara-sidebar-selected-text, #f6efe4);
  box-shadow: var(--altara-sidebar-selected-shadow, inset 0 0 0 1px rgba(232, 207, 174, 0.3));
}

.serverVoiceRoom.is-active:focus-visible {
  outline: none;
  box-shadow:
    var(--altara-sidebar-selected-shadow, inset 0 0 0 1px rgba(232, 207, 174, 0.3)),
    var(--altara-sidebar-focus-ring, 0 0 0 3px rgba(232, 207, 174, 0.1));
}

.serverVoiceRoom.has-unread::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(238, 244, 252, 0.95);
  box-shadow: 0 0 0 1px rgba(11, 15, 22, 0.84);
}

.serverVoiceRoom.is-active.has-unread::before {
  left: -9px;
  width: 4px;
  height: 20px;
  border-radius: 999px;
}

.serverVoiceRoom.has-live {
  box-shadow: inset 0 0 0 1px rgba(88, 226, 162, 0.22);
}

.serverVoiceRoom.is-active.has-live {
  box-shadow: var(--altara-sidebar-selected-shadow, inset 0 0 0 1px rgba(232, 207, 174, 0.3));
}

.serverVoiceRoom.is-active.has-live:focus-visible {
  box-shadow:
    var(--altara-sidebar-selected-shadow, inset 0 0 0 1px rgba(232, 207, 174, 0.3)),
    var(--altara-sidebar-focus-ring, 0 0 0 3px rgba(232, 207, 174, 0.1));
}

.serverVoiceRoom__icon {
  color: var(--altara-sidebar-icon, rgba(242, 240, 236, 0.58));
  font-size: 16px;
}

.serverVoiceRoom__label {
  font-size: 15px;
}

.serverVoiceRoom__meta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.serverVoiceRoom__elapsed {
  flex: 0 0 auto;
  min-width: 34px;
  color: rgba(232, 207, 174, 0.68);
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.serverVoiceRoom:not(.is-active) .serverVoiceRoom__elapsed {
  color: rgba(242, 240, 236, 0.42);
}

.serverVoiceRoom__count {
  min-width: 20px;
}

.serverChannelItem.is-drop-before::after,
.serverChannelItem.is-drop-after::after,
.serverVoiceRoomWrap.is-drop-before::after,
.serverVoiceRoomWrap.is-drop-after::after,
.serverChannelsCategory.is-drop-before::after,
.serverChannelsCategory.is-drop-after::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(88, 226, 162, 0.96), rgba(71, 205, 147, 0.85));
  box-shadow: 0 0 0 1px rgba(10, 21, 18, 0.65), 0 0 16px rgba(88, 226, 162, 0.22);
  pointer-events: none;
  z-index: 6;
}

.serverChannelItem.is-drop-before::after,
.serverVoiceRoomWrap.is-drop-before::after,
.serverChannelsCategory.is-drop-before::after {
  top: -6px;
}

.serverChannelItem.is-drop-after::after,
.serverVoiceRoomWrap.is-drop-after::after,
.serverChannelsCategory.is-drop-after::after {
  bottom: -6px;
}

.serverChannelsCategory.is-drop-over {
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(88, 226, 162, 0.28);
  background: linear-gradient(180deg, rgba(88, 226, 162, 0.08), rgba(88, 226, 162, 0.03));
}

.serverChannelsCategory.is-drop-over > .serverChannelsCategory__head .serverChannelsCategory__toggle {
  background: rgba(88, 226, 162, 0.12);
  color: rgba(234, 255, 245, 0.96);
}

.serverChannelDragGhost {
  position: fixed;
  top: -9999px;
  left: -9999px;
  z-index: 2147483647;
  pointer-events: none;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(88, 226, 162, 0.4);
  background: linear-gradient(180deg, rgba(17, 26, 36, 0.98), rgba(12, 20, 31, 0.98));
  color: rgba(232, 240, 250, 0.96);
  box-shadow: 0 10px 26px rgba(3, 8, 14, 0.54), 0 0 0 1px rgba(88, 226, 162, 0.16);
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
}

.serverChannelDragGhost__icon {
  font-size: 14px;
  line-height: 1;
  opacity: 0.9;
  text-align: center;
}

.serverChannelDragGhost__label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.serverVoiceMember {
  min-height: 30px;
  border-radius: 9px;
  padding: 5px 6px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  background: var(--altara-sidebar-member-bg, rgba(255, 255, 255, 0.018));
  cursor: context-menu;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
  border: 1px solid transparent;
}

.serverVoiceMember:hover,
.serverVoiceMember:focus-visible {
  outline: none;
  background: var(--altara-sidebar-member-active-bg, rgba(232, 207, 174, 0.07));
  border-color: var(--altara-sidebar-member-active-border, rgba(232, 207, 174, 0.24));
  box-shadow: var(--altara-sidebar-member-active-shadow, inset 0 0 0 1px rgba(232, 207, 174, 0.07));
}

.serverVoiceMember__avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.serverVoiceMember__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.serverVoiceMember__avatar .statusDot {
  position: absolute !important;
  right: -1px !important;
  bottom: -1px !important;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(13, 18, 28, 0.96);
  z-index: 2;
}

.serverVoiceMember__name {
  min-width: 0;
  font-size: 12px;
  color: var(--altara-sidebar-text, #f2f0ec);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.serverVoiceMember__state {
  font-size: 11px;
  color: var(--altara-sidebar-muted, rgba(242, 240, 236, 0.54));
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.serverVoiceMember__stateText {
  white-space: nowrap;
}

.dmThread {
  min-width: 0;
  min-height: 0;
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}

.dm {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(200, 232, 255, 0.12);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(2, 8, 14, 0.55);
}

.dm__top,
.dmHeader {
  padding: 12px 13px;
  border-bottom: 1px solid rgba(200, 232, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dmHeaderText {
  min-width: 0;
  flex: 1 1 auto;
}

.dmHeaderAvatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.12));
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 18%, color-mix(in srgb, var(--altara-accent, #e8cfae) 18%, transparent), transparent 42%),
    linear-gradient(160deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 78%, transparent), color-mix(in srgb, var(--altara-bg, #101010) 86%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 22px rgba(0, 0, 0, 0.16);
}

.dmHeaderAvatar img,
.dmHeaderAvatar .profileAvatarMedia,
.dmHeaderAvatar .profileAvatarMediaClip {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
}

.dmHeaderAvatar img,
.dmHeaderAvatar .profileAvatarMedia {
  object-fit: cover;
}

.dmHeaderAvatarFallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background:
    radial-gradient(circle at 30% 18%, color-mix(in srgb, var(--altara-accent, #e8cfae) 18%, transparent), transparent 40%),
    linear-gradient(160deg, rgba(44, 41, 36, 0.92), rgba(18, 18, 18, 0.96));
  color: var(--altara-text, #f2f0ec);
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
}

.dmTitleRow {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dmHeaderActions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dmHeaderIcon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  line-height: 0;
  pointer-events: none;
}

.dmHeaderIcon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.dmHeaderIconBtn .dmHeaderIcon--members,
.dmHeaderIconBtn--group-manage .dmHeaderIcon--delete {
  display: none;
}

.dmHeaderIconBtn.is-members-mode .dmHeaderIcon--profile,
.dmHeaderIconBtn--group-manage.is-owner .dmHeaderIcon--leave {
  display: none;
}

.dmHeaderIconBtn.is-members-mode .dmHeaderIcon--members,
.dmHeaderIconBtn--group-manage.is-owner .dmHeaderIcon--delete {
  display: inline-flex;
}

.dmPrivacyBadge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(200, 232, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: #e8eeff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dmPrivacyBadge.is-standard {
  border-color: rgba(184, 197, 218, 0.24);
  background: rgba(149, 163, 184, 0.12);
  color: #d7dfef;
}

.dmPrivacyBadge.is-pending {
  border-color: rgba(255, 209, 102, 0.34);
  background: rgba(255, 209, 102, 0.14);
  color: #ffe3a3;
}

.dmPrivacyBadge.is-private {
  border-color: rgba(120, 255, 190, 0.34);
  background: rgba(46, 181, 117, 0.18);
  color: #cffff1;
}

.dmPrivacyBanner {
  margin: 10px 10px 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(200, 232, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 100%),
    rgba(10, 16, 28, 0.84);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.dmPrivacyBanner.hidden {
  display: none !important;
}

.dmPrivacyBanner.is-pending {
  border-color: rgba(255, 209, 102, 0.28);
  background:
    radial-gradient(300px 140px at 0% 0%, rgba(255, 209, 102, 0.14), transparent 72%),
    rgba(14, 18, 26, 0.9);
}

.dmPrivacyBanner.is-warning {
  border-color: rgba(255, 148, 107, 0.3);
  background:
    radial-gradient(320px 150px at 0% 0%, rgba(255, 148, 107, 0.16), transparent 74%),
    rgba(18, 14, 20, 0.92);
}

.dmPrivacyBanner__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dmPrivacyBanner__title {
  color: #eff4ff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.dmPrivacyBanner__text {
  color: rgba(233, 241, 255, 0.76);
  font-size: 12px;
  line-height: 1.45;
}

.dmPrivacyBanner__actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dmPrivacyBanner__actions .btn {
  height: 34px;
  white-space: nowrap;
}

.dm__messages,
.dmMessages {
  min-height: 0;
  flex: 1;
  overflow: auto;
  overflow-anchor: auto;
  overscroll-behavior: contain;
  padding: 10px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dmJumpLatest {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 24;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 82%, rgba(255, 255, 255, 0.035)), color-mix(in srgb, var(--altara-surface, #181818) 92%, transparent)),
    color-mix(in srgb, var(--altara-bg, #101010) 78%, transparent);
  color: var(--altara-text, #f2f0ec);
  padding: 0 12px 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.28),
    0 0 0 1px color-mix(in srgb, var(--altara-accent, #e8cfae) 8%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.dmJumpLatest:hover,
.dmJumpLatest:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--altara-accent, #e8cfae) 54%, var(--altara-border, rgba(255, 255, 255, 0.1)));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-accent-soft, rgba(232, 207, 174, 0.11)) 74%, var(--altara-surface-elevated, #202020)), color-mix(in srgb, var(--altara-surface, #181818) 84%, var(--altara-accent, #e8cfae) 8%));
  color: var(--altara-accent-strong, #f0d8b8);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.32),
    0 0 0 3px var(--altara-accent-soft, rgba(232, 207, 174, 0.11)),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.dmJumpLatest.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dmJumpLatest__icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--altara-accent-border, rgba(232, 207, 174, 0.24));
  border-radius: 999px;
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.08));
  color: var(--altara-accent-strong, #f0d8b8);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.dmDropOverlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(7, 12, 22, 0.55);
  backdrop-filter: blur(2px);
}

.dmDropOverlay.is-open {
  display: flex;
}

.dmDropOverlay__card {
  min-width: min(440px, calc(100% - 32px));
  border: 1px dashed rgba(121, 131, 245, 0.75);
  border-radius: 16px;
  background: rgba(13, 20, 34, 0.92);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  padding: 22px;
  text-align: center;
}

.dmDropOverlay__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: #eaf2ff;
}

.dmDropOverlay__sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-soft);
}

.day-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 14px 12px;
  color: var(--altara-text-muted, var(--text-soft));
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.dmMessages > .day-divider:first-child {
  margin-top: 6px;
}

.day-divider::before,
.day-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--altara-border, rgba(255, 255, 255, 0.1)), transparent);
}

.msg {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  padding: 3px 16px 3px 14px;
  border-radius: 0;
  transition: background-color 0.14s ease;
}

.msg:not(.msg--compact):not(.msg--system) {
  margin-top: 7px;
}

.day-divider + .msg:not(.msg--compact):not(.msg--system),
.dmMessages > .msg:first-child:not(.msg--compact):not(.msg--system) {
  margin-top: 0;
}

.msg:hover {
  background: rgba(255, 255, 255, 0.04);
}

.msg--editingTarget {
  background: rgba(120, 174, 255, 0.12);
}

.msg--editingTarget .msg__body {
  border-left: 2px solid rgba(139, 187, 255, 0.8);
  padding-left: 8px;
}

.msg--compact {
  padding-top: 1px;
  padding-bottom: 1px;
  margin-top: 0;
}

.msg--system,
.dmSystemMessage {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  padding: 6px 14px;
}

.day-divider + .msg--system,
.dmMessages > .msg--system:first-child {
  margin-top: 4px;
}

.msg--system + .msg:not(.msg--compact) {
  margin-top: 8px;
}

.msg--system:hover {
  background: transparent;
}

.msg__systemChip,
.dmSystemMessage__pill {
  width: fit-content;
  max-width: min(720px, calc(100% - 12px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 4px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    color-mix(in srgb, var(--altara-surface-elevated, #202020) 74%, transparent);
  color: var(--altara-text-soft, rgba(242, 240, 236, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 8px 22px rgba(0, 0, 0, 0.18);
  text-align: center;
  font: inherit;
}

.msg__systemChip--joinable {
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}

.msg__systemChip--joinable:hover {
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.11));
  color: var(--altara-text, #f2f0ec);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 10px 28px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}

.msg__systemChip--joinable:focus-visible {
  outline: none;
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.34));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--altara-accent, #e8cfae) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.msg__systemIcon,
.dmSystemMessage__icon {
  color: var(--altara-accent-strong, #f1dbc0);
  font-size: 12px;
  line-height: 1;
  opacity: 0.88;
}

.msg__systemIcon--danger {
  color: #f2a0a0;
}

.msg__systemText,
.dmSystemMessage__text {
  min-width: 0;
  color: var(--altara-text-soft, rgba(242, 240, 236, 0.72));
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.3;
}

.msg__systemTime,
.dmSystemMessage__time {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--altara-text-muted, var(--text-muted));
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.dmSystemMessage__time::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.58;
}

.msg__avatarCol {
  width: 40px;
  min-height: 22px;
}

.msg__avatarCol--compact {
  min-height: 0;
  pointer-events: none;
}

.msg__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(200, 232, 255, 0.2);
  background: linear-gradient(160deg, rgba(30, 227, 255, 0.16), rgba(6, 13, 20, 0.4));
  display: block;
}

.msg__avatarBtn {
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.msg__avatarBtn:hover,
.msg__avatarBtn:focus-visible {
  border-color: var(--accent-strong);
}

.msg__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.msg__avatarFallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--text-main);
  font-size: 12px;
  font-weight: 800;
}

.msg__body {
  position: relative;
  min-width: 0;
  padding-right: 6px;
}

.msg__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 1px;
  font-size: 12px;
  color: var(--text-soft);
}

.msg--compact .msg__meta {
  display: none;
}

.msg__name {
  color: #f2f5ff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
}

.msg__nameBtn {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.msg__nameBtn:hover,
.msg__nameBtn:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.msg--me .msg__name {
  color: #cdd8ff;
}

.msg__time {
  color: var(--text-muted);
  font-size: 12px;
}

.msg__pin {
  opacity: 0.95;
  font-size: 13px;
}

.msg__edited {
  opacity: 0.74;
  font-style: italic;
  font-size: 11px;
}

.msg__actions {
  position: absolute;
  top: -4px;
  right: 2px;
  z-index: 6;
  display: flex;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.msg--compact .msg__actions {
  top: -2px;
}

.msg:hover .msg__actions,
.msg__actions:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.msg__actionsRow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--altara-surface-elevated, #202020) 84%, var(--altara-bg, #101010));
  padding: 4px 6px;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.msg__actionsRow--shift {
  display: none;
}

body.msg-shift-held .msg__actionsRow--base {
  display: none;
}

body.msg-shift-held .msg__actionsRow--shift {
  display: inline-flex;
}

.msgActionBtn {
  min-width: 26px;
  height: 24px;
  padding: 0 7px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
}

.msgActionBtn:hover,
.msgActionBtn:focus-visible {
  border-color: var(--stroke-strong);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-main);
}

.msgActionBtn--danger:hover,
.msgActionBtn--danger:focus-visible {
  border-color: rgba(242, 111, 111, 0.5);
  background: rgba(242, 111, 111, 0.16);
  color: #ffd7d7;
}

.msgActionBtn.is-on {
  border-color: var(--accent-strong);
  background: var(--accent-soft);
  color: #fff;
}

.msg__replyRef {
  width: min(640px, 100%);
  margin: 3px 0 6px;
  padding: 6px 10px;
  border: 0;
  border-left: 2px solid var(--altara-border-strong, rgba(255, 255, 255, 0.12));
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--altara-surface-elevated, #202020) 48%, transparent);
  display: grid;
  gap: 2px;
  text-align: left;
  cursor: pointer;
}

.msg__replyRef:hover,
.msg__replyRef:focus-visible {
  border-left-color: var(--altara-accent-strong, var(--accent-strong));
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.11));
}

.msg__replyName {
  font-size: 11px;
  color: var(--text-soft);
}

.msg__replyText {
  font-size: 12px;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg__reactions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.msg__reactions:empty {
  display: none;
  margin-top: 0;
}

.msg__reaction {
  border: 1px solid var(--altara-border, var(--stroke));
  background: color-mix(in srgb, var(--altara-surface-elevated, #202020) 62%, transparent);
  border-radius: 999px;
  min-height: 24px;
  padding: 0 8px;
  color: var(--altara-text-soft, var(--text-soft));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
}

.msg__reaction:hover,
.msg__reaction:focus-visible {
  border-color: var(--altara-accent-border, var(--accent-strong));
  background: var(--altara-hover, rgba(255, 255, 255, 0.07));
  color: var(--altara-text, var(--text-main));
}

.msg__reaction.is-on {
  border-color: var(--altara-accent-border, var(--accent-strong));
  background: var(--altara-accent-soft, var(--accent-soft));
  color: var(--altara-accent-strong, #f1dbc0);
}

.msg__focusPulse {
  animation: msgPulse 0.75s ease;
}

@keyframes msgPulse {
  0% { box-shadow: 0 0 0 0 rgba(121, 131, 245, 0.55); }
  100% { box-shadow: 0 0 0 14px rgba(121, 131, 245, 0); }
}

.dmReplyBar {
  margin: 8px 12px 0;
  padding: 8px 10px;
  border: 1px solid rgba(200, 232, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dmReplyBar__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dmReplyBar__title {
  font-size: 11px;
  color: var(--text-soft);
}

.dmReplyBar__body {
  font-size: 12px;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dmReplyBar__close {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.dmReplyBar__close:hover,
.dmReplyBar__close:focus-visible {
  border-color: var(--stroke-strong);
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.08);
}

.dmPendingAttachments {
  margin: 8px 12px 0;
  padding: 10px;
  border: 1px solid rgba(200, 232, 255, 0.16);
  border-radius: 12px;
  background: rgba(10, 16, 26, 0.62);
  display: grid;
  gap: 10px;
}

.dmPendingHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dmPendingTitle {
  font-size: 13px;
  font-weight: 700;
  color: #e3ecff;
}

.dmPendingSub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-soft);
}

.dmPendingHead__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dmPendingGrid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.dmPendingCard {
  position: relative;
  border: 1px solid rgba(200, 232, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px;
  display: grid;
  gap: 8px;
}

.dmPendingCard__preview {
  position: relative;
  border-radius: 8px;
  border: 1px solid rgba(200, 232, 255, 0.14);
  background: rgba(0, 0, 0, 0.32);
  min-height: 86px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.dmPendingCard__preview--audio {
  min-height: 0;
  place-items: stretch;
  padding: 10px;
}

.dmPendingCard__preview--spoiler .dmPendingCard__image,
.dmPendingCard__preview--spoiler .dmPendingCard__video {
  filter: blur(13px) brightness(0.6);
  transform: scale(1.02);
}

.dmPendingCard__spoilerLabel {
  position: absolute;
  left: 8px;
  bottom: 8px;
  border-radius: 999px;
  border: 1px solid rgba(200, 232, 255, 0.3);
  background: rgba(9, 12, 20, 0.82);
  color: #e4ecff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 9px;
}

.dmPendingCard__image {
  width: 100%;
  max-height: 210px;
  display: block;
  object-fit: cover;
}

.dmPendingCard__video {
  width: 100%;
  max-height: 210px;
  display: block;
}

.dmPendingCard__audio {
  width: 100%;
  max-width: 100%;
}

.dmPendingAudioPreview {
  width: 100%;
  display: grid;
  gap: 8px;
}

.dmPendingAudioPreview__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dmPendingAudioPreview__icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid rgba(200, 232, 255, 0.26);
  background: rgba(146, 168, 255, 0.16);
  color: #dce7ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 13px;
  flex: 0 0 auto;
}

.dmPendingAudioPreview__name {
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: #9ac8ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dmPendingCard__fileIcon {
  font-size: 22px;
}

.dmPendingCard__meta {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.dmPendingCard__controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.dmPendingCard__name {
  font-size: 13px;
  color: #d9e4ff;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dmPendingCard__info {
  font-size: 12px;
  color: var(--text-muted);
}

.dmPendingCard__qualityToggle {
  min-height: 26px;
  border-radius: 8px;
  border: 1px solid var(--altara-border-strong, rgba(255, 255, 255, 0.12));
  background: color-mix(in srgb, var(--altara-surface-elevated, #202020) 58%, transparent);
  color: var(--altara-text-soft, rgba(242, 240, 236, 0.72));
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 0 10px;
}

.dmPendingCard__qualityToggle:hover,
.dmPendingCard__qualityToggle:focus-visible {
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.11));
  color: var(--altara-accent-strong, #f1dbc0);
}

.dmPendingCard__qualityToggle.is-on {
  border-color: rgba(243, 197, 84, 0.7);
  background: rgba(243, 197, 84, 0.2);
  color: #ffe9b0;
}

.dmPendingCard__spoilerToggle {
  position: absolute;
  top: 6px;
  left: 6px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid var(--altara-border-strong, rgba(255, 255, 255, 0.12));
  background: color-mix(in srgb, var(--altara-surface-elevated, #202020) 72%, transparent);
  color: var(--altara-text-soft, rgba(242, 240, 236, 0.72));
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 0 8px;
}

.dmPendingCard__spoilerToggle:hover,
.dmPendingCard__spoilerToggle:focus-visible {
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.11));
  color: var(--altara-accent-strong, #f1dbc0);
}

.dmPendingCard__spoilerToggle.is-on {
  border-color: rgba(243, 197, 84, 0.7);
  background: rgba(243, 197, 84, 0.2);
  color: #ffe9b0;
}

.dmPendingCard__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid rgba(242, 111, 111, 0.45);
  background: rgba(242, 111, 111, 0.18);
  color: #ffdede;
  cursor: pointer;
  line-height: 1;
}

.dmPendingCard__remove:hover,
.dmPendingCard__remove:focus-visible {
  border-color: rgba(242, 111, 111, 0.82);
  background: rgba(242, 111, 111, 0.28);
}

/* Composer attachment queue: ALTARA premium pre-send preview. */
body:not(.authPage) #dmMain .dmPendingAttachments {
  position: relative;
  margin: 10px 14px 0;
  padding: 16px;
  display: grid;
  gap: 15px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--altara-accent, #e8cfae) 24%, var(--altara-border, rgba(255, 255, 255, 0.1)));
  border-radius: 18px;
  background:
    radial-gradient(520px 220px at 100% 84%, color-mix(in srgb, var(--altara-accent, #e8cfae) 8%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 66%, transparent), color-mix(in srgb, var(--altara-surface, #181818) 92%, transparent)),
    var(--altara-bg, #101010);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

body:not(.authPage) #dmMain .dmPendingAttachments::after {
  content: "ALTARA";
  position: absolute;
  right: 22px;
  bottom: 18px;
  z-index: 0;
  color: color-mix(in srgb, var(--altara-accent, #e8cfae) 42%, var(--altara-text-muted, rgba(242, 240, 236, 0.58)));
  font-family: var(--font-display, var(--font-ui, inherit));
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.22em;
  line-height: 1;
  opacity: 0.22;
  pointer-events: none;
}

body:not(.authPage) #dmMain .dmPendingHead,
body:not(.authPage) #dmMain .dmPendingGrid {
  position: relative;
  z-index: 1;
}

body:not(.authPage) #dmMain .dmPendingHead {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

body:not(.authPage) #dmMain .dmPendingHead__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 20%, var(--altara-accent-soft, rgba(232, 207, 174, 0.11)), transparent 62%),
    color-mix(in srgb, var(--altara-surface-elevated, #202020) 72%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body:not(.authPage) #dmMain .dmPendingHead__icon .altaraIcon {
  --icon-size: 22px;
  --icon-stroke: 1.9;
  width: 22px;
  height: 22px;
  color: var(--altara-accent-strong, #f0d8b8);
}

body:not(.authPage) #dmMain .dmPendingTitle {
  color: var(--altara-accent-strong, #f0d8b8);
  font-family: var(--font-ui, inherit);
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.2;
}

body:not(.authPage) #dmMain .dmPendingSub {
  margin-top: 4px;
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
}

body:not(.authPage) #dmMain .dmPendingHead__actions {
  justify-self: end;
}

body:not(.authPage) #dmMain .dmPendingHead__actions .btn {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  border-radius: 13px;
  background: color-mix(in srgb, var(--altara-surface-elevated, #202020) 64%, transparent);
  color: var(--altara-text, #f2f0ec);
  font-size: 13px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body:not(.authPage) #dmMain .dmPendingHead__actions .btn:hover,
body:not(.authPage) #dmMain .dmPendingHead__actions .btn:focus-visible {
  outline: none;
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  background: var(--altara-hover, rgba(232, 207, 174, 0.1));
  color: var(--altara-accent-strong, #f0d8b8);
}

body:not(.authPage) #dmMain .dmPendingGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 240px));
  align-items: start;
  gap: 10px;
  max-height: min(42vh, 430px);
  overflow: auto;
  padding: 2px 2px 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28)) transparent;
}

body:not(.authPage) #dmMain .dmPendingCard {
  min-width: 0;
  gap: 9px;
  padding: 9px;
  overflow: hidden;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 58%, rgba(255, 255, 255, 0.02)), color-mix(in srgb, var(--altara-surface, #181818) 92%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 24px rgba(0, 0, 0, 0.14);
}

body:not(.authPage) #dmMain .dmPendingCard__preview {
  min-height: 134px;
  aspect-ratio: 1.32 / 1;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  border-radius: 11px;
  background:
    radial-gradient(circle at 34% 16%, var(--altara-accent-soft, rgba(232, 207, 174, 0.11)), transparent 58%),
    color-mix(in srgb, var(--altara-bg, #101010) 78%, #000);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body:not(.authPage) #dmMain .dmPendingCard__preview--audio {
  aspect-ratio: auto;
  min-height: 112px;
  padding: 12px;
}

body:not(.authPage) #dmMain .dmPendingCard__image,
body:not(.authPage) #dmMain .dmPendingCard__video {
  width: 100%;
  height: 100%;
  max-height: none;
  display: block;
  object-fit: cover;
  color: transparent;
}

body:not(.authPage) #dmMain .dmPendingCard__fileIcon {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--altara-accent-border, rgba(232, 207, 174, 0.24));
  border-radius: 16px;
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.08));
  color: var(--altara-accent-strong, #f0d8b8);
}

body:not(.authPage) #dmMain .dmPendingCard__fileIcon .altaraIcon {
  --icon-size: 28px;
  --icon-stroke: 1.75;
}

body:not(.authPage) #dmMain .dmPendingAudioPreview {
  min-width: 0;
  gap: 10px;
}

body:not(.authPage) #dmMain .dmPendingAudioPreview__icon {
  width: 34px;
  height: 34px;
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.24));
  border-radius: 11px;
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.08));
  color: var(--altara-accent-strong, #f0d8b8);
}

body:not(.authPage) #dmMain .dmPendingAudioPreview__icon .altaraIcon {
  --icon-size: 18px;
  --icon-stroke: 1.85;
}

body:not(.authPage) #dmMain .dmPendingAudioPreview__name,
body:not(.authPage) #dmMain .dmPendingCard__name {
  color: var(--altara-text, #f2f0ec);
  font-size: 13.5px;
  font-weight: 850;
  line-height: 1.25;
}

body:not(.authPage) #dmMain .dmPendingCard__info {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
}

body:not(.authPage) #dmMain .dmPendingCard__typePill,
body:not(.authPage) #dmMain .dmPendingCard__qualityToggle,
body:not(.authPage) #dmMain .dmPendingCard__spoilerToggle {
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  border-radius: 999px;
  background: color-mix(in srgb, var(--altara-surface-elevated, #202020) 72%, transparent);
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.68));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body:not(.authPage) #dmMain .dmPendingCard__typePill {
  flex: 0 0 auto;
  padding: 3px 7px;
  color: var(--altara-accent-strong, #f0d8b8);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.03em;
  line-height: 1;
}

body:not(.authPage) #dmMain .dmPendingCard__infoText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.authPage) #dmMain .dmPendingCard__controls {
  gap: 7px;
}

body:not(.authPage) #dmMain .dmPendingCard__qualityToggle {
  min-height: 27px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 800;
}

body:not(.authPage) #dmMain .dmPendingCard__qualityToggle:hover,
body:not(.authPage) #dmMain .dmPendingCard__qualityToggle:focus-visible,
body:not(.authPage) #dmMain .dmPendingCard__spoilerToggle:hover,
body:not(.authPage) #dmMain .dmPendingCard__spoilerToggle:focus-visible {
  outline: none;
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  background: var(--altara-hover, rgba(232, 207, 174, 0.1));
  color: var(--altara-accent-strong, #f0d8b8);
}

body:not(.authPage) #dmMain .dmPendingCard__qualityToggle.is-on,
body:not(.authPage) #dmMain .dmPendingCard__spoilerToggle.is-on,
body:not(.authPage) #dmMain .dmPendingCard__spoilerLabel {
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.3));
  background: color-mix(in srgb, var(--altara-bg, #101010) 72%, var(--altara-accent, #e8cfae) 16%);
  color: var(--altara-accent-strong, #f0d8b8);
}

body:not(.authPage) #dmMain .dmPendingCard__spoilerToggle {
  top: 10px;
  left: 10px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

body:not(.authPage) #dmMain .dmPendingCard__spoilerLabel {
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  backdrop-filter: blur(8px);
}

body:not(.authPage) #dmMain .dmPendingCard__spoilerIcon {
  width: 13px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

body:not(.authPage) #dmMain .dmPendingCard__spoilerIcon .altaraIcon {
  --icon-size: 13px;
  --icon-stroke: 2;
}

body:not(.authPage) #dmMain .dmPendingCard__remove {
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(211, 108, 104, 0.3);
  border-radius: 10px;
  background: color-mix(in srgb, var(--altara-bg, #101010) 56%, rgba(211, 108, 104, 0.18));
  color: color-mix(in srgb, #ffd4d1 82%, var(--altara-text, #f2f0ec));
  font-size: 0;
  line-height: 0;
  backdrop-filter: blur(8px);
}

body:not(.authPage) #dmMain .dmPendingCard__remove .altaraIcon {
  --icon-size: 16px;
  --icon-stroke: 2.2;
}

body:not(.authPage) #dmMain .dmPendingCard__remove:hover,
body:not(.authPage) #dmMain .dmPendingCard__remove:focus-visible {
  outline: none;
  border-color: rgba(211, 108, 104, 0.58);
  background: rgba(211, 108, 104, 0.24);
  color: #fff1ef;
}

body.theme-resolved-light:not(.authPage) #dmMain .dmPendingAttachments {
  background:
    radial-gradient(520px 220px at 100% 84%, color-mix(in srgb, var(--altara-accent, #b88952) 8%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--altara-surface-elevated, #fffaf1) 82%, transparent), var(--altara-surface, #fff7ea));
  box-shadow:
    0 18px 44px rgba(61, 48, 34, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body.theme-resolved-light:not(.authPage) #dmMain .dmPendingCard,
body.theme-resolved-light:not(.authPage) #dmMain .dmPendingCard__preview {
  background: var(--altara-surface-elevated, #fffaf1);
}

body.theme-resolved-light:not(.authPage) #dmMain .dmPendingCard__remove {
  background: color-mix(in srgb, var(--altara-surface-elevated, #fffaf1) 76%, rgba(211, 108, 104, 0.16));
  color: #9f3d3a;
}

@media (max-width: 720px) {
  body:not(.authPage) #dmMain .dmPendingAttachments {
    margin: 8px 10px 0;
    padding: 12px;
    border-radius: 15px;
  }

  body:not(.authPage) #dmMain .dmPendingHead {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  body:not(.authPage) #dmMain .dmPendingHead__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  body:not(.authPage) #dmMain .dmPendingHead__icon .altaraIcon {
    --icon-size: 20px;
  }

  body:not(.authPage) #dmMain .dmPendingHead__actions {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  body:not(.authPage) #dmMain .dmPendingHead__actions .btn {
    width: 100%;
  }

  body:not(.authPage) #dmMain .dmPendingGrid {
    grid-template-columns: minmax(0, 1fr);
    max-height: min(44vh, 390px);
  }
}

.msgMenu {
  position: fixed;
  z-index: 2600;
  min-width: 220px;
  max-width: min(300px, calc(100vw - 16px));
  max-height: min(78vh, 760px);
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    var(--altara-surface, #181818);
  box-shadow:
    0 24px 62px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  padding: 7px;
  display: none;
  scrollbar-width: thin;
  scrollbar-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28)) transparent;
}

.msgMenu.is-open {
  display: block;
}

.msgMenu__item {
  width: 100%;
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--altara-text, #f2f0ec);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  transition:
    border-color 0.14s ease,
    background 0.14s ease,
    color 0.14s ease;
}

.msgMenu__item:hover,
.msgMenu__item:focus-visible {
  outline: none;
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.11));
  color: var(--altara-text, #f2f0ec);
}

.msgMenu__item.is-disabled,
.msgMenu__item:disabled {
  color: var(--altara-text-soft, rgba(242, 240, 236, 0.42));
  opacity: 0.58;
  cursor: not-allowed;
}

.msgMenu__item--danger {
  color: rgba(245, 155, 155, 0.94);
}

.msgMenu__item--danger:hover,
.msgMenu__item--danger:focus-visible {
  border-color: rgba(224, 92, 92, 0.26);
  background: rgba(224, 92, 92, 0.12);
  color: rgba(255, 214, 214, 0.98);
}

.msgMenu__item--check {
  padding-right: 12px;
}

.msgMenu__divider {
  height: 1px;
  margin: 6px 4px;
  background: linear-gradient(90deg, transparent, var(--altara-border, rgba(255, 255, 255, 0.08)), transparent);
}

.msgMenu__itemMain {
  min-width: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.msgMenu__itemHint {
  font-size: 12px;
  font-weight: 500;
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
}

.msgMenu__meta {
  padding: 2px 10px;
  font-size: 11px;
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
  line-height: 1.35;
}

.msgMenu__kbd {
  min-width: 20px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid var(--altara-border-strong, rgba(255, 255, 255, 0.12));
  background: var(--altara-surface-elevated, #202020);
  color: var(--altara-accent-strong, #f0d8b8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
}

.msgMenu__check {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid var(--altara-border-strong, rgba(255, 255, 255, 0.12));
  background: var(--altara-surface-elevated, #202020);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  flex: 0 0 auto;
  position: relative;
}

.msgMenu__check.is-on {
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.11));
  box-shadow:
    inset 0 0 0 4px var(--altara-surface, #181818),
    0 0 0 1px var(--altara-accent-border, rgba(232, 207, 174, 0.28));
}

.msgMenu__check.is-on::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 999px;
  background: var(--altara-accent, #e8cfae);
}

.msgMenu--submenu {
  min-width: 190px;
}

#meStatusMenu.meStatusMenu {
  z-index: 3080;
  min-width: 218px;
  padding: 8px;
  border-radius: 16px;
  border-color: rgba(232, 207, 174, 0.13);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    #101010;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 207, 174, 0.24) transparent;
}

#meStatusMenu .meStatusMenu__meta {
  padding: 3px 8px 8px;
  color: rgba(232, 207, 174, 0.58);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#meStatusMenu .meStatusMenu__item {
  min-height: 40px;
  padding: 0 8px 0 10px;
  border-radius: 11px;
  border-color: transparent;
  color: rgba(242, 240, 236, 0.82);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  transition:
    border-color 0.14s ease,
    background 0.14s ease,
    color 0.14s ease,
    transform 0.14s ease;
}

#meStatusMenu .meStatusMenu__item:hover,
#meStatusMenu .meStatusMenu__item:focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.16);
  background: rgba(232, 207, 174, 0.07);
  color: rgba(242, 240, 236, 0.96);
}

#meStatusMenu .meStatusMenu__item:focus-visible {
  box-shadow: 0 0 0 2px rgba(232, 207, 174, 0.13);
}

#meStatusMenu .meStatusMenu__item.is-active {
  border-color: rgba(232, 207, 174, 0.22);
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.115), rgba(232, 207, 174, 0.055));
  color: rgba(242, 240, 236, 0.98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.meStatusMenu__main {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.meStatusMenu__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meStatusMenu__dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 999px;
  background: rgba(142, 146, 154, 0.86);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.035),
    0 0 12px rgba(142, 146, 154, 0.18);
}

.meStatusMenu__dot[data-status="online"] {
  background: #66d98c;
  box-shadow:
    0 0 0 3px rgba(102, 217, 140, 0.11),
    0 0 12px rgba(102, 217, 140, 0.2);
}

.meStatusMenu__dot[data-status="idle"] {
  background: #d8b861;
  box-shadow:
    0 0 0 3px rgba(216, 184, 97, 0.12),
    0 0 12px rgba(216, 184, 97, 0.18);
}

.meStatusMenu__dot[data-status="dnd"] {
  background: #d97070;
  box-shadow:
    0 0 0 3px rgba(217, 112, 112, 0.12),
    0 0 12px rgba(217, 112, 112, 0.18);
}

.meStatusMenu__dot[data-status="invisible"],
.meStatusMenu__dot[data-status="offline"] {
  background: #8b8f98;
  box-shadow:
    0 0 0 3px rgba(139, 143, 152, 0.11),
    0 0 12px rgba(139, 143, 152, 0.16);
}

.meStatusMenu__indicator {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  border: 1px solid rgba(242, 240, 236, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
}

.meStatusMenu__item.is-active .meStatusMenu__indicator {
  border-color: rgba(232, 207, 174, 0.42);
  background: rgba(232, 207, 174, 0.12);
}

.meStatusMenu__item.is-active .meStatusMenu__indicator::after {
  content: "";
  width: 7px;
  height: 4px;
  margin-top: -1px;
  border-left: 2px solid rgba(232, 207, 174, 0.96);
  border-bottom: 2px solid rgba(232, 207, 174, 0.96);
  transform: rotate(-45deg);
}

.msgMenuRoleMain {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.msgMenuRoleSwatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--role-color, var(--altara-accent, #e8cfae));
  box-shadow: 0 0 0 1px var(--altara-border-strong, rgba(255, 255, 255, 0.12));
}

.msgMenuRoleCheck {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid var(--altara-border-strong, rgba(255, 255, 255, 0.12));
  background: var(--altara-surface-elevated, #202020);
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}

.msgMenuRoleCheck.is-on {
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.11));
  color: var(--altara-accent-strong, #f0d8b8);
}

.serverVoiceMemberMenuVolume {
  padding: 4px 8px 2px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.msgMenu--server-voice {
  overflow: hidden;
  border-color: var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    var(--altara-surface, #181818);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.msgMenu--server-voice .msgMenu__meta {
  color: var(--altara-text, #f2f0ec);
  font-size: 12px;
  font-weight: 700;
}

.msgMenu--server-voice .msgMenu__item:hover,
.msgMenu--server-voice .msgMenu__item:focus-visible {
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.11));
}

.msgMenu--server-voice .msgMenu__divider {
  background: linear-gradient(90deg, transparent, var(--altara-border, rgba(255, 255, 255, 0.08)), transparent);
}

.serverVoiceMemberMenuVolume__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
}

.serverVoiceMemberMenuVolume__value {
  font-weight: 700;
  color: var(--altara-text, #f2f0ec);
}

.serverVoiceMemberMenuVolume__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  background: var(--altara-surface-elevated, #202020);
}

.serverVoiceMemberMenuVolume__slider:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--altara-accent-soft, rgba(232, 207, 174, 0.11));
}

.serverVoiceMemberMenuVolume__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: radial-gradient(circle at 35% 30%, #f5f7fb 0%, #d7dde8 62%, #b7c0cf 100%);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.serverVoiceMemberMenuVolume__slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: radial-gradient(circle at 35% 30%, #f5f7fb 0%, #d7dde8 62%, #b7c0cf 100%);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.serverVoiceMemberMenuVolume__slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(45, 49, 60, 0.96), rgba(28, 31, 39, 0.98));
}

.serverVoiceMemberMenu__state {
  min-width: 36px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(184, 201, 232, 0.42);
  background: rgba(31, 43, 66, 0.78);
  color: rgba(235, 243, 255, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}

.serverVoiceMemberMenu__state.is-on {
  border-color: rgba(149, 237, 175, 0.62);
  background: linear-gradient(180deg, rgba(26, 88, 58, 0.84), rgba(20, 72, 48, 0.9));
  color: #cbffe0;
}

.serverVoiceMemberMenu__state.is-off {
  border-color: rgba(245, 176, 176, 0.55);
  background: linear-gradient(180deg, rgba(90, 35, 38, 0.82), rgba(69, 27, 31, 0.9));
  color: #ffd6d6;
}

.callAudioMenu {
  position: fixed;
  z-index: 6206;
  width: min(280px, calc(100vw - 16px));
  max-height: min(78vh, 560px);
  overflow-y: auto;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: rgba(12, 15, 22, 0.98);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.45);
  padding: 10px;
  display: none;
  pointer-events: auto;
}

.callAudioMenu.is-open {
  display: block;
}

.callAudioMenu__title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-main);
  margin-bottom: 8px;
}

.callAudioMenu__action {
  width: 100%;
  border-radius: 9px;
  border: 1px solid var(--stroke);
  background: rgba(21, 28, 40, 0.88);
  color: var(--text-main);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  padding: 9px 10px;
  margin-bottom: 8px;
  text-align: left;
  cursor: pointer;
}

.callAudioMenu__action:hover,
.callAudioMenu__action:focus-visible {
  outline: none;
  border-color: rgba(158, 196, 255, 0.46);
  background: rgba(33, 44, 64, 0.92);
}

.callAudioMenu__action[disabled] {
  cursor: default;
  opacity: 0.52;
}

.callAudioMenu__action:last-child {
  margin-bottom: 0;
}

.callAudioMenu__check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-main);
  font-size: 12px;
  margin-bottom: 6px;
}

.callAudioMenu__check input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-strong);
}

.callAudioMenu__section + .callAudioMenu__section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--stroke);
}

.callAudioMenu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-main);
  font-size: 12px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.callAudioMenu__value {
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

.callAudioMenu__slider {
  width: 100%;
  accent-color: var(--accent-strong);
}

.callAudioMenu__slider[disabled] {
  opacity: 0.42;
}

.callShareMenu {
  position: fixed;
  z-index: 6208;
  width: min(260px, calc(100vw - 16px));
  border: 1px solid rgba(173, 199, 255, 0.14);
  border-radius: 10px;
  background: rgba(16, 20, 29, 0.99);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
  padding: 8px;
  display: none;
  pointer-events: auto;
}

.callShareMenu.is-open {
  display: block;
}

.callShareMenu__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
  margin-bottom: 2px;
}

.callShareMenu__item:last-child {
  margin-bottom: 0;
}

.callShareMenu__item:hover,
.callShareMenu__item:focus-visible {
  outline: none;
  border-color: rgba(154, 196, 255, 0.28);
  background: rgba(57, 64, 80, 0.82);
}

.callShareMenu__item--danger {
  color: #ff919e;
  border-color: rgba(255, 130, 150, 0.18);
  background: rgba(64, 22, 34, 0.66);
}

.callShareMenu__item--danger:hover,
.callShareMenu__item--danger:focus-visible {
  border-color: rgba(255, 130, 150, 0.42);
  background: rgba(83, 25, 40, 0.8);
}

.callShareMenu__info {
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 4px 6px;
  text-align: left;
  letter-spacing: 0.01em;
}

.callShareMenu__sectionLabel {
  padding: 0 4px 6px;
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.callShareMenu__chipRow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.callShareMenu__chip {
  min-width: 0;
  height: 34px;
  padding: 0 8px;
  border: 1px solid rgba(200, 232, 255, 0.14);
  border-radius: 10px;
  background: rgba(18, 25, 36, 0.88);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
}

.callShareMenu__chip:hover,
.callShareMenu__chip:focus-visible {
  outline: none;
  border-color: rgba(154, 196, 255, 0.54);
  background: rgba(42, 58, 82, 0.9);
  color: var(--text-main);
}

.callShareMenu__chip.is-active {
  border-color: rgba(94, 235, 166, 0.6);
  background: rgba(20, 56, 43, 0.92);
  color: #ecfff4;
  box-shadow: inset 0 0 0 1px rgba(94, 235, 166, 0.24);
}

.callShareMenu__itemIcon {
  display: inline-block;
  width: 16px;
  text-align: center;
  margin-right: 2px;
  font-style: normal;
  opacity: 0.78;
}

.callShareMenu__audioState {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.62;
}

.callShareMenu__item--audio {
  color: var(--text-main);
}

.callShareMenu__item--audio.is-off {
  color: var(--text-soft);
  border-color: rgba(200, 232, 255, 0.08);
}

.callShareMenu__item--audio.is-off .callShareMenu__audioState {
  opacity: 0.4;
}

.callShareMenu__item--submenu {
  padding-right: 8px;
}

.callShareMenu__submenuArrow {
  margin-left: 6px;
  font-size: 14px;
  line-height: 1;
  opacity: 0.72;
}

.callShareMenu__submenuAnchor {
  position: relative;
  margin-bottom: 2px;
}

.callShareMenu__submenuAnchor .callShareMenu__item {
  margin-bottom: 0;
}

.callShareMenu__submenuAnchor.is-open > .callShareMenu__item,
.callShareMenu__submenuAnchor:hover > .callShareMenu__item,
.callShareMenu__submenuAnchor:focus-within > .callShareMenu__item {
  border-color: rgba(154, 196, 255, 0.28);
  background: rgba(57, 64, 80, 0.82);
}

.callShareMenu__submenu {
  position: absolute;
  top: -6px;
  left: calc(100% + 8px);
  min-width: 212px;
  border: 1px solid rgba(173, 199, 255, 0.14);
  border-radius: 10px;
  background: rgba(16, 20, 29, 0.99);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 1;
}

.callShareMenu__submenuAnchor.is-open > .callShareMenu__submenu,
.callShareMenu__submenuAnchor:hover > .callShareMenu__submenu,
.callShareMenu__submenuAnchor:focus-within > .callShareMenu__submenu {
  display: flex;
}

.callShareMenu__submenuAnchor.is-flip-left > .callShareMenu__submenu {
  left: auto;
  right: calc(100% + 8px);
}

.callShareMenu__qualityOption {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  margin: 0;
}

.callShareMenu__qualityOption:hover,
.callShareMenu__qualityOption:focus-visible {
  outline: none;
  border-color: rgba(154, 196, 255, 0.28);
  background: rgba(57, 64, 80, 0.82);
  color: var(--text-main);
}

.callShareMenu__qualityOption.is-active {
  border-color: rgba(94, 235, 166, 0.6);
  background: rgba(20, 56, 43, 0.85);
  color: #ecfff4;
  box-shadow: inset 0 0 0 1px rgba(94, 235, 166, 0.24);
}

.msg__text {
  width: 100%;
  max-width: 100%;
  color: #e7eaf8;
  font-size: 15px;
  line-height: 1.42;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.msg__text--plain {
  white-space: pre-wrap;
}

.msg__text--plain > span {
  white-space: pre-wrap;
}

.msg__emojiFlag {
  display: inline-block;
  width: 1.18em;
  height: 1.18em;
  object-fit: contain;
  vertical-align: -0.16em;
  margin: 0 0.01em;
}

.msg__text--emojiOnly {
  line-height: 1.08;
}

.msg__text--emojiOnly > span {
  display: inline-flex;
  align-items: center;
  gap: 0.1em;
  font-size: 2.05em;
  line-height: 1;
}

.msg__text--emojiOnly.msg__text--emojiOnly-2 > span {
  font-size: 1.82em;
}

.msg__text--emojiOnly.msg__text--emojiOnly-3 > span,
.msg__text--emojiOnly.msg__text--emojiOnly-4 > span {
  font-size: 1.58em;
}

.msg__text--emojiOnly .msg__emojiFlag {
  width: 1em;
  height: 1em;
  vertical-align: -0.08em;
  margin: 0;
}

.msg__link {
  color: #96b6ff;
  text-decoration: underline;
  text-decoration-color: rgba(150, 182, 255, 0.4);
  text-underline-offset: 2px;
}

.msg__link:hover {
  color: #bdd0ff;
  text-decoration-color: rgba(189, 208, 255, 0.72);
}

.msg__link--invite {
  color: #9bc6ff;
}

/* ---- DM server invite card ---- */
.msgInviteCard,
.dmServerInviteCard {
  position: relative;
  display: block;
  width: min(430px, 100%);
  max-width: 100%;
  margin: 4px 0 2px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    color-mix(in srgb, var(--altara-surface, #181818) 90%, #000 10%);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.018),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  white-space: normal;
  overflow: hidden;
  isolation: isolate;
}

.dmServerInviteHero {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-bottom: 0;
  background:
    linear-gradient(90deg, rgba(12, 12, 12, 0.98) 0%, rgba(20, 20, 20, 0.86) 48%, rgba(16, 16, 16, 0.7) 100%),
    radial-gradient(circle at 18% 8%, var(--altara-accent-soft, rgba(232, 207, 174, 0.13)), transparent 40%),
    linear-gradient(135deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 84%, var(--altara-accent, #e8cfae) 16%), var(--altara-bg, #101010));
}

.dmServerInviteHero--media {
  height: auto;
}

.dmServerInviteHero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.88) 0%, rgba(12, 12, 12, 0.5) 46%, rgba(12, 12, 12, 0.18) 100%),
    linear-gradient(180deg, rgba(16, 16, 16, 0.06), rgba(16, 16, 16, 0.68)),
    radial-gradient(circle at 82% 10%, rgba(255, 255, 255, 0.07), transparent 28%);
  pointer-events: none;
}

.dmServerInviteHeroImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.02);
  opacity: 0.42;
}

.msgInviteCard__left,
.dmServerInviteHeader {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 12px 0;
}

.dmServerInviteHeaderText {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.msgInviteCard__iconWrap,
.dmServerInviteIcon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at 30% 18%, var(--altara-accent-soft, rgba(232, 207, 174, 0.11)), transparent 58%),
    var(--altara-surface-elevated, #202020);
  color: var(--altara-accent-strong, #f1dbc0);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.34),
    0 0 0 1px var(--altara-border, rgba(255, 255, 255, 0.08));
}

.msgInviteCard__iconWrap--loading {
  animation: msgInviteIconPulse 1.4s ease-in-out infinite;
}

@keyframes msgInviteIconPulse {
  0%, 100% { opacity: 0.58; }
  50% { opacity: 0.94; }
}

.msgInviteCard__icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.msgInviteCard__iconFallback {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 850;
  line-height: 1;
  color: currentColor;
}

.msgInviteCard__label,
.dmServerInviteLabel {
  min-width: 0;
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.56));
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.1em;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msgInviteCard__name,
.dmServerInviteName {
  min-width: 0;
  color: var(--altara-text, #f2f0ec);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.18;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msgInviteCard__info,
.dmServerInviteMeta {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 6px 12px 0;
}

.msgInviteCard__members,
.dmServerInviteMetaLine {
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.msgInviteCard__members:empty,
.dmServerInviteMetaLine:empty {
  display: none;
}

.msgInviteCard__membersDot,
.dmServerInviteMetaDot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--ok, #49d17f);
  box-shadow: 0 0 0 3px rgba(73, 209, 127, 0.1);
}

.dmServerInviteMetaText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msgInviteCard__footer,
.dmServerInviteFooter {
  position: relative;
  z-index: 1;
  padding: 10px 12px 12px;
}

.msgInviteCard__joinBtn,
.dmServerInviteAction {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--altara-accent, #e8cfae) 58%, #ffffff 8%);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-accent, #e8cfae) 92%, #ffffff 8%), color-mix(in srgb, var(--altara-accent, #e8cfae) 82%, #8d6d48 18%));
  color: #2a2017;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 9px 18px rgba(0, 0, 0, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  cursor: pointer;
}

.msgInviteCard__joinBtn:hover,
.msgInviteCard__joinBtn:focus-visible,
.dmServerInviteAction:hover,
.dmServerInviteAction:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--altara-accent, #e8cfae) 72%, #ffffff 12%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-accent, #e8cfae) 98%, #ffffff 12%), color-mix(in srgb, var(--altara-accent, #e8cfae) 88%, #8d6d48 12%));
  color: #211812;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 11px 22px rgba(0, 0, 0, 0.26);
}

body.motion-ready .msgInviteCard,
body.motion-ready .dmServerInviteCard {
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-base) ease, transform var(--motion-fast) var(--motion-curve-snappy);
}

body.motion-ready .msgInviteCard:hover,
body.motion-ready .dmServerInviteCard:hover {
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.4),
    0 0 0 1px color-mix(in srgb, var(--altara-accent, #e8cfae) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.motion-ready .msgInviteCard__joinBtn,
body.motion-ready .dmServerInviteAction {
  transition:
    background var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    transform var(--motion-fast) var(--motion-curve-snappy);
}

body.motion-ready .msgInviteCard__joinBtn:hover,
body.motion-ready .dmServerInviteAction:hover {
  transform: translateY(-1px);
}

body.motion-ready .msgInviteCard__joinBtn:active,
body.motion-ready .dmServerInviteAction:active {
  transform: scale(0.98);
  transition-duration: 55ms;
}

body.motion-ready .msgInviteCard__iconWrap,
body.motion-ready .dmServerInviteIcon {
  transition: box-shadow var(--motion-fast) ease, transform var(--motion-base) var(--motion-curve-snappy);
}

body.motion-ready .msgInviteCard:hover .msgInviteCard__iconWrap,
body.motion-ready .dmServerInviteCard:hover .dmServerInviteIcon {
  transform: scale(1.03) translateY(-1px);
  box-shadow:
    0 15px 30px rgba(0, 0, 0, 0.4),
    0 0 0 3px color-mix(in srgb, var(--altara-accent, #e8cfae) 12%, transparent);
}

.msg__codeInline {
  display: inline-block;
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(10, 16, 30, 0.78);
  border: 1px solid rgba(170, 196, 255, 0.22);
  color: #dce7ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
}

.msg__spoilerText {
  display: inline-block;
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(10, 16, 30, 0.85);
  color: transparent;
  text-shadow: none;
  transition: color 0.14s ease, background-color 0.14s ease;
}

.msg__spoilerText:hover,
.msg__spoilerText:focus-visible {
  color: #dce7ff;
  background: rgba(34, 44, 70, 0.84);
}

.msg__sizeText {
  display: inline;
  line-height: 1.18;
}

.msg__colorText {
  font-weight: 600;
}

.dm__composer,
.dmComposer {
  border-top: 1px solid rgba(200, 232, 255, 0.1);
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  gap: 12px;
}

.dmComposerTools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.dmInputWrap {
  --dmComposerInputHeight: 46px;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--dmComposerInputHeight);
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-md);
  background: var(--altara-input, rgba(0, 0, 0, 0.3));
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.dmInputWrap:focus-within {
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--altara-accent, #e8cfae) 10%, transparent),
    inset 0 1px 3px rgba(0, 0, 0, 0.18);
  background: color-mix(in srgb, var(--altara-input, #121212) 78%, var(--altara-surface-elevated, #202020));
}

.dmInputWrap #dmInput {
  position: relative;
  z-index: 2;
  width: 100%;
  height: var(--dmComposerInputHeight);
  min-height: 0 !important;
  padding: 11px 14px;
  border: 0 !important;
  border-radius: inherit;
  background: transparent !important;
  color: var(--text-main);
  caret-color: var(--text-main);
  box-shadow: none !important;
  outline: none !important;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.dmInputWrap #dmInput::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.dmComposer .btn,
.dm__composer .btn {
  height: 40px;
}

.dmComposer .btn.ghost,
.dm__composer .btn.ghost,
.dmProfilePanel__footer .btn.ghost {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.025);
}

.dmComposer .btn.ghost:hover,
.dm__composer .btn.ghost:hover,
.dmProfilePanel__footer .btn.ghost:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.055);
}

.dmInputWrap #dmInput:focus {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dmInputWrap.has-rich-preview[data-rich-ready="1"] #dmInput {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 0 transparent;
  text-shadow: none !important;
  text-decoration-color: transparent !important;
  caret-color: var(--text-main);
}

.dmInputWrap.has-rich-preview[data-rich-ready="1"] #dmInput::selection {
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.dmInputWrap.has-rich-preview[data-rich-ready="1"] #dmInput:focus::selection {
  background: color-mix(in srgb, var(--altara-accent, #e8cfae) 22%, transparent);
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.dmInputWrap.has-rich-preview[data-rich-ready="1"] #dmInput::placeholder {
  color: transparent;
}

.dmInputRichMirror {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  padding: 0;
  white-space: pre-wrap;
  overflow-x: hidden;
  overflow-y: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: var(--text-main);
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.dmInputWrap.has-rich-preview[data-rich-ready="1"] .dmInputRichMirror {
  opacity: 1;
}

.dmInputRichMirror > span {
  display: block;
  min-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.dmInputRichMirror .msg__link {
  color: #96b6ff;
  text-decoration: none;
}

.dmInputRichMirror .dmMarkdownMarker {
  color: rgba(232, 238, 250, 0.66);
  font-weight: inherit;
  font-style: normal;
  text-decoration: none;
}

/* Keep inline preview aligned with caret metrics from the real input. */
.dmInputRichMirror strong,
.dmInputRichMirror b {
  font-weight: inherit;
  -webkit-text-stroke: 0.012em currentColor;
  text-shadow: none;
}

.dmInputRichMirror em,
.dmInputRichMirror i {
  font-style: italic;
}

.dmInputRichMirror .msg__colorText {
  font-weight: inherit;
}

.dmInputRichMirror s {
  text-decoration: line-through;
}

.dmInputRichMirror .msg__codeInline {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(112, 142, 255, 0.15);
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}

.dmInputRichMirror .msg__spoilerText {
  display: inline;
  padding: 0;
  border-radius: 0;
}

.dmInputRichMirror .msg__sizeText {
  line-height: 1.12;
}

.dmFormatToolbar {
  position: fixed;
  z-index: 2100;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--altara-surface-elevated, #202020) 84%, var(--altara-bg, #101010));
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dmFormatToolbar__btn {
  min-width: 30px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--altara-text-soft, rgba(242, 240, 236, 0.72));
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.dmFormatToolbar__btn:hover,
.dmFormatToolbar__btn:focus-visible {
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.11));
  color: var(--altara-accent-strong, #f1dbc0);
  outline: none;
}

.dmFormatToolbar__btn--color {
  font-weight: 900;
  letter-spacing: -0.02em;
}

.dmFormatToolbar__sizeSlider {
  width: 92px;
  height: 26px;
  accent-color: var(--altara-accent, #e8cfae);
  cursor: ew-resize;
}

.dmAttachBtn {
  min-width: 40px;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dmPinsList {
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dmPinsPanel,
.dmProfilePanel {
  width: clamp(300px, 31vw, 430px);
  min-width: 280px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: linear-gradient(170deg, var(--surface-0) 0%, var(--surface-1) 42%, var(--surface-2) 100%);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-soft);
}

.dmPinsPanel__top,
.dmProfilePanel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(200, 232, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}

.dmPinsPanel__title,
.dmProfilePanel__title {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-main);
}

#btnDmPinsClose,
#btnDmProfileClose {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  display: none;
}

.dmPinsPanel.hidden {
  display: none !important;
}

.dmProfilePanel.hidden {
  display: none !important;
}

.dmProfilePanel__banner {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--profile-banner-ratio);
  height: auto;
  background:
    radial-gradient(320px 130px at 8% -6%, var(--dm-profile-banner-glow, rgba(126, 151, 242, 0.26)), transparent 68%),
    linear-gradient(145deg, var(--dm-profile-banner-start, #344976), var(--dm-profile-banner-end, #181f32) 78%);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(200, 232, 255, 0.18);
  box-shadow: inset 0 -28px 36px rgba(8, 11, 20, 0.54);
}

.dmProfilePanel__banner.has-image {
  box-shadow: none;
}

.dmProfilePanel__body {
  min-height: 0;
  overflow: auto;
  padding: 10px 12px 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0));
}

.dmProfileAvatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgba(15, 20, 30, 0.98);
  margin: -42px 0 0 12px;
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  place-items: center;
  font-size: 15px;
  color: #f1f5ff;
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  padding: 0;
}

.dmProfileAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dmProfileAvatar:hover,
.dmProfileAvatar:focus-visible {
  border-color: rgba(167, 186, 255, 0.92);
  box-shadow: 0 0 0 3px rgba(136, 162, 255, 0.24);
}

.dmProfileName {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
  color: var(--text-main);
  font-weight: 800;
}

.dmProfileName.is-nickname {
  letter-spacing: 0.01em;
}

.dmProfileHandle {
  margin-top: 2px;
  font-size: 14px;
  color: var(--text-soft);
}

.dmProfileHandle.is-nickname {
  font-size: 13px;
  color: rgba(214, 221, 244, 0.76);
}

.dmTitle.is-clickable,
.dmProfileName.is-clickable,
.dmProfileHandle.is-clickable {
  cursor: pointer;
}

.dmTitle.is-clickable:hover,
.dmTitle.is-clickable:focus-visible,
.dmProfileName.is-clickable:hover,
.dmProfileName.is-clickable:focus-visible,
.dmProfileHandle.is-clickable:hover,
.dmProfileHandle.is-clickable:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dmProfilePresence {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--surface-row);
}

.dmProfileStatusDot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #8f96aa;
  box-shadow: 0 0 0 2px rgba(11, 15, 24, 0.75);
}

.dmProfileStatusDot[data-status="online"] { background: #33d17a; }
.dmProfileStatusDot[data-status="idle"] { background: #f4c145; }
.dmProfileStatusDot[data-status="dnd"] { background: #f96a70; }
.dmProfileStatusDot[data-status="offline"] { background: #78809b; }

.dmProfileStatusText {
  font-size: 12px;
  color: var(--text-main);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.dmProfileSection {
  margin-top: 12px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: var(--surface-row);
  padding: 10px 12px;
}

.dmProfileSection__title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  font-weight: 700;
}

.dmProfileBio {
  margin-top: 7px;
  color: var(--text-main);
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.dmProfileWidgetsPreview {
  margin-top: 12px;
}

.dmProfileWidgetsPreview.hidden {
  display: none !important;
}

.dmProfileWidgetsPreviewShell {
  display: grid;
  gap: 8px;
}

.dmProfileWidgetsPreviewTitle {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  font-weight: 700;
}

.dmProfileWidgetPreviewList {
  display: grid;
  gap: 8px;
}

.dmProfileWidgetPreviewCard {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: var(--surface-row);
  color: var(--text-main);
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px;
  text-align: left;
  cursor: pointer;
}

.dmProfileWidgetPreviewCard:hover,
.dmProfileWidgetPreviewCard:focus-visible {
  border-color: rgba(162, 205, 255, 0.42);
  background: rgba(132, 182, 255, 0.12);
}

.dmProfileWidgetPreviewMedia {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(114, 148, 255, 0.22), rgba(14, 19, 31, 0.9));
  display: grid;
  place-items: center;
  color: rgba(239, 245, 255, 0.9);
  font-weight: 800;
}

.dmProfileWidgetPreviewMedia img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.dmProfileWidgetPreviewBody {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dmProfileWidgetPreviewBadge {
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  border: 1px solid rgba(200, 232, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(231, 238, 252, 0.9);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 4px 7px;
  text-transform: uppercase;
}

.dmProfileWidgetPreviewName {
  min-width: 0;
  color: #f3f7ff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dmProfileWidgetPreviewMeta,
.dmProfileWidgetsPreviewLoading {
  min-width: 0;
  color: rgba(219, 226, 245, 0.72);
  font-size: 12px;
  line-height: 1.35;
}

.dmProfilePanel__footer {
  margin-top: auto;
  border-top: 1px solid rgba(200, 232, 255, 0.1);
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
}

.dmProfilePanel.is-group-members .dmProfilePanel__body {
  padding-top: 12px;
}

.dmGroupMembersBody {
  display: none;
}

.dmGroupMembersList {
  display: grid;
  gap: 8px;
}

.dmGroupMemberRow {
  width: 100%;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: var(--surface-row);
  color: inherit;
  text-align: left;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
}

.dmGroupMemberRow:hover,
.dmGroupMemberRow:focus-visible {
  border-color: rgba(121, 131, 245, 0.65);
  background: rgba(88, 101, 242, 0.12);
}

.dmGroupMemberRow.is-me {
  cursor: default;
}

.dmGroupMemberRow.is-me:hover,
.dmGroupMemberRow.is-me:focus-visible {
  border-color: var(--stroke);
  background: var(--surface-row);
}

.dmGroupMemberRow__avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
}

.dmGroupMemberRow__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dmGroupMemberRow__avatar .statusDot {
  position: absolute !important;
  right: 2px !important;
  bottom: 2px !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(18, 23, 34, 0.92);
  box-shadow: none;
  z-index: 5;
}

.dmGroupMemberRow__text {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.dmGroupMemberRow__name {
  font-size: 15px;
  color: var(--text-main);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dmGroupMemberRow__handle {
  font-size: 12px;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dmPinRow {
  width: 100%;
  border: 1px solid rgba(200, 232, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  color: inherit;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
  display: grid;
  gap: 5px;
}

.dmPinRow:hover,
.dmPinRow:focus-visible {
  border-color: rgba(121, 131, 245, 0.65);
  background: rgba(88, 101, 242, 0.12);
}

.dmPinRow__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-soft);
}

.dmPinRow__name {
  color: var(--text-main);
  font-weight: 700;
}

.dmPinRow__preview {
  min-width: 0;
}

.dmPinPreview {
  max-width: 100%;
}

.dmPinPreview--text {
  color: #e7eaf8;
  font-size: 14px;
  line-height: 1.35;
  word-break: break-word;
  white-space: pre-wrap;
}

.dmPinPreview--media {
  position: relative;
  width: fit-content;
  max-width: min(330px, 100%);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(200, 232, 255, 0.2);
  background: rgba(0, 0, 0, 0.35);
}

.dmPinPreviewMedia {
  display: block;
  width: 100%;
  max-height: 210px;
  object-fit: contain;
  pointer-events: none;
}

.dmPinPreviewMedia--video {
  background: #000;
}

.dmPinPreview--spoiler .dmPinPreviewMedia {
  filter: blur(13px) brightness(0.62);
  transform: scale(1.02);
}

.dmPinPreview__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(200, 232, 255, 0.28);
  background: rgba(7, 10, 18, 0.72);
  color: #eaf1ff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.dmPinPreview--file {
  border: 1px solid rgba(200, 232, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dmPinPreview__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(200, 232, 255, 0.24);
  background: rgba(255, 255, 255, 0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.dmPinPreview__fileText {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.dmPinPreview__fileName {
  color: #e7eaf8;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dmPinPreview__fileMeta {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.25;
}

@media (max-width: 1240px) {
  .dmPinsPanel,
  .dmProfilePanel {
    width: clamp(270px, 32vw, 340px);
    min-width: 250px;
  }
}

@media (max-width: 980px) {
  .dmMainBody {
    padding: 8px 8px 0;
  }

  .dmMainBody.is-server-layout {
    gap: 8px;
  }

  .serverChannelsPanel {
    width: 210px;
    min-width: 180px;
    max-width: 220px;
  }

  .dmJumpLatest {
    right: 10px;
    bottom: 10px;
  }

  .dmPinsPanel,
  .dmProfilePanel {
    position: absolute;
    right: 8px;
    top: 8px;
    bottom: 8px;
    width: min(88vw, 350px);
    min-width: 0;
    z-index: 35;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(200, 232, 255, 0.18);
  }

  #btnDmPinsClose,
  #btnDmProfileClose {
    display: inline-flex;
  }
}

.userCardCard {
  width: min(900px, calc(100vw - 16px));
  max-width: min(900px, calc(100vw - 16px));
  overflow: hidden;
}

#userCardModal {
  z-index: 1650;
  padding: 0;
  background: transparent !important;
  backdrop-filter: none !important;
}

#userCardModal.userCardModal--overlay {
  padding: 18px;
  background: rgba(3, 5, 9, 0.68) !important;
  backdrop-filter: blur(7px) !important;
}

#userCardModal .userCardCard {
  position: fixed;
  margin: 0;
  width: min(900px, calc(100vw - 16px));
  max-width: min(900px, calc(100vw - 16px));
}

#userCardModal:not(.userCardModal--preview) .userCardCard {
  height: min(680px, calc(100vh - 24px));
  max-height: calc(100vh - 16px);
  overflow: hidden;
}

.userCardCloseBtn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(18, 24, 34, 0.72);
  border-color: rgba(200, 232, 255, 0.16);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

.userCardCloseBtn:hover,
.userCardCloseBtn:focus-visible {
  background: rgba(28, 36, 48, 0.92);
}

#userCardModal.userCardModal--overlay .userCardCard {
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(200, 232, 255, 0.1);
}

#userCardModal.userCardModal--preview .userCardCard {
  width: min(320px, calc(100vw - 16px));
  max-width: min(320px, calc(100vw - 16px));
}

#userCardModal.userCardModal--preview .userCardCloseBtn {
  top: 10px;
  right: 10px;
}

.userCardSurface {
  display: grid;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  min-height: min(680px, calc(100vh - 24px));
  min-width: 0;
  background:
    radial-gradient(circle at top left, rgba(105, 174, 255, 0.14), transparent 46%),
    linear-gradient(160deg, rgba(7, 12, 19, 0.98), rgba(3, 7, 13, 1));
}

#userCardModal:not(.userCardModal--preview) .userCardSurface {
  height: 100%;
  min-height: 0;
}

.userCardOverview {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(14, 20, 30, 0.96), rgba(8, 12, 19, 0.98)),
    radial-gradient(circle at top, rgba(120, 167, 255, 0.1), transparent 42%);
  border-right: 1px solid rgba(200, 232, 255, 0.1);
}

#userCardModal.userCardModal--preview .userCardSurface {
  grid-template-columns: minmax(0, 1fr);
  min-height: auto;
}

#userCardModal.userCardModal--preview .userCardOverview {
  border-right: 0;
}

.userCardBanner {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--profile-banner-ratio);
  height: auto;
  background: linear-gradient(140deg, rgba(150, 160, 248, 0.45), rgba(15, 20, 30, 0.88));
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 10px;
}

.userCardBody {
  padding: 0 18px 18px;
  display: grid;
  gap: 16px;
  min-height: 0;
}

.userCardIdentity {
  display: grid;
  gap: 14px;
  margin-top: -50px;
}

.userCardIdentityMeta {
  display: grid;
  gap: 8px;
}

.userCardBadgeRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.userCardAvatar {
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 50%;
  overflow: visible;
  border: 4px solid rgba(13, 18, 27, 0.96);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
  background: linear-gradient(160deg, rgba(105, 174, 255, 0.2), rgba(6, 13, 20, 0.52));
}

.userCardAvatarMedia {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.userCardAvatar img,
.userCardAvatarMedia img,
.addFriendPreviewAvatarMedia img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.userCardAvatarStatusDot,
.addFriendPreviewAvatarStatusDot {
  --status-dot-size: 16px;
  --status-dot-inset: 3px;
}

.userCardName {
  font-size: 33px;
  line-height: 1.08;
  font-weight: 800;
  color: #f2f5ff;
  word-break: break-word;
}

.userCardName.is-nickname {
  letter-spacing: 0.01em;
}

.userCardHandle {
  color: var(--text-soft);
  font-size: 15px;
}

.userCardHandle.is-nickname {
  font-size: 14px;
  color: rgba(214, 221, 244, 0.76);
}

.userCardPronouns {
  color: rgba(210, 219, 240, 0.78);
  font-size: 13px;
  letter-spacing: 0.01em;
}

.userCardStatus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-soft);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.userCardRelation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(157, 203, 255, 0.22);
  background: rgba(105, 174, 255, 0.08);
  color: #dfe9ff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.userCardRelation[data-tone="best"] {
  border-color: rgba(255, 210, 96, 0.32);
  background: rgba(255, 210, 96, 0.1);
  color: #ffe6a5;
}

.userCardRelation[data-tone="pending"] {
  border-color: rgba(255, 175, 118, 0.28);
  background: rgba(255, 175, 118, 0.08);
  color: #ffd3b1;
}

.userCardBio {
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  min-height: 72px;
  padding: 12px 13px;
  color: #e7eaf8;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.userCardSection {
  display: grid;
  gap: 10px;
}

.userCardSection__title {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(205, 214, 236, 0.58);
}

.userCardFacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.userCardFact {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(200, 232, 255, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
  display: grid;
  gap: 4px;
}

.userCardFact__label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(205, 214, 236, 0.52);
}

.userCardFact__value {
  min-width: 0;
  color: #eef3ff;
  font-size: 14px;
  font-weight: 600;
  word-break: break-word;
}

.userCardFact__value--mono {
  font-family: var(--font-mono, "Consolas", monospace);
  font-size: 12px;
}

.userCardActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.userCardActions .btn {
  min-width: 118px;
}

#userCardModal:not(.userCardModal--preview) #btnUserCardOpenProfile {
  display: none;
}

.userCardPanelsArea {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

#userCardModal.userCardModal--preview .userCardPanelsArea {
  display: none;
}

.userCardTabs {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  padding: 18px 18px 0;
  border-bottom: 1px solid rgba(200, 232, 255, 0.1);
}

.userCardTab {
  position: relative;
  border: 0;
  background: transparent;
  color: rgba(214, 221, 244, 0.72);
  font-weight: 700;
  font-size: 14px;
  padding: 0 0 14px;
  cursor: pointer;
}

.userCardTab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: transparent;
  transition: background 0.18s ease;
}

.userCardTab:hover {
  color: #f1f5ff;
}

.userCardTab.is-active {
  color: #ffffff;
}

.userCardTab.is-active::after {
  background: linear-gradient(90deg, rgba(132, 182, 255, 0.98), rgba(255, 255, 255, 0.94));
}

.userCardPanels {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 18px;
  scrollbar-gutter: stable;
}

.userCardPanel {
  display: none;
  gap: 16px;
  min-height: 0;
}

.userCardPanel.is-active {
  display: grid;
}

.userCardPanelIntro {
  display: grid;
  gap: 6px;
}

.userCardPanelEyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(205, 214, 236, 0.52);
}

.userCardPanelTitle {
  font-size: 27px;
  line-height: 1.08;
  font-weight: 800;
  color: #f3f7ff;
}

.userCardPanelText {
  color: rgba(219, 226, 245, 0.76);
  font-size: 14px;
  line-height: 1.45;
}

.userCardTimeline {
  display: grid;
  gap: 10px;
}

.userCardTimelineItem {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(200, 232, 255, 0.1);
  background: rgba(255, 255, 255, 0.028);
}

.userCardTimelineDot {
  width: 9px;
  height: 9px;
  margin-top: 7px;
  border-radius: 50%;
  background: linear-gradient(180deg, #8bc3ff, #4f78ff);
  box-shadow: 0 0 0 5px rgba(139, 195, 255, 0.1);
}

.userCardTimelineMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 5px;
  font-size: 12px;
  color: rgba(205, 214, 236, 0.58);
}

.userCardTimelineKind {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #e8efff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
}

.userCardTimelineText {
  color: #eef3ff;
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
}

.userCardMediaCard,
.userCardSharedCard,
.userCardEmptyState {
  border-radius: 18px;
  border: 1px solid rgba(200, 232, 255, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.02));
}

.userCardMediaCard {
  display: grid;
  gap: 14px;
  padding: 14px;
  color: inherit;
  text-decoration: none;
}

.userCardMediaPreview {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 16 / 10;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(200, 232, 255, 0.08);
}

.userCardMediaPreview img,
.userCardMediaPreview video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.userCardMediaFallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(225, 233, 248, 0.78);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background:
    radial-gradient(circle at top, rgba(132, 182, 255, 0.18), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
}

.userCardMediaMeta {
  display: grid;
  gap: 8px;
}

.userCardMediaTitle {
  font-size: 18px;
  font-weight: 700;
  color: #f3f7ff;
}

.userCardMediaSubtitle {
  color: rgba(219, 226, 245, 0.72);
  font-size: 13px;
}

.userCardChipRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.userCardChip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(200, 232, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: #e7eefc;
  font-size: 12px;
}

.userCardSharedStack {
  display: grid;
  gap: 12px;
}

.userCardSharedCard {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.userCardSharedTitle {
  font-size: 16px;
  font-weight: 700;
  color: #f3f7ff;
}

.userCardSharedText {
  color: rgba(219, 226, 245, 0.76);
  font-size: 14px;
  line-height: 1.45;
}

.userCardServerList {
  display: grid;
  gap: 8px;
}

.userCardServerItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(200, 232, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
}

.userCardServerOrb {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, rgba(130, 179, 255, 0.18), rgba(255, 255, 255, 0.04));
  color: #f3f7ff;
  font-weight: 800;
}

.userCardServerOrb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.userCardServerMeta {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.userCardServerName {
  color: #f2f6ff;
  font-size: 14px;
  font-weight: 700;
  word-break: break-word;
}

.userCardServerSub {
  color: rgba(219, 226, 245, 0.68);
  font-size: 12px;
}

.userCardEmptyState {
  padding: 18px;
  display: grid;
  gap: 6px;
}

.userCardEmptyState strong {
  color: #f3f7ff;
  font-size: 17px;
}

.userCardEmptyState span {
  color: rgba(219, 226, 245, 0.74);
  font-size: 14px;
  line-height: 1.45;
}

.profileWidgetModalCard,
.profileWidgetItemModalCard {
  width: min(620px, calc(100vw - 20px));
}

.profileWidgetModalBody,
.profileWidgetItemModalBody {
  display: grid;
  gap: 12px;
}

.profileWidgetModalActions {
  padding: 0 14px 14px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.profileWidgetEnabledRow {
  border: 1px solid rgba(200, 232, 255, 0.14);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
}

.profileWidgetEnabledRow b {
  color: #eef2ff;
}

.profileWidgetCatalogSearch {
  border: 1px solid rgba(169, 198, 255, 0.16);
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(103, 133, 255, 0.08), rgba(255, 255, 255, 0.01));
  display: grid;
  gap: 10px;
}

.profileWidgetCatalogSearch.hidden {
  display: none;
}

.profileWidgetCatalogStatus {
  min-height: 18px;
  color: rgba(211, 222, 245, 0.7);
  font-size: 12px;
  line-height: 1.3;
}

.profileWidgetCatalogStatus.is-error {
  color: rgba(255, 166, 166, 0.95);
}

.profileWidgetCatalogStatus.is-loading {
  color: rgba(173, 208, 255, 0.94);
}

.profileWidgetCatalogResults {
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
  padding-right: 2px;
}

.profileWidgetCatalogResult {
  border: 1px solid rgba(200, 232, 255, 0.16);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 12px;
  padding: 8px;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}

.profileWidgetCatalogResult:hover {
  border-color: rgba(148, 195, 255, 0.38);
  background: rgba(132, 182, 255, 0.1);
  transform: translateY(-1px);
}

.profileWidgetCatalogResultMedia {
  width: 84px;
  aspect-ratio: 16 / 9;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid rgba(200, 232, 255, 0.16);
  background: linear-gradient(145deg, rgba(114, 148, 255, 0.24), rgba(14, 19, 31, 0.9));
}

.profileWidgetCatalogResultMedia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profileWidgetCatalogResultBody {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.profileWidgetCatalogResultTitle {
  color: #f2f6ff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  word-break: break-word;
}

.profileWidgetCatalogResultMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.profileWidgetCatalogResultActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.profileWidgetCatalogActions {
  display: flex;
  justify-content: flex-end;
}

.profileWidgetCatalogEmpty {
  border: 1px dashed rgba(200, 232, 255, 0.22);
  border-radius: 12px;
  padding: 12px;
  color: rgba(212, 223, 247, 0.74);
  font-size: 13px;
  text-align: center;
}

.profileWidgetItemReadonlyPreview {
  border: 1px solid rgba(200, 232, 255, 0.14);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.02);
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.profileWidgetItemReadonlyPreview.hidden {
  display: none;
}

.profileWidgetItemReadonlyPreviewMedia {
  width: 52px;
  aspect-ratio: 1 / 1;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid rgba(200, 232, 255, 0.16);
  background: linear-gradient(145deg, rgba(114, 148, 255, 0.24), rgba(14, 19, 31, 0.9));
}

.profileWidgetItemReadonlyPreviewMedia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profileWidgetItemReadonlyPreviewFallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #eef4ff;
  font-size: 20px;
  font-weight: 800;
}

.profileWidgetItemReadonlyPreviewBody {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.profileWidgetItemReadonlyPreviewTitle {
  color: #f2f6ff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
}

.profileWidgetItemReadonlyPreviewMeta {
  color: rgba(211, 222, 245, 0.72);
  font-size: 12px;
  line-height: 1.3;
}

#profileWidgetItemTitleField.hidden,
#profileWidgetItemCoverUrlField.hidden,
#profileWidgetItemExternalUrlField.hidden {
  display: none;
}

.profileWidgetItemManualFields {
  display: grid;
  gap: 12px;
}

.profileWidgetItemManualFields.hidden {
  display: none;
}

.userCardWidgetsShell {
  display: grid;
  gap: 14px;
  min-height: 0;
}

.userCardWidgetsTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.userCardWidgetsHint {
  color: rgba(219, 226, 245, 0.72);
  font-size: 13px;
}

.userCardWidgetsGrid {
  display: grid;
  gap: 12px;
  min-height: 0;
}

#userCardWidgetsPanel.userCardPanel.is-active {
  display: block;
}

.userCardWidgetCard {
  border-radius: 16px;
  border: 1px solid rgba(200, 232, 255, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.02));
  padding: 13px;
  display: grid;
  gap: 12px;
  position: relative;
  overflow: visible;
  min-height: 0;
}

.userCardWidgetTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.userCardWidgetTop > div:first-child {
  min-width: 0;
}

.userCardWidgetTitle {
  color: #f3f7ff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  word-break: break-word;
}

.userCardWidgetMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 6px;
}

.userCardWidgetBadge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(200, 232, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(231, 238, 252, 0.9);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 4px 9px;
  text-transform: uppercase;
}

.userCardWidgetBadge[data-status="favorite"] {
  border-color: rgba(182, 160, 255, 0.35);
  background: rgba(139, 114, 255, 0.22);
}

.userCardWidgetBadge[data-status="current"] {
  border-color: rgba(124, 198, 255, 0.35);
  background: rgba(80, 154, 255, 0.2);
}

.userCardWidgetBadge[data-status="wishlist"] {
  border-color: rgba(255, 205, 122, 0.35);
  background: rgba(255, 173, 75, 0.18);
}

.userCardWidgetBadge[data-status="completed"] {
  border-color: rgba(125, 221, 170, 0.36);
  background: rgba(70, 173, 122, 0.2);
}

.userCardWidgetBadge[data-status="dropped"] {
  border-color: rgba(255, 150, 150, 0.33);
  background: rgba(206, 78, 104, 0.22);
}

.userCardWidgetHeaderActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  justify-content: flex-end;
  position: relative;
}

.userCardWidgetBtn {
  min-width: 0;
  padding: 6px 9px;
  border-radius: 10px;
  border: 1px solid rgba(200, 232, 255, 0.16);
  background: rgba(255, 255, 255, 0.03);
  color: #e9f0ff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.userCardWidgetAddBtn {
  border-color: rgba(139, 175, 255, 0.28);
  background: linear-gradient(180deg, rgba(111, 135, 255, 0.24), rgba(89, 116, 235, 0.13));
}

.userCardWidgetBtn:hover,
.userCardWidgetBtn:focus-visible {
  border-color: rgba(162, 205, 255, 0.5);
  background: rgba(132, 182, 255, 0.2);
}

.userCardWidgetBtn.is-danger:hover,
.userCardWidgetBtn.is-danger:focus-visible {
  border-color: rgba(255, 140, 140, 0.5);
  background: rgba(206, 78, 104, 0.25);
}

.userCardWidgetMenu {
  position: relative;
  flex: 0 0 auto;
}

.userCardWidgetMenuTrigger {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(200, 232, 255, 0.14);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(232, 239, 255, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  list-style: none;
  user-select: none;
}

.userCardWidgetMenuTrigger::-webkit-details-marker {
  display: none;
}

.userCardWidgetMenuTrigger::marker {
  content: "";
}

.userCardWidgetMenuTrigger:hover,
.userCardWidgetMenuTrigger:focus-visible,
.userCardWidgetMenu[open] > .userCardWidgetMenuTrigger {
  border-color: rgba(162, 205, 255, 0.5);
  background: rgba(132, 182, 255, 0.18);
}

.userCardWidgetMenuList {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 170;
  min-width: 142px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(200, 232, 255, 0.16);
  background: linear-gradient(180deg, rgba(14, 20, 32, 0.98), rgba(8, 12, 21, 0.98));
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(140, 176, 255, 0.06);
  display: grid;
  gap: 2px;
}

.userCardWidgetMenuItem {
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(232, 239, 255, 0.9);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  padding: 8px 9px;
  cursor: pointer;
}

.userCardWidgetMenuItem:hover,
.userCardWidgetMenuItem:focus-visible {
  background: rgba(132, 182, 255, 0.16);
  color: #ffffff;
}

.userCardWidgetMenuItem.is-danger {
  color: rgba(255, 186, 186, 0.95);
}

.userCardWidgetMenuItem.is-danger:hover,
.userCardWidgetMenuItem.is-danger:focus-visible {
  background: rgba(206, 78, 104, 0.22);
}

.userCardWidgetMenuItem:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.profileWidgetInlinePopover {
  position: absolute;
  top: 56px;
  right: 12px;
  width: min(360px, calc(100% - 24px));
  max-height: min(440px, calc(100vh - 120px));
  border-radius: 14px;
  border: 1px solid rgba(168, 198, 255, 0.28);
  background: linear-gradient(180deg, rgba(16, 22, 36, 0.98), rgba(10, 14, 24, 0.98));
  box-shadow: 0 22px 54px rgba(6, 9, 15, 0.58), 0 0 0 1px rgba(140, 176, 255, 0.08);
  display: grid;
  gap: 8px;
  padding: 10px;
  overflow: hidden;
  z-index: 120;
}

.profileWidgetInlineSearchTop {
  display: grid;
}

.profileWidgetInlineInput {
  width: 100%;
  border-color: rgba(148, 176, 255, 0.28);
  background: rgba(12, 16, 28, 0.92);
}

.profileWidgetInlineInput:focus,
.profileWidgetInlineInput:focus-visible {
  border-color: rgba(138, 118, 255, 0.72);
  box-shadow: 0 0 0 2px rgba(122, 110, 255, 0.25);
}

.profileWidgetInlineStatus {
  color: rgba(209, 220, 245, 0.8);
  font-size: 12px;
}

.profileWidgetInlineStatus.is-error {
  color: rgba(255, 164, 164, 0.95);
}

.profileWidgetInlineResults {
  display: grid;
  gap: 6px;
  max-height: 320px;
  overflow: auto;
  padding-right: 2px;
}

.profileWidgetInlineResultBtn {
  border: 1px solid rgba(194, 224, 255, 0.16);
  background: rgba(255, 255, 255, 0.024);
  border-radius: 11px;
  padding: 7px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}

.profileWidgetInlineResultBtn:hover,
.profileWidgetInlineResultBtn:focus-visible {
  border-color: rgba(144, 196, 255, 0.44);
  background: rgba(124, 176, 255, 0.16);
  transform: translateY(-1px);
}

.profileWidgetInlineResultMedia {
  width: 44px;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(186, 217, 255, 0.2);
  background: linear-gradient(145deg, rgba(114, 148, 255, 0.22), rgba(14, 19, 31, 0.9));
}

.profileWidgetInlineResultMedia img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.profileWidgetInlineResultBody {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.profileWidgetInlineResultTitle {
  color: #f1f6ff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  word-break: break-word;
}

.profileWidgetInlineResultMeta {
  color: rgba(196, 210, 240, 0.82);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.profileWidgetInlineState {
  border: 1px dashed rgba(188, 219, 255, 0.25);
  border-radius: 11px;
  padding: 10px;
  color: rgba(201, 216, 245, 0.76);
  font-size: 12px;
  text-align: center;
}

.profileWidgetInlineFooter {
  display: flex;
  justify-content: flex-end;
}

.userCardWidgetItemGrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  min-height: 0;
  flex: 0 0 auto;
}

.userCardWidgetItemsArea {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  min-height: 0;
  max-height: 520px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 5px;
  padding-bottom: 16px;
  scrollbar-gutter: stable;
}

.userCardWidgetItemsArea.is-empty {
  max-height: none;
  overflow: visible;
  padding-bottom: 0;
}

.userCardWidgetItem {
  border-radius: 13px;
  border: 1px solid rgba(200, 232, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: auto;
  max-height: none;
  max-width: 100%;
  position: relative;
  flex: 0 0 auto;
}

.userCardWidgetItemMedia {
  position: relative;
  width: 100%;
  aspect-ratio: auto;
  height: 95px;
  min-height: 95px;
  max-height: 95px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(145deg, rgba(114, 148, 255, 0.22), rgba(14, 19, 31, 0.9));
  flex: 0 0 95px;
}

.userCardWidgetItemMedia img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.userCardWidgetItemFallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 26px;
  color: rgba(239, 245, 255, 0.9);
  letter-spacing: 0.04em;
}

.userCardWidgetItemBody {
  padding: 9px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 0;
  flex: 1 1 auto;
}

.userCardWidgetItemHeading {
  min-width: 0;
}

.userCardWidgetItemTitle {
  color: #f3f7ff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
}

.userCardWidgetItemNote {
  color: rgba(219, 226, 245, 0.72);
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.userCardWidgetStars {
  font-size: 12px;
  color: rgba(255, 217, 133, 0.95);
  letter-spacing: 0.05em;
}

.userCardWidgetItemMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.userCardWidgetItemActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: auto;
  padding-top: 4px;
  width: 100%;
}

.userCardWidgetItemActionBtn {
  min-width: 0;
  border-radius: 8px;
  border: 1px solid rgba(200, 232, 255, 0.13);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(232, 239, 255, 0.9);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  padding: 6px 6px;
  cursor: pointer;
}

.userCardWidgetItemActionBtn:hover,
.userCardWidgetItemActionBtn:focus-visible {
  border-color: rgba(162, 205, 255, 0.46);
  background: rgba(132, 182, 255, 0.17);
  color: #ffffff;
}

.userCardWidgetItemActionBtn.is-danger {
  color: rgba(255, 186, 186, 0.95);
}

.userCardWidgetItemActionBtn.is-danger:hover,
.userCardWidgetItemActionBtn.is-danger:focus-visible {
  border-color: rgba(255, 140, 140, 0.42);
  background: rgba(206, 78, 104, 0.2);
}

.userCardWidgetItemActionBtn:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.userCardWidgetFeatured {
  border-radius: 14px;
  border: 1px solid rgba(146, 196, 255, 0.2);
  background: linear-gradient(180deg, rgba(120, 168, 255, 0.1), rgba(255, 255, 255, 0.02));
  overflow: hidden;
  height: auto;
  min-height: 0;
  max-height: none;
}

.userCardWidgetFeatured .userCardWidgetItemMedia {
  aspect-ratio: auto;
  height: 140px;
  min-height: 140px;
  max-height: 140px;
  flex: 0 0 140px;
}

.userCardWidgetFeatured .userCardWidgetItemTitle {
  font-size: 16px;
}

.userCardWidgetFeatured .userCardWidgetItemActions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.userCardWidgetLink {
  color: rgba(174, 205, 255, 0.96);
  font-size: 12px;
  font-weight: 700;
  word-break: break-all;
}

@media (max-width: 560px) {
  .profileWidgetInlinePopover {
    left: 10px;
    right: 10px;
    width: auto;
    top: 52px;
    max-height: min(380px, calc(100vh - 92px));
  }

  .profileWidgetInlineResults {
    max-height: 240px;
  }

  .profileWidgetCatalogResult {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .profileWidgetCatalogResultMedia {
    width: 72px;
  }

  .profileWidgetCatalogResultActions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .userCardWidgetItemGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .userCardWidgetFeatured .userCardWidgetItemActions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .userCardWidgetItemsArea {
    max-height: 380px;
  }

}

@media (max-width: 900px) {
  .userCardSurface {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .userCardOverview {
    border-right: 0;
    border-bottom: 1px solid rgba(200, 232, 255, 0.1);
    max-height: min(330px, 45vh);
  }

  .userCardPanelsArea {
    min-height: 0;
  }

  .userCardWidgetItemsArea {
    max-height: 440px;
  }
}

@media (max-width: 560px) {
  .userCardName {
    font-size: 28px;
  }

  .userCardWidgetItemsArea {
    max-height: 380px;
  }

  .userCardFacts {
    grid-template-columns: 1fr;
  }

  .userCardTabs {
    gap: 14px;
    overflow: auto;
  }

  .userCardActions .btn {
    flex: 1 1 0;
    min-width: 0;
  }
}

.emojiPicker {
  position: fixed;
  z-index: 2700;
  width: min(440px, calc(100vw - 18px));
  max-height: min(500px, calc(100vh - 18px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  background:
    radial-gradient(520px 220px at 18% 0%, color-mix(in srgb, var(--altara-accent, #e8cfae) 12%, transparent), transparent 68%),
    linear-gradient(180deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 78%, rgba(255, 255, 255, 0.035)), var(--altara-surface, #151515));
  box-shadow:
    0 28px 86px rgba(0, 0, 0, 0.56),
    0 0 0 1px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(var(--theme-blur, 14px));
  padding: 0;
  color: var(--altara-text, #f2f0ec);
}

.emojiPicker.hidden {
  display: none;
}

.emojiPickerTop {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px 9px;
  border-bottom: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 62%, transparent), transparent);
  position: relative;
  z-index: 3;
}

.emojiPickerTitle {
  min-width: 58px;
  color: var(--altara-text, #f2f0ec);
  font-family: var(--font-display, var(--font-ui, inherit));
  font-size: 17px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
}

.emojiPicker:not(.emojiPicker--nested) #btnEmojiPickerBack,
.emojiPicker:not(.emojiPicker--nested) .emojiPickerBack,
.emojiPicker[data-emoji-depth="0"] [data-emoji-picker-back] {
  display: none !important;
}

.emojiSearchWrap {
  min-width: 0;
  height: 38px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.012)),
    color-mix(in srgb, var(--altara-bg, #101010) 72%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 10px 28px rgba(0, 0, 0, 0.14);
  cursor: text;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.emojiSearchWrap:focus-within {
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.32));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-accent, #e8cfae) 7%, transparent), rgba(255, 255, 255, 0.012)),
    color-mix(in srgb, var(--altara-bg, #101010) 74%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 0 0 3px var(--altara-accent-soft, rgba(232, 207, 174, 0.1));
}

.emojiSearchIcon {
  width: 16px;
  height: 16px;
  display: inline-block;
  position: relative;
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.5));
}

.emojiSearchIcon::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 9px;
  height: 9px;
  border: 1.8px solid currentColor;
  border-radius: 999px;
}

.emojiSearchIcon::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 11px;
  width: 6px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: left center;
}

.emojiPickerTop .input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--altara-text, #f2f0ec);
  font-size: 13.5px;
  font-weight: 550;
  outline: none;
}

.emojiPickerTop .input::placeholder {
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.5));
}

.emojiPickerTop #btnEmojiPickerClose {
  min-width: 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  background: color-mix(in srgb, var(--altara-bg, #101010) 48%, transparent);
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.64));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.emojiPickerTop #btnEmojiPickerClose:hover,
.emojiPickerTop #btnEmojiPickerClose:focus-visible {
  outline: none;
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.26));
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.1));
  color: var(--altara-text, #f2f0ec);
  transform: translateY(-1px);
}

.emojiPickerCats {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px 9px;
  border-bottom: 1px solid var(--altara-border, rgba(255, 255, 255, 0.075));
  background: color-mix(in srgb, var(--altara-surface, #181818) 76%, transparent);
  white-space: nowrap;
  position: relative;
  z-index: 3;
}

.emojiCatBtn {
  flex: 0 0 auto;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.008)),
    color-mix(in srgb, var(--altara-bg, #101010) 42%, transparent);
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.64));
  height: 28px;
  min-width: max-content;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  overflow: hidden;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.emojiCatBtn span {
  opacity: 0.92;
}

.emojiCatBtn:hover,
.emojiCatBtn:focus-visible,
.emojiCatBtn.active {
  outline: none;
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  color: var(--altara-text, #f2f0ec);
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.1));
}

.emojiCatBtn.active {
  color: var(--altara-accent-strong, #f0d8b8);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-accent, #e8cfae) 14%, transparent), color-mix(in srgb, var(--altara-accent, #e8cfae) 7%, transparent)),
    color-mix(in srgb, var(--altara-bg, #101010) 34%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--altara-accent, #e8cfae) 20%, transparent),
    0 6px 18px rgba(0, 0, 0, 0.16);
}

.emojiPickerGrid {
  max-height: min(340px, calc(100vh - 164px));
  min-height: 220px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 7px;
  align-content: start;
  padding: 10px 12px 12px;
  position: relative;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 24%),
    color-mix(in srgb, var(--altara-bg, #101010) 18%, transparent);
}

.emojiPickerCats {
  scrollbar-width: thin;
  scrollbar-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28)) transparent;
}

.emojiPickerCats::-webkit-scrollbar {
  height: 5px;
}

.emojiPickerCats::-webkit-scrollbar-track {
  background: transparent;
}

.emojiPickerCats::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--altara-border, rgba(255, 255, 255, 0.12));
}

.emojiPickerGrid {
  scrollbar-width: thin;
  scrollbar-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28)) transparent;
}

.emojiPickerGrid::-webkit-scrollbar {
  width: 8px;
}

.emojiPickerGrid::-webkit-scrollbar-track {
  background: transparent;
}

.emojiPickerGrid::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--altara-accent, #e8cfae) 22%, transparent);
}

.emojiPickerGrid::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--altara-accent, #e8cfae) 34%, transparent);
}

.emojiSectionTitle {
  grid-column: 1 / -1;
  margin: 4px 2px 0;
  padding-top: 1px;
  color: var(--altara-accent-strong, #f0d8b8);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.emojiPickerHint {
  grid-column: 1 / -1;
  margin: 6px 2px 2px;
  padding: 11px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  background: color-mix(in srgb, var(--altara-surface-elevated, #202020) 54%, transparent);
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.62));
  font-size: 12px;
}

.emojiBtn {
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.075));
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    color-mix(in srgb, var(--altara-surface-elevated, #202020) 62%, transparent);
  min-height: 40px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  color: var(--altara-text, #f2f0ec);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition: border-color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.emojiBtn__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  line-height: 1;
}

.emojiBtn__img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.emojiBtn__img--flag {
  border-radius: 2px;
}

.emojiBtn:hover,
.emojiBtn:focus-visible {
  outline: none;
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.38));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-accent, #e8cfae) 12%, transparent), color-mix(in srgb, var(--altara-accent, #e8cfae) 5%, transparent)),
    color-mix(in srgb, var(--altara-surface-elevated, #202020) 64%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 0 0 3px var(--altara-accent-soft, rgba(232, 207, 174, 0.11)),
    0 12px 28px rgba(0, 0, 0, 0.22);
  transform: translateY(-2px);
}

.dmEmojiShortcodeMenu {
  position: fixed;
  z-index: 2710;
  width: min(360px, calc(100vw - 16px));
  border: 1px solid var(--stroke-strong);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, var(--surface-1), var(--ui-shell-bg));
  box-shadow:
    var(--shadow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(var(--theme-blur, 12px));
  padding: 8px;
}

.dmEmojiShortcodeMenu.hidden {
  display: none;
}

.dmEmojiShortcodeMenu__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 2px 4px 7px;
}

.dmEmojiShortcodeMenu__list {
  display: grid;
  gap: 4px;
}

.dmEmojiShortcodeMenu__item {
  width: 100%;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: var(--ui-row-bg);
  min-height: 36px;
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 6px 9px;
  color: var(--text-main);
  cursor: pointer;
}

.dmEmojiShortcodeMenu__item:hover,
.dmEmojiShortcodeMenu__item:focus-visible,
.dmEmojiShortcodeMenu__item.is-active {
  border-color: var(--ui-btn-hover-border);
  background: var(--ui-btn-hover-bg);
}

.dmEmojiShortcodeMenu__emoji {
  font-size: 18px;
  line-height: 1;
  display: inline-grid;
  place-items: center;
}

.dmEmojiShortcodeMenu__alias {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: 0.005em;
}

.dm__composer .input,
.dmComposer .input {
  flex: 1;
  min-width: 0;
}

#callStatus {
  margin: 0 12px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(88, 101, 242, 0.38);
  background: rgba(88, 101, 242, 0.14);
}

.rightTitleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(200, 232, 255, 0.14);
  border-radius: 16px;
  background: rgba(6, 12, 18, 0.72);
  box-shadow: var(--shadow-soft);
}

.brand {
  font-size: 20px;
}

.authShell {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 22px;
  -webkit-app-region: no-drag;
}

.authCard {
  width: min(460px, 100%);
  -webkit-app-region: no-drag;
}

.authCard * {
  -webkit-app-region: no-drag;
}

.authTitle {
  font-size: 28px;
  margin-bottom: 8px;
}

.authSub {
  margin: 0 0 12px;
  color: var(--text-soft);
}

.authFeedback {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(142, 160, 255, 0.28);
  background: linear-gradient(180deg, rgba(88, 101, 242, 0.16), rgba(88, 101, 242, 0.1));
  color: #dfe6ff;
  font-size: 13px;
  line-height: 1.45;
}

.authFeedback[hidden] {
  display: none !important;
}

.authFeedback.is-error {
  border-color: rgba(242, 111, 111, 0.4);
  background: linear-gradient(180deg, rgba(242, 111, 111, 0.16), rgba(242, 111, 111, 0.08));
  color: #ffd9d9;
}

.authFeedback.is-success {
  border-color: rgba(73, 209, 127, 0.4);
  background: linear-gradient(180deg, rgba(73, 209, 127, 0.16), rgba(73, 209, 127, 0.08));
  color: #ddffe9;
}

.debug,
#debug,
#debugProfile {
  display: none;
  margin: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(200, 232, 255, 0.12);
  color: #b5d9f0;
  padding: 9px;
  max-height: 220px;
  overflow: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0, 0, 0, 0);
}

.profileOverlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 18px;
}

.profileOverlay.hidden {
  display: none;
}

.profileOverlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 9, 0.64);
  backdrop-filter: blur(4px);
}

.profileOverlay__card {
  position: relative;
  z-index: 1;
  width: min(1120px, 98vw);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}

.profileOverlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid rgba(200, 232, 255, 0.12);
}

.profileOverlay__body {
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.avatar-pick {
  cursor: pointer;
}

.avatar-pick__overlay {
  position: absolute;
  inset: auto 0 0;
  padding: 4px 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.52);
  color: #edfbff;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.avatar-pick:hover .avatar-pick__overlay,
.avatar-pick:focus-visible .avatar-pick__overlay {
  opacity: 1;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 5200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 5, 9, 0.58);
  backdrop-filter: blur(4px);
  -webkit-app-region: no-drag;
}

.modal.hidden {
  display: none;
}

.modal * {
  -webkit-app-region: no-drag;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
  backdrop-filter: none;
}

.modal__card,
.modalCard {
  position: relative;
  z-index: 1;
  width: min(920px, 96vw);
  border-radius: 18px;
  border: 1px solid rgba(200, 232, 255, 0.2);
  background: linear-gradient(160deg, rgba(11, 17, 24, 0.94), rgba(6, 11, 17, 0.98));
  box-shadow: var(--shadow-main);
  overflow: hidden;
}

#userCardModal .userCardCard {
  width: min(900px, calc(100vw - 16px));
  max-width: min(900px, calc(100vw - 16px));
  overflow: hidden;
}

.modal__header,
.modalTop {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(200, 232, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal__title,
.modalTitle {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
}

.modal__body,
.editorWrap {
  padding: 14px;
}

.editorWrap {
  position: relative;
}

.editorGifPreview {
  position: absolute;
  display: none;
  background: rgba(0, 0, 0, 0.42);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.editorGifViewport {
  position: absolute;
  display: none;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.editorWrap:not(.is-gif-mode) .editorGifViewport {
  display: none !important;
}

.editorWrap .editorGifPreview:not([src]),
.editorWrap .editorGifPreview[src=""] {
  display: none !important;
}

.editorWrap:not(.is-gif-mode) .editorGifPreview {
  display: none !important;
}

.editorWrap.is-gif-mode {
  overflow: hidden;
}

.editorWrap.is-avatar-gif-mode #avatarEditorGifViewport.editorGifViewport {
  border-radius: 50%;
  z-index: 0;
}

.editorWrap.is-gif-mode #bannerEditorGifViewport.editorGifViewport {
  border-radius: 12px;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.92);
}

.editorWrap.is-avatar-gif-mode::before,
.editorWrap.is-avatar-gif-mode::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.editorWrap.is-avatar-gif-mode::before {
  inset: auto;
  width: var(--avatar-editor-ring-size, min(84%, 420px));
  height: var(--avatar-editor-ring-size, min(84%, 420px));
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.9);
  z-index: 1;
}

.editorWrap.is-avatar-gif-mode::after {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 41%, rgba(0, 0, 0, 0.32) 41.5% 100%);
  z-index: 1;
}

.avatar-editor__preview.is-gif-mode {
  overflow: hidden;
}

.avatar-editor__preview.is-gif-mode::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 41%, rgba(0, 0, 0, 0.32) 41.5% 100%);
}

.editorGifHint {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

.dmFriendNicknameModalCard {
  width: min(440px, calc(100vw - 20px));
}

.dmFriendNicknameModalBody {
  display: grid;
  gap: 10px;
}

.dmFriendNicknameFieldLabel {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-2);
}

.dmFriendNicknameInput {
  width: 100%;
}

.dmFriendNicknameHint {
  margin: 0;
}

.dmFriendNicknameModalActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 14px 14px;
}

#serverFolderRenameModal {
  background: rgba(2, 4, 7, 0.74);
  backdrop-filter: blur(8px);
}

#serverFolderRenameModal .modal__backdrop {
  background: rgba(0, 0, 0, 0.14);
}

#serverFolderRenameModal .serverFolderRenameModalCard {
  width: min(440px, calc(100vw - 20px));
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(11, 13, 17, 0.99), rgba(8, 10, 14, 0.995));
  box-shadow:
    0 26px 64px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(255, 255, 255, 0.02);
}

#serverFolderRenameModal .serverFolderRenameModalTop {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

#serverFolderRenameModal .modalTitle {
  color: rgba(242, 245, 249, 0.98);
}

#serverFolderRenameModal .serverFolderRenameFieldLabel {
  color: rgba(208, 213, 221, 0.88);
}

#serverFolderRenameModal .serverFolderRenameInput {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(32, 35, 41, 0.96);
  color: rgba(242, 245, 249, 0.98);
  box-shadow: none;
}

#serverFolderRenameModal .serverFolderRenameInput::placeholder {
  color: rgba(177, 183, 193, 0.56);
}

#serverFolderRenameModal .serverFolderRenameInput:focus {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(36, 39, 46, 0.98);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

#serverFolderRenameModal .serverFolderRenameHint {
  color: rgba(154, 161, 172, 0.78);
}

#serverFolderRenameModal .serverFolderRenameCloseBtn {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(24, 27, 33, 0.96);
  color: rgba(226, 231, 238, 0.92);
  transition: border-color 0.14s ease, background-color 0.14s ease, transform 0.14s ease;
}

#serverFolderRenameModal .serverFolderRenameCloseBtn:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(31, 34, 40, 0.98);
  transform: translateY(-1px);
}

#serverFolderRenameModal .serverFolderRenameBtn {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(42, 45, 52, 0.98);
  color: rgba(240, 243, 247, 0.96);
  box-shadow: none;
}

#serverFolderRenameModal .serverFolderRenameBtn:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(50, 54, 62, 0.98);
  box-shadow: none;
}

#serverFolderRenameModal .serverFolderRenameBtn--save {
  background: rgba(60, 64, 73, 0.98);
}

#serverFolderRenameModal .serverFolderRenameBtn--save:hover {
  background: rgba(69, 74, 84, 0.98);
}

.appConfirmModalCard {
  width: min(460px, calc(100vw - 20px));
}

.appConfirmModalBody {
  padding-top: 16px;
  padding-bottom: 10px;
}

.appConfirmModalMessage {
  color: var(--text-1);
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-line;
  word-break: break-word;
}

.appConfirmModalInput {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.appConfirmModalInput[hidden] {
  display: none !important;
}

.appConfirmModalTextarea {
  min-height: 120px;
  resize: vertical;
}

.appConfirmModalInputHint {
  margin: 0;
}

.appConfirmModalActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 14px 14px;
}

#appConfirmModal.appConfirmModal--whiteThemeEasterEgg .modal__backdrop {
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#appConfirmModal.appConfirmModal--whiteThemeEasterEgg .appConfirmModalCard {
  border-radius: 18px;
  border: 1px solid rgba(232, 207, 174, 0.22);
  background:
    linear-gradient(180deg, rgba(34, 34, 34, 0.98), rgba(17, 17, 17, 0.98)),
    #181818;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(255, 255, 255, 0.035);
  color: #f2f0ec;
}

#appConfirmModal.appConfirmModal--whiteThemeEasterEgg .modalTop {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

#appConfirmModal.appConfirmModal--whiteThemeEasterEgg .modalTitle {
  color: #f6efe5;
  letter-spacing: 0;
}

#appConfirmModal.appConfirmModal--whiteThemeEasterEgg .appConfirmModalMessage {
  color: rgba(246, 239, 229, 0.76);
}

#appConfirmModal.appConfirmModal--whiteThemeEasterEgg .icon-btn,
#appConfirmModal.appConfirmModal--whiteThemeEasterEgg #btnAppConfirmCancel {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(246, 239, 229, 0.78);
}

#appConfirmModal.appConfirmModal--whiteThemeEasterEgg .icon-btn:hover,
#appConfirmModal.appConfirmModal--whiteThemeEasterEgg #btnAppConfirmCancel:hover {
  border-color: rgba(232, 207, 174, 0.26);
  background: rgba(232, 207, 174, 0.1);
  color: #fff8ef;
}

#appConfirmModal.appConfirmModal--whiteThemeEasterEgg #btnAppConfirmOk {
  border-color: rgba(232, 207, 174, 0.42);
  background: linear-gradient(180deg, rgba(232, 207, 174, 0.98), rgba(206, 173, 130, 0.98));
  color: #1b1712;
  box-shadow: 0 12px 32px rgba(232, 207, 174, 0.16);
}

#appConfirmModal.appConfirmModal--whiteThemeEasterEgg #btnAppConfirmOk:hover {
  border-color: rgba(255, 232, 198, 0.58);
  background: linear-gradient(180deg, rgba(241, 219, 188, 1), rgba(218, 184, 141, 1));
}

.appearanceWhiteFlashOverlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.96), rgba(255, 253, 248, 0.72) 54%, rgba(255, 253, 248, 0.18) 100%);
}

.appearanceWhiteFlashOverlay.is-active {
  visibility: visible;
  animation: altaraWhiteThemeFlash 680ms ease-out both;
}

@keyframes altaraWhiteThemeFlash {
  0% { opacity: 0; }
  14% { opacity: 0.86; }
  42% { opacity: 0.38; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .appearanceWhiteFlashOverlay.is-active {
    animation: altaraWhiteThemeFlashReduced 180ms ease-out both;
  }
}

@keyframes altaraWhiteThemeFlashReduced {
  0% { opacity: 0; }
  45% { opacity: 0.12; }
  100% { opacity: 0; }
}

.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(200, 232, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.avatar-editor {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 220px;
  gap: 14px;
}

.avatar-editor__preview {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(200, 232, 255, 0.2);
  background: rgba(0, 0, 0, 0.4);
}

#avatarEditorCanvas,
.editorCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

#bannerEditorCanvas.editorCanvas--banner {
  min-height: 300px;
  max-height: min(52vh, 420px);
  border-radius: 12px;
}

.avatar-editor__ring {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.78);
  pointer-events: none;
}

.avatar-editor__right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--accent-strong);
}

#settingsVoiceSensitivity:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: saturate(0.45);
}

.callOverlay {
  position: fixed;
  inset: 0;
  z-index: 1700;
  background: rgba(2, 7, 12, 0.72);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.callOverlay.is-open {
  display: flex;
}

.callModal,
.callOverlayCard {
  width: min(430px, 94vw);
  border-radius: 18px;
  border: 1px solid rgba(200, 232, 255, 0.22);
  background: linear-gradient(160deg, rgba(9, 15, 22, 0.95), rgba(5, 9, 14, 0.98));
  box-shadow: var(--shadow-main);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.callModal__title,
.callOverlayTitle {
  font-family: var(--font-display);
  font-size: 20px;
}

.callModal__sub,
.callOverlaySub {
  color: var(--text-soft);
}

.callStage {
  position: fixed;
  inset: 14px;
  z-index: 1400;
  opacity: 0;
  transform: translateY(8px) scale(0.99);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  --call-stage-primary-aspect-ratio: 16 / 9;
  --call-stage-screenshare-aspect-ratio: 16 / 9;
}

.boot-hide-call-chrome .callStage,
.boot-hide-call-chrome .callBar {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.callStage.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.callStageCard {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  border: 1px solid rgba(200, 232, 255, 0.2);
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(88, 101, 242, 0.16), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(73, 209, 127, 0.1), transparent 58%),
    linear-gradient(160deg, rgba(9, 16, 23, 0.96), rgba(4, 9, 14, 0.98));
  box-shadow: var(--shadow-main);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.callStageTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(200, 232, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
}

.callStageInfo {
  min-width: 0;
}

.callStageTopActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.serverVoiceAudioFallback {
  margin: 10px 14px 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 214, 120, 0.28);
  background: linear-gradient(180deg, rgba(38, 29, 12, 0.94), rgba(24, 19, 9, 0.96));
  color: #ffe8b0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.serverVoiceAudioFallback[hidden] {
  display: none !important;
}

.serverVoiceAudioFallback__text {
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.callStageTitle,
.callBar__title,
.inCallBar__title {
  font-family: var(--font-display);
  font-size: 18px;
}

.callStageSub {
  color: var(--text-soft);
  font-size: 13px;
  margin-top: 2px;
}

.callStageViewport {
  position: relative;
  margin: 12px;
  border-radius: 16px;
  border: 1px solid rgba(200, 232, 255, 0.14);
  overflow: hidden;
  background: #070b11;
  min-height: 0;
  aspect-ratio: auto;
  container-type: size;
}

.callStageViewport:fullscreen {
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
}

.callStageViewport:fullscreen::backdrop {
  background: #000;
}

.serverVoiceScreensharePanel {
  position: absolute;
  inset: 12px;
  z-index: 5;
  border-radius: 14px;
  border: 1px solid rgba(138, 214, 255, 0.38);
  background: radial-gradient(120% 140% at 20% 0%, rgba(32, 82, 117, 0.34), rgba(3, 7, 12, 0.92));
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.34);
  overflow: hidden;
  pointer-events: none;
}

.callStage.layout-grid .serverVoiceScreensharePanel {
  z-index: 1;
}

.serverVoiceScreensharePanel[hidden] {
  display: none !important;
}

.serverVoiceScreensharePanel__header {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 20px);
}

.serverVoiceScreensharePanel__badge {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #042232;
  background: linear-gradient(180deg, #99edff, #55c9ff);
}

.serverVoiceScreensharePanel__title {
  min-width: 0;
  max-width: calc(100vw - 220px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 700;
  color: #f2f8ff;
  background: rgba(5, 12, 20, 0.7);
  border: 1px solid rgba(187, 218, 255, 0.24);
  border-radius: 999px;
  padding: 4px 10px;
}

.serverVoiceScreensharePanel__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}

.serverVoiceDebugOverlay {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 7;
  width: min(540px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(168, 190, 255, 0.26);
  background: rgba(8, 11, 17, 0.9);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px);
}

.serverVoiceDebugOverlay[hidden] {
  display: none !important;
}

.serverVoiceDebugOverlay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(168, 190, 255, 0.16);
}

.serverVoiceDebugOverlay__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.serverVoiceDebugOverlay__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ecf3ff;
}

.serverVoiceDebugOverlay__flag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #111722;
  background: linear-gradient(180deg, #c7d8ff, #8eb6ff);
  border-radius: 999px;
  padding: 3px 7px;
}

.serverVoiceDebugOverlay__copyBtn {
  min-height: 28px;
  padding: 5px 10px;
  font-size: 11px;
}

.serverVoiceDebugOverlay__body {
  padding: 10px 12px 12px;
  display: grid;
  gap: 10px;
}

.serverVoiceDebugOverlay__summary {
  display: grid;
  gap: 4px;
}

.serverVoiceDebugOverlay__summaryLine {
  font-size: 12px;
  color: #dfe6f5;
}

.serverVoiceDebugOverlay__summaryLine code {
  font-size: 11px;
  color: #f4f7ff;
}

.serverVoiceDebugOverlay__table {
  display: grid;
  gap: 8px;
}

.serverVoiceDebugOverlay__row {
  display: grid;
  grid-template-columns: minmax(120px, 1.25fr) repeat(11, minmax(48px, 0.72fr));
  gap: 6px;
  align-items: center;
}

.serverVoiceDebugOverlay__row--head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-bottom: 4px;
  background: rgba(8, 11, 17, 0.92);
}

.serverVoiceDebugOverlay__cell {
  min-width: 0;
  font-size: 11px;
  line-height: 1.25;
  color: #dfe6f5;
}

.serverVoiceDebugOverlay__cell--head {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(214, 224, 244, 0.72);
}

.serverVoiceDebugOverlay__cell--participant {
  font-weight: 700;
  color: #f5f8ff;
}

.serverVoiceDebugOverlay__participantMeta {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(201, 213, 236, 0.68);
}

.serverVoiceDebugOverlay__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 24px;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid rgba(166, 183, 214, 0.16);
  background: rgba(19, 25, 35, 0.92);
  color: #e7eefc;
  text-align: center;
}

.serverVoiceDebugOverlay__value.is-yes {
  border-color: rgba(104, 210, 144, 0.32);
  background: rgba(20, 57, 39, 0.82);
  color: #c6ffd6;
}

.serverVoiceDebugOverlay__value.is-no {
  border-color: rgba(255, 138, 164, 0.26);
  background: rgba(54, 17, 27, 0.82);
  color: #ffc4d0;
}

.serverVoiceDebugOverlay__value.is-na {
  color: rgba(212, 220, 238, 0.54);
}

.serverVoiceDebugOverlay__value.is-status {
  justify-content: flex-start;
  min-width: 0;
  text-align: left;
}

.serverVoiceDebugOverlay__empty {
  font-size: 12px;
  color: rgba(216, 225, 241, 0.7);
}

.callStageGrid {
  position: absolute;
  inset: 0;
  padding: 8px 8px 70px;
  --call-grid-gap: 10px;
  --discord-call-tile-width: var(--call-grid-tile-width, clamp(340px, 42cqw, 560px));
  --discord-call-tile-width-one: var(--call-grid-tile-width, clamp(440px, 62cqw, 780px));
  display: none;
  flex-wrap: wrap;
  gap: var(--call-grid-gap);
  justify-content: center;
  align-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 2;
}

/* Keep voice/avatar tiles in Discord-like 16:9 cards; screenshare keeps its own media ratio. */
.callStageGrid[data-tile-count="2"] {
  grid-auto-rows: auto;
  align-content: center;
}

.callStageGrid[data-tile-count="2"] .stageGridTile {
  aspect-ratio: var(--call-stage-primary-aspect-ratio, 16 / 9);
  height: auto;
  align-self: center;
}

.callStageGrid[data-odd-last="1"] .stageGridTile:last-child {
  grid-column: auto;
}

.callStageGrid[data-last-fill="1"] .stageGridTile:last-child {
  grid-column: auto;
  width: min(100%, var(--discord-call-tile-width));
  max-width: 100%;
  justify-self: center;
}

.callStageGrid[data-last-fill="2"] .stageGridTile:last-child {
  grid-column: auto;
}

.callStage.layout-grid .callStageGrid {
  display: flex;
}

.callStage.is-solo-group #gridRemote,
.callStage.is-solo-group #gridRemoteAux,
.callStage.is-solo-group #tileRemote,
.callStage.is-solo-group #tileRemoteAux {
  display: none !important;
}

.callStage.is-solo-group .callStageParticipants {
  grid-template-columns: minmax(0, 1fr);
}

.callStage.layout-grid .callVideo,
.callStage.layout-grid .callVideo.is-on,
.callStage.layout-grid .callLocalPreview,
.callStage.layout-grid .callStagePlaceholder {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden;
}

.callStage.layout-grid .callStageViewport {
  background:
    radial-gradient(700px 360px at 50% 0%, var(--call-tile-bg-glow, rgba(255, 255, 255, 0.045)), transparent 68%),
    linear-gradient(180deg, var(--call-tile-bg-start, #1f232b), var(--call-tile-bg-end, #0f1114));
}

.stageGridTile {
  --stage-grid-tile-radius: 14px;
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-width: 0;
  aspect-ratio: var(--call-stage-primary-aspect-ratio, 16 / 9);
  align-self: start;
  justify-self: stretch;
  border: 1px solid rgba(200, 232, 255, 0.18);
  border-radius: var(--stage-grid-tile-radius);
  background:
    radial-gradient(580px 260px at 50% 0%, var(--call-tile-bg-glow, rgba(255, 255, 255, 0.08)), transparent 70%),
    linear-gradient(160deg, var(--call-tile-bg-start, #1b2230), var(--call-tile-bg-end, #0f141d));
  cursor: pointer;
  overflow: hidden;
  overflow: clip;
  min-height: 0;
  isolation: isolate;
  contain: layout paint;
}

.callStageGrid .stageGridTile {
  flex: 0 1 var(--discord-call-tile-width);
  width: min(100%, var(--discord-call-tile-width));
  max-width: var(--discord-call-tile-width);
  align-self: center;
  justify-self: center;
}

.callStageGrid[data-tile-count="1"] .stageGridTile {
  flex-basis: var(--discord-call-tile-width-one);
  width: min(100%, var(--discord-call-tile-width-one));
  max-width: var(--discord-call-tile-width-one);
}

.stageGridTile:hover {
  border-color: rgba(121, 131, 245, 0.72);
}

.stageGridTile--member {
  cursor: pointer;
}

.stageGridTile--member:hover {
  border-color: rgba(121, 131, 245, 0.72);
}

.stageGridTile.is-active {
  border-color: rgba(121, 131, 245, 0.95);
  box-shadow: inset 0 0 0 1px rgba(121, 131, 245, 0.42);
}

.stageGridVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #000;
  border-radius: inherit;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
  transform: translateZ(0);
}

.stageGridTile[data-call-media-type="share"],
.stageGridTile[data-call-tile-type="screenshare"] {
  aspect-ratio: var(--call-stage-screenshare-aspect-ratio, 16 / 9);
  background: #000;
  contain: none;
}

.stageGridTile[data-call-media-type="share"] .stageGridAvatar,
.stageGridTile[data-call-tile-type="screenshare"] .stageGridAvatar {
  display: none !important;
}

.stageGridTile[data-call-media-type="share"]:not(.has-video):not(.is-watch-gated):not(.is-share-loading):not(.has-watch-snapshot)::before,
.stageGridTile[data-call-tile-type="screenshare"]:not(.has-video):not(.is-watch-gated):not(.is-share-loading):not(.has-watch-snapshot)::before {
  content: "A preparar partilha...";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 18px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: rgba(244, 235, 222, 0.78);
  background:
    radial-gradient(360px 180px at 50% 48%, rgba(232, 207, 174, 0.08), transparent 72%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.82), rgba(0, 0, 0, 0.92));
  pointer-events: none;
}

.stageGridTile[data-call-media-type="share"] .stageGridVideo,
.stageGridTile[data-call-tile-type="screenshare"] .stageGridVideo {
  display: block;
  object-fit: contain;
  object-position: center center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  background: #000;
  transform: none;
  backface-visibility: visible;
  will-change: auto;
}

.stageGridTile.has-video .stageGridVideo {
  opacity: 1;
  pointer-events: auto;
}

.stageGridAvatar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid rgba(200, 232, 255, 0.24);
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: linear-gradient(150deg, rgba(0, 188, 212, 0.18), rgba(0, 0, 0, 0.24));
  z-index: 2;
}

.stageGridAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.stageGridTile.has-video .stageGridAvatar {
  display: none;
}

.stageGridLabel {
  position: absolute;
  left: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  font-size: 13px;
  color: #eef2ff;
  border-radius: 9px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.42);
  z-index: 3;
}

.callVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.callWatchGate {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px;
  overflow: hidden;
}

.callWatchGate[hidden] {
  display: none !important;
}

.callWatchPreview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(16px) saturate(0.9) brightness(0.58);
  transform: scale(1.06);
  opacity: 0.92;
  pointer-events: none;
}

.callWatchGate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(72% 58% at 50% 40%, rgba(14, 20, 30, 0.12), rgba(7, 10, 16, 0.84));
  pointer-events: none;
}

.callWatchBtn,
.callWatchHint {
  position: relative;
  z-index: 1;
}

.callWatchBtn {
  min-width: 138px;
  font-weight: 700;
}

.callWatchHint {
  font-size: 12px;
  color: rgba(229, 235, 252, 0.74);
}

.callStage.is-watch-gated .callVideo.is-on {
  filter: blur(13px) brightness(0.62);
  transform: scale(1.02);
}

.callStage.focus-remote.has-video-remote .callVideo.is-on {
  opacity: 1;
  pointer-events: auto;
}

.callStage.focus-member.has-video-remote .callVideo.is-on {
  opacity: 1;
  pointer-events: auto;
}

.callStage:not(.layout-grid) .callVideo,
.callStage:not(.layout-grid) .callLocalPreview,
.callStage:not(.layout-grid) .callStagePlaceholder {
  inset: auto;
  left: 50%;
  top: 50%;
  width: min(calc(100% - 16px), var(--call-focus-tile-width, 900px));
  height: auto;
  aspect-ratio: var(--call-stage-primary-aspect-ratio, 16 / 9);
  border-radius: 18px;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.callStage.is-private-call-ui:not(.layout-grid) .callVideo,
.callStage.is-private-call-ui:not(.layout-grid) .callLocalPreview,
.callStage.is-private-call-ui:not(.layout-grid) .callStagePlaceholder {
  top: calc((100% - 82px) / 2);
}

.callStage:not(.layout-grid).is-watch-gated .callVideo.is-on {
  transform: translate(-50%, -50%) scale(1.02);
}

.callLocalPreview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.callStage.focus-self.has-video-self .callLocalPreview {
  opacity: 1;
  pointer-events: auto;
}

.callStagePlaceholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 14px;
  align-content: center;
  background:
    radial-gradient(700px 360px at 50% 0%, var(--call-tile-bg-glow, rgba(255,255,255,0.08)), transparent 65%),
    linear-gradient(160deg, var(--call-tile-bg-start, rgba(31, 35, 43, 0.96)), var(--call-tile-bg-end, rgba(13, 16, 22, 0.98)));
  transition: opacity 0.16s ease;
}

.callStage:not(.layout-grid) .callStageViewport {
  cursor: pointer;
}

.callStage:not(.layout-grid) .callStagePlaceholder {
  cursor: pointer;
}

.callStage.focus-remote .callStagePlaceholder,
.callStage.focus-member .callStagePlaceholder,
.callStage.focus-self .callStagePlaceholder {
  --call-tile-bg-glow: rgba(255, 255, 255, 0.035);
}

.callStagePlaceholder.is-speaking::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(95, 255, 172, 0.5),
    0 0 0 1px rgba(95, 255, 172, 0.72),
    0 0 22px rgba(95, 255, 172, 0.22);
  animation: callSpeakingGlowPulse 1.05s ease-in-out infinite;
}

.callStagePlaceholder.is-speaking > #callStageAvatar,
.callStagePlaceholder.is-speaking > #callStageAvatar.avatarBig {
  border-color: rgba(95, 255, 172, 0.92);
  box-shadow:
    0 0 0 3px rgba(95, 255, 172, 0.24),
    0 0 18px rgba(95, 255, 172, 0.28);
}

.callStage.focus-remote.has-video-remote .callStagePlaceholder,
.callStage.focus-member.has-video-remote .callStagePlaceholder,
.callStage.focus-self.has-video-self .callStagePlaceholder {
  opacity: 0;
  pointer-events: none;
}

.callStage[data-focused-tile-type="screenshare"] .callStagePlaceholder > #callStageAvatar,
.callStage[data-focused-tile-type="screenshare"] .callStagePlaceholder > #callStageAvatar.avatarBig {
  display: none !important;
}

.callStage[data-focused-tile-type="screenshare"] .callStagePlaceholder {
  background:
    radial-gradient(520px 260px at 50% 45%, rgba(232, 207, 174, 0.08), transparent 72%),
    linear-gradient(180deg, rgba(13, 13, 13, 0.92), rgba(0, 0, 0, 0.96));
}

.callStage[data-focused-tile-type="screenshare"] .callStagePlaceholder::before {
  content: "A preparar partilha...";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: rgba(244, 235, 222, 0.8);
  pointer-events: none;
}

.callStageLabel {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  max-width: calc(100% - 28px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: 13px;
  color: #eef2ff;
  border-radius: 9px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.42);
}

.callStagePlaceholder > #callStageAvatar,
.callStagePlaceholder > #callStageAvatar.avatarBig,
.callStageGrid[data-tile-count="1"] .stageGridAvatar {
  width: 110px;
  height: 110px;
  min-width: 110px;
  min-height: 110px;
}

.callStageParticipants {
  margin: 0 14px 12px;
  display: grid;
  grid-template-columns: repeat(var(--call-participant-cols, 2), minmax(0, 1fr));
  gap: 10px;
}

.participantTile {
  position: relative;
  overflow: hidden;
  height: 86px;
  border-radius: 12px;
  border: 1px solid rgba(200, 232, 255, 0.2);
  background:
    radial-gradient(420px 120px at 50% 0%, var(--call-tile-bg-glow, rgba(255,255,255,0.07)), transparent 72%),
    linear-gradient(160deg, var(--call-tile-bg-start, rgba(26, 33, 46, 0.92)), var(--call-tile-bg-end, rgba(9, 13, 20, 0.94)));
  cursor: pointer;
  padding: 8px;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.participantTile:hover {
  border-color: rgba(88, 101, 242, 0.58);
}

.participantTile.is-active {
  border-color: rgba(88, 101, 242, 0.95);
  box-shadow: inset 0 0 0 1px rgba(88, 101, 242, 0.5);
}

.participantVideo,
.participantAvatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
}

.participantVideo {
  object-fit: cover;
  border: 1px solid rgba(200, 232, 255, 0.18);
  background: #000;
  opacity: 0;
  pointer-events: none;
}

.participantAvatar {
  overflow: hidden;
  border: 1px solid rgba(200, 232, 255, 0.2);
  background: linear-gradient(160deg, rgba(30, 227, 255, 0.18), rgba(6, 13, 20, 0.42));
}

.participantAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.participantTile.has-video .participantVideo {
  opacity: 1;
  pointer-events: auto;
}

.participantTile.has-video .participantAvatar {
  display: none;
}

.participantTile.is-watch-gated.has-video .participantVideo {
  opacity: 1;
  filter: blur(10px) brightness(0.65) saturate(0.9);
  transform: scale(1.03);
}

.stageGridTile.is-watch-gated.has-video .stageGridVideo {
  opacity: 1;
  filter: blur(10px) brightness(0.62) saturate(0.9);
  transform: scale(1.03);
}

.participantTile.has-watch-snapshot::before,
.stageGridTile.has-watch-snapshot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background-image: var(--call-watch-snapshot-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.04);
  transition: opacity 0.18s ease;
}

.participantTile.is-watch-gated.has-watch-snapshot::before,
.stageGridTile.is-watch-gated.has-watch-snapshot::before {
  opacity: 1;
  filter: blur(12px) brightness(0.64) saturate(0.9);
}

.participantTile.is-watch-gated.has-watch-snapshot.has-video .participantVideo,
.stageGridTile.is-watch-gated.has-watch-snapshot.has-video .stageGridVideo {
  opacity: 0;
  filter: none;
  transform: none;
}

.callTileWatchCta {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}

.callTileWatchCta[hidden] {
  display: none !important;
}

.callTileWatchBtn {
  border-radius: 10px;
  border: 1px solid rgba(200, 232, 255, 0.22);
  background: rgba(12, 18, 28, 0.66);
  color: #f0f5ff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 9px 14px;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
}

.callTileWatchHint {
  font-size: 12px;
  font-weight: 600;
  color: rgba(231, 237, 251, 0.78);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.callTileLoadingCta {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  pointer-events: none;
  background:
    radial-gradient(340px 180px at 50% 50%, rgba(232, 207, 174, 0.1), rgba(6, 10, 16, 0.24)),
    linear-gradient(180deg, rgba(10, 10, 10, 0.46), rgba(0, 0, 0, 0.34));
}

.callTileLoadingCta[hidden] {
  display: none !important;
}

.callTileLoadingSpinner {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid rgba(232, 207, 174, 0.26);
  border-top-color: rgba(240, 211, 170, 0.95);
  box-shadow: 0 0 0 1px rgba(10, 16, 24, 0.25), 0 8px 20px rgba(0, 0, 0, 0.35);
  animation: callTileLoadingSpin 0.8s linear infinite;
}

.callTileLoadingHint {
  font-size: 12px;
  font-weight: 700;
  color: rgba(244, 235, 222, 0.9);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
}

@keyframes callTileLoadingSpin {
  to { transform: rotate(360deg); }
}

.participantTile.is-share-loading.has-video .participantVideo,
.stageGridTile.is-share-loading.has-video .stageGridVideo {
  opacity: 0.35;
  filter: brightness(0.7) saturate(0.82);
}

.participantLabel {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.callParticipantLabel__name {
  display: inline;
}

.callParticipantLabel__suffix {
  color: var(--text-muted);
}

.callAudioStateBadges {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.callAudioStateBadge {
  width: 17px;
  height: 17px;
  border-radius: 999px;
  border: 1px solid rgba(255, 150, 170, 0.42);
  background: rgba(58, 14, 21, 0.7);
  color: #ffadb8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.callAudioStateBadge svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.serverVoiceMember__state .callAudioStateBadges {
  margin-left: 0;
}

.stageGridLabel .callAudioStateBadges {
  margin-left: 5px;
}

.callStageControls {
  margin: 0 auto 12px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  width: fit-content;
  max-width: calc(100% - 20px);
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.callStageControls .btn {
  min-width: 92px;
}

.callStageControls__prefs {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.callStageControls__group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 14px;
  border: 1px solid rgba(236, 240, 248, 0.12);
  background: linear-gradient(180deg, rgba(14, 18, 25, 0.98), rgba(10, 13, 19, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 18px rgba(0, 0, 0, 0.24);
}

.callStageControls .callCtrlBtn {
  min-width: 0;
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 13px;
  border: 1px solid transparent;
  background: transparent;
  color: #f1f3f8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.14s ease,
    border-color 0.14s ease,
    background 0.14s ease,
    box-shadow 0.14s ease;
}

.callStageControls .callCtrlBtn:hover {
  border-color: rgba(236, 240, 248, 0.28);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(10, 16, 29, 0.34);
}

.callStageControls .callCtrlBtn:focus-visible {
  outline: none;
  border-color: rgba(236, 240, 248, 0.52);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
}

.callCtrlBtn__icon {
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.callCtrlBtn__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.callCtrlBtn.is-on .callCtrlBtn__icon {
  transform: scale(0.98);
}

.callStageControls .callCtrlBtn.is-on {
  border-color: rgba(236, 240, 248, 0.42);
  background: linear-gradient(160deg, rgba(64, 72, 88, 0.94), rgba(44, 50, 62, 0.94));
}

.callStageControls .callCtrlBtn[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
}

.callShareSplit {
  display: inline-flex;
  align-items: stretch;
  border-radius: 11px;
  overflow: hidden;
}

.callStageControls .callShareSplit .callCtrlBtn {
  border-radius: 0;
  margin: 0;
}

.callStageControls .callShareSplit__arrow {
  width: 40px;
  border-left: 1px solid rgba(236, 240, 248, 0.2);
}

.callStageControls .callShareSplit.is-sharing .callCtrlBtn {
  border-color: rgba(111, 209, 154, 0.72);
  background: linear-gradient(160deg, rgba(41, 104, 74, 0.9), rgba(30, 84, 58, 0.92));
  color: #ecfff5;
}

.callStageControls .callShareSplit.is-sharing .callShareSplit__arrow {
  border-left-color: rgba(188, 246, 218, 0.34);
}

.callStageControls .callCtrlBtn--danger {
  width: 88px;
  height: 58px;
  border-radius: 16px;
  border-color: rgba(238, 119, 142, 0.88);
  background: linear-gradient(160deg, rgba(220, 73, 104, 0.97), rgba(185, 49, 82, 0.97));
  color: #fff;
  box-shadow: 0 10px 18px rgba(184, 51, 83, 0.3);
}

.callStageControls .callCtrlBtn--danger:hover {
  border-color: rgba(247, 151, 169, 0.94);
  background: linear-gradient(160deg, rgba(232, 87, 117, 0.97), rgba(197, 60, 92, 0.97));
}

.callStageControls .callCtrlBtn--danger .callCtrlBtn__icon svg {
  stroke-width: 2.25;
}

.callStageViewportFsBtn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 8;
  width: 46px;
  height: 46px;
  min-width: 0;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(236, 240, 248, 0.2);
  background: linear-gradient(180deg, rgba(14, 18, 25, 0.96), rgba(10, 13, 19, 0.96));
  color: #f1f3f8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 16px rgba(0, 0, 0, 0.32);
}

.callStageViewportFsBtn .callCtrlBtn__icon {
  width: 22px;
  height: 22px;
}

.callStageViewportFsBtn:hover {
  border-color: rgba(236, 240, 248, 0.34);
  background: rgba(255, 255, 255, 0.08);
}

.callStageViewportFsBtn.is-on {
  border-color: rgba(236, 240, 248, 0.52);
  background: linear-gradient(160deg, rgba(64, 72, 88, 0.94), rgba(44, 50, 62, 0.94));
}

.callStageViewportFsBtn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.shareSelect {
  width: auto;
  height: 38px;
  min-width: 130px;
  border-radius: 10px;
  border: 1px solid rgba(200, 232, 255, 0.2);
  background: rgba(0, 0, 0, 0.32);
  color: var(--text-main);
  padding: 0 10px;
}

.shareAudioToggle {
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(200, 232, 255, 0.2);
  background: rgba(0, 0, 0, 0.24);
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  user-select: none;
}

.shareAudioToggle input {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  accent-color: var(--accent-strong);
}

.shareAudioToggle:has(input:disabled) {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.callBar,
.inCallBar {
  position: fixed;
  left: max(24px, calc((100vw - 1600px) / 2 + 24px));
  top: auto;
  bottom: 16px;
  transform: translateY(12px);
  width: min(304px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  border-radius: 12px;
  border: 1px solid rgba(200, 232, 255, 0.2);
  background: rgba(7, 12, 18, 0.96);
  box-shadow: var(--shadow-main);
  padding: 9px 10px;
  display: grid;
  gap: 9px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 1450;
}

.callBar.is-open,
.inCallBar.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.callBarHeader,
.callBar__left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.callBarText {
  font-size: 14px;
  font-weight: 700;
  color: #dfe6f8;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.callBarShareBadge {
  display: inline-flex;
  align-items: center;
  max-width: min(34vw, 380px);
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(110, 203, 154, 0.36);
  background: rgba(15, 43, 34, 0.86);
  color: #dff8ec;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.callBarPing {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(146, 164, 255, 0.5);
  background: rgba(22, 28, 46, 0.95);
  color: #e6ecff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.callBarPing.is-stale {
  border-color: rgba(160, 168, 194, 0.38);
  color: #b6bed8;
}

.callBarLiveIcon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid rgba(73, 209, 127, 0.28);
  background: rgba(73, 209, 127, 0.14);
  color: #49d17f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.callBarLiveIcon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.callBarActions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.callMiniBtn {
  width: 42px;
  min-width: 42px;
  height: 32px;
  border-radius: 9px;
  padding: 0;
}

.callBar .callShareSplit {
  display: inline-flex;
  align-items: stretch;
  border-radius: 9px;
  overflow: hidden;
}

.callBar .callShareSplit .callMiniBtn {
  border-radius: 0;
}

.callBar .callShareSplit__arrow {
  width: 26px;
  min-width: 26px;
  border-left: 1px solid rgba(160, 203, 255, 0.22);
}

.callBar .callShareSplit.is-sharing .callMiniBtn {
  border-color: rgba(108, 200, 149, 0.68);
  background: linear-gradient(160deg, rgba(40, 101, 73, 0.88), rgba(31, 84, 59, 0.9));
  color: #edfff7;
}

.callMiniBtn__icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.callMiniBtn__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.callBar .callMiniBtn.is-on {
  border-color: #6e79b5;
  background: #3f496d;
}

.callMiniBtn--danger {
  border-color: rgba(242, 111, 111, 0.6);
  background: rgba(242, 111, 111, 0.17);
}

.callMiniBtn--accent {
  border-color: rgba(116, 141, 255, 0.62);
  background: rgba(88, 110, 238, 0.2);
}

.dotLive,
.inCallDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(73, 209, 127, 0.6);
  animation: dotPulse 1.7s infinite;
}

.inCallBar__sub {
  font-size: 12px;
  color: var(--text-soft);
}

@keyframes dotPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(73, 209, 127, 0.6);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(73, 209, 127, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(73, 209, 127, 0);
  }
}

@keyframes panelEnter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel,
.card,
.callStage,
.callBar,
.inCallBar {
  animation: panelEnter 0.16s ease;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.18);
}

*::-webkit-scrollbar-thumb {
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
  background-color: rgba(30, 227, 255, 0.3);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(30, 227, 255, 0.52);
}

@media (max-width: 1260px) {
  .appGrid,
  .app:not(.wrap) {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .rightCol,
  .right {
    display: none;
  }
}

@media (max-width: 930px) {
  body {
    overflow: auto;
  }

  .wrap.app {
    height: auto;
    min-height: calc(100vh - 24px);
  }

  .appGrid,
  .app:not(.wrap) {
    grid-template-columns: 1fr;
    height: auto;
  }

  .leftCol,
  .left {
    display: none;
  }

  .panel {
    min-height: 460px;
  }

  .split2,
  .grid2,
  .avatar-editor {
    grid-template-columns: 1fr;
  }

  .callBar,
  .inCallBar {
    flex-direction: column;
    align-items: stretch;
  }

  .callBar__right {
    justify-content: flex-end;
  }
}

@media (max-width: 640px) {
  .serverChannelsPanel {
    display: none !important;
  }

  .wrap {
    width: calc(100% - 16px);
    margin: 8px auto;
  }

  .wrap.app {
    width: calc(100% - 12px);
    margin: 6px auto;
  }

  .panelHeader,
  .leftTop,
  .midTop,
  .rightTop,
  .panelBody,
  .leftList,
  .midBody,
  .rightBody {
    padding: 10px;
  }

  .panelTitle,
  .hTitle {
    font-size: 18px;
  }

  .btn,
  .smallBtn {
    height: 34px;
    padding: 0 11px;
    font-size: 13px;
  }

  .profileOverlay,
  .modal {
    padding: 8px;
  }

  .callStage {
    inset: 0;
  }

  .callStageCard {
    border-radius: 0;
  }

  .callStageControls .btn {
    min-width: 74px;
  }

  .shareSelect {
    min-width: 110px;
    flex: 1 1 120px;
  }

  .shareAudioToggle {
    flex: 0 0 auto;
  }

  .callStageParticipants {
    grid-template-columns: 1fr;
  }

  .callStageGrid {
    grid-template-columns: 1fr;
  }
}
/* =========================
   GIF PICKER (ADD)
   ========================= */
.gifTopRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.gifTabBar{
  display:flex;
  align-items:center;
  gap:8px;
}

.gifTopRow .btn.active{
  border-color: rgba(121, 131, 245, 0.95);
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.58), rgba(88, 101, 242, 0.4));
}

.gifSearchRow{
  margin-top: 10px;
}

.gifQuickTags{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.gif-shortcut{
  min-height: 86px;
  min-width: 170px;
  flex: 1 1 220px;
  border-radius: 14px;
  border:1px solid rgba(200,232,255,.16);
  background:
    linear-gradient(160deg, rgba(88,101,242,.28), rgba(88,101,242,.14)),
    rgba(0,0,0,.28);
  color: var(--text-main);
  padding: 12px;
  text-align:left;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:4px;
  transition: transform .12s ease, border-color .12s ease, filter .12s ease;
}

.gif-shortcut:hover{
  transform: translateY(-1px);
  border-color: rgba(121, 131, 245, 0.76);
  filter: brightness(1.06);
}

.gif-shortcut--favorites{
  background:
    linear-gradient(160deg, rgba(67,160,115,.36), rgba(67,160,115,.18)),
    rgba(0,0,0,.28);
}

.gif-shortcut__title{
  font-weight: 700;
  font-size: 16px;
}

.gif-shortcut__meta{
  font-size: 12px;
  color: var(--text-soft);
}

.gif-term{
  height: 34px;
  border:1px solid rgba(200,232,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  color: var(--text-main);
  padding: 0 12px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background-color .12s ease;
}

.gif-term:hover{
  transform: translateY(-1px);
  border-color: rgba(88,101,242,.58);
  background: rgba(88,101,242,.18);
}

.gifGrid{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  max-height: 46vh;
  overflow:auto;
  padding-right: 2px;
}

.gifItem,
.gif-item{
  border-radius:14px;
  border:1px solid rgba(200,232,255,.16);
  background: rgba(0,0,0,.25);
  overflow:hidden;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background-color .12s ease;
  min-height: 170px;
  position: relative;
}

.gifItem:hover,
.gif-item:hover{
  transform: translateY(-1px);
  border-color: rgba(88,101,242,.6);
  background: rgba(88,101,242,.12);
}

.gifItem img,
.gif-item img{
  width:100%;
  height:100%;
  min-height:170px;
  display:block;
  object-fit:cover;
}

.gif-item.is-broken{
  background: rgba(242,111,111,.12);
}

/* Mensagens GIF no chat */
.msg__gifWrap{
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: min(640px, 100%);
  margin-top: 2px;
  line-height: 0;
}

.msg__gifDeferred{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: min(640px, 100%);
}

.msg__gif{
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(72vh, 720px);
  object-fit: contain;
  border-radius: 8px;
  display:block;
  border: 1px solid rgba(200,232,255,.18);
}

.msg__gif.lazyMediaImage:not([src]),
.msg__attachmentImage.lazyMediaImage:not([src]) {
  width: min(420px, 72vw);
  min-height: 132px;
  aspect-ratio: 16 / 10;
  background: rgba(8, 13, 23, 0.72);
  color: transparent;
  font-size: 0;
}

.msg__gifFavBtn{
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(200, 232, 255, 0.32);
  border-radius: 999px;
  background: rgba(12, 16, 26, 0.82);
  color: #cad9ff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
  opacity: 0.82;
  transition: transform .14s ease, opacity .14s ease, border-color .14s ease, background .14s ease, color .14s ease;
}

.msg__gifWrap:hover .msg__gifFavBtn,
.msg__gifFavBtn:focus-visible,
.msg__gifFavBtn.is-fav{
  opacity: 1;
}

.msg__gifFavBtn:hover,
.msg__gifFavBtn:focus-visible{
  transform: translateY(-1px) scale(1.04);
  border-color: rgba(255, 213, 111, 0.72);
  background: rgba(255, 213, 111, 0.18);
  color: #ffe083;
}

.msg__gifFavBtn.is-fav{
  border-color: rgba(255, 213, 111, 0.74);
  background: rgba(255, 213, 111, 0.24);
  color: #ffd86f;
}

.msg__gifWrap.is-gif-paused[data-gif-paused-label]:not([data-gif-paused-label=""])::after {
  content: attr(data-gif-paused-label);
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: calc(100% - 20px);
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(8, 13, 23, 0.78);
  color: rgba(237, 244, 255, 0.92);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.msg__attachmentsList {
  width: min(720px, 100%);
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 2px;
}

.msg__attachmentsList .msg__attachmentsItem {
  min-width: 0;
}

.msg__attachmentsList .msg__attachment {
  width: 100%;
  max-width: 100%;
}

.msg__attachmentsList--media .msg__attachmentMedia,
.msg__attachmentsList--media .msg__attachmentPreview,
.msg__attachmentsList--media .msg__videoPlayer,
.msg__attachmentsList--media .msg__attachmentImage,
.msg__attachmentsList--media .msg__attachmentVideo {
  width: 100%;
  max-width: 100%;
}

.msg__attachmentsList--media {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.msg__attachmentsList--media[data-count="1"] {
  grid-template-columns: 1fr;
}

.msg__attachmentsList--media[data-count="3"] .msg__attachmentsItem:first-child,
.msg__attachmentsList--media[data-count="5"] .msg__attachmentsItem:first-child,
.msg__attachmentsList--media[data-count="7"] .msg__attachmentsItem:first-child,
.msg__attachmentsList--media[data-count="9"] .msg__attachmentsItem:first-child {
  grid-column: 1 / -1;
}

.msg__attachmentsList--media .msg__attachmentImage,
.msg__attachmentsList--media .msg__attachmentVideo {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.msg__attachmentsList--media .msg__attachmentCaption {
  display: none;
}

.msg__attachment {
  width: fit-content;
  max-width: min(640px, 100%);
  display: block;
}

.msg__attachment > * + * {
  margin-top: 6px;
}

.msg__attachment--image {
  display: block;
}

.msg__attachment--image > * + * {
  margin-top: 4px;
}

.msg__attachmentMedia {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  line-height: 0;
}

.msg__attachmentMedia.is-spoiler .msg__attachmentImage,
.msg__attachmentMedia.is-spoiler .msg__attachmentVideo {
  filter: blur(16px) brightness(0.6);
  transform: scale(1.02);
}

.msg__attachmentMedia.is-revealed .msg__attachmentImage,
.msg__attachmentMedia.is-revealed .msg__attachmentVideo {
  filter: none;
  transform: none;
}

.msg__attachmentPreview {
  border: 0;
  padding: 0;
  background: transparent;
  display: block;
  width: fit-content;
  max-width: 100%;
  cursor: zoom-in;
}

.msg__attachmentDeferredPreview {
  width: min(360px, 72vw);
  min-height: 148px;
  border: 1px solid rgba(200, 232, 255, 0.2);
  border-radius: 10px;
  padding: 14px;
  background: rgba(8, 13, 23, 0.72);
  color: #edf4ff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.msg__attachmentDeferredPreview:hover,
.msg__attachmentDeferredPreview:focus-visible {
  border-color: rgba(125, 192, 255, 0.46);
  background: rgba(13, 21, 36, 0.86);
}

.msg__attachmentDeferredPreview:disabled {
  opacity: 0.78;
  cursor: wait;
}

.msg__attachmentDeferredIcon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 1px solid rgba(200, 232, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

.msg__attachmentDeferredBody {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.msg__attachmentDeferredTitle,
.msg__attachmentDeferredMeta,
.msg__attachmentDeferredAction {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg__attachmentDeferredTitle {
  font-size: 13px;
  font-weight: 700;
}

.msg__attachmentDeferredMeta {
  font-size: 12px;
  color: rgba(237, 244, 255, 0.7);
}

.msg__attachmentDeferredAction {
  font-size: 12px;
  color: #9fd0ff;
  font-weight: 700;
}

.msg__attachmentMedia--deferred:not(.is-loaded) .msg__attachmentSpoilerMask {
  display: none;
}

.msg__attachmentSpoilerMask {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(5, 7, 12, 0.08), rgba(5, 7, 12, 0.58)),
    rgba(9, 12, 20, 0.55);
  color: #e7efff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12px;
}

.msg__attachmentMedia.is-revealed .msg__attachmentSpoilerMask {
  display: none;
}

.msg__attachmentImage {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(74vh, 760px);
  object-fit: contain;
  border-radius: 10px;
  display: block;
  border: 1px solid rgba(200, 232, 255, 0.2);
}

.msg__attachmentVideo {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(74vh, 760px);
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(200, 232, 255, 0.2);
  background: rgba(0, 0, 0, 0.5);
  display: block;
  cursor: pointer;
}

.msg__videoPlayer {
  position: relative;
  width: fit-content;
  max-width: 100%;
}

.msg__videoPlayer:fullscreen,
.msg__videoPlayer:-webkit-full-screen {
  width: 100vw;
  max-width: none;
  height: 100vh;
  background: #000;
  border-radius: 0;
}

.msg__videoPlayer:fullscreen .msg__attachmentVideo,
.msg__videoPlayer:-webkit-full-screen .msg__attachmentVideo {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: #000;
}

.msg__videoPlayer:fullscreen .msg__videoUi,
.msg__videoPlayer:-webkit-full-screen .msg__videoUi {
  left: 16px;
  right: 16px;
  bottom: 16px;
}

.msg__videoUi {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-radius: 12px;
  border: 1px solid rgba(200, 232, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(12, 16, 26, 0.52), rgba(8, 11, 18, 0.9)),
    rgba(8, 11, 18, 0.84);
  backdrop-filter: blur(7px);
  padding: 8px 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e8efff;
  overflow: visible;
}

.msgVideoBtn {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  border: 1px solid rgba(200, 232, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #f1f6ff;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.msgVideoBtn:hover,
.msgVideoBtn:focus-visible {
  border-color: var(--accent-strong);
  background: rgba(88, 101, 242, 0.24);
}

.msgVideoTime,
.msgVideoRemain {
  font-size: 12px;
  font-weight: 700;
  color: #d8e4ff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 0 0 auto;
}

.msgVideoRemain {
  color: #a8b8d8;
}

.msgVideoSeek {
  flex: 1;
  min-width: 70px;
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(141, 165, 255, 0.95), rgba(98, 223, 212, 0.95));
  outline: none;
  cursor: pointer;
}

.msgVideoSeek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  border: 1px solid rgba(200, 232, 255, 0.86);
  background: #f2f6ff;
}

.msgVideoSeek::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  border: 1px solid rgba(200, 232, 255, 0.86);
  background: #f2f6ff;
}

.msgVideoVolume {
  width: 64px;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: rgba(200, 232, 255, 0.38);
  outline: none;
  cursor: pointer;
}

.msgVideoVolume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  border: 1px solid rgba(200, 232, 255, 0.86);
  background: #f2f6ff;
}

.msgVideoVolume::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  border: 1px solid rgba(200, 232, 255, 0.86);
  background: #f2f6ff;
}

.msgVideoVolWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.msgVideoVolPopup {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 6px);
  width: 34px;
  height: 118px;
  border-radius: 10px;
  border: 1px solid rgba(200, 232, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(12, 16, 26, 0.74), rgba(8, 11, 18, 0.94)),
    rgba(8, 11, 18, 0.88);
  backdrop-filter: blur(7px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 6;
  transition:
    opacity 0.16s ease,
    visibility 0s linear 0.16s,
    transform 0.16s ease;
}

.msgVideoVolWrap.is-open .msgVideoVolPopup,
.msgVideoVolWrap:hover .msgVideoVolPopup,
.msgVideoVolWrap:focus-within .msgVideoVolPopup {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition:
    opacity 0.16s ease,
    visibility 0s linear 0s,
    transform 0.16s ease;
}

.msgVideoVolume--vertical {
  width: 18px;
  height: 94px;
  margin: 0;
  background: transparent;
  writing-mode: vertical-lr;
  direction: rtl;
}

.msg__attachment--audio {
  width: min(460px, 100%);
  max-width: 100%;
}

.msgAudioCard {
  width: 100%;
  border: 1px solid rgba(200, 232, 255, 0.24);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(16, 22, 34, 0.82), rgba(7, 10, 16, 0.92)),
    rgba(7, 10, 16, 0.86);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
  padding: 10px 12px;
  display: grid;
  gap: 10px;
}

.msgAudioHead {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.msgAudioFileMeta {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}

.msgAudioFileName {
  display: block;
  min-width: 0;
  text-align: left;
  color: #6eb0ff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msgAudioFileSize {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.2;
}

.msgAudioDownloadBtn {
  margin-left: auto;
}

.msgAudioDownloadIcon {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.msgAudioDownloadBtn.msg__attachmentCornerBtn--inline {
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 7px;
}

.msgAudioPlayerRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.msgAudioPlayerRow .msg__attachmentAudio {
  display: none;
}

.msgAudioBtn {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  border: 1px solid rgba(200, 232, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #edf4ff;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.msgAudioBtn:hover,
.msgAudioBtn:focus-visible {
  border-color: var(--accent-strong);
  background: rgba(88, 101, 242, 0.24);
}

.msgAudioTime {
  font-size: 12px;
  font-weight: 700;
  color: #d8e4ff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 0 0 auto;
}

.msgAudioSeek {
  flex: 1;
  min-width: 80px;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: rgba(170, 188, 224, 0.4);
  outline: none;
  cursor: pointer;
}

.msgAudioSeek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(200, 232, 255, 0.86);
  background: #f2f6ff;
}

.msgAudioSeek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(200, 232, 255, 0.86);
  background: #f2f6ff;
}

.msgAudioVolWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.msgAudioVolWrap::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  width: 38px;
  height: 12px;
  background: transparent;
}

.msgAudioVolPopup {
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translate(-50%, 6px);
  width: 34px;
  height: 118px;
  border-radius: 10px;
  border: 1px solid rgba(200, 232, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(12, 16, 26, 0.74), rgba(8, 11, 18, 0.94)),
    rgba(8, 11, 18, 0.88);
  backdrop-filter: blur(7px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 6;
  transition:
    opacity 0.16s ease,
    visibility 0s linear 0.16s,
    transform 0.16s ease;
}

.msgAudioVolWrap.is-open .msgAudioVolPopup,
.msgAudioVolWrap:hover .msgAudioVolPopup {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition:
    opacity 0.16s ease,
    visibility 0s linear 0s,
    transform 0.16s ease;
}

.msgAudioVolume {
  width: 18px;
  height: 94px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  writing-mode: vertical-lr;
  direction: rtl;
}

.msgAudioVolume--vertical {
  width: 18px;
  height: 94px;
  margin: 0;
  background: transparent;
  writing-mode: vertical-lr;
  direction: rtl;
}

.msgAudioVolume::-webkit-slider-runnable-track {
  width: 4px;
  border-radius: 999px;
  background: rgba(170, 188, 224, 0.42);
}

.msgAudioVolume::-moz-range-track {
  width: 4px;
  border-radius: 999px;
  background: rgba(170, 188, 224, 0.42);
}

.msgAudioVolume {
  outline: none;
  cursor: pointer;
}

.msgAudioVolume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  border: 1px solid rgba(200, 232, 255, 0.86);
  background: #f2f6ff;
}

.msgAudioVolume::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  border: 1px solid rgba(200, 232, 255, 0.86);
  background: #f2f6ff;
}

.msg__attachmentCornerBtn {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 76px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(200, 232, 255, 0.32);
  background: rgba(12, 16, 26, 0.82);
  color: #deebff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.msg__attachmentCornerBtn--left {
  left: 8px;
  right: auto;
  min-width: 28px;
  width: 28px;
  padding: 0;
}

.msg__attachmentCornerBtn--danger {
  border-color: rgba(242, 111, 111, 0.45);
  background: rgba(72, 16, 18, 0.8);
  color: #ffd6d6;
}

.msg__attachmentCornerBtn:hover,
.msg__attachmentCornerBtn:focus-visible {
  border-color: var(--accent-strong);
  background: rgba(88, 101, 242, 0.28);
  color: #fff;
}

.msg__attachmentCornerBtn--danger:hover,
.msg__attachmentCornerBtn--danger:focus-visible {
  border-color: rgba(255, 136, 136, 0.78);
  background: rgba(128, 24, 34, 0.88);
  color: #fff;
}

.msg__attachmentCornerBtn--inline {
  position: static;
  min-width: 92px;
  flex: 0 0 auto;
}

.msg__attachmentInfo {
  color: var(--text-muted);
  font-size: 12px;
}

.msg__attachmentCaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.msg__attachmentOpen {
  appearance: none;
  cursor: pointer;
  font: inherit;
  color: #cfdcff;
  line-height: 1;
  border: 1px solid rgba(200, 232, 255, 0.2);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}

.msg__attachmentPreview:focus-visible,
.msg__attachmentOpen:focus-visible,
.msg__fileRowBtn:focus-visible {
  outline: 2px solid rgba(121, 131, 245, 0.7);
  outline-offset: 1px;
}

.msg__attachmentOpen {
  color: #cfdcff;
  font-size: 12px;
}

.msg__attachmentOpen:hover,
.msg__attachmentOpen:focus-visible {
  border-color: var(--accent-strong);
  background: rgba(88, 101, 242, 0.18);
}

.msg__attachmentOpen--danger {
  border-color: rgba(242, 111, 111, 0.45);
  background: rgba(72, 16, 18, 0.62);
  color: #ffd6d6;
  min-width: 30px;
  width: 30px;
  padding: 6px 0;
}

.msg__attachmentOpen--danger:hover,
.msg__attachmentOpen--danger:focus-visible {
  border-color: rgba(255, 136, 136, 0.78);
  background: rgba(128, 24, 34, 0.8);
  color: #fff;
}

.msg__fileRow {
  max-width: min(560px, 100%);
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(200, 232, 255, 0.2);
  border-radius: 10px;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.03);
}

.msg__fileRowBtn {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.msg__fileRow:hover,
.msg__fileRow:focus-visible {
  border-color: var(--accent-strong);
  background: rgba(88, 101, 242, 0.16);
}

.msg__fileIcon {
  font-size: 16px;
  line-height: 1;
}

.msg__fileText {
  min-width: 0;
  display: grid;
  gap: 2px;
  flex: 1;
}

.msg__fileName {
  font-size: 13px;
  line-height: 1.3;
  word-break: break-word;
}

.msg__fileMeta {
  color: var(--text-muted);
  font-size: 12px;
}

.msg__fileOpen {
  font-size: 12px;
  color: var(--text-soft);
}

.dmAttachmentCard {
  width: min(980px, 96vw);
  max-height: min(92vh, 980px);
  display: flex;
  flex-direction: column;
}

.dmAttachmentTop {
  align-items: flex-start;
}

.dmAttachmentTopActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dmAttachmentBody {
  min-height: 160px;
  max-height: calc(92vh - 96px);
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 14px;
}

.dmAttachmentPreview {
  max-width: 100%;
  max-height: min(78vh, 920px);
  border-radius: 12px;
  border: 1px solid rgba(200, 232, 255, 0.2);
  background: rgba(0, 0, 0, 0.68);
}

.dmAttachmentPreview--image {
  display: block;
}

.dmAttachmentGifWrap {
  position: relative;
  display: inline-grid;
  place-items: center;
  max-width: 100%;
}

.dmAttachmentGifWrap.is-gif-paused .dmAttachmentPreview--image.lazyMediaImage:not([src]) {
  width: min(720px, 86vw);
  min-height: min(52vh, 420px);
  aspect-ratio: 16 / 10;
}

.dmAttachmentPreview--video {
  width: min(1020px, 100%);
}

.dmAttachmentPreview--video:fullscreen,
.dmAttachmentPreview--video:-webkit-full-screen {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: 100vh;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: #000;
}

.dmAttachmentPreview--audio {
  width: min(760px, 100%);
}

.dmAttachmentFilePreview {
  width: min(760px, 100%);
  border: 1px solid rgba(200, 232, 255, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.dmAttachmentFileIcon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(200, 232, 255, 0.26);
  background: rgba(255, 255, 255, 0.05);
  display: grid;
  place-items: center;
}

.dmAttachmentFileMeta {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}

.dmAttachmentFileName {
  font-size: 14px;
  font-weight: 700;
  color: #deebff;
  word-break: break-word;
}

/* ===== GIF Picker (Final) ===== */
#gifModal .modalCard{ max-width: 920px; }
.gif-fav-btn{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.38);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.gif-fav-btn:hover{ transform: scale(1.05); }
.gif-fav-btn.is-fav{
  background: rgba(115,103,240,0.52);
  border-color: rgba(115,103,240,0.9);
}
.gif-empty{
  grid-column: 1 / -1;
  opacity:0.78;
  padding:18px 0;
  text-align:center;
}

@media (max-width: 920px){
  .gifGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gif-shortcut{ flex: 1 1 100%; }
  .themeGrid{ grid-template-columns: 1fr; }
  .themeAppearanceMetaGrid { grid-template-columns: 1fr; }
  .themePresetInline__row { flex-direction: column; }
  .themePresetInline__row .btn { width: 100%; }
  .themeGradientHint { grid-column: 1; }
  .themeLivePreviewBlock { grid-column: 1; }
}

@media (max-width: 560px){
  .gifTopRow{ flex-direction: column; align-items: stretch; }
  .gifTabBar{ width: 100%; }
  .gifTabBar .btn{ flex: 1; }
  .gifGrid{ grid-template-columns: 1fr; max-height: 50vh; }
  .themeColorGrid{ grid-template-columns: 1fr; }
  .themeActions .btn{ min-width: 0; flex: 1; }
}

/* =========================
   FINAL VISUAL PASS (APP-FIRST)
   ========================= */
:root {
  --bg-main: #0d0e12;
  --bg-deep: #07080b;
  --surface-0: #13151a;
  --surface-1: #13151a;
  --surface-2: #13151a;
  --surface-row: #1a1d24;
  --surface-row-hover: #20242d;
  --stroke: #272b34;
  --stroke-strong: #323743;
  --text-main: #f1f2f5;
  --text-soft: #c8ccd4;
  --text-muted: #9ea4af;
  --accent: #8ea0ff;
  --accent-strong: #a1b0ff;
  --accent-soft: rgba(142, 160, 255, 0.2);
  --bg-glow: rgba(255, 255, 255, 0.03);
  --ui-shell-bg: #0a0c10;
  --ui-top-bg: #151820;
  --ui-card-bg: #1b1f28;
  --ui-panel-soft-bg: #101319;
  --ui-row-bg: #1e222b;
  --ui-row-strong-bg: #0d0f14;
  --ui-input-bg: #0a0c10;
  --ui-input-focus-bg: #0c1018;
  --ui-btn-bg: #1f232c;
  --ui-btn-border: #2d3240;
  --ui-btn-hover-bg: #262c37;
  --ui-btn-hover-border: #394153;
  --ui-primary-bg: #2c3552;
  --ui-primary-border: #4a587f;
  --ui-primary-hover-bg: #354062;
  --ui-primary-hover-border: #5d6f9f;
  --ui-danger-bg: #462e34;
  --ui-danger-border: #7c4a53;
  --ui-danger-hover-bg: #53343d;
  --ui-danger-hover-border: #965662;
  --ui-debug-bg: #0b0d12;
}

body {
  background:
    radial-gradient(900px 360px at 50% -12%, var(--bg-glow), transparent 62%),
    linear-gradient(var(--bg-angle, 180deg), var(--bg-main), var(--bg-deep));
}

body::before {
  opacity: 0.2;
  background-size: 24px 24px;
}

body::after {
  display: none;
}

.app:not(.wrap),
.appGrid {
  --app-grid-gap: 10px;
  gap: var(--app-grid-gap);
}

.app:not(.wrap) {
  width: calc(100% - 24px);
  height: calc(100vh - 24px);
  margin: 12px auto;
  padding: 10px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: var(--ui-shell-bg);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

.appGrid {
  grid-template-columns: clamp(300px, var(--left-sidebar-width), 420px) minmax(520px, 1fr) clamp(220px, var(--right-sidebar-width), 360px);
}

.panel,
.card {
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: var(--surface-1);
  box-shadow: none;
  backdrop-filter: none;
}

.panel::before,
.card::before {
  display: none;
}

.panelHeader,
.leftTop,
.midTop,
.rightTop {
  padding: 12px;
  border-bottom: 1px solid var(--stroke);
  background: var(--ui-top-bg);
}

.panelBody,
.leftList,
.midBody,
.rightBody {
  padding: 12px;
  background: var(--surface-1);
}

.hSub,
.rightSectionLabel,
#onlineCount {
  display: none;
}

.leftTop #meAvatar {
  --status-dot-size: 18px;
  --status-dot-inset: 2px;
  width: 82px;
  height: 82px;
}

.leftTop .meRow {
  padding: 11px 14px;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(
    160deg,
    var(--me-card-banner-start, var(--ui-card-bg)),
    var(--me-card-banner-end, var(--ui-card-bg)) 82%
  );
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  grid-template-areas:
    "avatar text"
    "avatar actions";
  align-items: start;
  row-gap: 8px;
  column-gap: 12px;
  min-height: 112px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 18px 38px -32px rgba(0, 0, 0, 0.42);
}

#meProfileCard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(7, 10, 18, 0.96) 0%, rgba(7, 10, 18, 0.9) 22%, rgba(7, 10, 18, 0.7) 48%, rgba(7, 10, 18, 0.45) 72%, rgba(7, 10, 18, 0.74) 100%),
    linear-gradient(180deg, rgba(7, 10, 18, 0.1) 0%, rgba(7, 10, 18, 0.7) 100%);
  transition: opacity 0.18s ease;
}

#meProfileCard.has-banner-media::before {
  opacity: 1;
}

#meProfileCard::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: 15px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 42%);
}

#meProfileCard.has-banner-media {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 16px 32px -22px var(--me-card-banner-glow, rgba(0, 0, 0, 0.28));
}

#meProfileCard .profileBannerMedia {
  z-index: -1;
  inset: 0 -5% 0 22%;
  width: auto;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: none;
  filter: saturate(0.82) brightness(0.68) contrast(1.02);
  opacity: 0.84;
}

#meProfileCard .meAvatarWrap,
#meProfileCard .meText,
#meProfileCard .meControls {
  position: relative;
  z-index: 1;
}

#meProfileCard .meText {
  gap: 4px;
  align-self: center;
  padding-top: 0;
  padding-right: 8px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.34);
}

#meProfileCard.has-banner-media #meAvatar {
  background: rgba(6, 10, 18, 0.34);
  border-color: rgba(214, 231, 255, 0.22);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

#meProfileCard.has-banner-media .meCtrlBtn {
  --me-ctrl-bg: rgba(16, 18, 24, 0.56);
  --me-ctrl-border: rgba(255, 255, 255, 0.12);
  --me-ctrl-icon-color: rgba(244, 247, 255, 0.92);
}

#meProfileCard.has-banner-media .meCtrlBtn.is-on {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(58, 62, 72, 0.88);
  color: #ffffff;
}

#meProfileCard.has-banner-media .meControls {
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

#meProfileCard.has-banner-media .meName {
  color: #f7fbff;
}

#meProfileCard.has-banner-media .meTag {
  color: rgba(236, 242, 255, 0.8);
}

.leftTop .meAvatarWrap {
  grid-area: avatar;
  align-self: center;
}

.leftTop .meText {
  grid-area: text;
  display: grid;
  gap: 2px;
  align-self: start;
  min-width: 0;
  padding-top: 2px;
}

.leftTop .meControls {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding-top: 0;
  align-self: start;
}

.leftTop #meStatusBtn {
  display: none;
}

.leftTop #meAvatar {
  cursor: pointer;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
  background: rgba(0, 0, 0, 0.24);
  box-shadow: none;
  border-color: var(--stroke);
}

.leftTop #meAvatar:hover {
  border-color: var(--ui-btn-hover-border);
  transform: translateY(-1px);
}

.leftTop #meAvatar:focus-visible {
  outline: none;
  border-color: var(--accent-strong);
  box-shadow:
    0 0 0 3px var(--accent-soft),
    0 0 0 4px rgba(30, 227, 255, 0.08);
}

.leftTop .meName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 800;
  letter-spacing: 0.01em;
  font-size: 20px;
  line-height: 1.12;
}

.leftTop .meTag {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted);
  font-size: 15px;
  margin-top: 2px;
}

.meName {
  font-size: 17px;
  line-height: 1.15;
}

.meTag {
  font-size: 13px;
  margin-top: 1px;
}

.statusPill {
  margin-top: 7px;
  padding: 5px 10px;
  border-color: var(--stroke-strong);
  background: var(--ui-panel-soft-bg);
  color: #d5d9e0;
}

.leftTop .meCtrlBtn {
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  color: var(--me-ctrl-icon-color, #dfe6f8);
  border-color: var(--me-ctrl-border, rgba(200, 232, 255, 0.22));
  background: var(--me-ctrl-bg, var(--ui-card-bg));
}

.leftTop .meCtrlBtn__icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.leftTop .meCtrlBtn__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leftTop .meCtrlBtn.is-on {
  border-color: #6e79b5;
  background: #3f496d;
  color: #ffffff;
}

.leftTop .meCtrlBtn:disabled {
  opacity: 0.72;
  color: var(--me-ctrl-icon-color, #dfe6f8);
  border-color: var(--me-ctrl-border, rgba(200, 232, 255, 0.22));
  cursor: not-allowed;
}

.meBtns {
  gap: 7px;
}

.meBtns .btn {
  min-width: 76px;
}

.leftTabsSingle,
.midTabs {
  gap: 0;
}

.midTabs {
  margin-top: 0;
}

.midTabs .chip {
  height: auto;
  border: 0;
  background: transparent;
  color: #b4b9c4;
  border-radius: 0;
  padding: 0 14px 0 0;
  font-size: 15px;
  font-weight: 600;
}

.midTabs .midTabsHiddenChip {
  display: none !important;
}

.midTabs .chip:not(:last-child) {
  margin-right: 12px;
  position: relative;
}

.midTabs .chip:not(:last-child)::after {
  content: "|";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: #666c76;
  font-size: 12px;
}

.midTabs .chip.active {
  color: #f2f4f8;
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.leftTabsSingle .chip {
  width: 100%;
  justify-content: center;
  background: var(--ui-shell-bg);
  border: 1px solid var(--stroke);
  color: #c2c7d0;
  border-radius: 8px;
}

.left .leftTabsSingle,
.left .searchBox {
  display: none;
}

.panel.left {
  --left-rail-column-width: 96px;
}

.panel.left .leftTop {
  margin-left: 0;
}

.leftDock {
  display: grid;
  grid-template-columns: var(--left-rail-column-width) minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.panel.left.has-callbar-overlay .groupsRail {
  padding-bottom: calc(10px + var(--left-callbar-overlay-offset, 96px));
}

.panel.left.has-callbar-overlay .leftDockDms #dmList {
  padding-bottom: calc(8px + var(--left-callbar-overlay-offset, 96px));
}

.leftDockGroups,
.leftDockDms {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: var(--ui-panel-soft-bg);
  display: flex;
  flex-direction: column;
}

.leftDockGroups {
  position: relative;
  left: auto;
  top: auto;
  bottom: auto;
  width: 100%;
  min-width: 0;
  z-index: 2;
  border-right: 1px solid var(--stroke);
}

.leftList {
  margin-left: 0;
}

.leftDockTitle {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 12px;
  border-bottom: 1px solid var(--stroke);
  color: #d2d6de;
  font-size: 13px;
  letter-spacing: 0.01em;
}

.groupsRail {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 8px 10px;
}

.groupsRail::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.groupsRail .hint {
  margin: 0;
  text-align: center;
  white-space: normal;
  word-break: break-word;
}

.groupOrb {
  width: 72px;
  height: 72px;
  position: relative;
  border-radius: 999px;
  border: 2px solid var(--stroke);
  background: var(--ui-input-focus-bg);
  overflow: visible;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.groupOrb:hover {
  border-color: var(--accent-strong);
  background: var(--ui-row-bg);
  transform: translateY(-1px);
}

.groupOrb--server {
  border-color: rgba(178, 188, 206, 0.36);
}

.groupOrb--folder {
  border-radius: 24px;
  border-color: rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(140% 140% at 18% 12%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, rgba(22, 24, 29, 0.98), rgba(13, 15, 19, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 24px rgba(3, 5, 8, 0.34);
  transition:
    border-color 0.16s ease,
    transform 0.18s cubic-bezier(0.22, 0.82, 0.2, 1),
    background-color 0.16s ease,
    width 0.18s cubic-bezier(0.22, 0.82, 0.2, 1),
    box-shadow 0.18s ease;
}

.groupOrb--folder:hover,
.groupOrb--folder.is-open {
  border-color: rgba(255, 255, 255, 0.16);
  background:
    radial-gradient(140% 140% at 18% 12%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(28, 30, 36, 0.99), rgba(17, 19, 24, 0.99));
}

.groupOrbFolderWrap {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.groupOrbFolderPreview {
  width: 48px;
  height: 48px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  align-items: center;
  justify-items: center;
  overflow: visible;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.groupOrbFolderPreviewItem {
  width: 22px;
  height: 22px;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid rgba(211, 226, 255, 0.26);
  background: rgba(24, 34, 52, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 12px rgba(4, 8, 13, 0.32);
  transition:
    transform 0.18s ease,
    opacity 0.18s ease,
    filter 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.groupOrbFolderPreviewItem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.groupOrbFolderPreviewFallback {
  color: rgba(234, 241, 253, 0.95);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.groupOrbFolderPocket {
  position: absolute;
  left: 8px;
  top: 9px;
  bottom: 9px;
  width: 32px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(10, 12, 16, 0.98), rgba(16, 18, 23, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 18px rgba(4, 7, 12, 0.34);
  opacity: 0;
  transform: scaleX(0.72);
  transform-origin: left center;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.groupOrbFolderIncoming {
  position: absolute;
  left: -7px;
  top: 50%;
  width: 34px;
  height: 34px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) scale(0.78);
  transition: opacity 0.14s ease, transform 0.18s cubic-bezier(0.22, 0.82, 0.2, 1);
}

.groupOrbFolderIncomingOrb {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(12, 15, 19, 0.96);
  background: linear-gradient(180deg, rgba(28, 31, 37, 0.98), rgba(18, 21, 26, 0.98));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(4, 8, 14, 0.4);
}

.groupOrbFolderIncomingOrb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.groupOrbFolderIncomingFallback {
  color: rgba(239, 243, 248, 0.96);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.groupOrbUnreadBadge {
  position: absolute;
  right: -4px;
  top: -4px;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  border: 2px solid rgba(9, 13, 20, 0.95);
  background: linear-gradient(180deg, rgba(34, 48, 74, 0.98), rgba(19, 28, 43, 0.98));
  color: rgba(235, 242, 255, 0.96);
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  box-shadow: 0 6px 14px rgba(5, 9, 16, 0.44);
  pointer-events: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.groupOrbFolderStack {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 2px 0 2px;
  animation: folderStackReveal 0.18s ease;
}

.groupOrbFolderStack::before {
  content: "";
  position: absolute;
  top: -2px;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04));
  pointer-events: none;
}

.groupOrbFolderStack.is-drop-end::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(219, 224, 232, 0.98), rgba(166, 173, 184, 0.92));
  box-shadow:
    0 0 0 1px rgba(10, 16, 27, 0.86),
    0 0 12px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.groupOrb--folder-child {
  width: 64px;
  height: 64px;
  z-index: 1;
}

.groupOrb--dm {
  border-color: rgba(166, 183, 224, 0.48);
}

.groupOrb--app-home {
  width: 62px;
  height: 62px;
  padding: 2px;
  border-radius: 16px;
  border-color: rgba(206, 220, 246, 0.72);
  background: rgba(14, 19, 31, 0.92);
  box-shadow: none;
}

.groupOrb--app-home:hover {
  border-color: rgba(236, 244, 255, 0.92);
  background: rgba(20, 28, 45, 0.95);
}

.groupOrbAppLogo {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.groupOrbAppLogoImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.groupOrbRailDivider {
  width: calc(100% - 22px);
  height: 2px;
  margin: 0 0 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(214, 226, 246, 0.0) 0%,
    rgba(214, 226, 246, 0.84) 14%,
    rgba(214, 226, 246, 0.84) 86%,
    rgba(214, 226, 246, 0.0) 100%
  );
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  flex: 0 0 2px;
}

.groupOrb--server.is-active::before,
.groupOrb--folder.is-active::before,
.groupOrb--dm.is-active::before,
.groupOrb--app-home.is-active::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  border-radius: 999px;
  background: rgba(238, 244, 252, 0.92);
  box-shadow: 0 0 0 1px rgba(10, 13, 18, 0.78);
  pointer-events: none;
  z-index: 3;
}

.groupOrb--app-home.is-active::before {
  left: -10px;
  width: 4px;
  height: 28px;
  background: rgba(241, 247, 255, 0.97);
  box-shadow: 0 0 0 1px rgba(7, 11, 18, 0.82);
  z-index: 6;
}

.groupOrb.is-dragging {
  opacity: 0.24;
  transform: scale(0.9);
  filter: saturate(0.68) blur(0.25px);
}

.groupOrb--server.is-drop-before::after,
.groupOrb--server.is-drop-after::after,
.groupOrb--folder.is-drop-before::after,
.groupOrb--folder.is-drop-after::after {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(220, 225, 232, 0.98), rgba(168, 175, 186, 0.92));
  box-shadow:
    0 0 0 1px rgba(10, 16, 27, 0.86),
    0 0 14px rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 3;
}

.groupOrb--server.is-drop-before::after,
.groupOrb--folder.is-drop-before::after {
  top: 6px;
}

.groupOrb--server.is-drop-after::after,
.groupOrb--folder.is-drop-after::after {
  bottom: 6px;
}

.groupOrb--server.is-drop-before,
.groupOrb--server.is-drop-after,
.groupOrb--folder.is-drop-before,
.groupOrb--folder.is-drop-after {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 14px 30px rgba(7, 11, 18, 0.45);
}

.groupOrb.is-folder-target {
  border-color: rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(140% 140% at 18% 12%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(33, 36, 42, 0.98), rgba(19, 21, 26, 0.98));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 18px 34px rgba(7, 11, 18, 0.48);
  transform: scale(1.04);
}

.groupOrbFolderWrap.is-folder-targeting .groupOrb--folder {
  width: 92px;
  border-color: rgba(255, 255, 255, 0.24);
  background:
    radial-gradient(160% 140% at 18% 12%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 56%),
    linear-gradient(180deg, rgba(28, 31, 37, 0.99), rgba(17, 20, 25, 0.99));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 22px 40px rgba(6, 10, 17, 0.54);
  transform: translateX(6px) scale(1.02);
}

.groupOrbFolderWrap.is-folder-targeting .groupOrbFolderPocket {
  opacity: 1;
  transform: scaleX(1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 20px rgba(4, 8, 14, 0.4);
}

.groupOrbFolderWrap.is-folder-targeting .groupOrbFolderIncoming {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  animation: folderIncomingDock 0.18s cubic-bezier(0.22, 0.82, 0.2, 1) both;
}

.groupOrbFolderWrap.is-folder-targeting .groupOrbFolderPreview {
  transform: translateX(11px) scale(0.92);
  filter: saturate(0.9);
}

.groupOrbFolderWrap.is-folder-targeting .groupOrbFolderPreviewItem {
  opacity: 0.9;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 7px 16px rgba(4, 8, 13, 0.36);
}

.groupOrbFolderWrap.is-folder-targeting .groupOrbUnreadBadge {
  transform: translateX(8px) scale(1.04);
  box-shadow:
    0 8px 18px rgba(5, 9, 16, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.groupsRail[data-orb-dragging="1"] .groupOrb--server:not(.is-dragging),
.groupsRail[data-orb-dragging="1"] .groupOrb--folder:not(.is-dragging) {
  transition:
    transform 0.16s cubic-bezier(0.25, 0.8, 0.25, 1),
    filter 0.16s ease,
    opacity 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.groupsRail[data-orb-dragging="1"] .groupOrb--server:not(.is-dragging):hover,
.groupsRail[data-orb-dragging="1"] .groupOrb--folder:not(.is-dragging):hover {
  transform: none;
}

.groupOrbDragGhost {
  position: fixed;
  top: -9999px;
  left: -9999px;
  z-index: 2147483647;
  pointer-events: none;
  min-width: 170px;
  max-width: 260px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 54%),
    linear-gradient(180deg, rgba(21, 24, 29, 0.99), rgba(13, 15, 19, 0.99));
  box-shadow:
    0 14px 34px rgba(4, 8, 15, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(9px);
}

.groupOrbDragGhost--folder {
  grid-template-columns: 44px minmax(0, 1fr);
}

.groupOrbDragGhost__orb {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(28, 31, 37, 0.94);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(5, 9, 16, 0.52);
}

.groupOrbDragGhost__orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.groupOrbDragGhost__fallback {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: rgba(238, 244, 255, 0.95);
}

.groupOrbDragGhost__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(233, 236, 241, 0.96);
}

.groupOrbDragGhost__preview {
  width: 40px;
  height: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.groupOrbDragGhost__previewItem {
  width: 18px;
  height: 18px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(28, 31, 37, 0.94);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(5, 9, 16, 0.34);
}

.groupOrbDragGhost__previewItem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes folderStackReveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes folderIncomingDock {
  0% {
    opacity: 0;
    transform: translate(-8px, -50%) scale(0.78);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

.groupOrb--server.has-notification:not(.is-active)::before,
.groupOrb--folder.has-notification:not(.is-active)::before,
.groupOrb--dm.has-notification:not(.is-active)::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(238, 244, 252, 0.95);
  box-shadow: 0 0 0 1px rgba(10, 13, 18, 0.84);
  pointer-events: none;
  z-index: 3;
}

.groupOrb--create {
  margin-top: auto;
  border-style: dashed;
  border-color: rgba(168, 203, 255, 0.45);
  background: rgba(13, 20, 33, 0.84);
}

.groupOrb--create:hover {
  border-color: rgba(187, 216, 255, 0.88);
  background: rgba(19, 28, 44, 0.94);
}

.groupOrbPlus {
  color: rgba(222, 234, 252, 0.96);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-1px);
  pointer-events: none;
}

.groupOrb--group {
  border-color: rgba(178, 147, 255, 0.34);
}

.groupOrb.is-active {
  border-color: rgba(220, 228, 240, 0.88);
  box-shadow: 0 0 0 1px rgba(224, 232, 244, 0.24), 0 0 12px rgba(224, 232, 244, 0.16);
}

.groupOrb.is-disabled {
  cursor: default;
  opacity: 0.62;
}

.groupOrb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

.groupOrbFallback {
  color: #d9deea;
  font-weight: 800;
  font-size: 22px;
}

.groupOrbKind {
  position: absolute;
  right: 4px;
  bottom: 4px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(210, 235, 255, 0.32);
  background: rgba(7, 11, 19, 0.88);
  color: rgba(228, 236, 248, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.leftDockDms #dmList {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px;
}

.leftDockDms #dmList .dmListSectionTitle {
  margin: 6px 2px 2px;
  color: rgba(206, 214, 230, 0.72);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.leftDockDms #dmList .dmListSection {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.leftDockDms #dmList::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.leftDockDms #dmList .dm-item {
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: 8px 34px 8px 6px;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.leftDockDms #dmList .dm-item--group {
  padding-right: 8px;
}

.leftDockDms #dmList .dm-item--group-actionable {
  padding-right: 34px;
}

.leftDockDms #dmList .dm-item--group.is-pinned {
  background: linear-gradient(90deg, rgba(221, 170, 67, 0.22), rgba(221, 170, 67, 0.08));
  box-shadow: inset 0 0 0 1px rgba(236, 197, 114, 0.34);
}

.leftDockDms #dmList .dm-item--group.is-pinned:hover {
  background: linear-gradient(90deg, rgba(221, 170, 67, 0.26), rgba(221, 170, 67, 0.12));
}

.leftDockDms #dmList .dm-item .dm-item-pinBadge {
  margin-left: 8px;
  height: 20px;
  min-width: 30px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(236, 197, 114, 0.54);
  background: rgba(236, 197, 114, 0.16);
  color: rgba(255, 235, 188, 0.98);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.leftDockDms #dmList .dm-item[data-dm-id].is-muted {
  padding-right: 66px;
}

.leftDockDms #dmList .dm-item .dm-item-mutedBadge {
  margin-left: 7px;
  height: 20px;
  min-width: 38px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(160, 171, 198, 0.44);
  background: rgba(160, 171, 198, 0.14);
  color: rgba(231, 237, 248, 0.84);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.leftDockDms #dmList .dm-item.is-muted .dm-name {
  color: rgba(224, 232, 246, 0.88);
}

.leftDockDms #dmList .avatar--group {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(206, 216, 236, 0.28);
  background: rgba(16, 22, 34, 0.84);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.leftDockDms #dmList .groupDmAvatarFallback {
  color: rgba(224, 232, 246, 0.9);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.leftDockDms #dmList .dm-item:hover {
  border: 0;
  background: var(--ui-row-bg);
  transform: none;
}

.leftDockDms #dmList .dm-item.is-active {
  background: linear-gradient(180deg, rgba(241, 245, 255, 0.1), rgba(241, 245, 255, 0.04));
  box-shadow: inset 0 0 0 1px rgba(218, 226, 240, 0.24);
}

.leftDockDms #dmList .dm-item.is-active::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 28px;
  border-radius: 999px;
  background: rgba(234, 240, 252, 0.88);
  box-shadow: 0 0 8px rgba(226, 234, 248, 0.36);
}

.leftDockDms #dmList .dm-item.has-notification {
  background: linear-gradient(90deg, rgba(88, 101, 242, 0.2), rgba(88, 101, 242, 0.06));
  box-shadow: inset 0 0 0 1px rgba(142, 160, 255, 0.35);
}

.leftDockDms #dmList .dm-item.has-notification::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9ba9ff;
  box-shadow: 0 0 10px rgba(155, 169, 255, 0.9);
}

.leftDockDms #dmList .dm-item.is-active.has-notification::before {
  width: 4px;
  height: 28px;
  border-radius: 999px;
  background: rgba(234, 240, 252, 0.88);
  box-shadow: 0 0 8px rgba(226, 234, 248, 0.36);
}

.leftDockDms #dmList .dm-item.has-notification::after {
  content: attr(data-notify-text);
  position: absolute;
  left: 56px;
  top: -26px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(200, 232, 255, 0.22);
  background: rgba(10, 14, 22, 0.95);
  color: #eef2ff;
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.leftDockDms #dmList .dm-item.has-notification:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.leftDockDms #dmList .dm-item:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(214, 222, 236, 0.34);
}

.leftDockDms #dmList .avatar {
  width: 44px;
  height: 44px;
  --status-dot-size: 12px;
  --status-dot-inset: 1px;
}

.leftDockDms #dmList .dm-text {
  flex: 1;
  min-width: 0;
}

.leftDockDms #dmList .dm-name {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  overflow-wrap: normal;
  word-break: normal;
}

.leftDockDms #dmList .dm-item .dm-item-remove {
  width: 22px;
  height: 22px;
  margin-left: 0;
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  border-radius: 8px;
  border: 1px solid rgba(192, 202, 220, 0.28);
  background: rgba(12, 15, 21, 0.92);
  color: rgba(236, 241, 248, 0.92);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, border-color 0.14s ease, background-color 0.14s ease, color 0.14s ease;
}

.leftDockDms #dmList .dm-item .dm-item-remove .dm-item-remove__icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
}

.leftDockDms #dmList .dm-item .dm-item-remove .dm-item-remove__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leftDockDms #dmList .dm-item:hover .dm-item-remove,
.leftDockDms #dmList .dm-item:focus-within .dm-item-remove {
  opacity: 1;
  pointer-events: auto;
}

.leftDockDms #dmList .dm-item .dm-item-remove:hover {
  border-color: rgba(242, 111, 111, 0.72);
  background: rgba(242, 111, 111, 0.2);
  color: #ffd9d9;
}

.leftDockDms #dmList .dm-item .dm-item-remove.dm-item-group-action.is-danger {
  border-color: rgba(242, 111, 111, 0.4);
  color: rgba(255, 193, 193, 0.96);
}

.leftDockDms #dmList .dm-item .dm-item-remove.dm-item-group-action.is-danger:hover {
  border-color: rgba(242, 111, 111, 0.86);
  background: rgba(242, 111, 111, 0.24);
  color: #ffe5e5;
}

.leftDockDms #dmList .dm-handle {
  display: none;
}

.leftDockDms.is-server-context .leftDockTitle {
  display: none;
}

.leftDockDms #serverChannelsPanel {
  flex: 1;
  min-height: 0;
  width: 100%;
  min-width: 0;
  max-width: none;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.leftDockDms:not(.is-server-context) #serverChannelsPanel {
  display: none !important;
}

.leftDockDms.is-server-context #dmList {
  display: none !important;
}

.leftDockDms #dmList .serverSidebarHeader {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  margin: 2px 2px 10px;
  padding: 8px;
  border: 1px solid rgba(190, 214, 255, 0.2);
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(15, 23, 37, 0.92), rgba(12, 18, 29, 0.86));
}

.leftDockDms #dmList .serverSidebarIcon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(200, 228, 255, 0.26);
  background: rgba(17, 25, 40, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: rgba(226, 235, 251, 0.94);
  font-size: 14px;
  font-weight: 800;
}

.leftDockDms #dmList .serverSidebarIcon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.leftDockDms #dmList .serverSidebarMeta {
  min-width: 0;
}

.leftDockDms #dmList .serverSidebarName {
  color: #ecf1ff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leftDockDms #dmList .serverSidebarSub {
  margin-top: 2px;
  color: rgba(194, 208, 232, 0.82);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.leftDockDms #dmList .serverNavItem {
  width: 100%;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.leftDockDms #dmList .serverNavItem--channel {
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.leftDockDms #dmList .serverNavIcon {
  color: rgba(196, 211, 238, 0.72);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.leftDockDms #dmList .serverNavLabel {
  min-width: 0;
  color: rgba(222, 231, 247, 0.93);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leftDockDms #dmList .serverNavUnread {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  border: 1px solid rgba(168, 188, 255, 0.56);
  background: rgba(90, 114, 255, 0.28);
  color: #eef2ff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.leftDockDms #dmList .serverNavItem--member {
  min-height: 52px;
  padding: 6px;
  border-radius: 10px;
}

.leftDockDms #dmList .serverNavItem--member:disabled {
  cursor: default;
  opacity: 0.95;
}

.leftDockDms #dmList .serverMemberAvatar {
  width: 38px;
  height: 38px;
  --status-dot-size: 11px;
  --status-dot-inset: 1px;
}

.leftDockDms #dmList .serverMemberMeta {
  margin-top: 1px;
  color: rgba(180, 194, 219, 0.8);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#profileOverlay .modalCard,
#gifModal .modalCard {
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: var(--surface-1);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}

#gifModal .modalTop {
  border-bottom: 1px solid var(--stroke);
  background: linear-gradient(180deg, var(--ui-top-bg), var(--surface-1));
}

#gifModal .modalTitle {
  font-size: 31px;
  font-weight: 700;
}

#profileOverlay.settingsOverlay {
  padding: 14px;
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
}

#profileOverlay .settingsCard {
  width: min(1260px, 99vw);
  height: 100%;
  max-height: none;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
}

#profileOverlay .settingsSidebar {
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--stroke);
  background: linear-gradient(180deg, var(--surface-1), var(--ui-shell-bg));
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
}

#profileOverlay .settingsSidebarSection {
  display: grid;
  gap: 6px;
  padding-bottom: 8px;
}

#profileOverlay .settingsSidebarSection + .settingsSidebarSection {
  border-top: 1px solid var(--stroke);
  padding-top: 10px;
}

#profileOverlay .settingsSidebarSection--logout {
  margin-top: auto;
  border-top: 1px solid var(--stroke-strong);
  padding-top: 10px;
}

#profileOverlay .settingsSidebarUser {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: var(--ui-row-strong-bg);
  padding: 10px;
}

#profileOverlay .settingsSidebarAvatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--stroke);
  background: var(--ui-input-bg);
  flex: 0 0 auto;
}

#profileOverlay .settingsSidebarAvatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

#profileOverlay .settingsSidebarMeta {
  min-width: 0;
}

#profileOverlay .settingsSidebarName {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#profileOverlay .settingsSidebarTag {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#profileOverlay .settingsSearchInput {
  height: 38px;
  background: var(--ui-input-bg);
  border-color: var(--stroke);
}

#profileOverlay .settingsGroupLabel {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-soft);
  opacity: 0.85;
}

#profileOverlay .settingsNav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#profileOverlay .settingsNavItem {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft);
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 35px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

#profileOverlay .settingsNavItem small {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#profileOverlay .settingsNavItem:hover {
  border-color: var(--stroke);
  background: var(--surface-row);
  color: var(--text-main);
}

#profileOverlay .settingsNavItem.is-active,
#profileOverlay .settingsNavItem[aria-current="page"] {
  border-color: var(--stroke-strong);
  background: var(--ui-row-bg);
  color: var(--text-main);
}

#profileOverlay .settingsNavItem--danger {
  border-color: var(--ui-danger-border);
  background: var(--ui-danger-bg);
  color: #f3d9df;
}

#profileOverlay .settingsNavItem--danger:hover,
#profileOverlay .settingsNavItem--danger:focus-visible {
  border-color: var(--ui-danger-hover-border);
  background: var(--ui-danger-hover-bg);
  color: #ffeef2;
}

#profileOverlay .settingsNavItem[disabled] {
  opacity: 0.62;
  cursor: not-allowed;
}

#profileOverlay .settingsNavItem[disabled]:hover {
  border-color: transparent;
  background: transparent;
  color: var(--text-soft);
}

#profileOverlay .settingsNavLabelRow {
  min-width: 0;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#profileOverlay .settingsNavLockIcon {
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(230, 236, 246, 0.92);
  opacity: 0.9;
  flex: 0 0 auto;
}

#profileOverlay .settingsNavLockIcon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

#profileOverlay .settingsNavLockIcon.is-unlocked {
  color: rgba(96, 216, 156, 0.92);
}

#profileOverlay .settingsNavItem.is-locked {
  border-color: rgba(243, 197, 112, 0.28);
  background: rgba(243, 197, 112, 0.08);
}

#profileOverlay .settingsNavItem.is-locked .settingsNavLockIcon {
  color: rgba(246, 205, 132, 0.94);
}

#profileOverlay .settingsMain {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--surface-1), var(--ui-shell-bg));
}

#profileOverlay .settingsMainTop {
  padding: 14px 20px;
  border-bottom: 1px solid var(--stroke);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

#profileOverlay .settingsMainTopActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#profileOverlay .settingsMainTopBack {
  height: 34px;
  min-height: 34px;
  border-radius: 9px;
  padding: 0 12px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#profileOverlay .settingsTitle {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.01em;
}

#profileOverlay .settingsSubtitle {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-muted);
}

#profileOverlay .settingsCloseBtn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 9px;
  font-size: 20px;
  line-height: 1;
}

#profileOverlay .settingsMainBody {
  min-height: 0;
  overflow: auto;
  padding: 16px 20px 20px;
}

#profileOverlay .settingsPanel {
  display: none;
}

#profileOverlay .settingsPanel.is-active {
  display: grid;
  gap: 12px;
}

#profileOverlay .settingsIdentityCard {
  border: 1px solid var(--stroke);
  border-radius: 10px;
  overflow: hidden;
  background: var(--ui-shell-bg);
}

#profileOverlay .settingsIdentityBanner {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--profile-banner-ratio);
  height: auto;
  background: linear-gradient(135deg, #2b2f37, #12151b 78%);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: filter 0.14s ease, box-shadow 0.14s ease;
}

#profileOverlay .settingsIdentityBanner:hover {
  filter: brightness(1.04);
}

.profileBannerMedia {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  transition: transform 0.16s ease;
}

.has-banner-media > :not(.profileBannerMedia) {
  position: relative;
  z-index: 1;
}

.profileAvatarMedia {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 0.16s ease;
}

.profileAvatarMediaClip {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
}

.profileAvatarMediaClip--lazyGif {
  background:
    radial-gradient(circle at 30% 18%, rgba(232, 207, 174, 0.18), transparent 36%),
    linear-gradient(160deg, rgba(44, 41, 36, 0.92), rgba(18, 18, 18, 0.96));
}

.profileAvatarMediaClip--lazyGif::after {
  content: attr(data-avatar-fallback);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(242, 240, 236, 0.88);
  font-weight: 750;
  font-size: clamp(12px, 34%, 36px);
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
}

.profileAvatarMediaClip--lazyGif.is-loaded::after {
  display: none;
}

.profileAvatarMediaClip--lazyGif .profileAvatarMedia:not([src]) {
  opacity: 0;
}

.profileAvatarMediaClip.is-error {
  background:
    radial-gradient(circle at 30% 18%, rgba(232, 207, 174, 0.18), transparent 36%),
    linear-gradient(160deg, rgba(44, 41, 36, 0.92), rgba(18, 18, 18, 0.96));
}

.profileAvatarMediaClip.is-error .profileAvatarMedia {
  display: none !important;
}

.profileAvatarMediaClip.is-error::after {
  content: attr(data-avatar-fallback);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(242, 240, 236, 0.88);
  font-weight: 750;
  font-size: clamp(12px, 34%, 36px);
  line-height: 1;
  letter-spacing: 0;
}

.profileAvatarFallback,
.meAvatarFallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background:
    radial-gradient(circle at 30% 18%, rgba(232, 207, 174, 0.18), transparent 36%),
    linear-gradient(160deg, rgba(44, 41, 36, 0.92), rgba(18, 18, 18, 0.96));
  color: rgba(242, 240, 236, 0.88);
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0;
}

#meAvatar .meAvatarFallback,
#meAvatar .profileAvatarFallback {
  font-size: 15px;
}

#profileOverlay .settingsIdentityBanner:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent-strong);
}

#profileOverlay .settingsIdentityBody {
  margin-top: 0;
  padding: 10px 14px 14px;
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

#profileOverlay .settingsAvatarPick {
  width: 112px;
  height: 112px;
  margin-top: -56px;
  border: 3px solid var(--ui-shell-bg);
  cursor: pointer;
  box-shadow: none;
}

#profileOverlay .settingsAvatarPick:hover {
  border-color: var(--ui-btn-hover-border);
}

#profileOverlay .settingsAvatarPick:focus-visible {
  outline: none;
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#profileOverlay .settingsIdentityMeta {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 6px;
}

#profileOverlay .settingsIdentityNameRow {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

#profileOverlay .settingsIdentityName {
  min-width: 0;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#profileOverlay .settingsIdentityUid {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#profileOverlay .settingsIdentityPronouns {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: min(220px, 55%);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--ui-row-bg);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#profileOverlay .settingsCardSection {
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: var(--ui-shell-bg);
  padding: 12px 12px 10px;
  display: grid;
  gap: 9px;
}

#profileOverlay [hidden] {
  display: none !important;
}

#profileOverlay .settingsSectionTitle {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}

#profileOverlay .settingsGrid {
  gap: 12px;
}

#profileOverlay .settingsColumn {
  display: grid;
  gap: 8px;
  align-content: start;
}

#profileOverlay .settingsProfileGrid {
  align-items: start;
  gap: 14px;
}

#profileOverlay .settingsProfileColumn {
  gap: 10px;
}

#profileOverlay .settingsProfileColumn textarea.input {
  min-height: 92px;
  resize: none;
  overflow-y: hidden;
}

#profileOverlay .settingsBioCounter {
  margin-top: -4px;
  justify-self: end;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

#profileOverlay .settingsBioCounter.is-limit {
  color: var(--warn);
}

#profileOverlay .settingsProfileActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

#profileOverlay .settingsProfileActions .btn {
  min-width: 168px;
}

#profileOverlay .settingsColumn .btn {
  margin-top: 2px;
}

#profileOverlay .settingsMiniTabs {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--stroke);
  margin: 4px 0 2px;
}

#profileOverlay .settingsMiniTab {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-soft);
  height: 34px;
  padding: 0 2px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

#profileOverlay .settingsMiniTab.is-active {
  border-bottom-color: var(--accent-strong);
  color: #f2f5ff;
}

#profileOverlay .settingsMiniTab:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#profileOverlay #settingsStatusSlot .settingsField {
  display: grid;
  gap: 8px;
}

#profileOverlay .settingsHint {
  color: var(--text-muted);
  font-size: 12px;
}

#profileOverlay .settingsSecurityLockedScreen {
  min-height: 320px;
  justify-items: center;
  align-content: center;
  text-align: center;
  padding: 22px;
  gap: 12px;
}

#profileOverlay .settingsSecuritySetupScreen {
  min-height: 300px;
  justify-items: center;
  align-content: center;
  text-align: center;
  padding: 22px;
  gap: 12px;
}

#profileOverlay .settingsSecuritySetupActions {
  width: min(460px, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

#profileOverlay .settingsSecuritySetupActions .btn {
  min-width: 180px;
}

#profileOverlay .settingsSecuritySetupTitle {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text-main);
}

#profileOverlay .settingsSecurityQuickCreateWrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

#profileOverlay .settingsSecurityQuickCreateWrap .btn {
  min-width: 220px;
}

#profileOverlay .settingsSecurityRemoveVerifyWrap {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

#profileOverlay .settingsSecurityLockedIcon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--stroke-strong);
  background: var(--ui-row-bg);
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#profileOverlay .settingsSecurityLockedIcon svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: currentColor;
}

#profileOverlay .settingsSecurityLockedForm {
  width: min(430px, 100%);
  display: grid;
  gap: 8px;
  text-align: left;
  margin-top: 2px;
}

#profileOverlay .settingsSecurityLockedForm .btn {
  margin-top: 4px;
}

#profileOverlay .settingsSecurityLockedActions {
  width: min(430px, 100%);
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

#profileOverlay .settingsDesktopUpdateActions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#profileOverlay .settingsDesktopUpdateActions .btn {
  min-width: 130px;
}

#profileOverlay .settingsDesktopUpdateStatus {
  min-height: 1.3em;
}

#profileOverlay .settingsKeybindList {
  display: grid;
  gap: 8px;
}

#profileOverlay .settingsKeybindRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: var(--ui-row-strong-bg);
  padding: 8px 10px;
}

#profileOverlay .settingsKeybindMeta {
  min-width: 0;
  display: grid;
  gap: 2px;
}

#profileOverlay .settingsKeybindMeta b {
  font-size: 13px;
  color: var(--text-main);
}

#profileOverlay .settingsKeybindMeta small {
  font-size: 12px;
  color: var(--text-muted);
}

#profileOverlay .settingsKeybindActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

#profileOverlay .settingsKeybindBtn {
  min-width: 146px;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

#profileOverlay .settingsKeybindBtn.is-capturing {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 1px rgba(113, 137, 255, 0.38) inset;
}

#profileOverlay .settingsKeybindResetBtn {
  min-width: 72px;
}

#profileOverlay .settingsKeybindCaptureHint {
  min-height: 1.3em;
}

#profileOverlay .settingsKeybindCaptureHint.is-error {
  color: var(--bad);
}

#profileOverlay .settingsSoundList {
  display: grid;
  gap: 8px;
}

#profileOverlay .settingsSoundRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: var(--ui-row-strong-bg);
  padding: 8px 10px;
}

#profileOverlay .settingsSoundMeta {
  min-width: 0;
  display: grid;
  gap: 2px;
}

#profileOverlay .settingsSoundMeta b {
  font-size: 13px;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#profileOverlay .settingsSoundMeta small {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#profileOverlay .settingsSoundActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

#profileOverlay .settingsSoundActions .btn {
  height: 30px;
  min-width: 0;
  padding: 0 10px;
  font-size: 12px;
}

#profileOverlay .settingsBlockedList {
  display: grid;
  gap: 8px;
}

#profileOverlay .settingsBlockedRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: var(--ui-row-strong-bg);
  padding: 8px 10px;
}

#profileOverlay .settingsBlockedIdentity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

#profileOverlay .settingsBlockedAvatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--stroke-strong);
  background: var(--ui-row-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 700;
}

#profileOverlay .settingsBlockedAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#profileOverlay .settingsBlockedMeta {
  min-width: 0;
  display: grid;
  gap: 2px;
}

#profileOverlay .settingsBlockedMeta b {
  color: var(--text-main);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#profileOverlay .settingsBlockedMeta small {
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#profileOverlay .appearanceControls {
  display: grid;
  gap: 10px;
}

#profileOverlay .appearanceRangeRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

#profileOverlay .appearanceLabel {
  color: var(--text-soft);
  font-weight: 600;
}

#profileOverlay .appearanceValue {
  color: var(--text-soft);
  font-size: 12px;
}

#profileOverlay .appearanceHint {
  margin-top: -2px;
  color: var(--text-muted);
  font-size: 12px;
}

#profileOverlay input[type="range"].withDefaultMarker {
  --slider-progress: 0%;
  --slider-default: 50%;
  --slider-track-fill: var(--accent-strong, #8ea0ff);
  --slider-track-empty: rgba(228, 234, 249, 0.34);
  --slider-default-mark: var(--text-main, #f1f2f5);
  --slider-thumb-bg: #8ea0ff;
  --slider-thumb-ring: rgba(236, 242, 255, 0.94);
  --slider-thumb-shadow: rgba(0, 0, 0, 0.45);
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 16px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

#profileOverlay input[type="range"].withDefaultMarker:disabled {
  opacity: 0.52;
  cursor: not-allowed;
  filter: saturate(0.45);
}

#profileOverlay input[type="range"].withDefaultMarker::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  border: 1px solid rgba(224, 233, 250, 0.22);
  background:
    linear-gradient(
      to right,
      transparent 0%,
      transparent calc(var(--slider-default, 50%) - 1px),
      var(--slider-default-mark) calc(var(--slider-default, 50%) - 1px),
      var(--slider-default-mark) calc(var(--slider-default, 50%) + 1px),
      transparent calc(var(--slider-default, 50%) + 1px),
      transparent 100%
    ),
    linear-gradient(
      to right,
      var(--slider-track-fill) 0%,
      var(--slider-track-fill) var(--slider-progress, 0%),
      var(--slider-track-empty) var(--slider-progress, 0%),
      var(--slider-track-empty) 100%
    );
}

#profileOverlay input[type="range"].withDefaultMarker::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--slider-thumb-ring);
  background: var(--slider-thumb-bg);
  box-shadow: 0 2px 8px var(--slider-thumb-shadow);
  margin-top: -5px;
}

#profileOverlay input[type="range"].withDefaultMarker:focus-visible {
  outline: none;
}

#profileOverlay input[type="range"].withDefaultMarker:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--altara-accent-soft, rgba(232, 207, 174, 0.14)), 0 2px 8px var(--slider-thumb-shadow);
}

#profileOverlay input[type="range"].withDefaultMarker[data-at-default="1"]::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(244, 248, 255, 0.32), 0 2px 8px var(--slider-thumb-shadow);
}

#profileOverlay input[type="range"].withDefaultMarker::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  border: 1px solid rgba(224, 233, 250, 0.22);
  background:
    linear-gradient(
      to right,
      transparent 0%,
      transparent calc(var(--slider-default, 50%) - 1px),
      var(--slider-default-mark) calc(var(--slider-default, 50%) - 1px),
      var(--slider-default-mark) calc(var(--slider-default, 50%) + 1px),
      transparent calc(var(--slider-default, 50%) + 1px),
      transparent 100%
    ),
    linear-gradient(
      to right,
      var(--slider-track-fill) 0%,
      var(--slider-track-fill) var(--slider-progress, 0%),
      var(--slider-track-empty) var(--slider-progress, 0%),
      var(--slider-track-empty) 100%
    );
}

#profileOverlay input[type="range"].withDefaultMarker::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--slider-thumb-ring);
  background: var(--slider-thumb-bg);
  box-shadow: 0 2px 8px var(--slider-thumb-shadow);
}

#profileOverlay .appearanceSwitchRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: var(--ui-row-strong-bg);
  padding: 9px 10px;
}

#profileOverlay .appearanceSwitchText {
  min-width: 0;
  display: grid;
  gap: 3px;
}

#profileOverlay .appearanceSwitchText b {
  font-size: 13px;
  color: var(--text-main);
}

#profileOverlay .appearanceSwitchText small {
  font-size: 12px;
  color: var(--text-muted);
}

#profileOverlay .appearanceSwitchRow input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-strong);
}

#profileOverlay .settingsVoiceSelectRow {
  align-items: center;
}

#profileOverlay .settingsVoiceInlineSelect {
  width: 168px;
  min-width: 136px;
  max-width: 45%;
}

#profileOverlay .settingsVoiceInlineSelect:disabled {
  opacity: 0.7;
}

#profileOverlay .settingsVoiceMicTestRow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}

#profileOverlay .settingsVoiceMicTestBtn {
  min-width: 128px;
}

#profileOverlay .settingsVoiceMicTestMeter {
  position: relative;
  flex: 1;
  min-height: 26px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(164, 171, 200, 0.44) 0 3px,
      transparent 3px 10px
    ),
    linear-gradient(180deg, rgba(19, 24, 38, 0.95), rgba(14, 19, 31, 0.9));
  overflow: hidden;
}

#profileOverlay .settingsVoiceMicTestMeterFill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(222, 228, 255, 0.82) 0 3px,
      rgba(156, 170, 255, 0.88) 3px 10px
    ),
    linear-gradient(90deg, rgba(125, 145, 255, 0.94), rgba(178, 191, 255, 0.95));
  box-shadow: 0 0 16px rgba(129, 147, 255, 0.42);
  transition: width 0.09s linear;
}

#profileOverlay #settingsVoiceMicTestHint.is-error {
  color: var(--bad);
}

#profileOverlay .settingsPlaceholder {
  border: 1px dashed var(--stroke-strong);
  border-radius: 12px;
  background: var(--ui-row-strong-bg);
  padding: 14px;
  color: var(--text-soft);
  font-size: 14px;
}

#profileOverlay .settingsReportsShell {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

#profileOverlay .settingsReportsList,
#profileOverlay .settingsReportsDetail {
  display: grid;
  gap: 8px;
  align-content: start;
}

#profileOverlay .settingsReportsList {
  max-height: min(62vh, 560px);
  overflow: auto;
  padding-right: 4px;
}

#profileOverlay .settingsReportsItem {
  width: 100%;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: var(--ui-row-bg);
  padding: 10px;
  display: grid;
  gap: 6px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

#profileOverlay .settingsReportsItem:hover {
  border-color: var(--accent-strong);
  background: var(--ui-row-strong-bg);
  transform: translateY(-1px);
}

#profileOverlay .settingsReportsItem.is-active {
  border-color: var(--accent-strong);
  background: var(--ui-row-strong-bg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

#profileOverlay .settingsReportsItemTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

#profileOverlay .settingsReportsItemTitle {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

#profileOverlay .settingsReportsMeta {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.45;
}

#profileOverlay .settingsReportsReason {
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}

#profileOverlay .settingsReportsStatus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--ui-shell-bg);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#profileOverlay .settingsReportsStatus--pending {
  border-color: rgba(255, 193, 94, 0.38);
  background: rgba(255, 193, 94, 0.12);
  color: #ffd27f;
}

#profileOverlay .settingsReportsStatus--reviewed {
  border-color: rgba(120, 190, 255, 0.34);
  background: rgba(120, 190, 255, 0.12);
  color: #a8d4ff;
}

#profileOverlay .settingsReportsStatus--actioned {
  border-color: rgba(109, 214, 164, 0.34);
  background: rgba(109, 214, 164, 0.12);
  color: #9be8c4;
}

#profileOverlay .settingsReportsDetailCard {
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: var(--ui-row-bg);
  padding: 12px;
  display: grid;
  gap: 10px;
}

#profileOverlay .settingsReportsIdentity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#profileOverlay .settingsReportsAvatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid var(--stroke);
  background: var(--ui-shell-bg);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--text-soft);
}

#profileOverlay .settingsReportsIdentityMeta {
  min-width: 0;
  display: grid;
  gap: 2px;
}

#profileOverlay .settingsReportsIdentityMeta b,
#profileOverlay .settingsReportsIdentityMeta small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#profileOverlay .settingsReportsKv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#profileOverlay .settingsReportsKvItem {
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: var(--ui-shell-bg);
  padding: 8px 10px;
  display: grid;
  gap: 4px;
}

#profileOverlay .settingsReportsKvItem > span {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#profileOverlay .settingsReportsKvItem > b,
#profileOverlay .settingsReportsKvItem > code {
  color: var(--text);
  font-size: 13px;
  word-break: break-word;
}

#profileOverlay .settingsReportsCode {
  margin: 0;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  padding: 10px;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

#profileOverlay .settingsReportsEvidenceCard {
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: var(--ui-shell-bg);
  padding: 10px;
  display: grid;
  gap: 8px;
}

#profileOverlay .settingsReportsEvidenceMeta {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.45;
}

#profileOverlay .settingsReportsEvidenceGroup {
  display: grid;
  gap: 8px;
}

#profileOverlay .settingsReportsEvidenceGroupTitle {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#profileOverlay .settingsReportsEvidenceList {
  display: grid;
  gap: 8px;
}

#profileOverlay .settingsReportsEvidenceItem {
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: var(--ui-row-bg);
  padding: 10px;
  display: grid;
  gap: 6px;
}

#profileOverlay .settingsReportsEvidenceItem.is-reported {
  border-color: rgba(255, 193, 94, 0.34);
  background: rgba(255, 193, 94, 0.08);
}

#profileOverlay .settingsReportsEvidenceItemMeta {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.45;
}

#profileOverlay .settingsReportsEvidenceItemText {
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

#profileOverlay .settingsReportsActionRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#profileOverlay .settingsReportsActionRow .btn {
  min-width: 156px;
}

#profileOverlay .settingsReportsModerationHistory {
  display: grid;
  gap: 8px;
}

#profileOverlay .settingsReportsModerationHistoryItem {
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: var(--ui-shell-bg);
  padding: 10px;
  display: grid;
  gap: 6px;
}

#profileOverlay .settingsReportsModerationHistoryTop {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-soft);
  font-size: 12px;
}

#profileOverlay .settingsReportsModerationHistoryTop b {
  color: var(--text);
  font-size: 13px;
}

#profileOverlay .settingsReportsModerationHistoryText,
#profileOverlay .settingsReportsModerationHistoryReply {
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

#profileOverlay .settingsReportsModerationHistoryMeta {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.45;
}

#profileOverlay .settingsReportsModerationResponseCard {
  border: 1px solid rgba(120, 190, 255, 0.34);
  border-radius: 10px;
  background: rgba(120, 190, 255, 0.08);
  padding: 10px;
  display: grid;
  gap: 8px;
}

#profileOverlay .settingsReportsModerationResponseTop {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

#profileOverlay .settingsReportsModerationResponseTop b {
  color: var(--text);
  font-size: 13px;
}

#profileOverlay .settingsReportsModerationResponseTop span {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.45;
}

#profileOverlay .settingsReportsModerationResponseBody {
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

#profileOverlay .themeGrid,
#profileOverlay .themeActions {
  margin-top: 0;
}

#profileOverlay .themeColorGrid--extended {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#reportUserModal .reportUserEvidence {
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: var(--ui-row-bg);
  padding: 12px;
  display: grid;
  gap: 10px;
}

#reportUserModal .reportUserEvidenceToggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

#reportUserModal .reportUserEvidenceToggle input {
  margin-top: 2px;
}

#reportUserModal .reportUserEvidenceText {
  display: grid;
  gap: 4px;
}

#reportUserModal .reportUserEvidenceText b {
  color: var(--text);
  font-size: 14px;
}

#reportUserModal .reportUserEvidenceText small,
#reportUserModal .reportUserEvidencePreview small {
  color: var(--text-soft);
  line-height: 1.45;
}

#reportUserModal .reportUserEvidencePreview {
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: var(--ui-shell-bg);
  padding: 10px;
  display: grid;
  gap: 8px;
}

#reportUserModal .reportUserEvidencePreviewText {
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 980px) {
  #profileOverlay .settingsCard {
    grid-template-columns: 1fr;
    height: 100%;
    max-height: none;
  }

  #profileOverlay .settingsSidebar {
    border-right: 0;
    border-bottom: 1px solid var(--stroke);
    padding: 12px;
  }

  #profileOverlay .settingsNav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: 0;
    padding-bottom: 2px;
  }

  #profileOverlay .settingsNavItem {
    flex: 0 0 auto;
    min-width: 182px;
  }

  #profileOverlay .settingsMainTop {
    padding: 12px;
  }

  #profileOverlay .settingsMainBody {
    padding: 12px;
  }

  #profileOverlay .settingsTitle {
    font-size: 23px;
  }

  #profileOverlay .settingsIdentityName {
    font-size: 27px;
  }

  #profileOverlay .settingsIdentityNameRow {
    flex-wrap: wrap;
    gap: 8px;
  }

  #profileOverlay .settingsIdentityPronouns {
    max-width: 100%;
  }

  #profileOverlay .settingsAvatarPick {
    width: 96px;
    height: 96px;
    margin-top: -48px;
  }

  #profileOverlay .settingsGrid {
    grid-template-columns: 1fr;
  }

  #profileOverlay .settingsReportsShell {
    grid-template-columns: 1fr;
  }

  #profileOverlay .settingsReportsList {
    max-height: none;
  }

  #profileOverlay .settingsReportsKv {
    grid-template-columns: 1fr;
  }

  #profileOverlay .settingsProfileActions {
    flex-direction: column;
    align-items: stretch;
  }

  #profileOverlay .settingsProfileActions .btn {
    width: 100%;
    min-width: 0;
  }

  #profileOverlay .themeColorGrid--extended {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #profileOverlay .settingsSoundRow {
    flex-direction: column;
    align-items: stretch;
  }

  #profileOverlay .settingsSoundActions {
    justify-content: flex-start;
  }

  #profileOverlay .settingsSecurityLockedScreen {
    min-height: 260px;
    padding: 16px;
  }

  #profileOverlay .settingsSecuritySetupScreen {
    min-height: 240px;
    padding: 16px;
  }
}

body .panel.left {
  background: var(--left-sidebar-bg, var(--surface-1));
}

body .panel.left .leftList,
body .panel.left .leftDock,
body .panel.left #leftFriends,
body .panel.left .leftDockGroups,
body .panel.left .leftDockDms {
  background: var(--left-sidebar-bg, var(--surface-1));
}

body .panel.left .leftTop {
  background: var(--left-sidebar-top-bg, var(--ui-top-bg));
}

/* Keep server mini-rail flush with the panel's left edge */
body .panel.left .leftList {
  padding-left: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Server mini-rail flush on the left without double border breaks */
body .panel.left .leftDockGroups {
  border-left: 0;
  border-top: 0;
  border-bottom: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.search input,
.input,
input:not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
textarea,
select {
  border-radius: 8px;
  border-color: var(--stroke);
  background: var(--ui-input-bg);
}

.search input:focus,
.input:focus,
input:not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus,
textarea:focus,
select:focus {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 2px var(--accent-soft);
  background: var(--ui-input-focus-bg);
}

.btn,
.smallBtn {
  height: 34px;
  border-radius: 8px;
  border-color: var(--ui-btn-border);
  background: var(--ui-btn-bg);
  color: #eceef2;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.btn:hover,
.smallBtn:hover {
  transform: translateY(-1px);
  border-color: var(--ui-btn-hover-border);
  background: var(--ui-btn-hover-bg);
  box-shadow: none;
}

.btn.primary,
.smallBtn.primary,
.btn.btn--accent {
  border-color: var(--ui-primary-border);
  background: var(--ui-primary-bg);
}

.btn.primary:hover,
.smallBtn.primary:hover,
.btn.btn--accent:hover {
  border-color: var(--ui-primary-hover-border);
  background: var(--ui-primary-hover-bg);
}

.btn.danger,
.smallBtn.danger,
.btn.btn--danger {
  border-color: var(--ui-danger-border);
  background: var(--ui-danger-bg);
}

.btn.danger:hover,
.smallBtn.danger:hover,
.btn.btn--danger:hover {
  border-color: var(--ui-danger-hover-border);
  background: var(--ui-danger-hover-bg);
}

.btn.ghost {
  background: var(--ui-card-bg);
}

.row,
.presenceRow,
.dm-item {
  border-color: var(--stroke);
  background: var(--ui-row-bg);
}

#friendsList .row,
#friendsMain .row {
  border: 0;
  border-bottom: 1px solid #30333b;
  border-radius: 0;
  background: transparent;
  padding: 10px 2px;
}

#friendsList .row:hover,
#friendsMain .row:hover {
  background: var(--ui-row-bg);
}

#friendsList .row:last-child,
#friendsMain .row:last-child {
  border-bottom: 0;
}

#leftFriends .row,
#activeNow .presenceRow,
#offlineList .presenceRow,
#dmList .dm-item {
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: var(--ui-row-strong-bg);
}

#activeNow .presenceRow,
#offlineList .presenceRow {
  padding: 10px;
}

.topbar,
.authCard {
  border-radius: 12px;
  border-color: var(--stroke);
  background: var(--surface-1);
  box-shadow: none;
}

.authTitle {
  font-size: 30px;
  letter-spacing: 0.01em;
}

.authSub {
  color: var(--text-muted);
}

.debug,
#debug,
#debugProfile {
  border-color: var(--stroke);
  background: var(--ui-debug-bg);
}

@media (max-width: 1280px) {
  .app:not(.wrap),
  .appGrid {
    grid-template-columns: clamp(300px, var(--left-sidebar-width), 340px) minmax(0, 1fr) clamp(220px, var(--right-sidebar-width), 340px);
  }

  .leftSidebarResizer {
    left: calc(clamp(300px, var(--left-sidebar-width), 340px) + (var(--app-grid-gap, 10px) / 2) - 6px);
  }

  .rightSidebarResizer {
    left: calc(100% - clamp(220px, var(--right-sidebar-width), 340px) - (var(--app-grid-gap, 10px) / 2) - 6px);
  }
}

@media (max-width: 980px) {
  .app:not(.wrap),
  .appGrid {
    grid-template-columns: 1fr;
  }

  .leftSidebarResizer {
    display: none;
  }

  .leftSidebarPeekZone {
    display: none !important;
  }

  .rightSidebarResizer {
    display: none;
  }

  .rightSidebarPeekZone {
    display: none !important;
  }

  .right,
  .rightCol {
    display: none;
  }
}

/* =========================
   CALL INSIDE DM
   ========================= */
.dmMain {
  position: relative;
}

.dmCallDock {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.panel.mid.is-server-voice-call-layout .midTop {
  display: flex !important;
  min-height: 0;
  height: 0;
  padding: 0 !important;
  margin: 0;
  border: 0 !important;
  background: transparent !important;
  overflow: visible;
}

.panel.mid.is-server-voice-call-layout .midTop .midTabs {
  display: none !important;
}

.panel.mid.is-server-voice-call-layout .midTop #midNavButtons {
  display: inline-flex !important;
}

.panel.mid.is-dm-conversation-open .midTop {
  display: none !important;
}

.panel.mid.is-dm-conversation-open #dmMain {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
}

body:not(.authPage).desktop-titlebar-overlay .panel.mid.is-dm-conversation-open #dmMain {
  padding-top: var(--desktop-titlebar-overlay-height, 40px);
}

.panel.mid.is-dm-conversation-open #dmMain .dmHeader,
.panel.mid.is-dm-conversation-open #dmMain .dmComposer,
.panel.mid.is-dm-conversation-open #dmMain #dmReplyBar,
.panel.mid.is-dm-conversation-open #dmMain #dmPendingAttachments {
  min-height: 0;
  flex: 0 0 auto;
}

.panel.mid.is-dm-conversation-open #dmMain .dmHeader {
  position: relative;
  z-index: 2;
}

.panel.mid.is-dm-conversation-open #dmMain .dmMainBody {
  min-height: 0;
  overflow: hidden;
}

.panel.mid.is-dm-conversation-open #dmMain .dmThread {
  min-height: 0;
  overflow: hidden;
}

.panel.mid.is-dm-conversation-open #dmMain .dmMessages {
  min-height: 0;
}

#dmMain.is-server-voice-call-layout .dmMainBody {
  min-height: 0;
}

#dmMain.is-server-voice-call-layout .dmThread {
  min-height: 0;
}

#dmMain.is-server-voice-call-layout #dmMessages,
#dmMain.is-server-voice-call-layout #btnDmJumpLatest,
#dmMain.is-server-voice-call-layout #dmDropOverlay,
#dmMain.is-server-voice-call-layout #dmReplyBar,
#dmMain.is-server-voice-call-layout #dmPendingAttachments,
#dmMain.is-server-voice-call-layout .dmComposer {
  display: none !important;
}

#dmMain.is-server-voice-call-layout.is-server-voice-hide-header .dmHeader {
  display: none !important;
}

#dmMain.is-server-voice-call-layout #callStatus {
  display: none !important;
}

#dmMain.is-server-voice-call-layout .dmCallDock {
  flex: 1;
  min-height: 0;
  position: relative;
}

.voiceChannelEmptyState {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 16px 12px 14px;
}

.voiceChannelEmptyState[hidden] {
  display: none !important;
}

.voiceChannelEmptyState__card {
  width: min(620px, calc(100% - 12px));
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--altara-border, rgba(255,255,255,0.1)) 76%, var(--altara-accent, #e8cfae) 24%);
  padding: 22px 18px;
  text-align: center;
  background:
    radial-gradient(460px 190px at 50% -10%, color-mix(in srgb, var(--altara-accent, #e8cfae) 10%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 72%, transparent), color-mix(in srgb, var(--altara-bg, #101010) 92%, transparent));
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.voiceChannelEmptyState__title {
  font-size: 30px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: #f2f6ff;
  margin-bottom: 6px;
}

.voiceChannelEmptyState__sub {
  color: var(--text-soft);
  font-size: 14px;
  margin-bottom: 14px;
}

.voiceChannelEmptyState__join.btn {
  min-width: 190px;
}

.callStage.is-docked-in-dm {
  position: relative;
  inset: auto;
  z-index: 4;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  margin: 8px 12px 0;
  display: none;
  animation: none;
}

.callStage.is-docked-in-dm.is-open {
  display: block;
}

#dmMain.is-server-voice-call-layout .callStage.is-docked-in-dm {
  margin: 0 12px 12px;
  flex: 1;
  min-height: 0;
}

.callStage.is-docked-in-dm .callStageCard {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  height: min(var(--dm-stage-height, 56vh), 74vh);
  min-height: 360px;
  border-radius: 16px;
  border-color: rgba(216, 226, 241, 0.16);
  background: #060b14;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
}

#dmMain.is-server-voice-call-layout .callStage.is-docked-in-dm .callStageCard {
  height: 100%;
  min-height: 500px;
  max-height: none;
}

.callStage.is-docked-in-dm .callStageTop {
  padding: 10px 12px;
  background: rgba(8, 11, 18, 0.9);
}

.callStage.is-docked-in-dm .callStageViewport {
  margin: 0 10px 10px;
  border-radius: 14px;
  min-height: 0;
  width: calc(100% - 20px);
  height: auto;
  max-width: none;
  max-height: 100%;
  aspect-ratio: auto;
  align-self: stretch;
  justify-self: stretch;
}

.callStage.is-docked-in-dm .callStageParticipants {
  margin: 0 10px 10px;
  grid-template-columns: repeat(var(--call-participant-cols, 2), minmax(0, 1fr));
}

.callStageParticipants {
  display: none !important;
}

.dmStageResizeGrip {
  display: none;
}

.callStage.is-docked-in-dm .dmStageResizeGrip {
  display: block;
  height: 12px;
  margin: 0 10px 6px;
  border-radius: 999px;
  cursor: ns-resize;
  touch-action: none;
  background:
    linear-gradient(180deg, rgba(121, 131, 245, 0.3), rgba(121, 131, 245, 0.18));
  border: 1px solid rgba(121, 131, 245, 0.26);
}

.callStage.is-docked-in-dm .dmStageResizeGrip:hover {
  border-color: rgba(149, 159, 246, 0.5);
}

#dmMain.is-server-voice-call-layout .callStage.is-docked-in-dm .dmStageResizeGrip {
  display: none !important;
}

.callStage.is-docked-in-dm .callStageControls {
  margin: 0 auto 10px;
  padding: 8px 10px;
  justify-content: center;
  width: fit-content;
  max-width: calc(100% - 20px);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  flex-wrap: nowrap;
}

.app.dm-focus {
  grid-template-columns: clamp(300px, var(--left-sidebar-width), 420px) minmax(620px, 1fr);
}

.app.dm-focus .right,
.app.dm-focus .rightCol {
  display: none;
}

.app.dm-focus .rightSidebarResizer,
.app.dm-focus .rightSidebarPeekZone,
.appGrid.dm-focus .rightSidebarResizer,
.appGrid.dm-focus .rightSidebarPeekZone {
  display: none !important;
  pointer-events: none !important;
}

.callStage.is-docked-in-dm .callStageControls > * {
  flex: 0 0 auto;
}

.callBar.is-docked-in-dm {
  position: relative;
  left: auto;
  top: auto;
  bottom: auto;
  transform: none;
  width: auto;
  margin: 8px 12px 0;
  z-index: 4;
  opacity: 1;
  pointer-events: auto;
  display: none;
  animation: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
}

.callBar.is-docked-in-dm.is-open {
  display: flex;
}

#dmMain.is-server-voice-call-layout .callBar.is-docked-in-dm {
  position: absolute;
  left: 12px;
  right: auto;
  bottom: 12px;
  top: auto;
  transform: none;
  width: min(338px, calc(100% - 24px));
  max-width: calc(100% - 24px);
  margin: 0;
  z-index: 12;
  display: none;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 12px;
  border: 1px solid rgba(112, 132, 236, 0.44);
  background:
    radial-gradient(460px 200px at 8% 0%, rgba(74, 96, 196, 0.28), transparent 70%),
    linear-gradient(165deg, rgba(9, 14, 24, 0.96), rgba(8, 13, 22, 0.96));
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}

#dmMain.is-server-voice-call-layout .callBar.is-docked-in-dm.is-open {
  display: grid;
}

#dmMain.is-server-voice-call-layout .callBar.is-docked-in-dm .callBarHeader {
  gap: 7px;
}

#dmMain.is-server-voice-call-layout .callBar.is-docked-in-dm .callBarText {
  font-size: 13px;
}

#dmMain.is-server-voice-call-layout .callBar.is-docked-in-dm .callBarPing {
  min-width: 112px;
  height: 20px;
  padding: 0 7px;
  font-size: 10px;
}

#dmMain.is-server-voice-call-layout .callBar.is-docked-in-dm .callBarActions {
  gap: 5px;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

#dmMain.is-server-voice-call-layout .callBar.is-docked-in-dm .callMiniBtn {
  width: 34px;
  min-width: 34px;
  height: 29px;
  border-radius: 8px;
}

#dmMain.is-server-voice-call-layout .callBar.is-docked-in-dm .callMiniBtn__icon {
  width: 16px;
  height: 16px;
}

.callBar.is-docked-in-sidebar {
  position: absolute;
  left: 10px;
  right: 10px;
  top: auto;
  bottom: 10px;
  width: auto;
  max-width: none;
  transform: translateY(8px);
  z-index: 6;
  border-radius: 12px;
  border: 1px solid rgba(200, 232, 255, 0.2);
  background: linear-gradient(180deg, rgba(13, 18, 27, 0.98), rgba(8, 12, 20, 0.98));
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
  padding: 8px 9px;
  gap: 8px;
  animation: none;
}

.callBar.is-docked-in-sidebar.is-open {
  transform: translateY(0);
}

.callBar.is-docked-in-sidebar .callBarHeader {
  gap: 8px;
}

.callBar.is-docked-in-sidebar .callBarText {
  font-size: 14px;
}

.callBar.is-docked-in-sidebar .callBarPing {
  min-width: 116px;
  height: 21px;
  padding: 0 8px;
  font-size: 10px;
}

.callBar.is-docked-in-sidebar .callBarActions {
  gap: 7px;
  flex-wrap: nowrap;
}

.callBar.is-docked-in-sidebar .callMiniBtn {
  width: 39px;
  min-width: 39px;
  height: 31px;
  border-radius: 9px;
}

.callBar.is-docked-in-sidebar.is-server-voice-mini-panel {
  left: 8px;
  right: 8px;
  bottom: 10px;
  padding: 7px 8px;
  gap: 6px;
  border-color: rgba(118, 142, 242, 0.46);
  background:
    radial-gradient(360px 170px at 10% 0%, rgba(81, 102, 205, 0.24), transparent 72%),
    linear-gradient(170deg, rgba(10, 15, 25, 0.96), rgba(8, 12, 20, 0.96));
}

.callBar.is-docked-in-sidebar.is-server-voice-mini-panel .callBarText {
  font-size: 13px;
}

.callBar.is-docked-in-sidebar.is-server-voice-mini-panel .callBarPing {
  min-width: 108px;
  height: 20px;
  font-size: 10px;
}

.callBar.is-docked-in-sidebar.is-server-voice-mini-panel .callBarActions {
  gap: 5px;
}

.callBar.is-docked-in-sidebar.is-server-voice-mini-panel .callMiniBtn {
  width: 34px;
  min-width: 34px;
  height: 28px;
  border-radius: 8px;
}

.callBar.is-docked-in-sidebar.is-server-voice-mini-panel #btnServerVoiceReconnectSmall,
#btnServerVoiceReconnectSmall {
  width: auto;
  min-width: 104px;
  padding: 0 12px;
  font-weight: 700;
}

.callBar.is-docked-in-dm .callBarHeader {
  min-width: 0;
  flex: 1;
}

.callBar.is-docked-in-dm .callBarActions {
  flex: 0 0 auto;
}

.callStageControls .btn.is-on,
.callBar .btn.is-on {
  border-color: #6e79b5;
  background: #3f496d;
}

@media (max-width: 980px) {
  .dmTitleRow {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .dmPrivacyBanner {
    flex-direction: column;
    align-items: stretch;
  }

  .dmPrivacyBanner__actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .callStage.is-docked-in-dm .callStageCard {
    min-height: 300px;
    height: min(var(--dm-stage-height, 52vh), 66vh);
  }
}

/* Dynamic appearance overrides (driven by theme settings) */
body .app:not(.wrap) {
  border-radius: calc(var(--radius-lg) - 2px) !important;
}

body.theme-style-glass .panel,
body.theme-style-glass .card {
  background: linear-gradient(170deg, var(--surface-0) 0%, var(--surface-1) 42%, var(--surface-2) 100%);
  border-color: rgba(255, 255, 255, 0.22);
}

body.theme-style-glass .panel:not(.mid),
body.theme-style-glass .card,
body.theme-style-glass #profileOverlay .settingsCardSection,
body.theme-style-glass #profileOverlay .settingsIdentityCard {
  backdrop-filter: blur(calc(var(--theme-blur, 12px) * 1.25));
  -webkit-backdrop-filter: blur(calc(var(--theme-blur, 12px) * 1.25));
}

/* Keep nav arrows stable in desktop titlebar overlay while using Glass style. */
body.desktop-titlebar-overlay.theme-style-glass .panel.mid {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.theme-style-solid .panel,
body.theme-style-solid .card {
  backdrop-filter: none;
}

body.theme-style-minimal .panel,
body.theme-style-minimal .card {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
}

body.theme-style-gaming .panel,
body.theme-style-gaming .card {
  box-shadow:
    0 20px 36px rgba(0, 0, 0, 0.56),
    0 0 0 1px var(--accent-soft),
    0 0 28px var(--accent-soft);
}

body .panel,
body .card,
body #profileOverlay .settingsCardSection,
body #profileOverlay .settingsIdentityCard {
  border-radius: var(--radius-lg) !important;
}

body .btn,
body .smallBtn,
body .input,
body textarea,
body select,
body .row,
body .presenceRow,
body .dm-item,
body .dmComposer {
  border-radius: calc(var(--radius-md) - 2px) !important;
}

body.theme-density-compact .settingsCardSection,
body.theme-density-compact .settingsMainTop,
body.theme-density-compact .settingsMainBody,
body.theme-density-compact .padded {
  padding: calc(10px * var(--theme-spacing-scale, 1)) !important;
}

body.theme-density-comfortable .settingsCardSection,
body.theme-density-comfortable .settingsMainTop,
body.theme-density-comfortable .settingsMainBody,
body.theme-density-comfortable .padded {
  padding: calc(18px * var(--theme-spacing-scale, 1)) !important;
}

/* Sidebar collapse layout guards (must stay near end to beat media rules) */
.app.right-collapsed:not(.left-collapsed),
.appGrid.right-collapsed:not(.left-collapsed) {
  grid-template-columns: var(--left-sidebar-width) minmax(0, 1fr) !important;
}

.app.left-collapsed.right-collapsed,
.appGrid.left-collapsed.right-collapsed {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Force-hide right activity sidebar while a call stage is open/active */
.app[data-call-stage-open="true"]:not(.left-collapsed),
.appGrid[data-call-stage-open="true"]:not(.left-collapsed) {
  grid-template-columns: var(--left-sidebar-width) minmax(0, 1fr) !important;
}

.app.left-collapsed[data-call-stage-open="true"],
.appGrid.left-collapsed[data-call-stage-open="true"] {
  grid-template-columns: minmax(0, 1fr) !important;
}

.app[data-call-stage-open="true"] .panel.right,
.appGrid[data-call-stage-open="true"] .panel.right,
.app[data-call-stage-open="true"] .right,
.appGrid[data-call-stage-open="true"] .right,
.app[data-call-stage-open="true"] .rightCol,
.appGrid[data-call-stage-open="true"] .rightCol,
.app[data-call-stage-open="true"] .rightSidebarResizer,
.appGrid[data-call-stage-open="true"] .rightSidebarResizer,
.app[data-call-stage-open="true"] .rightSidebarPeekZone,
.appGrid[data-call-stage-open="true"] .rightSidebarPeekZone,
.app[data-call-stage-open="true"] #activeNow,
.appGrid[data-call-stage-open="true"] #activeNow,
.app[data-call-stage-open="true"] #offlineList,
.appGrid[data-call-stage-open="true"] #offlineList {
  display: none !important;
  pointer-events: none !important;
}

.app[data-call-stage-open="true"] .mid,
.appGrid[data-call-stage-open="true"] .mid,
.app[data-call-stage-open="true"] .midCol,
.appGrid[data-call-stage-open="true"] .midCol {
  width: 100%;
  max-width: none;
}

@media (max-width: 1280px) {
  .app.right-collapsed:not(.left-collapsed),
  .appGrid.right-collapsed:not(.left-collapsed) {
    grid-template-columns: clamp(300px, var(--left-sidebar-width), 340px) minmax(0, 1fr) !important;
  }

  .app[data-call-stage-open="true"]:not(.left-collapsed),
  .appGrid[data-call-stage-open="true"]:not(.left-collapsed) {
    grid-template-columns: clamp(300px, var(--left-sidebar-width), 340px) minmax(0, 1fr) !important;
  }
}

/* GIF picker cards style (Discord-like) */
#gifModal .modalCard {
  width: min(560px, 95vw);
}

#gifModal .modalTitle {
  font-size: 18px;
  font-weight: 700;
}

#gifModal .editorWrap {
  padding: 12px;
}

#gifModal .gifFolderTop {
  align-items: center;
  gap: 10px;
  min-height: 34px;
  margin: -2px -2px 10px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#gifModal .gifFolderBack {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #f1f5ff;
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}

#gifModal .gifFolderBack:hover {
  background: rgba(255, 255, 255, 0.08);
}

#gifModal .gifFolderTitle {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
}

#gifModal.gif-folder-open .modalTop {
  display: none;
}

#gifModal .gifSearchRow {
  margin-top: 0;
}

#gifModal .gifSearchField {
  position: relative;
  width: 100%;
}

#gifModal .gifSearchIcon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: rgba(229, 238, 255, 0.72);
  pointer-events: none;
}

#gifModal #gifSearch.input {
  height: 40px;
  padding-left: 36px;
  border-radius: 9px;
  border: 1px solid rgba(88, 101, 242, 0.95);
  background: rgba(4, 8, 14, 0.78);
  color: #f5f8ff;
}

#gifModal #gifSearch.input::placeholder {
  color: rgba(230, 236, 248, 0.6);
}

#gifModal .gifQuickTags {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#gifModal .gif-shortcut,
#gifModal .gif-term {
  position: relative;
  min-height: 108px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, filter 0.12s ease;
  isolation: isolate;
}

#gifModal .gif-shortcut:hover,
#gifModal .gif-term:hover {
  transform: translateY(-1px);
  border-color: rgba(166, 181, 255, 0.62);
  filter: brightness(1.06);
}

#gifModal .gif-shortcut::before,
#gifModal .gif-term::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--gif-card-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.12s ease;
}

#gifModal .gif-shortcut.has-image::before,
#gifModal .gif-term.has-image::before {
  opacity: 0.9;
}

#gifModal .gif-shortcut::after,
#gifModal .gif-term::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 10, 16, 0.18), rgba(7, 10, 16, 0.62));
}

#gifModal .gif-shortcut > *,
#gifModal .gif-term > * {
  position: relative;
  z-index: 1;
}

#gifModal .gif-shortcut {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 4px;
  padding: 12px;
  text-align: left;
  background:
    linear-gradient(140deg, rgba(93, 106, 255, 0.58), rgba(57, 68, 198, 0.5)),
    rgba(7, 11, 18, 0.88);
}

#gifModal .gif-shortcut--favorites {
  background:
    linear-gradient(140deg, rgba(91, 107, 255, 0.84), rgba(76, 92, 235, 0.84)),
    rgba(8, 12, 20, 0.92);
}

#gifModal .gif-shortcut--trending {
  background:
    linear-gradient(140deg, rgba(34, 42, 32, 0.72), rgba(19, 28, 18, 0.74)),
    rgba(9, 13, 20, 0.92);
}

#gifModal .gif-shortcut__title {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.38);
}

#gifModal .gif-shortcut__meta {
  font-size: 12px;
  color: rgba(243, 247, 255, 0.86);
}

#gifModal .gif-term {
  display: grid;
  place-items: center;
  padding: 10px;
  text-align: center;
  background: rgba(14, 19, 27, 0.88);
}

#gifModal .gif-term__title {
  display: inline-block;
  max-width: 95%;
  color: #ffffff;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  text-transform: lowercase;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.54);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#gifModal .gifGrid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  max-height: 48vh;
  overflow-x: hidden;
  overflow-y: auto;
  align-content: start;
}

#gifModal .gif-item {
  min-height: 84px;
  height: auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(12, 17, 24, 0.82);
}

#gifModal .gif-item img {
  width: 100%;
  height: auto;
  min-height: 84px;
  object-fit: cover;
}

#gifModal .gif-fav-btn {
  width: 30px;
  height: 30px;
  top: 8px;
  right: 8px;
  border-radius: 999px;
}

@media (max-width: 640px) {
  #gifModal .gif-shortcut__title,
  #gifModal .gif-term__title {
    font-size: 24px;
  }
}

@media (max-width: 640px) {
  .emojiCatBtn span {
    display: none;
  }

  .emojiPickerGrid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

/* GIF picker as popover (same style behavior as emoji picker) */
#gifModal {
  inset: auto;
  z-index: 2710;
  padding: 0;
}

#gifModal:not(.hidden) {
  display: block;
}

#gifModal .modalCard {
  width: min(560px, 95vw);
  max-width: min(560px, 95vw);
  height: min(520px, 78vh);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
  display: flex;
  flex-direction: column;
}

#gifModal .modalTop {
  padding: 10px 12px;
}

#gifModal .modalTitle {
  font-size: 16px;
}

#gifModal .editorWrap {
  padding: 10px;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-x: hidden;
}

#gifModal .gifQuickTags {
  margin-top: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  align-content: start;
  padding-right: 2px;
}

#gifModal .gifGrid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  align-content: start;
  padding-right: 2px;
}

#gifModal.gif-folder-open .gifGrid {
  grid-template-columns: minmax(0, 1fr);
}

#gifModal .gif-item {
  position: relative;
  min-height: 84px;
  height: auto;
  aspect-ratio: auto !important;
  overflow: hidden;
}

#gifModal .gif-item img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 84px;
  object-fit: cover;
}

/* ALTARA premium GIF picker */
#gifModal {
  inset: auto;
  z-index: 2710;
  display: block;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
}

#gifModal.hidden {
  display: none !important;
}

#gifModal:not(.hidden) {
  display: block;
}

#gifModal .modalCard {
  width: min(500px, calc(100vw - 20px));
  max-width: min(500px, calc(100vw - 20px));
  height: min(540px, calc(100vh - 20px));
  max-height: calc(100vh - 20px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  border-radius: 18px;
  background:
    radial-gradient(620px 240px at 12% 0%, color-mix(in srgb, var(--altara-accent, #e8cfae) 12%, transparent), transparent 66%),
    linear-gradient(180deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 78%, rgba(255, 255, 255, 0.032)), var(--altara-surface, #151515));
  box-shadow:
    0 24px 76px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

#gifModal .modalCard::after {
  content: "";
  position: absolute;
  right: 42px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  border-right: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  border-bottom: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  background: var(--altara-surface, #151515);
  transform: rotate(45deg);
  box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.18);
}

#gifModal .modalTop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 12px 12px 10px 14px;
  border-bottom: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 62%, transparent), transparent);
}

#gifModal.gif-folder-open .modalTop {
  display: grid;
}

#gifModal .gifModalBrand {
  width: 34px;
  height: 34px;
  display: none !important;
  place-items: center;
  border: 1px solid var(--altara-accent-border, rgba(232, 207, 174, 0.26));
  border-radius: 11px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-accent, #e8cfae) 18%, transparent), color-mix(in srgb, var(--altara-accent, #e8cfae) 8%, transparent));
  color: var(--altara-accent-strong, #f0d8b8);
  font-family: var(--font-display, var(--font-ui, inherit));
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#gifModal .modalTitle {
  color: var(--altara-text, #f2f0ec);
  font-family: var(--font-display, var(--font-ui, inherit));
  font-size: 16px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
}

#gifModal #btnGifClose {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  border-radius: 11px;
  background: color-mix(in srgb, var(--altara-bg, #101010) 48%, transparent);
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.64));
  font-size: 22px;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

#gifModal #btnGifClose:hover,
#gifModal #btnGifClose:focus-visible {
  outline: none;
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.1));
  color: var(--altara-text, #f2f0ec);
  transform: translateY(-1px);
}

#gifModal .editorWrap {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: 7px;
  overflow: hidden;
  padding: 9px 12px 12px;
}

#gifModal .gifFolderTop {
  min-height: 32px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 0;
}

#gifModal .gifFolderBack {
  width: 32px;
  height: 32px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  border-radius: 11px;
  background: color-mix(in srgb, var(--altara-bg, #101010) 42%, transparent);
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.68));
}

#gifModal .gifFolderBack:hover,
#gifModal .gifFolderBack:focus-visible {
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.1));
  color: var(--altara-text, #f2f0ec);
}

#gifModal .gifFolderTitle {
  color: var(--altara-accent-strong, #f0d8b8);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

#gifModal .gifSearchRow {
  margin: 0;
}

#gifModal .gifSearchField {
  height: 38px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.01)),
    color-mix(in srgb, var(--altara-bg, #101010) 72%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 10px 28px rgba(0, 0, 0, 0.14);
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

#gifModal .gifSearchField:focus-within {
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.34));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-accent, #e8cfae) 7%, transparent), rgba(255, 255, 255, 0.012)),
    color-mix(in srgb, var(--altara-bg, #101010) 74%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 0 0 3px var(--altara-accent-soft, rgba(232, 207, 174, 0.1));
}

#gifModal .gifSearchIcon {
  position: relative;
  left: auto;
  top: auto;
  width: 19px;
  height: 19px;
  display: inline-block;
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.5));
  transform: none;
}

#gifModal .gifSearchIcon::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-radius: 999px;
}

#gifModal .gifSearchIcon::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 13px;
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: left center;
}

#gifModal #gifSearch.input {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--altara-text, #f2f0ec);
  font-size: 15px;
  font-weight: 550;
  outline: none;
  box-shadow: none;
}

#gifModal #gifSearch.input::placeholder {
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.52));
}

#gifModal .gifQuickTags {
  min-height: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(84px, auto);
  gap: 7px;
  overflow: auto;
  align-content: start;
  padding: 0 4px 2px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28)) transparent;
}

#gifModal .gifBrowseTop {
  grid-column: 1 / -1;
}

#gifModal .gifBrowseTop,
#gifModal .gifGridSectionTop {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

#gifModal .gifBrowseTitle,
#gifModal .gifGridSectionTitle {
  color: var(--altara-text, #f2f0ec);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0;
}

#gifModal .gifGridSectionMeta {
  border: 0;
  background: transparent;
  color: var(--altara-accent-strong, #f0d8b8);
  font: inherit;
  font-size: 12px;
  font-weight: 760;
}

#gifModal .gif-shortcut,
#gifModal .gif-term {
  min-height: 84px;
  border-radius: 12px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 64%, rgba(255, 255, 255, 0.02)), color-mix(in srgb, var(--altara-bg, #101010) 54%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.14);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

#gifModal .gif-shortcut:hover,
#gifModal .gif-term:hover,
#gifModal .gif-shortcut:focus-visible,
#gifModal .gif-term:focus-visible {
  outline: none;
  transform: translateY(-2px);
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.32));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 18px 38px rgba(0, 0, 0, 0.24);
  filter: brightness(1.04);
}

#gifModal .gif-shortcut::after,
#gifModal .gif-term::after {
  background:
    linear-gradient(180deg, rgba(6, 6, 6, 0.1), rgba(6, 6, 6, 0.62)),
    radial-gradient(260px 120px at 10% 0%, color-mix(in srgb, var(--altara-accent, #e8cfae) 15%, transparent), transparent 70%);
}

#gifModal .gif-shortcut--favorites,
#gifModal .gif-shortcut--trending {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--altara-accent, #e8cfae) 18%, var(--altara-surface-elevated, #202020)), color-mix(in srgb, var(--altara-bg, #101010) 78%, transparent));
}

#gifModal .gif-shortcut__title,
#gifModal .gif-term__title {
  color: var(--altara-text, #f2f0ec);
  font-size: clamp(16px, 1.7vw, 22px);
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

#gifModal .gif-shortcut__meta {
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.72));
  font-size: 12px;
  font-weight: 620;
}

#gifModal .gifGrid {
  min-height: 0;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  align-content: start;
  padding: 0 4px 2px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28)) transparent;
}

#gifModal .gifGridSectionTop {
  grid-column: 1 / -1;
  min-height: 22px;
}

#gifModal .gifMasonry {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

#gifModal .gifMasonryColumn {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-content: start;
}

#gifModal .gifGrid::-webkit-scrollbar,
#gifModal .gifQuickTags::-webkit-scrollbar {
  width: 8px;
  height: 6px;
}

#gifModal .gifGrid::-webkit-scrollbar-track,
#gifModal .gifQuickTags::-webkit-scrollbar-track {
  background: transparent;
}

#gifModal .gifGrid::-webkit-scrollbar-thumb,
#gifModal .gifQuickTags::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--altara-accent, #e8cfae) 24%, transparent);
}

#gifModal .gif-item {
  position: relative;
  min-height: 84px;
  width: 100%;
  height: auto;
  aspect-ratio: auto !important;
  display: block;
  overflow: hidden;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  border-radius: 11px;
  background: color-mix(in srgb, var(--altara-bg, #101010) 54%, transparent);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 12px 28px rgba(0, 0, 0, 0.16);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

#gifModal .gif-item:hover,
#gifModal .gif-item:focus-visible {
  outline: none;
  transform: translateY(-2px);
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.34));
  box-shadow:
    0 0 0 3px var(--altara-accent-soft, rgba(232, 207, 174, 0.1)),
    0 18px 44px rgba(0, 0, 0, 0.28);
  filter: brightness(1.04);
}

#gifModal .gif-item img {
  width: 100%;
  height: auto;
  min-height: 84px;
  display: block;
  object-fit: cover;
  transition: transform 0.18s ease;
}

#gifModal .gif-item img:not([src]) {
  color: transparent;
  background:
    radial-gradient(circle at 30% 20%, rgba(232, 207, 174, 0.12), transparent 34%),
    rgba(12, 17, 24, 0.9);
}

#gifModal .gif-item:hover img,
#gifModal .gif-item:focus-visible img {
  transform: scale(1.025);
}

#gifModal .gif-item::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 56%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.62));
  opacity: 0;
}

#gifModal .gif-fav-btn {
  z-index: 3;
  top: 7px;
  right: 7px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(16, 16, 16, 0.64);
  color: rgba(242, 240, 236, 0.78);
  backdrop-filter: blur(8px);
}

#gifModal .gif-fav-btn:hover,
#gifModal .gif-fav-btn:focus-visible {
  outline: none;
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.32));
  background: rgba(232, 207, 174, 0.15);
  color: var(--altara-accent-strong, #f0d8b8);
}

#gifModal .gif-fav-btn.is-fav {
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.4));
  background: color-mix(in srgb, var(--altara-accent, #e8cfae) 22%, rgba(16, 16, 16, 0.66));
  color: var(--altara-accent-strong, #f0d8b8);
}

#gifModal .gif-empty {
  grid-column: 1 / -1;
  min-height: 110px;
  display: grid;
  place-items: center;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  background: color-mix(in srgb, var(--altara-surface-elevated, #202020) 54%, transparent);
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.62));
  font-size: 13px;
}

#gifModal #gifHint {
  margin-top: 0 !important;
  padding: 8px 10px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  background: color-mix(in srgb, var(--altara-bg, #101010) 42%, transparent);
  font-size: 12px;
}

#gifModal .gifFooterHint {
  min-height: 20px;
  display: flex;
  align-items: center;
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.56));
  font-size: 11px;
  line-height: 1.4;
}

@media (max-width: 560px) {
  #gifModal {
    max-width: calc(100vw - 16px);
  }

  #gifModal .modalCard {
    width: min(420px, calc(100vw - 16px));
    max-width: min(420px, calc(100vw - 16px));
    height: min(500px, calc(100vh - 16px));
    max-height: calc(100vh - 16px);
    border-radius: 16px;
  }

  #gifModal .modalTop {
    min-height: 54px;
    padding: 10px 10px 9px 12px;
  }

  #gifModal .modalTitle {
    font-size: 15px;
  }

#gifModal .editorWrap {
    padding: 9px 10px 10px;
  }

  #gifModal .gifGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  #gifModal .gifQuickTags {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #gifModal .gifGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  #gifModal .gifMasonry {
    gap: 8px;
  }

  #gifModal .gifMasonryColumn {
    gap: 8px;
  }

  #gifModal .gifFooterHint {
    display: none;
  }
}

/* Call polish refresh */
.callStageCard {
  border-color: rgba(216, 226, 241, 0.16);
  background: #060b14 !important;
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(232, 240, 255, 0.15);
}

.callStageTop {
  border-bottom-color: rgba(216, 226, 241, 0.14);
  background:
    linear-gradient(180deg, rgba(13, 18, 29, 0.72), rgba(9, 13, 21, 0.68));
  backdrop-filter: blur(8px) saturate(130%);
}

.callStageTitle {
  letter-spacing: 0.01em;
  font-weight: 800;
}

.callStageSub {
  color: rgba(226, 238, 255, 0.78);
}

.callStageViewport {
  margin: 0 12px 12px;
  border-color: transparent;
  background: transparent !important;
  isolation: isolate;
  contain: layout paint;
  box-shadow: none;
}

.callStageGrid[hidden] {
  display: none !important;
}

.callStage:not(.layout-grid) .callStageGrid {
  display: none !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none !important;
}

.callStage:not(.layout-grid) .callStageViewport.is-speaking-spotlight {
  border-color: rgba(95, 255, 172, 0.88) !important;
  box-shadow:
    inset 0 0 0 1px rgba(95, 255, 172, 0.24),
    0 0 0 1px rgba(95, 255, 172, 0.46),
    0 0 26px rgba(95, 255, 172, 0.18);
}

.stageGridTile,
.participantTile {
  border-color: rgba(255, 255, 255, 0.08);
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease,
    filter 0.16s ease;
}

.stageGridTile:hover,
.participantTile:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.16);
  filter: brightness(1.02);
}

.stageGridTile.is-active,
.participantTile.is-active {
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 16px rgba(0, 0, 0, 0.28);
}

.participantAvatar,
.stageGridAvatar {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(240, 247, 255, 0.1);
}

.callStageControls__group {
  border-color: rgba(236, 240, 248, 0.12);
  background: linear-gradient(180deg, rgba(14, 18, 25, 0.98), rgba(10, 13, 19, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 18px rgba(0, 0, 0, 0.24);
}

.callStageControls .callCtrlBtn {
  border-color: rgba(236, 240, 248, 0.12);
  background: transparent;
}

.callStageControls .callCtrlBtn:hover {
  border-color: rgba(236, 240, 248, 0.28);
  background: rgba(255, 255, 255, 0.08);
}

.callStageControls .callCtrlBtn.is-on {
  border-color: rgba(236, 240, 248, 0.42);
  background: linear-gradient(160deg, rgba(64, 72, 88, 0.94), rgba(44, 50, 62, 0.94));
}

.callStageControls .callCtrlBtn--danger {
  border-color: rgba(238, 119, 142, 0.88);
  background: linear-gradient(160deg, rgba(220, 73, 104, 0.97), rgba(185, 49, 82, 0.97));
  box-shadow: 0 10px 18px rgba(184, 51, 83, 0.3);
}

.shareSelect,
.shareAudioToggle {
  border-color: rgba(136, 186, 255, 0.3);
  background: rgba(11, 19, 33, 0.8);
}

.callBar,
.inCallBar {
  border-color: rgba(132, 179, 255, 0.3);
  background:
    radial-gradient(460px 220px at 0% 0%, rgba(82, 132, 255, 0.2), transparent 72%),
    linear-gradient(165deg, rgba(9, 15, 27, 0.95), rgba(7, 12, 22, 0.96));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
}

.callMiniBtn {
  border-color: rgba(132, 179, 255, 0.24);
  background: rgba(16, 27, 44, 0.66);
}

.callBarPing {
  border-color: rgba(146, 188, 255, 0.56);
  background: rgba(18, 30, 47, 0.92);
}

.callBarShareBadge {
  border-color: rgba(110, 203, 154, 0.42);
  background: rgba(17, 44, 34, 0.92);
}

.callStage.is-docked-in-dm .callStageCard {
  border-color: rgba(216, 226, 241, 0.2);
  background: #060b14 !important;
}

.callStage.is-docked-in-dm .callStageTop {
  background: rgba(8, 13, 24, 0.78);
}

.callBar.is-docked-in-dm,
.callBar.is-docked-in-sidebar {
  border-color: rgba(129, 177, 255, 0.42);
  background:
    radial-gradient(420px 180px at 8% 0%, rgba(76, 117, 226, 0.26), transparent 74%),
    linear-gradient(170deg, rgba(10, 16, 28, 0.96), rgba(8, 13, 22, 0.96));
}

/* Voice activity outline */
.participantTile.is-speaking,
.stageGridTile.is-speaking {
  border-color: rgba(95, 255, 172, 0.98) !important;
  box-shadow:
    0 0 0 1px rgba(95, 255, 172, 0.7),
    0 0 24px rgba(95, 255, 172, 0.45),
    inset 0 0 0 1px rgba(95, 255, 172, 0.34) !important;
}

.participantTile.is-speaking::after,
.stageGridTile.is-speaking::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(95, 255, 172, 0.5),
    0 0 16px rgba(95, 255, 172, 0.28);
  animation: callSpeakingGlowPulse 1.05s ease-in-out infinite;
}

.participantTile.is-speaking .participantAvatar,
.stageGridTile.is-speaking .stageGridAvatar {
  border-color: rgba(95, 255, 172, 0.92);
  box-shadow:
    0 0 0 2px rgba(95, 255, 172, 0.36),
    0 0 12px rgba(95, 255, 172, 0.3);
}

@keyframes callSpeakingGlowPulse {
  0%,
  100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.005);
  }
}

@media (prefers-reduced-motion: reduce) {
  .participantTile.is-speaking::after,
  .stageGridTile.is-speaking::after {
    animation: none;
  }
}

.desktopSharePickerCard {
  width: min(1040px, 96vw);
  max-height: min(88vh, 840px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border-radius: 18px;
  border-color: var(--stroke-strong);
  background: linear-gradient(180deg, rgba(21, 24, 31, 0.98), rgba(13, 16, 22, 0.99));
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.5);
}

.desktopSharePickerTop {
  padding: 13px 15px 9px;
  border-bottom: 1px solid var(--stroke);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.desktopSharePickerHead .hint {
  margin-top: 3px;
}

.desktopSharePickerTabs {
  margin: 11px 14px 0;
  padding: 4px;
  border-radius: 11px;
  border: 1px solid var(--stroke);
  background: rgba(10, 12, 16, 0.9);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 4px;
}

.desktopSharePickerTab {
  height: 38px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-soft);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}

.desktopSharePickerTab:hover {
  border-color: var(--stroke-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-main);
}

.desktopSharePickerTab.is-active {
  border-color: var(--ui-btn-hover-border);
  background: var(--ui-btn-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--text-main);
}

.desktopSharePickerRefresh {
  height: 38px;
  min-width: 104px;
  border-color: var(--stroke);
  background: rgba(17, 20, 26, 0.92);
}

.desktopSharePickerBody {
  min-height: 0;
  padding: 12px 14px 10px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
}

.desktopSharePickerGrid {
  min-height: 180px;
  max-height: min(56vh, 540px);
  overflow: auto;
  padding-right: 4px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 11px;
}

.desktopSharePickerItem {
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: linear-gradient(170deg, rgba(16, 19, 25, 0.96), rgba(12, 15, 20, 0.96));
  cursor: pointer;
  padding: 7px;
  display: grid;
  grid-template-rows: auto auto;
  gap: 7px;
  text-align: left;
  position: relative;
  transition: border-color .16s ease, transform .12s ease, box-shadow .18s ease, background-color .16s ease;
}

.desktopSharePickerItem:focus-visible {
  outline: none;
  border-color: var(--ui-btn-hover-border);
  box-shadow: 0 0 0 2px rgba(142, 160, 255, 0.24), 0 12px 26px rgba(0, 0, 0, 0.38);
}

.desktopSharePickerItem:hover {
  border-color: var(--stroke-strong);
  background: linear-gradient(170deg, rgba(24, 28, 36, 0.98), rgba(16, 19, 25, 0.98));
  transform: translateY(-1px);
}

.desktopSharePickerItem.is-selected {
  border-color: rgba(94, 235, 166, 0.72);
  box-shadow: 0 0 0 1px rgba(94, 235, 166, 0.26), 0 12px 26px rgba(0, 0, 0, 0.38);
}

.desktopSharePickerItem__thumbWrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(145deg, rgba(16, 20, 26, 0.96), rgba(10, 13, 18, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
}

.desktopSharePickerItem__thumbWrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(7, 11, 18, 0);
  pointer-events: none;
  transition: background-color .14s ease;
}

.desktopSharePickerItem:hover .desktopSharePickerItem__thumbWrap::after,
.desktopSharePickerItem:focus-within .desktopSharePickerItem__thumbWrap::after {
  background: rgba(4, 6, 10, 0.42);
}

.desktopSharePickerItem__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.desktopSharePickerItem__shareBtn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  min-width: 138px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(22, 27, 36, 0.95);
  color: #f4f7ff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}

.desktopSharePickerItem:hover .desktopSharePickerItem__shareBtn,
.desktopSharePickerItem:focus-within .desktopSharePickerItem__shareBtn {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.desktopSharePickerItem__shareBtn:hover {
  background: rgba(35, 42, 54, 0.96);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.33);
}

.desktopSharePickerItem__shareBtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(142, 160, 255, 0.34), 0 8px 20px rgba(0, 0, 0, 0.35);
}

.desktopSharePickerItem__thumbFallback {
  color: rgba(228, 234, 246, 0.9);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.desktopSharePickerItem__meta {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.desktopSharePickerItem__icon {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.06);
}

.desktopSharePickerItem__iconFallback {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #dfe7fb;
  background: linear-gradient(160deg, rgba(70, 79, 100, 0.85), rgba(48, 56, 71, 0.82));
}

.desktopSharePickerItem__name {
  min-width: 0;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.desktopSharePickerMeta {
  min-height: 20px;
  color: var(--text-soft);
  font-size: 12px;
}

.desktopSharePickerFooter {
  border-top: 1px solid var(--stroke);
  padding: 10px 14px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.desktopSharePickerFooter__left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  flex-wrap: wrap;
}

.desktopSharePickerAudio {
  margin: 0;
}

.desktopSharePickerQuality {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: rgba(11, 14, 19, 0.94);
  flex-shrink: 1;
  min-width: 0;
}

.desktopSharePickerServerVoiceControls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: min(100%, 560px);
}

.desktopSharePickerServerVoiceControls__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.desktopSharePickerServerVoiceControls__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-soft);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.desktopSharePickerServerVoiceControls__value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
}

.desktopSharePickerServerVoiceControls__group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: rgba(11, 14, 19, 0.94);
  flex-wrap: wrap;
}

.desktopSharePickerQualityBtn {
  min-width: 0;
  height: 31px;
  padding: 0 12px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.desktopSharePickerQualityBtn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
}

.desktopSharePickerQualityBtn.is-active {
  background: rgba(53, 64, 96, 0.82);
  color: var(--text-main);
}

.desktopSharePickerQualityBtn.is-disabled,
.desktopSharePickerQualityBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.desktopSharePickerFooter__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ALTARA neutral dark screen-share picker */
#desktopSharePickerModal .modal__backdrop {
  background: rgba(3, 3, 3, 0.58);
  backdrop-filter: blur(8px);
}

#desktopSharePickerModal .desktopSharePickerCard {
  border-color: rgba(255, 255, 255, 0.11);
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.99), rgba(11, 11, 11, 0.99));
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#desktopSharePickerModal .desktopSharePickerTop {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: rgba(14, 14, 14, 0.86);
}

#desktopSharePickerModal .modalTitle {
  color: rgba(242, 240, 236, 0.96);
}

#desktopSharePickerModal .desktopSharePickerHead .hint,
#desktopSharePickerModal .desktopSharePickerMeta {
  color: rgba(242, 240, 236, 0.48);
}

#desktopSharePickerModal .icon-btn {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(242, 240, 236, 0.72);
  box-shadow: none;
}

#desktopSharePickerModal .icon-btn:hover,
#desktopSharePickerModal .icon-btn:focus-visible {
  border-color: rgba(232, 207, 174, 0.24);
  background: rgba(255, 255, 255, 0.065);
  color: rgba(242, 240, 236, 0.94);
  box-shadow: 0 0 0 3px rgba(232, 207, 174, 0.08);
}

#desktopSharePickerModal .desktopSharePickerTabs {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(9, 9, 9, 0.96);
}

#desktopSharePickerModal .desktopSharePickerTab,
#desktopSharePickerModal .desktopSharePickerRefresh,
#desktopSharePickerModal .desktopSharePickerFooter__actions .btn.ghost {
  border-color: rgba(255, 255, 255, 0.10);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    rgba(24, 24, 24, 0.92);
  color: rgba(242, 240, 236, 0.70);
  box-shadow: none;
}

#desktopSharePickerModal .desktopSharePickerTab:hover,
#desktopSharePickerModal .desktopSharePickerTab:focus-visible,
#desktopSharePickerModal .desktopSharePickerRefresh:hover,
#desktopSharePickerModal .desktopSharePickerRefresh:focus-visible,
#desktopSharePickerModal .desktopSharePickerFooter__actions .btn.ghost:hover,
#desktopSharePickerModal .desktopSharePickerFooter__actions .btn.ghost:focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.22);
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.06), rgba(255, 255, 255, 0.012)),
    rgba(29, 29, 29, 0.96);
  color: rgba(242, 240, 236, 0.92);
  box-shadow: 0 0 0 3px rgba(232, 207, 174, 0.06);
}

#desktopSharePickerModal .desktopSharePickerTab.is-active {
  border-color: rgba(232, 207, 174, 0.30);
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.10), rgba(255, 255, 255, 0.018)),
    rgba(31, 29, 26, 0.96);
  color: rgba(242, 240, 236, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(232, 207, 174, 0.04);
}

#desktopSharePickerModal .desktopSharePickerBody {
  background: rgba(12, 12, 12, 0.84);
}

#desktopSharePickerModal .desktopSharePickerGrid {
  scrollbar-color: rgba(232, 207, 174, 0.24) rgba(255, 255, 255, 0.04);
}

#desktopSharePickerModal .desktopSharePickerItem {
  border-color: rgba(255, 255, 255, 0.085);
  background: linear-gradient(180deg, rgba(22, 22, 22, 0.98), rgba(15, 15, 15, 0.98));
  box-shadow: none;
}

#desktopSharePickerModal .desktopSharePickerItem:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, rgba(28, 28, 28, 0.99), rgba(18, 18, 18, 0.99));
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
}

#desktopSharePickerModal .desktopSharePickerItem:focus-visible {
  border-color: rgba(232, 207, 174, 0.34);
  box-shadow:
    0 0 0 3px rgba(232, 207, 174, 0.08),
    0 12px 26px rgba(0, 0, 0, 0.34);
}

#desktopSharePickerModal .desktopSharePickerItem.is-selected {
  border-color: rgba(232, 207, 174, 0.48);
  background: linear-gradient(180deg, rgba(31, 29, 26, 0.99), rgba(18, 17, 16, 0.99));
  box-shadow:
    0 0 0 1px rgba(232, 207, 174, 0.10),
    0 14px 28px rgba(0, 0, 0, 0.34);
}

#desktopSharePickerModal .desktopSharePickerItem__thumbWrap {
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(145deg, rgba(17, 17, 17, 0.98), rgba(8, 8, 8, 0.99));
}

#desktopSharePickerModal .desktopSharePickerItem__thumbWrap::after {
  background: rgba(0, 0, 0, 0);
}

#desktopSharePickerModal .desktopSharePickerItem:hover .desktopSharePickerItem__thumbWrap::after,
#desktopSharePickerModal .desktopSharePickerItem:focus-within .desktopSharePickerItem__thumbWrap::after {
  background: rgba(0, 0, 0, 0.34);
}

#desktopSharePickerModal .desktopSharePickerItem__shareBtn {
  border-color: rgba(232, 207, 174, 0.24);
  background: rgba(18, 18, 18, 0.94);
  color: rgba(242, 240, 236, 0.94);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34);
}

#desktopSharePickerModal .desktopSharePickerItem__shareBtn:hover,
#desktopSharePickerModal .desktopSharePickerItem__shareBtn:focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.38);
  background: rgba(30, 28, 25, 0.98);
  box-shadow:
    0 0 0 3px rgba(232, 207, 174, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.38);
}

#desktopSharePickerModal .desktopSharePickerItem__thumbFallback,
#desktopSharePickerModal .desktopSharePickerItem__name {
  color: rgba(242, 240, 236, 0.9);
}

#desktopSharePickerModal .desktopSharePickerItem__icon,
#desktopSharePickerModal .desktopSharePickerItem__iconFallback {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(242, 240, 236, 0.78);
}

#desktopSharePickerModal .desktopSharePickerFooter {
  border-top-color: rgba(255, 255, 255, 0.08);
  background: rgba(12, 12, 12, 0.96);
}

#desktopSharePickerModal .shareAudioToggle,
#desktopSharePickerModal .desktopSharePickerQuality,
#desktopSharePickerModal .desktopSharePickerServerVoiceControls__group {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(8, 8, 8, 0.94);
  color: rgba(242, 240, 236, 0.76);
}

#desktopSharePickerModal .shareAudioToggle input {
  accent-color: #e8cfae;
}

#desktopSharePickerModal .desktopSharePickerServerVoiceControls__label {
  color: rgba(242, 240, 236, 0.48);
}

#desktopSharePickerModal .desktopSharePickerServerVoiceControls__value {
  color: rgba(242, 240, 236, 0.88);
}

#desktopSharePickerModal .desktopSharePickerQualityBtn {
  background: transparent;
  color: rgba(242, 240, 236, 0.54);
}

#desktopSharePickerModal .desktopSharePickerQualityBtn:hover,
#desktopSharePickerModal .desktopSharePickerQualityBtn:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(242, 240, 236, 0.9);
}

#desktopSharePickerModal .desktopSharePickerQualityBtn.is-active {
  border: 1px solid rgba(232, 207, 174, 0.26);
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.11), rgba(255, 255, 255, 0.014)),
    rgba(28, 27, 25, 0.96);
  color: rgba(242, 240, 236, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

#desktopSharePickerModal .desktopSharePickerFooter__actions .btn.primary {
  border-color: rgba(232, 207, 174, 0.30);
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.16), rgba(232, 207, 174, 0.08)),
    rgba(32, 29, 25, 0.96);
  color: rgba(255, 237, 211, 0.96);
  box-shadow: none;
}

#desktopSharePickerModal .desktopSharePickerFooter__actions .btn.primary:hover,
#desktopSharePickerModal .desktopSharePickerFooter__actions .btn.primary:focus-visible {
  border-color: rgba(232, 207, 174, 0.42);
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.22), rgba(232, 207, 174, 0.10)),
    rgba(38, 34, 28, 0.98);
  box-shadow: 0 0 0 3px rgba(232, 207, 174, 0.08);
}

#desktopSharePickerModal .desktopSharePickerFooter__actions .btn.danger {
  border-color: rgba(228, 82, 111, 0.58);
  background: linear-gradient(180deg, rgba(194, 65, 94, 0.92), rgba(145, 42, 65, 0.95));
  color: rgba(255, 239, 242, 0.96);
}

@media (max-width: 900px) {
  .desktopSharePickerTabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .desktopSharePickerRefresh {
    grid-column: 1 / -1;
  }

  .desktopSharePickerQualityBtn {
    font-size: 10px;
    padding: 0 8px;
  }

  .desktopSharePickerGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.desktopTitlebarDragRegion {
  display: none;
}

.desktopTitlebarDragRegion.hidden {
  display: none !important;
}

.desktopWindowControls {
  display: none;
}

body.desktop-titlebar-overlay {
  --desktop-titlebar-overlay-native-height: 40px;
  --ui-zoom-compensation: 1;
  --desktop-frame-inset: 0px;
  --desktop-frame-inset-double: calc(var(--desktop-frame-inset) * 2);
  --desktop-titlebar-overlay-height: calc(var(--desktop-titlebar-overlay-native-height) * var(--ui-zoom-compensation));
}

body.desktop-native-titlebar-overlay .desktopTitlebarDragRegion {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--desktop-titlebar-overlay-height);
  z-index: 3000;
  -webkit-app-region: drag;
}

body.desktop-native-titlebar-overlay .desktopWindowControls {
  position: fixed;
  top: calc(5px * var(--ui-zoom-compensation));
  right: calc(8px * var(--ui-zoom-compensation));
  height: calc(30px * var(--ui-zoom-compensation));
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border: 1px solid rgba(182, 196, 220, 0.2);
  border-radius: 9px;
  background: rgba(14, 20, 30, 0.88);
  box-shadow: none;
  overflow: hidden;
  z-index: 3012;
  -webkit-app-region: no-drag;
}

body.desktop-native-titlebar-overlay .desktopWindowControls.hidden {
  display: none !important;
}

body.desktop-native-titlebar-overlay .desktopWindowBtn--inbox {
  position: relative;
  width: 40px;
  min-width: 40px;
}

body.desktop-native-titlebar-overlay .desktopWindowBtn {
  width: 34px;
  min-width: 34px;
  height: 100%;
  border-radius: 0;
  border: 0;
  border-left: 1px solid rgba(189, 202, 223, 0.16);
  background: transparent;
  color: rgba(234, 241, 252, 0.9);
  backdrop-filter: none;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 0.14s ease,
    border-color 0.14s ease,
    background 0.14s ease,
    box-shadow 0.14s ease;
}

body.desktop-native-titlebar-overlay .desktopWindowBtn:hover {
  transform: none;
  border-left-color: rgba(205, 218, 239, 0.26);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

body.desktop-native-titlebar-overlay .desktopWindowBtn:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(214, 226, 241, 0.24);
}

body.desktop-native-titlebar-overlay .desktopWindowBtn:active {
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

body.desktop-native-titlebar-overlay .desktopWindowBtn:first-child {
  border-left: 0;
}

body.desktop-native-titlebar-overlay .desktopWindowBtn.desktopWindowBtn--inbox {
  width: 40px;
  min-width: 40px;
}

body.desktop-native-titlebar-overlay .desktopWindowBtn--close:hover,
body.desktop-native-titlebar-overlay .desktopWindowBtn--close:focus-visible {
  background: #d83a4c;
  color: #ffffff;
  box-shadow: none;
}

body.desktop-native-titlebar-overlay .desktopWindowBtn--close:active {
  background: #be2f40;
}

body.desktop-native-titlebar-overlay .desktopWindowBtn svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: none;
}

body.desktop-native-titlebar-overlay .desktopWindowIcon--inbox {
  width: 13px;
  height: 13px;
  stroke-width: 1.85;
}

body.desktop-native-titlebar-overlay .desktopWindowBtn__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  border: 1px solid var(--altara-surface, #101010);
  background: var(--altara-accent, #e8cfae);
  color: #181512;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.32);
  pointer-events: none;
}

body.desktop-native-titlebar-overlay .desktopWindowBtn--inbox.is-active,
body.desktop-native-titlebar-overlay .desktopWindowBtn--inbox:hover {
  background: rgba(255, 255, 255, 0.1);
}

body.desktop-native-titlebar-overlay .desktopInboxPanel {
  position: fixed;
  top: calc(42px * var(--ui-zoom-compensation));
  right: calc(8px * var(--ui-zoom-compensation));
  width: min(430px, calc(100vw - 16px));
  max-height: min(72vh, 620px);
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  background:
    radial-gradient(120% 140% at 0% 0%, var(--altara-accent-soft, rgba(232, 207, 174, 0.11)) 0%, transparent 50%),
    linear-gradient(180deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 84%, transparent), var(--altara-surface, #181818));
  box-shadow:
    0 24px 62px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  z-index: 3011;
  -webkit-app-region: no-drag;
  backdrop-filter: blur(14px);
}

body.desktop-native-titlebar-overlay .desktopInboxPanel.hidden {
  display: none !important;
}

body.desktop-native-titlebar-overlay .desktopInboxPanel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 10px;
  border-bottom: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
}

body.desktop-native-titlebar-overlay .desktopInboxPanel__titleWrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body.desktop-native-titlebar-overlay .desktopInboxPanel__titleIcon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  background: var(--altara-surface-elevated, #202020);
  color: var(--altara-accent-strong, #f0d8b8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

body.desktop-native-titlebar-overlay .desktopInboxPanel__titleIcon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.desktop-native-titlebar-overlay .desktopInboxPanel__titleText {
  min-width: 0;
}

body.desktop-native-titlebar-overlay .desktopInboxPanel__title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--altara-text, #f2f0ec);
}

body.desktop-native-titlebar-overlay .desktopInboxPanel__summary {
  margin-top: 2px;
  font-size: 12px;
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
}

body.desktop-native-titlebar-overlay .desktopInboxPanel__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 14px 14px;
}

body.desktop-native-titlebar-overlay .desktopInboxPanel__tab {
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  background: color-mix(in srgb, var(--altara-surface-elevated, #202020) 76%, transparent);
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

body.desktop-native-titlebar-overlay .desktopInboxPanel__tab:hover,
body.desktop-native-titlebar-overlay .desktopInboxPanel__tab:focus-visible {
  background: var(--altara-hover, rgba(255, 255, 255, 0.055));
  border-color: var(--altara-border-strong, rgba(255, 255, 255, 0.12));
  color: var(--altara-text, #f2f0ec);
  outline: none;
}

body.desktop-native-titlebar-overlay .desktopInboxPanel__tab.is-active {
  background:
    linear-gradient(180deg, var(--altara-accent-soft, rgba(232, 207, 174, 0.11)), color-mix(in srgb, var(--altara-accent-soft, rgba(232, 207, 174, 0.11)) 54%, transparent));
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  color: var(--altara-text, #f2f0ec);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body.desktop-native-titlebar-overlay .desktopInboxPanel__tabCount {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--altara-surface-elevated, #202020);
  color: var(--altara-accent-strong, #f0d8b8);
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.desktop-native-titlebar-overlay .desktopInboxPanel__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 12px 14px;
}

body.desktop-native-titlebar-overlay .desktopInboxPanel__list::-webkit-scrollbar {
  width: 10px;
}

body.desktop-native-titlebar-overlay .desktopInboxPanel__list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--altara-border-strong, rgba(255, 255, 255, 0.12));
  border: 2px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
}

body.desktop-native-titlebar-overlay .desktopInboxItem {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px;
  border-radius: 16px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    var(--altara-surface-elevated, #202020);
  color: var(--altara-text, #f2f0ec);
}

body.desktop-native-titlebar-overlay .desktopInboxItem--clickable {
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

body.desktop-native-titlebar-overlay .desktopInboxItem--clickable:hover,
body.desktop-native-titlebar-overlay .desktopInboxItem--clickable:focus-visible {
  transform: translateY(-1px);
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  background:
    linear-gradient(180deg, var(--altara-accent-soft, rgba(232, 207, 174, 0.11)), rgba(255, 255, 255, 0.012)),
    var(--altara-surface-elevated, #202020);
  outline: none;
}

body.desktop-native-titlebar-overlay .desktopInboxItem__avatar {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  background: var(--altara-surface-muted, #202020);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.desktop-native-titlebar-overlay .desktopInboxItem__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.desktop-native-titlebar-overlay .desktopInboxItem__avatarFallback {
  color: var(--altara-accent-strong, #f0d8b8);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

body.desktop-native-titlebar-overlay .desktopInboxItem__body {
  flex: 1;
  min-width: 0;
}

body.desktop-native-titlebar-overlay .desktopInboxItem__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

body.desktop-native-titlebar-overlay .desktopInboxItem__headMain {
  flex: 1;
  min-width: 0;
}

body.desktop-native-titlebar-overlay .desktopInboxItem__title {
  font-size: 14px;
  font-weight: 750;
  line-height: 1.35;
  color: var(--altara-text, #f2f0ec);
}

body.desktop-native-titlebar-overlay .desktopInboxItem__stamp {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--altara-text-soft, rgba(242, 240, 236, 0.64));
}

body.desktop-native-titlebar-overlay .desktopInboxItem__count {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  background: var(--altara-accent, #e8cfae);
  color: #181512;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.24);
}

body.desktop-native-titlebar-overlay .desktopInboxItem__text {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
}

body.desktop-native-titlebar-overlay .desktopInboxItem__meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--altara-text-soft, rgba(242, 240, 236, 0.64));
}

body.desktop-native-titlebar-overlay .desktopInboxItem__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

body.desktop-native-titlebar-overlay .desktopInboxItem__actions .smallBtn {
  min-width: 78px;
}

body.desktop-native-titlebar-overlay .desktopInboxEmpty {
  padding: 28px 18px 34px;
  text-align: center;
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
  font-size: 13px;
  line-height: 1.5;
}

body.desktop-native-titlebar-overlay .desktopWindowIcon--min {
  width: 11px;
  height: 11px;
  stroke-width: 2;
}

body.desktop-native-titlebar-overlay .desktopWindowIcon--max,
body.desktop-native-titlebar-overlay .desktopWindowIcon--restore {
  width: 11px;
  height: 11px;
  stroke-width: 1.75;
}

body.desktop-native-titlebar-overlay .desktopWindowIcon--close {
  width: 11px;
  height: 11px;
  stroke-width: 1.95;
}

body.desktop-native-titlebar-overlay .desktopWindowBtn__iconRestore {
  display: none;
}

body.desktop-native-titlebar-overlay .desktopWindowBtn.is-maximized .desktopWindowBtn__iconMax {
  display: none;
}

body.desktop-native-titlebar-overlay .desktopWindowBtn.is-maximized .desktopWindowBtn__iconRestore {
  display: block;
}

body.desktop-titlebar-overlay .app:not(.wrap),
body.desktop-titlebar-overlay .wrap.app {
  margin-top: var(--desktop-titlebar-overlay-height);
  height: calc(100vh - var(--desktop-frame-inset-double) - var(--desktop-titlebar-overlay-height));
}

body.desktop-titlebar-overlay .app:not(.wrap) {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  position: relative;
}

body.desktop-titlebar-overlay .wrap.app {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  position: relative;
}

body.desktop-titlebar-overlay .app:not(.wrap)::before,
body.desktop-titlebar-overlay .wrap.app::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(206, 214, 228, 0.34);
  pointer-events: none;
  z-index: 1;
}

/* In desktop overlay mode, outer panel edges should be flat (no double rounding) */
body.desktop-titlebar-overlay .panel,
body.desktop-titlebar-overlay .card {
  border-radius: 0;
}

/* Hide nav arrows when not in desktop-overlay mode (macOS native titlebar, etc.) */
body:not(.desktop-titlebar-overlay) #midNavButtons {
  display: none !important;
}

body.desktop-titlebar-overlay .midNavButtons {
  position: fixed !important;
  left: calc(
    (var(--desktop-frame-inset, 0px) * var(--ui-zoom-compensation))
    + (12px * var(--ui-zoom-compensation))
  );
  top: calc(
    (var(--desktop-titlebar-overlay-height) - (32px * var(--ui-zoom-compensation)))
    / 2
  );
  z-index: 3011;
  gap: calc(8px * var(--ui-zoom-compensation));
  margin-left: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-app-region: no-drag;
}

body.desktop-titlebar-overlay .midNavBtn,
body.desktop-titlebar-overlay .midNavBtn * {
  -webkit-app-region: no-drag;
}

body.desktop-titlebar-overlay .midNavBtn {
  width: calc(32px * var(--ui-zoom-compensation));
  min-width: calc(32px * var(--ui-zoom-compensation));
  height: calc(32px * var(--ui-zoom-compensation));
  border-radius: calc(10px * var(--ui-zoom-compensation));
}

body.desktop-titlebar-overlay .midNavBtn__icon {
  width: calc(15px * var(--ui-zoom-compensation));
  height: calc(15px * var(--ui-zoom-compensation));
}

/* Server voice stage: remove blue chrome and keep only base background */
#dmMain.is-server-voice-call-layout .callStage.is-docked-in-dm .callStageCard {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

#dmMain.is-server-voice-call-layout .callStage.is-docked-in-dm .callStageTop {
  background: transparent !important;
  border-bottom: 0 !important;
  padding-bottom: 8px !important;
}

#dmMain.is-server-voice-call-layout .callStage.is-docked-in-dm .callStageViewport {
  background: transparent !important;
  border-color: transparent !important;
  margin-top: 0 !important;
}

#dmMain.is-server-voice-call-layout .callStage.is-docked-in-dm .callStageViewport.is-speaking-spotlight {
  border-color: rgba(95, 255, 172, 0.88) !important;
  box-shadow:
    inset 0 0 0 1px rgba(95, 255, 172, 0.24),
    0 0 0 1px rgba(95, 255, 172, 0.46),
    0 0 26px rgba(95, 255, 172, 0.18) !important;
}

/* Voice/avatar stage keeps Discord-like 16:9 cards; the viewport itself can use all available space. */
#dmMain.is-server-voice-call-layout .callStage.is-docked-in-dm.layout-grid .callStageViewport[data-stage-tile-count="2"] {
  aspect-ratio: auto !important;
}

#dmMain.is-server-voice-call-layout .callStage.is-docked-in-dm .callStageGrid {
  padding: 8px 8px 70px !important;
}

#dmMain.is-server-voice-call-layout .callStage.is-docked-in-dm .stageGridTile {
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: inset 0 0 0 1px rgba(226, 234, 245, 0.14);
}

#dmMain.is-server-voice-call-layout .callStage.is-docked-in-dm .callStageGrid[data-tile-count="2"] .stageGridTile:first-child {
  border-top-left-radius: 16px !important;
  border-bottom-left-radius: 16px !important;
}

#dmMain.is-server-voice-call-layout .callStage.is-docked-in-dm .callStageGrid[data-tile-count="2"] .stageGridTile:last-child {
  border-top-right-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
}

#dmMain.is-server-voice-call-layout .callStage.is-docked-in-dm .callStageGrid[data-tile-count="1"] {
  gap: 0 !important;
}

#dmMain.is-server-voice-call-layout .callStage.is-docked-in-dm .callStageGrid[data-tile-count="1"] .stageGridTile {
  border-radius: 14px !important;
}

#dmMain.is-server-voice-call-layout .callStage.is-docked-in-dm .stageGridTile.is-active,
#dmMain.is-server-voice-call-layout .callStage.is-docked-in-dm .participantTile.is-active {
  border-color: rgba(238, 244, 255, 0.92) !important;
  box-shadow:
    0 0 0 2px rgba(238, 244, 255, 0.34),
    0 0 20px rgba(238, 244, 255, 0.18) !important;
}

/* Desktop shell cleanup: no extra rounding + no gap between server rail and DM column */
body.desktop-titlebar-overlay .panel,
body.desktop-titlebar-overlay .card,
body.desktop-titlebar-overlay .leftTop,
body.desktop-titlebar-overlay .leftList,
body.desktop-titlebar-overlay .midTop,
body.desktop-titlebar-overlay .midBody,
body.desktop-titlebar-overlay .rightTop,
body.desktop-titlebar-overlay .rightBody {
  border-radius: 0 !important;
}

body .panel.left .leftDock {
  gap: 0 !important;
}

body .panel.left .leftDockGroups,
body .panel.left .leftDockDms {
  border-radius: 0 !important;
  border-top: 0 !important;
}

body .panel.left .leftDockDms {
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
}

/* Remove residual left edge line in the mini-sidebar column */
body .panel.left {
  border-left: 0 !important;
  border-right: 0 !important;
  position: relative;
}

body .panel.left::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background: var(--stroke);
  pointer-events: none;
  z-index: 5;
}

/* Single divider between left column and middle content */
body .panel.mid {
  border-left: 0 !important;
}

/* Unified sidebar mini-call panel (same size across contexts, no blue tint) */
.callBar.is-docked-in-sidebar,
.callBar.is-docked-in-sidebar.is-server-voice-mini-panel {
  left: 10px;
  right: 10px;
  bottom: 10px;
  width: auto;
  max-width: none;
  padding: 8px 9px;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid rgba(214, 223, 238, 0.16);
  background:
    radial-gradient(320px 160px at 8% 0%, rgba(255, 255, 255, 0.04), transparent 72%),
    linear-gradient(170deg, rgba(15, 20, 30, 0.97), rgba(12, 16, 24, 0.98));
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.callBar.is-docked-in-sidebar .callBarHeader,
.callBar.is-docked-in-sidebar.is-server-voice-mini-panel .callBarHeader {
  gap: 8px;
}

.callBar.is-docked-in-sidebar .callBarText,
.callBar.is-docked-in-sidebar.is-server-voice-mini-panel .callBarText {
  font-size: 14px;
  color: #e8edf7;
}

.callBar.is-docked-in-sidebar .callBarShareBadge,
.callBar.is-docked-in-sidebar.is-server-voice-mini-panel .callBarShareBadge {
  max-width: min(44vw, 240px);
  height: 21px;
  padding: 0 8px;
  font-size: 10px;
}

.callBar.is-docked-in-sidebar .callBarPing,
.callBar.is-docked-in-sidebar.is-server-voice-mini-panel .callBarPing {
  min-width: 116px;
  height: 21px;
  padding: 0 8px;
  font-size: 10px;
  border-color: rgba(224, 231, 243, 0.2);
  background: rgba(18, 24, 36, 0.96);
  color: #dbe3f2;
}

.callBar.is-docked-in-sidebar .callBarActions,
.callBar.is-docked-in-sidebar.is-server-voice-mini-panel .callBarActions {
  gap: 7px;
  flex-wrap: nowrap;
}

.callBar.is-docked-in-sidebar .callMiniBtn,
.callBar.is-docked-in-sidebar.is-server-voice-mini-panel .callMiniBtn {
  width: 39px;
  min-width: 39px;
  height: 31px;
  border-radius: 9px;
  border-color: rgba(214, 223, 238, 0.24);
  background: linear-gradient(160deg, rgba(28, 35, 50, 0.94), rgba(19, 25, 37, 0.95));
  color: #e8edf7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 16px rgba(0, 0, 0, 0.22);
}

.callBar.is-docked-in-sidebar .callMiniBtn:hover:not(:disabled),
.callBar.is-docked-in-sidebar.is-server-voice-mini-panel .callMiniBtn:hover:not(:disabled) {
  border-color: rgba(234, 240, 250, 0.38);
  background: linear-gradient(160deg, rgba(38, 48, 70, 0.96), rgba(24, 31, 46, 0.96));
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 18px rgba(0, 0, 0, 0.28);
}

.callBar.is-docked-in-sidebar .callMiniBtn.is-on,
.callBar.is-docked-in-sidebar.is-server-voice-mini-panel .callMiniBtn.is-on,
.callBar.is-docked-in-sidebar .btn.is-on,
.callBar.is-docked-in-sidebar.is-server-voice-mini-panel .btn.is-on {
  border-color: rgba(157, 171, 208, 0.62);
  background: linear-gradient(160deg, rgba(66, 76, 102, 0.95), rgba(46, 54, 75, 0.96));
  color: #ffffff;
}

.callBar.is-docked-in-sidebar .callMiniBtn--danger,
.callBar.is-docked-in-sidebar.is-server-voice-mini-panel .callMiniBtn--danger {
  border-color: rgba(242, 111, 111, 0.6);
  background: linear-gradient(160deg, rgba(170, 58, 81, 0.9), rgba(137, 42, 64, 0.92));
  color: #ffe9ea;
}

.callBar.is-docked-in-sidebar .callShareSplit__arrow,
.callBar.is-docked-in-sidebar.is-server-voice-mini-panel .callShareSplit__arrow {
  width: 26px;
  min-width: 26px;
  border-left: 1px solid rgba(214, 223, 238, 0.2);
}

.callBar.is-docked-in-sidebar .callBarLiveIcon,
.callBar.is-docked-in-sidebar.is-server-voice-mini-panel .callBarLiveIcon {
  border-color: rgba(73, 209, 127, 0.28);
  background: rgba(73, 209, 127, 0.12);
}

/* Premium icon system */
.btn.midNavBtn,
.arrowNavBtn,
#gifModal .gifFolderBack {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--arrow-nav-btn-border);
  background: var(--arrow-nav-btn-bg);
  color: var(--arrow-nav-btn-icon);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 7px 16px rgba(5, 9, 16, 0.34);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition:
    transform 0.14s ease,
    border-color 0.14s ease,
    background 0.14s ease,
    box-shadow 0.14s ease;
}

.btn.midNavBtn:hover:not(:disabled),
.arrowNavBtn:hover:not(:disabled),
#gifModal .gifFolderBack:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--arrow-nav-btn-border-hover);
  background: var(--arrow-nav-btn-bg-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 18px rgba(7, 12, 22, 0.38);
}

.btn.midNavBtn:focus-visible,
.arrowNavBtn:focus-visible,
#gifModal .gifFolderBack:focus-visible {
  outline: none;
  border-color: rgba(214, 226, 241, 0.68);
  box-shadow:
    0 0 0 3px rgba(196, 209, 228, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 20px rgba(6, 11, 20, 0.42);
}

.btn.midNavBtn:active:not(:disabled),
.arrowNavBtn:active:not(:disabled),
#gifModal .gifFolderBack:active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 11px rgba(5, 9, 16, 0.28);
}

.btn.midNavBtn:disabled,
.arrowNavBtn:disabled,
#gifModal .gifFolderBack:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

body:not(.authPage) #gifModal .gifFolderBack {
  border-color: var(--altara-border, rgba(255, 255, 255, 0.1));
  background: color-mix(in srgb, var(--altara-bg, #101010) 42%, transparent);
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.68));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body:not(.authPage) #gifModal .gifFolderBack:hover:not(:disabled),
body:not(.authPage) #gifModal .gifFolderBack:focus-visible {
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.1));
  color: var(--altara-text, #f2f0ec);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 0 0 3px var(--altara-accent-soft, rgba(232, 207, 174, 0.1));
}

.midNavBtn__icon,
.arrowNavBtn__icon {
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.midNavBtn__icon svg,
.arrowNavBtn__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.05;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.09))
    drop-shadow(0 2px 5px rgba(0, 0, 0, 0.34));
}

/* Global premium treatment for app action icons */
:is(.leftTop .meCtrlBtn, .callStageControls .callCtrlBtn, .callBar .callMiniBtn) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 8px 18px rgba(0, 0, 0, 0.22);
}

:is(.leftTop .meCtrlBtn:hover, .callStageControls .callCtrlBtn:hover, .callBar .callMiniBtn:hover) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 22px rgba(0, 0, 0, 0.28);
}

:is(.leftTop .meCtrlBtn__icon svg, .callCtrlBtn__icon svg, .callMiniBtn__icon svg) {
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.08))
    drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

/* Global Motion Upgrade (Arc/Zen-inspired polish) */
:root {
  --motion-fast: 90ms;
  --motion-base: 150ms;
  --motion-slow: 260ms;
  --motion-curve-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-curve-snappy: cubic-bezier(0.2, 0.9, 0.32, 1.2);
}

body.motion-reduced *,
body.motion-reduced *::before,
body.motion-reduced *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

body.motion-ready .panel.left {
  animation: altaraPanelReveal var(--motion-slow) var(--motion-curve-smooth) 20ms both;
}

body.motion-ready .panel.mid {
  animation: altaraPanelReveal var(--motion-slow) var(--motion-curve-smooth) 60ms both;
}

body.motion-ready .panel.right {
  animation: altaraPanelReveal var(--motion-slow) var(--motion-curve-smooth) 100ms both;
}

body.motion-ready .leftTop,
body.motion-ready .midTop,
body.motion-ready .rightTop {
  animation: altaraTopbarReveal var(--motion-base) var(--motion-curve-smooth) both;
}

body.motion-ready .leftTop {
  animation-delay: 40ms;
}

body.motion-ready .midTop {
  animation-delay: 70ms;
}

body.motion-ready .rightTop {
  animation-delay: 100ms;
}

body.motion-ready .widgetsGrid .widgetCard,
body.motion-ready .list .dm-item,
body.motion-ready .serverChannelItem,
body.motion-ready .msg {
  animation: altaraItemLift var(--motion-base) var(--motion-curve-smooth) both;
}

body.motion-ready .widgetsGrid .widgetCard:nth-child(1),
body.motion-ready .list .dm-item:nth-child(1),
body.motion-ready .serverChannelItem:nth-child(1),
body.motion-ready .msg:nth-child(1) {
  animation-delay: 40ms;
}

body.motion-ready .widgetsGrid .widgetCard:nth-child(2),
body.motion-ready .list .dm-item:nth-child(2),
body.motion-ready .serverChannelItem:nth-child(2),
body.motion-ready .msg:nth-child(2) {
  animation-delay: 65ms;
}

body.motion-ready .widgetsGrid .widgetCard:nth-child(3),
body.motion-ready .list .dm-item:nth-child(3),
body.motion-ready .serverChannelItem:nth-child(3),
body.motion-ready .msg:nth-child(3) {
  animation-delay: 90ms;
}

body.motion-ready .widgetsGrid .widgetCard:nth-child(4),
body.motion-ready .list .dm-item:nth-child(4),
body.motion-ready .serverChannelItem:nth-child(4),
body.motion-ready .msg:nth-child(4) {
  animation-delay: 115ms;
}

body.motion-ready .btn,
body.motion-ready .chip,
body.motion-ready .dmHeaderIconBtn,
body.motion-ready .meCtrlBtn,
body.motion-ready .serverChannelItem,
body.motion-ready .dm-item {
  transition:
    transform var(--motion-fast) var(--motion-curve-snappy),
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    filter var(--motion-fast) ease;
}

body.motion-ready .btn:hover:not(:disabled),
body.motion-ready .chip:hover:not(:disabled),
body.motion-ready .dmHeaderIconBtn:hover:not(:disabled),
body.motion-ready .meCtrlBtn:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.015);
}

body.motion-ready .btn:active:not(:disabled),
body.motion-ready .chip:active:not(:disabled),
body.motion-ready .dmHeaderIconBtn:active:not(:disabled),
body.motion-ready .meCtrlBtn:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
}

body.motion-ready .panel {
  transition:
    border-color var(--motion-base) ease,
    box-shadow var(--motion-base) ease,
    background-color var(--motion-base) ease;
}

@keyframes altaraPanelReveal {
  0% {
    opacity: 0;
    transform: translateY(7px) scale(0.995);
    filter: saturate(0.92) blur(0.2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: saturate(1) blur(0);
  }
}

@keyframes altaraTopbarReveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes altaraItemLift {
  0% {
    opacity: 0;
    transform: translateY(5px) scale(0.995);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* =========================================
   ANIMATION LAYER
   All rules here are gated on body.motion-ready so they
   are automatically disabled by the "Reduce motion" toggle
   in Settings → Appearance.
   ========================================= */

/* --- Keyframes --- */

/* Pop-up / dropdown slide-in from below */
@keyframes altaraPopupEnter {
  from { opacity: 0; transform: translateY(7px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* Scale-in from centre (modals, cards) */
@keyframes altaraPopIn {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}

/* Reaction pill bounce-in */
@keyframes altaraReactionIn {
  0%   { opacity: 0; transform: scale(0.55); }
  65%  { transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}

/* Online status glow pulse */
@keyframes altaraOnlinePulse {
  0%   { box-shadow: 0 0 0 0   rgba(35, 200, 110, 0.55); }
  70%  { box-shadow: 0 0 0 5px rgba(35, 200, 110, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(35, 200, 110, 0);    }
}

/* Slide in from right for menu items (stagger) */
@keyframes altaraMenuItemIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* --- Context menus & dropdowns --- */
body.motion-ready .msgMenu.is-open,
body.motion-ready .callAudioMenu.is-open,
body.motion-ready .callShareMenu.is-open {
  animation: altaraPopupEnter var(--motion-fast) var(--motion-curve-smooth) both;
}

/* Stagger menu items so they reveal in sequence */
body.motion-ready .msgMenu.is-open .msgMenu__item {
  animation: altaraMenuItemIn var(--motion-fast) var(--motion-curve-smooth) both;
}
body.motion-ready .msgMenu.is-open .msgMenu__item:nth-child(1)  { animation-delay:  20ms; }
body.motion-ready .msgMenu.is-open .msgMenu__item:nth-child(2)  { animation-delay:  36ms; }
body.motion-ready .msgMenu.is-open .msgMenu__item:nth-child(3)  { animation-delay:  52ms; }
body.motion-ready .msgMenu.is-open .msgMenu__item:nth-child(4)  { animation-delay:  68ms; }
body.motion-ready .msgMenu.is-open .msgMenu__item:nth-child(5)  { animation-delay:  84ms; }
body.motion-ready .msgMenu.is-open .msgMenu__item:nth-child(6)  { animation-delay: 100ms; }
body.motion-ready .msgMenu.is-open .msgMenu__item:nth-child(7)  { animation-delay: 116ms; }
body.motion-ready .msgMenu.is-open .msgMenu__item:nth-child(8)  { animation-delay: 132ms; }
body.motion-ready .msgMenu.is-open .msgMenu__item:nth-child(n+9){ animation-delay: 148ms; }

/* Menu items: snappy hover slide */
body.motion-ready .msgMenu__item,
body.motion-ready .callAudioMenu__action,
body.motion-ready .callShareMenu__item {
  transition:
    background-color var(--motion-fast) ease,
    border-color     var(--motion-fast) ease,
    color            var(--motion-fast) ease,
    transform        var(--motion-fast) var(--motion-curve-snappy);
}
body.motion-ready .msgMenu__item:hover,
body.motion-ready .callAudioMenu__action:hover,
body.motion-ready .callShareMenu__item:hover {
  transform: translateX(3px);
}

/* --- Emoji picker entrance (uses @starting-style for display:none toggle) --- */
body.motion-ready .emojiPicker:not(.hidden) {
  transition: opacity var(--motion-fast) ease, transform var(--motion-fast) var(--motion-curve-smooth);
}
@starting-style {
  body.motion-ready .emojiPicker:not(.hidden) {
    opacity: 0;
    transform: translateY(9px) scale(0.96);
  }
}

/* --- Modal card entrance --- */
body.motion-ready .modal:not(.hidden) .modal__card,
body.motion-ready .modal:not(.hidden) .modalCard {
  animation: altaraPopIn var(--motion-base) var(--motion-curve-smooth) both;
}

/* --- Message reaction pills ---
     Dynamically appended elements auto-animate on insertion. */
body.motion-ready .msg__reaction {
  transition:
    border-color     var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    color            var(--motion-fast) ease,
    transform        var(--motion-fast) var(--motion-curve-snappy);
}
body.motion-ready .msg__reaction:hover:not(.is-on) {
  transform: scale(1.12);
}
body.motion-ready .msg__reaction:active {
  transform: scale(0.92);
  transition-duration: 60ms;
}
body.motion-ready .msg__reaction.is-on {
  transform: scale(1.06);
}

/* --- Online status dot — soft repeating glow --- */
body.motion-ready .statusDot[data-status="online"] {
  animation: altaraOnlinePulse 3s ease-in-out 1.5s infinite;
}

/* --- Message input focus glow --- */
body.motion-ready .dmInputWrap {
  transition:
    border-color     var(--motion-fast) ease,
    box-shadow       var(--motion-base) ease,
    background-color var(--motion-fast) ease;
}
body.motion-ready .dmInputWrap:focus-within {
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--altara-accent, #e8cfae) 10%, transparent),
    inset 0 1px 3px rgba(0, 0, 0, 0.18);
  background: color-mix(in srgb, var(--altara-input, #121212) 78%, var(--altara-surface-elevated, #202020));
}

/* --- Call mini buttons --- */
body.motion-ready .callMiniBtn,
body.motion-ready .meCtrlBtn {
  transition:
    transform        var(--motion-fast) var(--motion-curve-snappy),
    border-color     var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    box-shadow       var(--motion-fast) ease;
}
body.motion-ready .callMiniBtn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.08);
}
body.motion-ready .callMiniBtn:active:not(:disabled) {
  transform: scale(0.92);
  transition-duration: 60ms;
}

/* --- Server voice member menu --- */
body.motion-ready .serverVoiceMemberMenu {
  animation: altaraPopupEnter var(--motion-fast) var(--motion-curve-smooth) both;
}

/* =========================================
   AUTH EXPERIENCE (LOGIN / REGISTER)
   ========================================= */
body.authPage {
  --auth-bg-a: #0e1320;
  --auth-bg-b: #101a2d;
  --auth-bg-c: #101720;
  background:
    radial-gradient(960px 540px at -12% -20%, rgba(131, 172, 255, 0.24), transparent 68%),
    radial-gradient(840px 480px at 112% 118%, rgba(98, 233, 189, 0.16), transparent 70%),
    linear-gradient(145deg, var(--auth-bg-a), var(--auth-bg-b) 56%, var(--auth-bg-c));
  overflow: auto;
}

body.authPage::before {
  opacity: 0.18;
  mask-image: radial-gradient(circle at 50% 28%, black 54%, transparent 95%);
}

body.authPage::after {
  display: block;
  background: radial-gradient(70% 46% at 50% 104%, rgba(6, 10, 18, 0.72), transparent 74%);
}

body.authPage.auth-checking .authShell {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

body.authPage .authShell {
  width: min(1120px, calc(100vw - 38px));
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(18px, 4.5vh, 34px) 0;
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(340px, 1.05fr);
  gap: 18px;
  align-items: center;
  -webkit-app-region: drag !important;
  transition: opacity 130ms ease, transform 130ms ease;
}

body.authPage .authCard {
  order: 1;
  -webkit-app-region: no-drag !important;
}

body.authPage .authCard * {
  -webkit-app-region: no-drag !important;
}

body.authPage .authShowcase {
  order: 2;
  -webkit-app-region: drag !important;
}

body.authPage .authShowcase * {
  -webkit-app-region: drag !important;
}

.authLangDock {
  position: fixed;
  top: 12px;
  right: 14px;
  z-index: 35;
}

.authLangBtn {
  min-width: 34px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(183, 201, 235, 0.28);
  background: rgba(13, 20, 31, 0.46);
  color: rgba(223, 235, 255, 0.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: border-color var(--motion-fast), color var(--motion-fast), background-color var(--motion-fast), transform var(--motion-fast);
}

.authLangBtn:hover {
  border-color: rgba(202, 219, 247, 0.52);
  color: rgba(236, 245, 255, 0.92);
  background: rgba(22, 30, 44, 0.66);
}

.authLangBtn:active {
  transform: translateY(1px);
}

body.authPage .authShowcase,
body.authPage .authCard {
  position: relative;
  border: 1px solid rgba(202, 220, 248, 0.24);
  border-radius: 24px;
  background:
    linear-gradient(175deg, rgba(31, 39, 56, 0.74), rgba(16, 22, 34, 0.88)),
    radial-gradient(120% 120% at 10% 10%, rgba(120, 168, 255, 0.16), rgba(120, 168, 255, 0));
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  max-height: calc(100vh - 38px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.authPage .authShowcase {
  display: grid;
  align-content: space-between;
  gap: 16px;
  padding: clamp(22px, 3.2vw, 34px);
}

.authShowcase__glow {
  position: absolute;
  width: 440px;
  height: 440px;
  right: -170px;
  top: -180px;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(142, 184, 255, 0.28), rgba(142, 184, 255, 0));
  filter: blur(6px);
  animation: authGlowDrift 12s ease-in-out infinite alternate;
}

.authShowcase__logoRow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.authShowcase__logoOrb {
  width: 56px;
  height: 56px;
  border-radius: 15px;
  border: 1px solid rgba(198, 217, 248, 0.34);
  background:
    linear-gradient(166deg, rgba(28, 39, 58, 0.9), rgba(11, 18, 31, 0.84)),
    radial-gradient(120% 95% at 84% 12%, rgba(131, 170, 240, 0.3), rgba(131, 170, 240, 0));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 26px rgba(8, 12, 20, 0.44);
  display: grid;
  place-items: center;
  position: relative;
}

.authShowcase__logoOrb::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 11px;
  border: 1px solid rgba(208, 224, 251, 0.14);
  pointer-events: none;
}

.authShowcase__logoOrb img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 8px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.36));
}

.authShowcase__logoWord {
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  font-weight: 800;
  font-size: 14px;
  color: #e5eeff;
}

.authShowcase__title {
  margin: 0;
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 56px);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f0f6ff;
  text-wrap: balance;
}

.authShowcase__text {
  margin: 0;
  position: relative;
  z-index: 2;
  max-width: 560px;
  font-size: clamp(15px, 1.55vw, 19px);
  line-height: 1.4;
  color: rgba(216, 229, 251, 0.88);
}

.authShowcase__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 2;
}

.authShowcase__chip {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(190, 209, 241, 0.28);
  background: rgba(13, 20, 32, 0.6);
  font-size: 12px;
  font-weight: 700;
  color: rgba(226, 237, 255, 0.92);
  letter-spacing: 0.01em;
}

.authShowcase__waves {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  min-height: 56px;
  position: relative;
  z-index: 2;
}

.authShowcase__waves span {
  width: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(138, 186, 255, 0.95), rgba(96, 227, 185, 0.65));
  box-shadow: 0 0 0 1px rgba(198, 215, 247, 0.16);
  animation: authWavePulse 1.7s ease-in-out infinite;
}

.authShowcase__waves span:nth-child(1) {
  height: 22px;
  animation-delay: 0ms;
}

.authShowcase__waves span:nth-child(2) {
  height: 40px;
  animation-delay: 160ms;
}

.authShowcase__waves span:nth-child(3) {
  height: 28px;
  animation-delay: 320ms;
}

body.authPage .authCard {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: clamp(24px, 3.2vw, 36px);
}

body.authPage .authBadge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  height: 27px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(193, 211, 243, 0.28);
  background: rgba(17, 25, 39, 0.76);
  color: rgba(220, 232, 251, 0.9);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

body.authPage .authTitle {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(32px, 4.2vw, 42px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #eff6ff;
}

body.authPage .authSub {
  margin: -2px 0 6px;
  color: rgba(214, 226, 247, 0.82);
  font-size: 14px;
}

body.authPage .authCard .field {
  margin-bottom: 0;
}

body.authPage .authCard .field + .field {
  margin-top: 8px;
}

body.authPage .authCard label {
  display: inline-block;
  margin-bottom: 6px;
  color: rgba(213, 226, 249, 0.9);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

body.authPage .authCard input {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(183, 202, 234, 0.24);
  background: rgba(10, 15, 24, 0.8);
  color: #eaf3ff;
  padding: 0 13px;
  font-size: 14px;
}

body.authPage .authCard input:focus {
  border-color: rgba(158, 185, 238, 0.72);
  box-shadow: 0 0 0 3px rgba(102, 137, 210, 0.22);
}

body.authPage .authCard .hint {
  margin-top: 5px;
  font-size: 11px;
  color: rgba(190, 207, 233, 0.68);
}

body.authPage .authActions {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

body.authPage .authActions .btn {
  height: 42px;
  border-radius: 12px;
  font-weight: 700;
}

body.authPage .authActions .btn.primary {
  border-color: rgba(170, 195, 244, 0.48);
  background: linear-gradient(160deg, rgba(149, 178, 246, 0.92), rgba(116, 150, 236, 0.9));
  color: #101b2f;
}

body.authPage .authActions .btn.primary:hover {
  border-color: rgba(196, 216, 255, 0.72);
  background: linear-gradient(160deg, rgba(166, 194, 255, 0.96), rgba(129, 160, 240, 0.94));
}

body.authPage .authRecoveryLinks {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

body.authPage .authRecoveryLink {
  border: 0;
  background: transparent;
  padding: 0;
  color: rgba(188, 213, 255, 0.92);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(188, 213, 255, 0.45);
  text-underline-offset: 2px;
}

body.authPage .authRecoveryLink:hover {
  color: rgba(220, 235, 255, 0.98);
  text-decoration-color: rgba(220, 235, 255, 0.72);
}

body.authPage .authRecoveryCard {
  margin-top: 10px;
  padding: 11px;
  border-radius: 12px;
  border: 1px solid rgba(183, 202, 234, 0.24);
  background: rgba(8, 13, 22, 0.62);
  display: grid;
  gap: 8px;
}

body.authPage .authRecoveryCard[hidden] {
  display: none !important;
}

body.authPage .authRecoveryTitle {
  font-size: 14px;
  font-weight: 800;
  color: #eef5ff;
}

body.authPage .authRecoveryHint {
  font-size: 12px;
  color: rgba(198, 216, 245, 0.82);
}

body.authPage .authRecoveryActions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

body.authPage .authRecoveryActions .btn {
  height: 38px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}

body.authPage .authRecoveryResult {
  border: 1px solid rgba(183, 202, 234, 0.24);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  color: rgba(212, 230, 254, 0.9);
  background: rgba(12, 18, 29, 0.64);
}

body.authPage .authRecoveryResult.is-success {
  border-color: rgba(106, 207, 154, 0.44);
  color: rgba(211, 248, 231, 0.94);
}

body.authPage .authRecoveryResult.is-error {
  border-color: rgba(232, 120, 127, 0.44);
  color: rgba(255, 219, 223, 0.94);
}

body.authPage .authFeedback {
  margin: 2px 0 0;
  border-radius: 12px;
}

body.authPage #debug {
  margin-top: 4px;
}

body.authPage .authInstallWelcomeOverlay {
  position: fixed;
  inset: 0;
  z-index: 6200;
  display: grid;
  place-items: center;
  overflow: hidden;
}

body.authPage .authInstallWelcomeOverlay.hidden {
  display: none !important;
}

body.authPage.auth-install-welcome-open {
  overflow: hidden;
}

.authInstallWelcomeOverlay__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1240px 700px at 10% -10%, rgba(142, 193, 255, 0.32), rgba(142, 193, 255, 0)),
    radial-gradient(860px 540px at 94% 114%, rgba(94, 232, 186, 0.24), rgba(94, 232, 186, 0)),
    linear-gradient(162deg, #1d2230 0%, #141a26 48%, #0d131f 100%);
}

.authInstallWelcomeOverlay__glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(20px);
  opacity: 0.9;
  pointer-events: none;
}

.authInstallWelcomeOverlay__glow--one {
  width: 680px;
  height: 680px;
  left: -210px;
  top: -220px;
  background: radial-gradient(circle at center, rgba(121, 182, 255, 0.32), rgba(121, 182, 255, 0));
  animation: authInstallDriftA 12s ease-in-out infinite alternate;
}

.authInstallWelcomeOverlay__glow--two {
  width: 560px;
  height: 560px;
  right: -170px;
  bottom: -170px;
  background: radial-gradient(circle at center, rgba(111, 228, 192, 0.29), rgba(111, 228, 192, 0));
  animation: authInstallDriftB 10.6s ease-in-out infinite alternate;
}

.authInstallWelcomeOverlay__grain {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image: radial-gradient(rgba(232, 240, 255, 0.16) 0.8px, transparent 0.8px);
  background-size: 8px 8px;
}

.authInstallWelcomeOverlay__card {
  position: relative;
  z-index: 2;
  width: min(900px, calc(100vw - 36px));
  min-height: min(560px, calc(100vh - 48px));
  border-radius: 28px;
  border: 1px solid rgba(180, 206, 248, 0.46);
  background:
    linear-gradient(180deg, rgba(37, 45, 62, 0.57), rgba(16, 21, 32, 0.74)),
    radial-gradient(130% 120% at 50% 14%, rgba(126, 172, 255, 0.27), rgba(126, 172, 255, 0));
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
  padding: 48px 30px;
}

.authInstallWelcomeOverlay__logoWrap {
  width: 76px;
  height: 76px;
  border-radius: 20px;
  border: 1px solid rgba(199, 218, 248, 0.44);
  background: rgba(16, 25, 40, 0.78);
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: authInstallReveal 640ms cubic-bezier(0.2, 0.88, 0.2, 1) both;
}

.authInstallWelcomeOverlay__logo {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 12px;
}

.authInstallWelcomeOverlay__brand {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(206, 224, 252, 0.94);
  animation: authInstallReveal 700ms cubic-bezier(0.2, 0.88, 0.2, 1) 70ms both;
}

.authInstallWelcomeOverlay__title {
  margin: 0;
  max-width: min(760px, 92%);
  font-family: var(--font-display);
  font-size: clamp(44px, 8vw, 90px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: #f2f8ff;
  text-wrap: balance;
  animation: authInstallReveal 820ms cubic-bezier(0.2, 0.88, 0.2, 1) 110ms both;
}

.authInstallWelcomeOverlay__line {
  margin: 0;
  max-width: min(660px, 90%);
  font-size: clamp(17px, 2.25vw, 24px);
  line-height: 1.34;
  font-weight: 500;
  color: rgba(226, 237, 255, 0.92);
  animation: authInstallReveal 850ms cubic-bezier(0.2, 0.88, 0.2, 1) 200ms both;
}

.authInstallWelcomeOverlay__line--sub {
  font-size: clamp(14px, 1.8vw, 20px);
  color: rgba(201, 217, 242, 0.87);
  animation-delay: 280ms;
}

.authInstallWelcomeOverlay__moments {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  animation: authInstallReveal 900ms cubic-bezier(0.2, 0.88, 0.2, 1) 350ms both;
}

.authInstallWelcomeOverlay__moments span {
  height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(195, 212, 243, 0.36);
  background: rgba(15, 22, 35, 0.58);
  color: rgba(223, 236, 255, 0.9);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  animation: authTagFloat 3.2s ease-in-out infinite;
}

.authInstallWelcomeOverlay__moments span:nth-child(2) {
  animation-delay: 180ms;
}

.authInstallWelcomeOverlay__moments span:nth-child(3) {
  animation-delay: 360ms;
}

.authInstallWelcomeOverlay__moments span:nth-child(4) {
  animation-delay: 540ms;
}

.authInstallWelcomeOverlay__cta {
  margin-top: 8px;
  min-width: 168px;
  height: 46px;
  border-radius: 13px;
  border-color: rgba(197, 215, 248, 0.62) !important;
  background: linear-gradient(160deg, rgba(158, 191, 255, 0.93), rgba(126, 164, 250, 0.9)) !important;
  color: #0c1a33 !important;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(98, 140, 238, 0.32);
  animation: authInstallReveal 920ms cubic-bezier(0.2, 0.88, 0.2, 1) 420ms both;
}

.authInstallWelcomeOverlay__cta:hover {
  transform: translateY(-1px);
}

@keyframes authGlowDrift {
  0% {
    transform: translate(-12px, -10px) scale(1);
  }
  100% {
    transform: translate(18px, 12px) scale(1.06);
  }
}

@keyframes authWavePulse {
  0%,
  100% {
    transform: scaleY(0.7);
    opacity: 0.7;
  }
  50% {
    transform: scaleY(1.1);
    opacity: 1;
  }
}

@keyframes authInstallDriftA {
  0% {
    transform: translate(-20px, -12px) scale(1);
  }
  100% {
    transform: translate(24px, 16px) scale(1.08);
  }
}

@keyframes authInstallDriftB {
  0% {
    transform: translate(16px, 8px) scale(1);
  }
  100% {
    transform: translate(-24px, -16px) scale(1.1);
  }
}

@keyframes authInstallReveal {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.988);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes authTagFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@media (max-width: 980px) {
  body.authPage .authShell {
    grid-template-columns: minmax(0, 1fr);
  }

  body.authPage .authShowcase,
  body.authPage .authCard {
    max-height: none;
  }

  body.authPage .authShowcase {
    min-height: 280px;
  }

  .authInstallWelcomeOverlay__card {
    min-height: min(560px, calc(100vh - 28px));
    border-radius: 22px;
    padding: 38px 20px;
  }
}

/* ALTARA premium auth refresh */
html:has(body.authPage) {
  background: #080808;
  scrollbar-color: rgba(232, 207, 174, 0.32) rgba(8, 8, 8, 0.82);
  scrollbar-width: thin;
}

html:has(body.authPage)::-webkit-scrollbar,
body.authPage::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html:has(body.authPage)::-webkit-scrollbar-track,
body.authPage::-webkit-scrollbar-track {
  background: rgba(8, 8, 8, 0.82);
}

html:has(body.authPage)::-webkit-scrollbar-thumb,
body.authPage::-webkit-scrollbar-thumb {
  border: 2px solid rgba(8, 8, 8, 0.82);
  border-radius: 999px;
  background: rgba(232, 207, 174, 0.3);
}

html:has(body.authPage)::-webkit-scrollbar-thumb:hover,
body.authPage::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 207, 174, 0.46);
}

body.authPage {
  --font-ui: "Bricolage Grotesque", "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Bricolage Grotesque", "Plus Jakarta Sans", "Manrope", "Segoe UI", sans-serif;
  --auth-ink: #f5f0e7;
  --auth-soft: rgba(245, 240, 231, 0.68);
  --auth-muted: rgba(245, 240, 231, 0.46);
  --auth-faint: rgba(245, 240, 231, 0.28);
  --auth-accent: #e8cfae;
  --auth-accent-strong: #f0dbbd;
  --auth-accent-soft: rgba(232, 207, 174, 0.16);
  --auth-input-bg: #0f0f0e;
  --auth-input-bg-hover: #131210;
  --auth-input-bg-focus: #15130f;
  --auth-panel: rgba(18, 18, 18, 0.92);
  --auth-panel-strong: rgba(15, 15, 15, 0.98);
  --auth-border: rgba(245, 240, 231, 0.12);
  --auth-border-strong: rgba(232, 207, 174, 0.26);
  --accent: var(--auth-accent);
  --accent-strong: var(--auth-accent-strong);
  --accent-soft: var(--auth-accent-soft);
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 34px);
  overflow: auto;
  background:
    radial-gradient(980px 620px at 14% 18%, rgba(232, 207, 174, 0.12), transparent 62%),
    radial-gradient(840px 520px at 86% 82%, rgba(255, 255, 255, 0.045), transparent 68%),
    linear-gradient(135deg, #070707 0%, #101010 46%, #0b0b0b 100%);
  color: var(--auth-ink);
}

body.authPage::before {
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 45%, black 18%, transparent 78%);
}

body.authPage::after {
  display: block;
  opacity: 0.78;
  background:
    linear-gradient(118deg, transparent 0 34%, rgba(232, 207, 174, 0.08) 44%, transparent 58%),
    radial-gradient(74% 48% at 50% 112%, rgba(0, 0, 0, 0.78), transparent 76%);
}

body.authPage.auth-checking .authShell {
  opacity: 0;
  transform: translateY(8px) scale(0.992);
  pointer-events: none;
}

body.authPage .authShell {
  width: min(1180px, calc(100vw - 48px));
  min-height: min(640px, calc(100vh - 68px));
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(380px, 0.94fr) minmax(430px, 1.06fr);
  gap: 0;
  align-items: stretch;
  justify-items: stretch;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--auth-border);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.036), rgba(255, 255, 255, 0)),
    linear-gradient(142deg, rgba(23, 22, 21, 0.97), rgba(12, 12, 11, 0.99));
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.025),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-app-region: drag !important;
  transition: opacity 160ms ease, transform 160ms ease;
}

body.authPage .authShell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(640px 420px at 16% 10%, rgba(232, 207, 174, 0.075), transparent 68%),
    radial-gradient(620px 460px at 86% 12%, rgba(232, 207, 174, 0.06), transparent 72%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022), transparent 18% 82%, rgba(255, 255, 255, 0.018));
}

body.authPage .authShell::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 46.9%;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(245, 240, 231, 0.1) 18%, rgba(232, 207, 174, 0.14) 52%, transparent);
}

body.authPage .authCard,
body.authPage .authShowcase {
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
  scrollbar-gutter: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body.authPage .authCard::before,
body.authPage .authCard::after {
  display: none;
}

body.authPage .authCard {
  order: 1;
  width: auto;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 13px;
  padding: clamp(38px, 4.2vw, 62px);
  background:
    radial-gradient(520px 420px at 20% 20%, rgba(232, 207, 174, 0.05), transparent 70%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018), transparent 58%);
  justify-self: stretch;
  -webkit-app-region: no-drag !important;
}

body.authPage .authCard * {
  -webkit-app-region: no-drag !important;
}

body.authPage .authCard > .authTitle,
body.authPage .authCard > .authSub,
body.authPage .authCard > .authFeedback,
body.authPage .authCard > .field,
body.authPage .authCard > .authActions,
body.authPage .authCard > .authRecoveryLinks,
body.authPage .authCard > .authRecoveryCard {
  width: min(100%, 390px);
  justify-self: center;
}

body.authPage .authCard > .authBadge {
  justify-self: center;
}

body.authPage .authShowcase {
  order: 2;
  min-width: 0;
  min-height: 100%;
  display: grid;
  align-content: center;
  gap: clamp(17px, 2.2vw, 26px);
  padding: clamp(38px, 4.8vw, 68px);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(680px 480px at 60% 28%, rgba(232, 207, 174, 0.045), transparent 72%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012), rgba(255, 255, 255, 0.026));
  -webkit-app-region: drag !important;
}

body.authPage .authShowcase * {
  -webkit-app-region: drag !important;
}

body.authPage .authShowcase::before {
  content: "";
  position: absolute;
  top: 28px;
  right: 34px;
  width: 250px;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.42;
  background:
    radial-gradient(circle, transparent 0 24%, rgba(232, 207, 174, 0.18) 24.4% 25.2%, transparent 26% 41%, rgba(232, 207, 174, 0.13) 41.4% 42%, transparent 43% 59%, rgba(232, 207, 174, 0.08) 59.4% 60%, transparent 61%),
    conic-gradient(from 18deg, transparent 0 64%, rgba(232, 207, 174, 0.16), transparent 76% 100%);
  filter: drop-shadow(0 20px 52px rgba(232, 207, 174, 0.12));
}

body.authPage .authShowcase::after {
  content: "ALTARA";
  position: absolute;
  left: clamp(34px, 4.4vw, 58px);
  bottom: 30px;
  z-index: 0;
  pointer-events: none;
  font-family: var(--font-display);
  font-size: clamp(82px, 9.4vw, 136px);
  line-height: 0.78;
  font-weight: 700;
  letter-spacing: 0.035em;
  color: rgba(245, 240, 231, 0.042);
  text-shadow: 0 1px 0 rgba(232, 207, 174, 0.03);
  white-space: nowrap;
}

body.authPage .authShowcase__glow {
  position: absolute;
  top: 42px;
  right: 72px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.42;
  background:
    radial-gradient(circle, transparent 0 38%, rgba(232, 207, 174, 0.16) 38.4% 39.2%, transparent 40% 58%, rgba(232, 207, 174, 0.1) 58.4% 59%, transparent 60%),
    conic-gradient(from 12deg, transparent 0 54%, rgba(232, 207, 174, 0.22), transparent 68% 100%);
  box-shadow: none;
  filter: none;
  animation: authGlowDrift 14s ease-in-out infinite alternate;
}

body.authPage .authShowcase__logoRow {
  display: none;
}

body.authPage .authShowcase__logoOrb {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  border-color: rgba(232, 207, 174, 0.28);
  background:
    linear-gradient(145deg, rgba(232, 207, 174, 0.2), rgba(232, 207, 174, 0.04)),
    #171717;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 16px 36px rgba(0, 0, 0, 0.42);
}

body.authPage .authShowcase__logoOrb::before {
  border-color: rgba(232, 207, 174, 0.2);
}

body.authPage .authShowcase__logoOrb img {
  width: 31px;
  height: 31px;
  border-radius: 9px;
}

body.authPage .authShowcase__logoWord {
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: 700;
  color: rgba(245, 240, 231, 0.94);
  text-transform: uppercase;
}

body.authPage .authShowcase__title {
  max-width: 520px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(46px, 5.2vw, 64px);
  line-height: 1.02;
  letter-spacing: 0;
  font-weight: 700;
  color: #f7f3ec;
  position: relative;
  z-index: 2;
  text-wrap: balance;
  text-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}

body.authPage .authShowcase__text {
  max-width: 460px;
  min-height: 2.9em;
  margin: -4px 0 0;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.45;
  color: var(--auth-soft);
  position: relative;
  z-index: 2;
  overflow-wrap: anywhere;
}

body.authPage .authShowcase__chips {
  max-width: 520px;
  min-height: 82px;
  gap: 9px;
  position: relative;
  z-index: 2;
  align-content: flex-start;
}

body.authPage .authShowcase__chip {
  min-height: 36px;
  height: auto;
  padding: 0 14px;
  gap: 9px;
  border-radius: 999px;
  border-color: rgba(245, 240, 231, 0.12);
  background: rgba(12, 12, 11, 0.64);
  color: rgba(245, 240, 231, 0.84);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: normal;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

body.authPage .authShowcase__chip::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--auth-accent);
  box-shadow: 0 0 18px rgba(232, 207, 174, 0.38);
}

body.authPage .authShowcase__waves {
  align-items: center;
  gap: 10px;
  min-height: 72px;
  margin-top: 34px;
  opacity: 0.58;
  position: relative;
  z-index: 2;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

body.authPage .authShowcase__waves span {
  width: 3px;
  min-height: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(232, 207, 174, 0.96), rgba(232, 207, 174, 0.16));
  box-shadow: 0 0 20px rgba(232, 207, 174, 0.18);
  animation: authWavePulse 1.9s ease-in-out infinite;
}

body.authPage .authShowcase__waves span:nth-child(1) { height: 10px; animation-delay: 0ms; }
body.authPage .authShowcase__waves span:nth-child(2) { height: 22px; animation-delay: 80ms; }
body.authPage .authShowcase__waves span:nth-child(3) { height: 14px; animation-delay: 160ms; }
body.authPage .authShowcase__waves span:nth-child(4) { height: 34px; animation-delay: 240ms; }
body.authPage .authShowcase__waves span:nth-child(5) { height: 50px; animation-delay: 320ms; }
body.authPage .authShowcase__waves span:nth-child(6) { height: 26px; animation-delay: 400ms; }
body.authPage .authShowcase__waves span:nth-child(7) { height: 18px; animation-delay: 480ms; }
body.authPage .authShowcase__waves span:nth-child(8) { height: 28px; animation-delay: 560ms; }
body.authPage .authShowcase__waves span:nth-child(9) { height: 12px; animation-delay: 640ms; }
body.authPage .authShowcase__waves span:nth-child(10) { height: 44px; animation-delay: 720ms; }
body.authPage .authShowcase__waves span:nth-child(11) { height: 20px; animation-delay: 800ms; }
body.authPage .authShowcase__waves span:nth-child(12) { height: 30px; animation-delay: 880ms; }
body.authPage .authShowcase__waves span:nth-child(13) { height: 14px; animation-delay: 960ms; }
body.authPage .authShowcase__waves span:nth-child(14) { height: 24px; animation-delay: 1040ms; }
body.authPage .authShowcase__waves span:nth-child(15) { height: 16px; animation-delay: 1120ms; }
body.authPage .authShowcase__waves span:nth-child(16) { height: 36px; animation-delay: 1200ms; }

body.authPage .authBadge {
  width: fit-content;
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(232, 207, 174, 0.18);
  border-radius: 999px;
  background: rgba(232, 207, 174, 0.07);
  color: rgba(232, 207, 174, 0.88);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

body.authPage .authTitle {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 54px);
  line-height: 1;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--auth-ink);
}

body.authPage .authSub {
  margin: -5px 0 10px;
  color: var(--auth-muted);
  font-size: 15px;
  line-height: 1.45;
}

body.authPage .authCard .field {
  gap: 8px;
  margin-bottom: 0;
}

body.authPage .authCard .field + .field {
  margin-top: 4px;
}

body.authPage .authCard label {
  margin: 0;
  color: rgba(245, 240, 231, 0.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

body.authPage .authCard input {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(232, 207, 174, 0.13);
  background: var(--auth-input-bg) !important;
  color: rgba(255, 250, 242, 0.94);
  padding: 0 14px;
  font-size: 15px;
  outline: 0;
  caret-color: var(--auth-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.038),
    0 10px 24px rgba(0, 0, 0, 0.18);
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

body.authPage .authCard input::placeholder {
  color: rgba(245, 240, 231, 0.32);
}

body.authPage .authCard input:hover {
  border-color: rgba(232, 207, 174, 0.22);
  background: var(--auth-input-bg-hover) !important;
}

body.authPage .authCard input:focus {
  border-color: rgba(232, 207, 174, 0.52);
  background: var(--auth-input-bg-focus) !important;
  box-shadow:
    0 0 0 3px rgba(232, 207, 174, 0.105),
    0 12px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.authPage .authCard input:-webkit-autofill,
body.authPage .authCard input:-webkit-autofill:hover,
body.authPage .authCard input:-webkit-autofill:focus {
  -webkit-text-fill-color: rgba(255, 250, 242, 0.94);
  caret-color: var(--auth-accent);
  border-color: rgba(232, 207, 174, 0.28);
  box-shadow:
    0 0 0 1000px var(--auth-input-bg) inset,
    0 0 0 3px rgba(232, 207, 174, 0.08);
  transition: background-color 9999s ease-out;
}

body.authPage .authCard .hint {
  margin: 0;
  color: rgba(245, 240, 231, 0.42);
  font-size: 12px;
  line-height: 1.35;
}

body.authPage .passwordToggleWrap > input,
body.authPage .passwordToggleWrap > .passwordToggleInput {
  padding-right: 76px !important;
}

body.authPage .passwordToggleBtn {
  right: 9px;
  height: 30px;
  min-width: 56px;
  border-radius: 10px;
  border-color: rgba(232, 207, 174, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(232, 207, 174, 0.035));
  color: rgba(245, 240, 231, 0.66);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

body.authPage .passwordToggleBtn:hover,
body.authPage .passwordToggleBtn:focus-visible {
  border-color: rgba(232, 207, 174, 0.34);
  background: rgba(232, 207, 174, 0.1);
  color: rgba(255, 250, 242, 0.9);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(232, 207, 174, 0.08);
}

body.authPage .authActions {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

body.authPage .authActions .btn {
  width: 100%;
  min-width: 0;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(232, 207, 174, 0.13);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
  color: rgba(245, 240, 231, 0.88);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: none;
}

body.authPage .authActions .btn:hover,
body.authPage .authActions .btn:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(232, 207, 174, 0.22);
  background: rgba(232, 207, 174, 0.075);
  outline: 0;
}

body.authPage .authActions .btn.primary {
  border-color: rgba(232, 207, 174, 0.58);
  background:
    linear-gradient(180deg, rgba(255, 244, 225, 0.88), rgba(232, 207, 174, 0.94)),
    var(--auth-accent);
  color: #14110d;
  box-shadow:
    0 14px 38px rgba(232, 207, 174, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

body.authPage .authActions .btn.primary:hover,
body.authPage .authActions .btn.primary:focus-visible {
  border-color: rgba(255, 231, 199, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 249, 238, 0.96), rgba(238, 216, 187, 0.98)),
    var(--auth-accent-strong);
  box-shadow:
    0 18px 44px rgba(232, 207, 174, 0.24),
    0 0 0 3px rgba(232, 207, 174, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

body.authPage .authRecoveryLinks {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.authPage .authRecoveryLink {
  border: 0;
  background: transparent;
  padding: 2px 0;
  color: rgba(232, 207, 174, 0.72);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
}

body.authPage .authRecoveryLink:hover,
body.authPage .authRecoveryLink:focus-visible {
  color: rgba(255, 240, 218, 0.96);
  outline: 0;
  text-decoration: underline;
  text-decoration-color: rgba(232, 207, 174, 0.4);
  text-underline-offset: 3px;
}

body.authPage .authRecoveryCard {
  margin-top: 8px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(232, 207, 174, 0.13);
  background: rgba(12, 12, 11, 0.78);
  display: grid;
  gap: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body.authPage .authRecoveryTitle {
  color: var(--auth-ink);
  font-size: 15px;
  font-weight: 700;
}

body.authPage .authRecoveryHint {
  color: var(--auth-muted);
  font-size: 13px;
  line-height: 1.4;
}

body.authPage .authRecoveryActions {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

body.authPage .authRecoveryActions .btn {
  min-height: 40px;
  height: auto;
  border-radius: 12px;
  border-color: rgba(245, 240, 231, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(245, 240, 231, 0.82);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}

body.authPage .authRecoveryActions .btn.ghost,
body.authPage .authRecoveryActions .btn:hover,
body.authPage .authRecoveryActions .btn:focus-visible {
  border-color: rgba(232, 207, 174, 0.24);
  background: rgba(232, 207, 174, 0.08);
}

body.authPage .authFeedback,
body.authPage .authRecoveryResult {
  margin: 0;
  border-radius: 14px;
  border: 1px solid rgba(245, 240, 231, 0.12);
  background: rgba(245, 240, 231, 0.055);
  color: rgba(245, 240, 231, 0.82);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
}

body.authPage .authFeedback.is-error,
body.authPage .authRecoveryResult.is-error {
  border-color: rgba(214, 106, 100, 0.34);
  background: rgba(90, 30, 28, 0.24);
  color: rgba(255, 216, 211, 0.94);
}

body.authPage .authFeedback.is-success,
body.authPage .authRecoveryResult.is-success {
  border-color: rgba(143, 198, 151, 0.3);
  background: rgba(34, 74, 44, 0.22);
  color: rgba(219, 247, 224, 0.9);
}

body.authPage #debug {
  display: none;
}

body.authPage .authLangDock {
  top: 18px;
  right: 22px;
  z-index: 35;
}

body.authPage .authLangBtn {
  min-width: 78px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(245, 240, 231, 0.12);
  background: rgba(10, 10, 10, 0.74);
  color: rgba(245, 240, 231, 0.78);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(10px);
}

body.authPage .authLangBtn::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: 0.78;
  box-shadow: inset 4px 0 0 -3px currentColor, inset -4px 0 0 -3px currentColor;
}

body.authPage .authLangBtn::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.7;
}

body.authPage .authLangBtn:hover,
body.authPage .authLangBtn:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(232, 207, 174, 0.3);
  background: rgba(21, 21, 21, 0.86);
  color: rgba(255, 246, 232, 0.94);
  outline: 0;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28), 0 0 0 3px rgba(232, 207, 174, 0.08);
}

body.authPage .authInstallWelcomeOverlay__backdrop {
  background:
    radial-gradient(920px 620px at 16% -8%, rgba(232, 207, 174, 0.18), transparent 66%),
    radial-gradient(840px 540px at 94% 112%, rgba(255, 255, 255, 0.055), transparent 70%),
    linear-gradient(145deg, #080808 0%, #101010 52%, #0a0a0a 100%);
}

body.authPage .authInstallWelcomeOverlay__glow--one,
body.authPage .authInstallWelcomeOverlay__glow--two {
  background: radial-gradient(circle at center, rgba(232, 207, 174, 0.18), rgba(232, 207, 174, 0));
}

body.authPage .authInstallWelcomeOverlay__grain {
  opacity: 0.12;
  background-image: radial-gradient(rgba(245, 240, 231, 0.18) 0.7px, transparent 0.7px);
}

body.authPage .authInstallWelcomeOverlay__card {
  border-color: rgba(232, 207, 174, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0)),
    linear-gradient(145deg, rgba(20, 20, 20, 0.9), rgba(9, 9, 9, 0.94));
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.authPage .authInstallWelcomeOverlay__logoWrap {
  border-color: rgba(232, 207, 174, 0.28);
  background: rgba(20, 20, 20, 0.82);
}

body.authPage .authInstallWelcomeOverlay__brand {
  color: rgba(232, 207, 174, 0.88);
  letter-spacing: 0;
}

body.authPage .authInstallWelcomeOverlay__title {
  color: var(--auth-ink);
  letter-spacing: 0;
}

body.authPage .authInstallWelcomeOverlay__line {
  color: rgba(245, 240, 231, 0.86);
}

body.authPage .authInstallWelcomeOverlay__line--sub {
  color: rgba(245, 240, 231, 0.66);
}

body.authPage .authInstallWelcomeOverlay__moments span {
  border-color: rgba(232, 207, 174, 0.2);
  background: rgba(232, 207, 174, 0.08);
  color: rgba(245, 240, 231, 0.86);
  letter-spacing: 0;
}

body.authPage .authInstallWelcomeOverlay__cta {
  border-color: rgba(232, 207, 174, 0.58) !important;
  background: linear-gradient(180deg, rgba(255, 244, 225, 0.9), rgba(232, 207, 174, 0.96)) !important;
  color: #14110d !important;
  box-shadow: 0 18px 44px rgba(232, 207, 174, 0.2);
}

@media (max-width: 980px) {
  body.authPage {
    align-items: start;
    padding: 58px 18px 22px;
  }

  body.authPage .authShell {
    width: min(620px, 100%);
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  body.authPage .authShell::after {
    display: none;
  }

  body.authPage .authCard {
    padding: clamp(28px, 7vw, 44px);
  }

  body.authPage .authShowcase {
    min-height: 300px;
    padding: 30px clamp(26px, 7vw, 44px) 34px;
    border-top: 1px solid rgba(245, 240, 231, 0.1);
  }

  body.authPage .authShowcase__title {
    margin-top: 4px;
    font-size: clamp(36px, 8vw, 48px);
  }

  body.authPage .authShowcase__waves {
    margin-top: 10px;
  }
}

@media (max-width: 680px) {
  body.authPage {
    padding: 54px 12px 16px;
  }

  body.authPage .authShell {
    width: min(470px, 100%);
    border-radius: 22px;
  }

  body.authPage .authCard {
    padding: 26px 20px 24px;
  }

  body.authPage .authShowcase {
    display: none;
  }

  body.authPage .authTitle {
    font-size: 38px;
  }

  body.authPage .authRecoveryLinks,
  body.authPage .authRecoveryActions {
    grid-template-columns: minmax(0, 1fr);
    flex-direction: column;
    align-items: flex-start;
  }

  body.authPage .authRecoveryActions .btn {
    width: 100%;
  }

  body.authPage .authLangDock {
    top: 12px;
    right: 12px;
  }
}

@media (max-height: 680px) and (min-width: 981px) {
  body.authPage {
    place-items: start center;
  }

  body.authPage .authShell {
    min-height: 560px;
  }

  body.authPage .authCard {
    padding-block: 30px;
  }

  body.authPage .authShowcase {
    padding-block: 34px;
  }
}

/* Private call visual refresh */
.callStage.is-private-call-ui,
.callBar.is-private-call-ui {
  --private-call-bg: #111214;
  --private-call-panel: #15171c;
  --private-call-tile: #1b1d22;
  --private-call-tile-soft: #202229;
  --private-call-control: #2b2d31;
  --private-call-control-hover: #36383f;
  --private-call-text: #f2f3f5;
  --private-call-muted: #b5bac1;
  --private-call-green: #23a559;
  --private-call-red: #da373c;
  --private-call-red-hover: #e5484d;
}

.callStage.is-private-call-ui.is-docked-in-dm {
  margin: 8px 10px 10px;
  width: auto;
  flex: 0 0 auto;
}

.callStage.is-private-call-ui .callStageCard {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding-bottom: 86px;
  border-radius: 24px;
  border: 1px solid rgba(242, 243, 245, 0.09);
  background:
    linear-gradient(180deg, rgba(26, 28, 34, 0.98), rgba(17, 18, 22, 0.99)) !important;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.callStage.is-private-call-ui.is-docked-in-dm .callStageCard {
  height: clamp(340px, 48vh, 560px);
  min-height: min(340px, calc(100vh - 168px));
  max-height: calc(100vh - 168px);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(25, 27, 33, 0.99), rgba(15, 16, 20, 0.99)) !important;
}

.callStage.is-private-call-ui .callStageTop {
  position: relative;
  z-index: 3;
  min-height: 64px;
  padding: 15px 18px 10px;
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(22, 24, 30, 0.9), rgba(22, 24, 30, 0.38));
  backdrop-filter: blur(12px) saturate(120%);
}

.callStage.is-private-call-ui .callStageTitle {
  color: var(--private-call-text);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  max-width: min(720px, calc(100vw - 260px));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.callStage.is-private-call-ui .callStageSub {
  width: fit-content;
  min-height: 22px;
  margin-top: 5px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(242, 243, 245, 0.08);
  background: rgba(43, 45, 49, 0.7);
  color: var(--private-call-muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.callStage.is-private-call-ui .callStageSub::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--private-call-green);
  box-shadow: 0 0 0 3px rgba(35, 165, 89, 0.13);
  flex: 0 0 auto;
}

.callStage.is-private-call-ui .callStageViewport {
  grid-row: 2;
  margin: 0 14px;
  width: calc(100% - 28px);
  height: 100%;
  max-width: none;
  min-height: 0;
  max-height: 100%;
  align-self: stretch;
  justify-self: stretch;
  aspect-ratio: auto;
  border-radius: 24px;
  border: 0;
  background: transparent !important;
  box-shadow: none;
}

.callStage.is-private-call-ui.is-docked-in-dm .callStageViewport {
  margin: 0 12px;
  width: calc(100% - 24px);
  max-width: none;
  border-radius: 22px;
}

.callStage.is-docked-in-dm .callStageViewport:fullscreen,
.callStage.is-private-call-ui .callStageViewport:fullscreen {
  margin: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
}

.callStage.is-private-call-ui .callStagePlaceholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px;
  background:
    radial-gradient(640px 320px at 50% 0%, var(--call-tile-bg-glow, rgba(255, 255, 255, 0.045)), transparent 68%),
    linear-gradient(180deg, var(--call-tile-bg-start, var(--private-call-tile)), var(--call-tile-bg-end, var(--private-call-bg)));
}

.callStage.is-private-call-ui .callStagePlaceholder > #callStageAvatar,
.callStage.is-private-call-ui .callStagePlaceholder > #callStageAvatar.avatarBig {
  width: clamp(104px, 15vw, 148px);
  height: clamp(104px, 15vw, 148px);
  min-width: 104px;
  min-height: 104px;
  border: 3px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(160deg, rgba(88, 101, 242, 0.28), rgba(43, 45, 49, 0.92));
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.callStage.is-private-call-ui .callStageLabel {
  position: static;
  max-width: min(420px, calc(100% - 32px));
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--private-call-text);
  font-size: 19px;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}

.callStage.is-private-call-ui:not(.layout-grid) .callStagePlaceholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  padding: 0;
}

.callStage.is-private-call-ui:not(.layout-grid) .callStagePlaceholder > #callStageAvatar,
.callStage.is-private-call-ui:not(.layout-grid) .callStagePlaceholder > #callStageAvatar.avatarBig {
  width: clamp(84px, 16%, 136px);
  height: clamp(84px, 16%, 136px);
  min-width: 84px;
  min-height: 84px;
  border: 2px solid rgba(255, 255, 255, 0.12);
}

.callStage.is-private-call-ui:not(.layout-grid) .callStageLabel {
  position: absolute;
  left: 14px;
  bottom: 14px;
  max-width: calc(100% - 28px);
  padding: 4px 8px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.42);
  color: #eef2ff;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  text-shadow: none;
}

.callStage.is-private-call-ui .callStageGrid {
  padding: 8px 8px 76px;
  --call-grid-gap: 10px;
  align-content: center;
  align-items: center;
}

.callStage.is-private-call-ui .callStageGrid[data-tile-count="2"] {
  justify-content: center;
}

.callStage.is-private-call-ui .stageGridTile,
.callStage.is-private-call-ui .participantTile {
  border-radius: 22px;
  border-color: rgba(242, 243, 245, 0.08);
  background:
    linear-gradient(180deg, var(--call-tile-bg-start, #22242b), var(--call-tile-bg-end, #17181d));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 30px rgba(0, 0, 0, 0.24);
}

.callStage.is-private-call-ui .stageGridTile:hover,
.callStage.is-private-call-ui .participantTile:hover {
  border-color: rgba(242, 243, 245, 0.18);
  filter: brightness(1.04);
}

.callStage.is-private-call-ui .stageGridTile.is-active,
.callStage.is-private-call-ui .participantTile.is-active {
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.34);
}

.callStage.is-private-call-ui .stageGridAvatar,
.callStage.is-private-call-ui .participantAvatar {
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(160deg, rgba(88, 101, 242, 0.22), rgba(32, 34, 40, 0.94));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.callStage.is-private-call-ui .stageGridLabel,
.callStage.is-private-call-ui .participantLabel {
  border-radius: 999px;
  background: rgba(15, 16, 20, 0.68);
  color: var(--private-call-text);
  backdrop-filter: blur(10px);
}

.callStage.is-private-call-ui .callStageControls {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 14;
  transform: translateX(-50%);
  margin: 0;
  width: fit-content;
  max-width: calc(100% - 28px);
  padding: 10px;
  border-radius: 999px;
  border: 1px solid rgba(242, 243, 245, 0.11);
  background: rgba(18, 19, 23, 0.84);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px) saturate(120%);
  gap: 9px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  flex-wrap: nowrap;
}

.callStage.is-private-call-ui .dmStageResizeGrip {
  display: none !important;
}

body:has(.callStage.is-private-call-ui.is-open:not([hidden])) .callBar.is-private-call-ui.is-open {
  display: none !important;
}

.dmThread:has(.callStage.is-private-call-ui.is-docked-in-dm.is-open) .dmCallDock {
  flex: 0 0 auto;
}

.dmThread:has(.callStage.is-private-call-ui.is-docked-in-dm.is-open) .dmMessages {
  min-height: 130px;
}

.callStage.is-private-call-ui .callStageControls__group {
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  gap: 9px;
}

.callStage.is-private-call-ui .callShareSplit {
  gap: 7px;
  overflow: visible;
  border-radius: 999px;
}

.callStage.is-private-call-ui .callStageControls .callCtrlBtn,
.callStage.is-private-call-ui .callStageViewportFsBtn {
  width: 50px;
  min-width: 50px;
  height: 50px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: var(--private-call-control);
  color: #e3e5e8;
  box-shadow: none;
}

.callStage.is-private-call-ui .callStageControls .callShareSplit .callCtrlBtn {
  border-radius: 999px;
}

.callStage.is-private-call-ui .callStageControls .callShareSplit__arrow {
  width: 40px;
  min-width: 40px;
  border-left: 0;
}

.callStage.is-private-call-ui .callStageControls .callCtrlBtn:hover,
.callStage.is-private-call-ui .callStageViewportFsBtn:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: var(--private-call-control-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.24);
}

.callStage.is-private-call-ui .callStageControls .callCtrlBtn:active,
.callStage.is-private-call-ui .callStageViewportFsBtn:active {
  transform: translateY(0) scale(0.98);
}

.callStage.is-private-call-ui .callStageControls .callCtrlBtn.is-on,
.callStage.is-private-call-ui .callStageViewportFsBtn.is-on {
  border-color: rgba(255, 255, 255, 0.18);
  background: #4e5058;
  color: #ffffff;
}

.callStage.is-private-call-ui .callStageControls .callShareSplit.is-sharing .callCtrlBtn {
  border-color: rgba(35, 165, 89, 0.52);
  background: var(--private-call-green);
  color: #ffffff;
}

.callStage.is-private-call-ui .callStageControls .callCtrlBtn[disabled],
.callStage.is-private-call-ui .callStageViewportFsBtn[disabled] {
  opacity: 0.42;
  transform: none;
  box-shadow: none;
}

.callStage.is-private-call-ui .callStageControls .callCtrlBtn--danger {
  width: 54px;
  min-width: 54px;
  height: 54px;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.08);
  background: var(--private-call-red);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(218, 55, 60, 0.22);
}

.callStage.is-private-call-ui .callStageControls .callCtrlBtn--danger:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: var(--private-call-red-hover);
  box-shadow: 0 14px 28px rgba(218, 55, 60, 0.28);
}

.callStage.is-private-call-ui .callStageViewportFsBtn {
  right: 14px;
  bottom: 14px;
  z-index: 10;
  opacity: 0.86;
}

.callBar.is-private-call-ui {
  border-radius: 18px;
  border-color: rgba(242, 243, 245, 0.12);
  background:
    linear-gradient(180deg, rgba(30, 32, 38, 0.96), rgba(18, 19, 23, 0.97));
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.callBar.is-private-call-ui .callBarText {
  color: #f2f3f5;
}

.callBar.is-private-call-ui .callBarLiveIcon {
  border-color: rgba(35, 165, 89, 0.28);
  background: rgba(35, 165, 89, 0.14);
  color: var(--private-call-green);
}

.callBar.is-private-call-ui .callMiniBtn {
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.08);
  background: #2b2d31;
  color: #e3e5e8;
}

.callBar.is-private-call-ui .callMiniBtn:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.16);
  background: #36383f;
}

.callBar.is-private-call-ui .callMiniBtn.is-on,
.callBar.is-private-call-ui .btn.is-on {
  border-color: rgba(255, 255, 255, 0.18);
  background: #4e5058;
  color: #ffffff;
}

.callBar.is-private-call-ui .callShareSplit.is-sharing .callMiniBtn {
  border-color: rgba(35, 165, 89, 0.52);
  background: var(--private-call-green);
  color: #ffffff;
}

.callBar.is-private-call-ui .callMiniBtn--danger {
  border-color: rgba(255, 255, 255, 0.08);
  background: var(--private-call-red);
  color: #ffffff;
}

@media (max-width: 640px) {
  .callStage.is-private-call-ui .callStageCard {
    border-radius: 0;
  }

  .callStage.is-private-call-ui.is-docked-in-dm .callStageCard {
    height: clamp(300px, 44vh, 420px);
    min-height: min(300px, calc(100vh - 150px));
    max-height: calc(100vh - 150px);
    padding-bottom: 76px;
  }

  .callStage.is-private-call-ui .callStageTop {
    padding: 12px 13px 8px;
  }

  .callStage.is-private-call-ui .callStageViewport,
  .callStage.is-private-call-ui.is-docked-in-dm .callStageViewport {
    margin: 0 8px;
    width: calc(100% - 16px);
    max-width: none;
    border-radius: 18px;
  }

  .callStage.is-private-call-ui .callStageGrid[data-tile-count="2"] {
    --discord-call-tile-width: min(100%, 380px);
  }

  .callStage.is-private-call-ui .callStageControls {
    bottom: 12px;
    max-width: calc(100% - 16px);
    padding: 8px;
    gap: 7px;
  }

  .callStage.is-private-call-ui .callStageControls__group {
    gap: 7px;
  }

  .callStage.is-private-call-ui .callStageControls .callCtrlBtn,
  .callStage.is-private-call-ui .callStageViewportFsBtn {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .callStage.is-private-call-ui .callStageControls .callShareSplit__arrow {
    width: 36px;
    min-width: 36px;
  }

  .callStage.is-private-call-ui .callStageControls .callCtrlBtn--danger {
    width: 48px;
    min-width: 48px;
    height: 48px;
  }

  .callStage.is-private-call-ui .callCtrlBtn__icon {
    width: 22px;
    height: 22px;
  }
}

@media (max-height: 680px) and (min-width: 641px) {
  .callStage.is-private-call-ui.is-docked-in-dm .callStageCard {
    height: clamp(300px, 44vh, 430px);
    min-height: min(300px, calc(100vh - 142px));
    max-height: calc(100vh - 142px);
    padding-bottom: 76px;
  }

  .callStage.is-private-call-ui .callStageTop {
    min-height: 56px;
    padding: 11px 14px 7px;
  }

  .callStage.is-private-call-ui .callStageControls {
    bottom: 12px;
    padding: 8px;
  }

  .callStage.is-private-call-ui .callStageControls .callCtrlBtn,
  .callStage.is-private-call-ui .callStageViewportFsBtn {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .callStage.is-private-call-ui .callStageControls .callCtrlBtn--danger {
    width: 48px;
    min-width: 48px;
    height: 48px;
  }
}

/* =========================
   ALTARA PHASE 1 REDESIGN
   Concept-image direction: premium minimal dark social shell.
   ========================= */
body:not(.authPage) {
  --font-ui: "Bricolage Grotesque", "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Bricolage Grotesque", "Plus Jakarta Sans", "Manrope", "Segoe UI", sans-serif;
  --bg-main: #101010;
  --bg-deep: #0d0d0d;
  --surface-0: #101010;
  --surface-1: #181818;
  --surface-2: #1c1c1c;
  --surface-row: rgba(255, 255, 255, 0.035);
  --surface-row-hover: rgba(232, 207, 174, 0.075);
  --stroke: rgba(255, 255, 255, 0.07);
  --stroke-strong: rgba(255, 255, 255, 0.11);
  --text-main: #f2f0ec;
  --text-soft: rgba(242, 240, 236, 0.72);
  --text-muted: rgba(242, 240, 236, 0.48);
  --accent: #e8cfae;
  --accent-strong: #f1dbc0;
  --accent-soft: rgba(232, 207, 174, 0.14);
  --focus-ring: rgba(232, 207, 174, 0.34);
  --selection-bg: rgba(232, 207, 174, 0.28);
  --color-link: #e8cfae;
  --ui-shell-bg: #101010;
  --ui-top-bg: #101010;
  --ui-card-bg: #181818;
  --ui-panel-soft-bg: #121212;
  --ui-row-bg: rgba(255, 255, 255, 0.04);
  --ui-row-strong-bg: rgba(255, 255, 255, 0.055);
  --ui-input-bg: #121212;
  --ui-input-focus-bg: #151515;
  --ui-btn-bg: #1b1b1b;
  --ui-btn-border: rgba(255, 255, 255, 0.08);
  --ui-btn-hover-bg: #202020;
  --ui-btn-hover-border: rgba(232, 207, 174, 0.22);
  --ui-primary-bg: rgba(232, 207, 174, 0.14);
  --ui-primary-border: rgba(232, 207, 174, 0.32);
  --ui-primary-hover-bg: rgba(232, 207, 174, 0.2);
  --ui-primary-hover-border: rgba(232, 207, 174, 0.44);
  --ui-danger-bg: rgba(156, 68, 68, 0.16);
  --ui-danger-border: rgba(210, 104, 104, 0.28);
  --ui-danger-hover-bg: rgba(156, 68, 68, 0.22);
  --ui-danger-hover-border: rgba(210, 104, 104, 0.42);
  --ui-debug-bg: #0d0d0d;
  --altara-sidebar-bg: rgba(13, 13, 13, 0.94);
  --altara-sidebar-surface: #181818;
  --altara-sidebar-item-bg: rgba(255, 255, 255, 0.026);
  --altara-sidebar-input-bg: rgba(18, 18, 18, 0.94);
  --altara-sidebar-input-focus-bg: rgba(21, 21, 21, 0.96);
  --altara-sidebar-selected-bg: linear-gradient(90deg, rgba(232, 207, 174, 0.14), rgba(232, 207, 174, 0.07));
  --altara-sidebar-selected-text: #f6efe4;
  --altara-sidebar-selected-shadow: inset 0 0 0 1px rgba(232, 207, 174, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --altara-sidebar-hover-bg: rgba(232, 207, 174, 0.07);
  --altara-sidebar-hover-border: rgba(232, 207, 174, 0.2);
  --altara-sidebar-hover-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --altara-sidebar-border: rgba(255, 255, 255, 0.085);
  --altara-sidebar-border-strong: rgba(232, 207, 174, 0.22);
  --altara-sidebar-focus-border: rgba(232, 207, 174, 0.36);
  --altara-sidebar-focus-ring: 0 0 0 3px rgba(232, 207, 174, 0.1);
  --altara-sidebar-focus-ring-soft: 0 0 0 2px rgba(232, 207, 174, 0.08);
  --altara-sidebar-badge-bg: rgba(232, 207, 174, 0.1);
  --altara-sidebar-badge-border: rgba(232, 207, 174, 0.28);
  --altara-sidebar-badge-text: #f0d8b8;
  --altara-sidebar-icon-btn-bg: rgba(24, 24, 24, 0.96);
  --altara-sidebar-icon-btn-border: rgba(232, 207, 174, 0.22);
  --altara-sidebar-icon-btn-hover-bg: rgba(232, 207, 174, 0.09);
  --altara-sidebar-icon-btn-hover-border: rgba(232, 207, 174, 0.34);
  --altara-sidebar-icon-btn-active-bg: rgba(232, 207, 174, 0.13);
  --altara-sidebar-icon-btn-active-border: rgba(232, 207, 174, 0.4);
  --altara-sidebar-member-bg: rgba(255, 255, 255, 0.018);
  --altara-sidebar-member-active-bg: rgba(232, 207, 174, 0.07);
  --altara-sidebar-member-active-border: rgba(232, 207, 174, 0.24);
  --altara-sidebar-member-active-shadow: inset 0 0 0 1px rgba(232, 207, 174, 0.07);
  --altara-sidebar-text: #f2f0ec;
  --altara-sidebar-soft: rgba(242, 240, 236, 0.72);
  --altara-sidebar-muted: rgba(242, 240, 236, 0.54);
  --altara-sidebar-disabled: rgba(242, 240, 236, 0.28);
  --altara-sidebar-icon: rgba(242, 240, 236, 0.58);
  --altara-sidebar-icon-border: rgba(232, 207, 174, 0.2);
  --altara-sidebar-accent-text: #f0d8b8;
  --left-sidebar-bg: #101010;
  --left-sidebar-top-bg: #101010;
  --left-sidebar-width: 390px;
  --right-sidebar-width: 282px;
  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-md: 12px;
  background: #0d0d0d;
}

body:not(.authPage)::before,
body:not(.authPage)::after {
  display: none;
}

body:not(.authPage) .app:not(.wrap),
body:not(.authPage) .appGrid {
  --app-grid-gap: 0px;
  grid-template-columns:
    clamp(360px, var(--left-sidebar-width), 420px)
    minmax(560px, 1fr)
    clamp(250px, var(--right-sidebar-width), 340px) !important;
  gap: 0 !important;
}

body:not(.authPage) .app:not(.wrap) {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: #101010;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.62);
}

body:not(.authPage) .panel,
body:not(.authPage) .card {
  border: 0;
  border-radius: 0;
  background: #101010;
  box-shadow: none;
  backdrop-filter: none;
}

body:not(.authPage) .panel::before,
body:not(.authPage) .card::before {
  display: none;
}

body:not(.authPage) .panel.left {
  --left-rail-column-width: 88px;
  display: grid;
  grid-template-columns: var(--left-rail-column-width) minmax(0, 1fr);
  grid-template-rows: 74px 58px minmax(0, 1fr) auto;
  border-right: 1px solid var(--stroke) !important;
  background: #101010;
}

body:not(.authPage) .panel.left::after {
  display: none;
}

body:not(.authPage) .panel.left .leftTop,
body:not(.authPage) .panel.left .leftList {
  display: contents !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body:not(.authPage) .sidebarBrand {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 28px 16px 10px;
}

body:not(.authPage) .sidebarBrand__mark {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #101010;
  background: var(--accent);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

body:not(.authPage) .sidebarBrand__name {
  color: rgba(242, 240, 236, 0.78);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

body:not(.authPage) .left .leftTabsSingle {
  display: none !important;
}

body:not(.authPage) .left .searchBox {
  grid-column: 2;
  grid-row: 2;
  display: block !important;
  min-width: 0;
  padding: 0 16px 12px;
}

body:not(.authPage) .searchBox .input,
body:not(.authPage) .friendsSearch .input,
body:not(.authPage) .serverMembersSearch,
body:not(.authPage) .input,
body:not(.authPage) input:not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
body:not(.authPage) textarea,
body:not(.authPage) select {
  border: 1px solid var(--stroke);
  border-radius: 13px;
  background: var(--ui-input-bg);
  color: var(--text-main);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

body:not(.authPage) .searchBox .input,
body:not(.authPage) .friendsSearch .input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  color: rgba(242, 240, 236, 0.82);
}

body:not(.authPage) .input::placeholder,
body:not(.authPage) textarea::placeholder {
  color: rgba(242, 240, 236, 0.38);
}

body:not(.authPage) .input:focus,
body:not(.authPage) input:not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus,
body:not(.authPage) textarea:focus,
body:not(.authPage) select:focus {
  border-color: rgba(232, 207, 174, 0.34);
  background: var(--ui-input-focus-bg);
  box-shadow: 0 0 0 3px rgba(232, 207, 174, 0.08);
}

body:not(.authPage) .leftDockGroups {
  grid-column: 1;
  grid-row: 1 / 5;
  min-height: 0;
  border: 0 !important;
  border-right: 1px solid var(--stroke) !important;
  background: #0d0d0d !important;
}

body:not(.authPage) .groupsRail {
  gap: 14px;
  padding: 22px 10px 16px;
  background: transparent;
}

body:not(.authPage) .groupOrb {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: #181818;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

body:not(.authPage) .groupOrb:hover {
  border-color: rgba(232, 207, 174, 0.22);
  background: #202020;
  transform: translateY(-1px);
}

body:not(.authPage) .groupOrb--server,
body:not(.authPage) .groupOrb--dm,
body:not(.authPage) .groupOrb--create {
  border-radius: 50%;
}

body:not(.authPage) .groupOrb--folder {
  border-radius: 18px;
}

body:not(.authPage) .groupOrb--app-home {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border-color: rgba(232, 207, 174, 0.22);
  background: #181818;
}

body:not(.authPage) .groupOrbAppLogo {
  border-radius: 15px;
  background: transparent;
}

body:not(.authPage) .groupOrbRailDivider {
  width: 30px;
  height: 1px;
  margin: 0 0 2px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

body:not(.authPage) .groupOrb--server.is-active::before,
body:not(.authPage) .groupOrb--folder.is-active::before,
body:not(.authPage) .groupOrb--dm.is-active::before,
body:not(.authPage) .groupOrb--app-home.is-active::before {
  left: -12px;
  width: 3px;
  height: 28px;
  background: var(--accent);
  box-shadow: none;
}

body:not(.authPage) .groupOrb.is-active {
  border-color: rgba(232, 207, 174, 0.36);
  box-shadow: 0 0 0 1px rgba(232, 207, 174, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body:not(.authPage) .groupOrb--server.has-notification:not(.is-active)::before,
body:not(.authPage) .groupOrb--folder.has-notification:not(.is-active)::before,
body:not(.authPage) .groupOrb--dm.has-notification:not(.is-active)::before {
  left: -10px;
  width: 7px;
  height: 7px;
  background: var(--accent);
  box-shadow: none;
}

body:not(.authPage) .groupOrb--create {
  margin-top: auto;
  border-style: solid;
  color: var(--accent);
}

body:not(.authPage) .groupOrbPlus {
  color: var(--accent);
  font-size: 30px;
  font-weight: 400;
}

body:not(.authPage) .groupOrbUnreadBadge {
  border-color: #0d0d0d;
  background: var(--accent);
  color: #101010;
  box-shadow: none;
}

body:not(.authPage) .leftDockDms {
  grid-column: 2;
  grid-row: 3;
  min-height: 0;
  padding: 0 8px 0 8px;
  border: 0 !important;
  background: #101010 !important;
}

body:not(.authPage) .leftDockDms #dmList {
  gap: 7px;
  padding: 2px 8px 10px;
}

body:not(.authPage) .leftDockDms #dmList .dmListSectionTitle,
body:not(.authPage) .friendsSectionTitle {
  margin: 14px 8px 6px;
  color: rgba(242, 240, 236, 0.48);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.065em;
}

body:not(.authPage) .leftDockDms #dmList .dmListSection {
  gap: 5px;
}

body:not(.authPage) .leftDockDms #dmList .dm-item,
body:not(.authPage) #friendsList .row,
body:not(.authPage) #incomingList .row,
body:not(.authPage) #outgoingList .row {
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  padding: 7px 10px;
  color: var(--text-soft);
  transform: none;
}

body:not(.authPage) .leftDockDms #dmList .dm-item:hover,
body:not(.authPage) #friendsList .row:hover,
body:not(.authPage) #incomingList .row:hover,
body:not(.authPage) #outgoingList .row:hover {
  border-color: var(--stroke);
  background: rgba(255, 255, 255, 0.045);
  transform: none;
}

body:not(.authPage) .leftDockDms #dmList .dm-item.is-active {
  border-color: rgba(232, 207, 174, 0.13);
  background: rgba(232, 207, 174, 0.12);
  box-shadow: none;
}

body:not(.authPage) .leftDockDms #dmList .dm-item.is-active::before {
  left: 3px;
  width: 3px;
  height: 26px;
  background: var(--accent);
  box-shadow: none;
}

body:not(.authPage) .leftDockDms #dmList .dm-item.has-notification {
  background: rgba(232, 207, 174, 0.1);
  box-shadow: inset 0 0 0 1px rgba(232, 207, 174, 0.14);
}

body:not(.authPage) .leftDockDms #dmList .dm-item.has-notification::before {
  background: var(--accent);
  box-shadow: none;
}

body:not(.authPage) .leftDockDms #dmList .avatar,
body:not(.authPage) .row .avatar,
body:not(.authPage) .presenceAvatar {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #1c1c1c;
  box-shadow: none;
}

body:not(.authPage) .statusDot {
  border-color: #101010;
  box-shadow: none;
}

body:not(.authPage) .dm-name,
body:not(.authPage) .name,
body:not(.authPage) .presenceName {
  color: rgba(242, 240, 236, 0.9);
  font-weight: 500;
  letter-spacing: 0;
}

body:not(.authPage) .dm-handle,
body:not(.authPage) .meta,
body:not(.authPage) .presenceState {
  color: rgba(242, 240, 236, 0.48);
  font-weight: 400;
}

body:not(.authPage) #meProfileCard {
  grid-column: 2;
  grid-row: 4;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  grid-template-areas: "avatar text actions";
  align-items: center;
  gap: 10px;
  min-height: 66px;
  margin: 10px 12px 14px;
  padding: 10px 10px 10px 12px;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: #151515 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

body:not(.authPage) #meProfileCard::before,
body:not(.authPage) #meProfileCard::after,
body:not(.authPage) #meProfileCard .profileBannerMedia {
  display: none !important;
}

body:not(.authPage) #meProfileCard .meAvatarWrap {
  grid-area: avatar;
  align-self: center;
}

body:not(.authPage) #meProfileCard #meAvatar {
  --status-dot-size: 10px;
  --status-dot-inset: 0px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #202020;
  box-shadow: none;
}

body:not(.authPage) #meProfileCard .meText {
  grid-area: text;
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 0;
  text-shadow: none;
}

body:not(.authPage) #meProfileCard .meName {
  color: rgba(242, 240, 236, 0.94);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
}

body:not(.authPage) #meProfileCard .meTag {
  display: none;
}

body:not(.authPage) #meProfileCard #meStatusBtn {
  display: none !important;
  width: fit-content;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(242, 240, 236, 0.58);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
}

body:not(.authPage) #meProfileCard .dotMini {
  width: 8px;
  height: 8px;
}

body:not(.authPage) #meProfileCard .meControls {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

body:not(.authPage) #meProfileCard .meCtrlBtn {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 11px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(242, 240, 236, 0.66);
  box-shadow: none;
}

body:not(.authPage) #meProfileCard .meCtrlBtn:hover {
  border-color: var(--stroke);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(242, 240, 236, 0.92);
  box-shadow: none;
  transform: none;
}

body:not(.authPage) #meProfileCard .meCtrlBtn.is-on {
  border-color: rgba(232, 207, 174, 0.2);
  background: rgba(232, 207, 174, 0.14);
  color: var(--accent-strong);
}

body:not(.authPage) #meProfileCard .meCtrlBtn__icon {
  width: 17px;
  height: 17px;
}

body:not(.authPage) .panel.mid {
  border-right: 1px solid var(--stroke);
  background: #101010;
}

body:not(.authPage) .panel.right {
  background: #101010;
}

body:not(.authPage) .midTop,
body:not(.authPage) .rightTop {
  min-height: 104px;
  padding: 50px 28px 14px;
  border-bottom: 0;
  background: #101010;
}

body:not(.authPage) .midBody,
body:not(.authPage) .rightBody {
  padding: 0 28px 24px;
  background: #101010;
}

body:not(.authPage) .rightBody {
  padding: 0 16px 22px;
}

body:not(.authPage) .midTabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 26px;
}

body:not(.authPage) .midTabs .chip {
  position: relative;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(242, 240, 236, 0.58);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  transform: none;
}

body:not(.authPage) .midTabs .chip:hover {
  color: rgba(242, 240, 236, 0.86);
  transform: none;
}

body:not(.authPage) .midTabs .chip:not(:last-child) {
  margin-right: 0;
}

body:not(.authPage) .midTabs .chip:not(:last-child)::after {
  display: none;
}

body:not(.authPage) .midTabs .chip.active {
  color: rgba(242, 240, 236, 0.96);
  text-decoration: none;
}

body:not(.authPage) .midTabs .chip.active::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
}

body:not(.authPage) .badge,
body:not(.authPage) #pendingBadge {
  min-width: 22px;
  height: 22px;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(242, 240, 236, 0.78);
  font-size: 12px;
  font-weight: 600;
}

body:not(.authPage) .widgetsTab {
  gap: 12px;
  padding-bottom: 78px;
}

body:not(.authPage) .widgetsGrid {
  --widgets-gap: 12px;
  --widgets-row-size: 154px;
  gap: var(--widgets-gap);
}

body:not(.authPage) .widgetCard {
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.01)),
    #181818;
  padding: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 18px 42px rgba(0, 0, 0, 0.22);
  backdrop-filter: none;
}

body:not(.authPage) .widgetCard::before {
  display: none;
}

body:not(.authPage) .widgetCard:hover {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 20px 46px rgba(0, 0, 0, 0.26);
  transform: translateY(-1px);
}

body:not(.authPage) .widgetCard--primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    #181818;
}

body:not(.authPage) .widgetCard__label,
body:not(.authPage) .widgetCalendarAgendaTitle,
body:not(.authPage) .widgetsAddPanel__title,
body:not(.authPage) .widgetsEditBar__title {
  color: rgba(242, 240, 236, 0.62);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.045em;
}

body:not(.authPage) .widgetCard__value,
body:not(.authPage) .widgetTodoHeroValue,
body:not(.authPage) .widgetCalendarDateDay {
  color: rgba(242, 240, 236, 0.96);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
}

body:not(.authPage) .widgetCard__meta,
body:not(.authPage) .widgetCalendarDateMonth,
body:not(.authPage) .widgetCalendarAgendaDay,
body:not(.authPage) .widgetCalendarAgendaEmpty {
  color: rgba(242, 240, 236, 0.56);
}

body:not(.authPage) .widgetNotesInput,
body:not(.authPage) .widgetTodoComposer,
body:not(.authPage) .widgetTodoHero,
body:not(.authPage) .widgetTodoItem,
body:not(.authPage) .widgetsAddPanel,
body:not(.authPage) .widgetsEditBar {
  border-color: var(--stroke);
  border-radius: 14px;
  background: rgba(13, 13, 13, 0.55);
  box-shadow: none;
}

body:not(.authPage) .widgetTodoHero {
  background: rgba(255, 255, 255, 0.035);
}

body:not(.authPage) .widgetTodoItem {
  background: rgba(255, 255, 255, 0.03);
}

body:not(.authPage) .widgetTodoToggle,
body:not(.authPage) .widgetTodoRemove,
body:not(.authPage) .widgetTodoMove,
body:not(.authPage) .widgetTodoEdit,
body:not(.authPage) .widgetCardTool,
body:not(.authPage) .widgetCardSizeBadge,
body:not(.authPage) .widgetResizeHandle {
  border-color: var(--stroke);
  background: #141414;
  color: rgba(242, 240, 236, 0.72);
}

body:not(.authPage) .widgetTodoToggle:hover,
body:not(.authPage) .widgetTodoRemove:hover,
body:not(.authPage) .widgetTodoMove:hover,
body:not(.authPage) .widgetTodoEdit:hover,
body:not(.authPage) .widgetCardTool:hover,
body:not(.authPage) .widgetCardSizeBadge--btn:hover,
body:not(.authPage) .widgetResizeHandle:hover {
  border-color: rgba(232, 207, 174, 0.22);
  background: #1f1f1f;
}

body:not(.authPage) .widgetTodoItem.is-done .widgetTodoToggle {
  border-color: rgba(92, 214, 110, 0.24);
  background: rgba(92, 214, 110, 0.12);
  color: #68d66f;
}

body:not(.authPage) .widgetChecklistProgressBar {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
}

body:not(.authPage) .widgetChecklistProgressBar > span {
  background: var(--accent);
}

body:not(.authPage) .widgetTodoHeroChip,
body:not(.authPage) .widgetTodoStatusChip,
body:not(.authPage) .widgetTodoMetaChip,
body:not(.authPage) .widgetCalendarMonthChip {
  border-color: var(--stroke);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(242, 240, 236, 0.66);
}

body:not(.authPage) .widgetTodoHeroChip.is-accent,
body:not(.authPage) .widgetTodoStatusChip.is-accent {
  border-color: rgba(232, 207, 174, 0.25);
  background: rgba(232, 207, 174, 0.12);
  color: var(--accent-strong);
}

body:not(.authPage) .widgetTodoHeroChip.is-danger,
body:not(.authPage) .widgetTodoStatusChip.is-danger,
body:not(.authPage) .widgetTodoItem.is-overdue {
  border-color: rgba(210, 104, 104, 0.24);
  background: rgba(156, 68, 68, 0.13);
  color: rgba(255, 202, 202, 0.9);
}

body:not(.authPage) .widgetCalendarWeekday {
  color: var(--accent);
}

body:not(.authPage) .widgetCalendarDayCell {
  border-color: transparent;
  background: transparent;
  color: rgba(242, 240, 236, 0.84);
}

body:not(.authPage) .widgetCalendarDayCell.is-other {
  color: rgba(242, 240, 236, 0.28);
}

body:not(.authPage) .widgetCalendarDayCell.is-today {
  border-color: rgba(232, 207, 174, 0.22);
  background: var(--accent);
  color: #111111;
  box-shadow: none;
}

body:not(.authPage) .widgetCalendarDayCell.has-tasks {
  border-color: rgba(232, 207, 174, 0.18);
  background: rgba(232, 207, 174, 0.08);
}

body:not(.authPage) .widgetCalendarAgendaRow {
  border-bottom-color: var(--stroke);
}

body:not(.authPage) .widgetsEditFabRow {
  position: absolute;
  right: 28px;
  bottom: 24px;
}

body:not(.authPage) .widgetsEditFab {
  height: 44px;
  margin: 0;
  padding: 0 18px;
  border-radius: 13px;
}

body:not(.authPage) .btn:not(.callCtrlBtn):not(.callMiniBtn),
body:not(.authPage) .smallBtn {
  min-height: 34px;
  border: 1px solid var(--ui-btn-border);
  border-radius: 12px;
  background: var(--ui-btn-bg);
  color: rgba(242, 240, 236, 0.86);
  font-weight: 500;
  letter-spacing: 0;
  box-shadow: none;
}

body:not(.authPage) .btn:not(.callCtrlBtn):not(.callMiniBtn):hover,
body:not(.authPage) .smallBtn:hover {
  border-color: var(--ui-btn-hover-border);
  background: var(--ui-btn-hover-bg);
  color: rgba(242, 240, 236, 0.96);
  box-shadow: none;
  transform: none;
}

body:not(.authPage) .btn.primary:not(.callCtrlBtn):not(.callMiniBtn),
body:not(.authPage) .smallBtn.primary,
body:not(.authPage) .btn.btn--accent:not(.callCtrlBtn):not(.callMiniBtn) {
  border-color: var(--ui-primary-border);
  background: var(--ui-primary-bg);
  color: var(--accent-strong);
}

body:not(.authPage) .btn.primary:not(.callCtrlBtn):not(.callMiniBtn):hover,
body:not(.authPage) .smallBtn.primary:hover,
body:not(.authPage) .btn.btn--accent:not(.callCtrlBtn):not(.callMiniBtn):hover {
  border-color: var(--ui-primary-hover-border);
  background: var(--ui-primary-hover-bg);
}

body:not(.authPage) .btn.danger:not(.callCtrlBtn):not(.callMiniBtn),
body:not(.authPage) .smallBtn.danger,
body:not(.authPage) .btn.btn--danger:not(.callCtrlBtn):not(.callMiniBtn) {
  border-color: var(--ui-danger-border);
  background: var(--ui-danger-bg);
  color: rgba(255, 205, 205, 0.92);
}

body:not(.authPage) #tabFriends,
body:not(.authPage) #tabPending,
body:not(.authPage) #tabAdd {
  padding-top: 0;
}

body:not(.authPage) .friendsSearch {
  margin-bottom: 16px;
}

body:not(.authPage) #friendsList,
body:not(.authPage) #incomingList,
body:not(.authPage) #outgoingList {
  gap: 8px;
}

body:not(.authPage) #friendsList .row,
body:not(.authPage) #incomingList .row,
body:not(.authPage) #outgoingList .row {
  border-color: var(--stroke);
  background: #181818;
}

body:not(.authPage) .addToolCard,
body:not(.authPage) .split2 > div {
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: #181818;
  box-shadow: none;
}

body:not(.authPage) .addToolCard {
  padding: 18px;
}

body:not(.authPage) .sectionTitle {
  color: rgba(242, 240, 236, 0.7);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

body:not(.authPage) .rightTitleRow {
  align-items: center;
  gap: 8px;
}

body:not(.authPage) .rightTitleRow .hTitle {
  color: rgba(242, 240, 236, 0.7);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body:not(.authPage) #onlineCount {
  display: inline-flex;
  min-width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(242, 240, 236, 0.72);
  font-size: 12px;
  font-weight: 600;
}

body:not(.authPage) .rightSectionLabel {
  display: none;
}

body:not(.authPage) #activeNow,
body:not(.authPage) #offlineList {
  gap: 10px;
}

body:not(.authPage) #offlineList {
  display: none !important;
}

body:not(.authPage) #activeNow .presenceRow,
body:not(.authPage) #offlineList .presenceRow {
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  padding: 8px 10px;
  transform: none;
}

body:not(.authPage) #activeNow .presenceRow:hover {
  border-color: var(--stroke);
  background: rgba(255, 255, 255, 0.045);
  transform: none;
}

body:not(.authPage) #activeNow .presenceLeft {
  gap: 10px;
}

body:not(.authPage) #activeNow .presenceName {
  font-size: 14px;
}

body:not(.authPage) #activeNow .presenceState {
  margin-top: 1px;
  font-size: 12px;
}

body:not(.authPage) .serverMembersPanel {
  gap: 12px;
}

body:not(.authPage) .serverMemberRow,
body:not(.authPage) .serverMembersSearch {
  border-color: var(--stroke);
  background: #181818;
}

body:not(.authPage) .leftSidebarResizer,
body:not(.authPage) .rightSidebarResizer {
  width: 8px;
  opacity: 0;
}

body:not(.authPage) .leftSidebarResizer:hover,
body:not(.authPage) .rightSidebarResizer:hover {
  opacity: 1;
}

body:not(.authPage) .leftSidebarResizer::before,
body:not(.authPage) .rightSidebarResizer::before {
  width: 2px;
  height: 72px;
  background: rgba(232, 207, 174, 0.32);
  box-shadow: none;
}

body:not(.authPage) .midNavBtn {
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--stroke);
}

body:not(.authPage) .hint {
  color: rgba(242, 240, 236, 0.46);
}

body:not(.authPage) ::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

body:not(.authPage) ::-webkit-scrollbar-track {
  background: transparent;
}

body:not(.authPage) ::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
  background-color: rgba(255, 255, 255, 0.14);
}

body:not(.authPage) ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(232, 207, 174, 0.28);
}

@media (max-width: 1280px) {
  body:not(.authPage) .app:not(.wrap),
  body:not(.authPage) .appGrid {
    grid-template-columns:
      clamp(340px, var(--left-sidebar-width), 390px)
      minmax(0, 1fr)
      clamp(240px, var(--right-sidebar-width), 300px) !important;
  }
}

@media (max-width: 980px) {
  body:not(.authPage) .app:not(.wrap),
  body:not(.authPage) .appGrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body:not(.authPage) .right,
  body:not(.authPage) .rightCol {
    display: none !important;
  }
}

/* ALTARA PHASE 1.5 POLISH */
.altaraIcon {
  width: var(--icon-size, 18px);
  height: var(--icon-size, 18px);
  flex: 0 0 auto;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke, 2);
  stroke-linecap: round;
  stroke-linejoin: round;
}

body:not(.authPage) .btn,
body:not(.authPage) .icon-btn,
body:not(.authPage) .modalClose,
body:not(.authPage) .desktopWindowBtn,
body:not(.authPage) .midNavBtn,
body:not(.authPage) .msgActionBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body:not(.authPage) .btn > .altaraIcon,
body:not(.authPage) .icon-btn > .altaraIcon,
body:not(.authPage) .modalClose > .altaraIcon {
  --icon-size: 17px;
}

body:not(.authPage) .searchBox,
body:not(.authPage) .friendsSearch,
body:not(.authPage) .gifSearchField {
  position: relative;
}

body:not(.authPage) .searchIcon,
body:not(.authPage) .gifSearchIcon {
  position: absolute;
  left: 14px;
  top: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(242, 240, 236, 0.42);
  pointer-events: none;
  transform: translateY(-50%);
}

body:not(.authPage) .searchIcon .altaraIcon,
body:not(.authPage) .gifSearchIcon .altaraIcon {
  --icon-size: 16px;
  --icon-stroke: 1.9;
}

body:not(.authPage) .searchBox .input,
body:not(.authPage) .friendsSearch .input,
body:not(.authPage) .gifSearchField .input {
  padding-left: 40px !important;
}

body:not(.authPage) .searchBox:focus-within .searchIcon,
body:not(.authPage) .friendsSearch:focus-within .searchIcon,
body:not(.authPage) .gifSearchField:focus-within .gifSearchIcon {
  color: rgba(232, 207, 174, 0.78);
}

body:not(.authPage).desktop-titlebar-overlay .midNavButtons {
  left: calc(clamp(360px, var(--left-sidebar-width), 420px) + 16px) !important;
  top: 10px !important;
  height: 34px;
  gap: 4px !important;
  padding: 3px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px;
  background: rgba(18, 18, 18, 0.84) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 30px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(14px);
}

body:not(.authPage).desktop-titlebar-overlay .midNavBtn {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border: 0 !important;
  border-radius: 9px;
  background: transparent !important;
  color: rgba(242, 240, 236, 0.62);
  box-shadow: none !important;
}

body:not(.authPage).desktop-titlebar-overlay .midNavBtn .altaraIcon {
  --icon-size: 17px;
  --icon-stroke: 2.05;
}

body:not(.authPage).desktop-titlebar-overlay .midNavBtn:hover,
body:not(.authPage).desktop-titlebar-overlay .midNavBtn:focus-visible {
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(242, 240, 236, 0.9);
  transform: none;
}

body:not(.authPage).desktop-titlebar-overlay .midNavBtn:disabled,
body:not(.authPage).desktop-titlebar-overlay .midNavBtn[aria-disabled="true"] {
  color: rgba(242, 240, 236, 0.24);
  opacity: 1;
}

body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowControls {
  top: 10px;
  right: 12px;
  height: 34px;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  background: rgba(18, 18, 18, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 30px rgba(0, 0, 0, 0.22);
  overflow: visible;
  backdrop-filter: blur(14px);
}

body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn,
body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn.desktopWindowBtn--inbox {
  width: 30px;
  min-width: 30px;
  height: 28px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(242, 240, 236, 0.62);
}

body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn:hover,
body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn:focus-visible,
body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn--inbox.is-active {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(242, 240, 236, 0.92);
  transform: none;
  box-shadow: none;
}

body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn--close:hover,
body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn--close:focus-visible {
  background: rgba(208, 74, 74, 0.18);
  color: rgba(255, 222, 222, 0.98);
}

body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn__badge {
  top: 1px;
  right: 1px;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border: 1px solid rgba(16, 16, 16, 0.72);
  background: #e8cfae;
  color: #101010;
  font-size: 9px;
  font-weight: 700;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.32);
}

body:not(.authPage) #activeNow {
  gap: 8px;
}

body:not(.authPage) #activeNow .presenceRow {
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    #151515;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body:not(.authPage) #activeNow .presenceRow:hover {
  border-color: rgba(232, 207, 174, 0.18);
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.055), rgba(255, 255, 255, 0.014)),
    #171717;
}

body:not(.authPage) #activeNow .presenceLeft {
  min-width: 0;
  flex: 1 1 auto;
  gap: 10px;
}

body:not(.authPage) #activeNow .presenceAvatar {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #202020;
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.24);
}

body:not(.authPage) #activeNow .presenceAvatarFallback {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(232, 207, 174, 0.9);
  font-size: 14px;
  font-weight: 650;
}

body:not(.authPage) #activeNow .presenceText {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body:not(.authPage) #activeNow .presenceName {
  overflow: hidden;
  color: rgba(242, 240, 236, 0.94);
  font-size: 14px;
  font-weight: 560;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.authPage) #activeNow .presenceHandle {
  display: block;
  overflow: hidden;
  color: rgba(242, 240, 236, 0.42);
  font-size: 12px;
  font-weight: 450;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.authPage) #activeNow .presenceRight {
  flex: 0 0 auto;
}

body:not(.authPage) #activeNow .presenceState {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(242, 240, 236, 0.58);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: capitalize;
}

body:not(.authPage) #activeNow .presenceRow--online .presenceState {
  border-color: rgba(90, 226, 112, 0.18);
  color: rgba(185, 240, 193, 0.82);
}

body:not(.authPage) #activeNow .presenceRow--idle .presenceState {
  border-color: rgba(232, 207, 174, 0.2);
  color: rgba(232, 207, 174, 0.84);
}

body:not(.authPage) #activeNow .presenceRow--dnd .presenceState {
  border-color: rgba(224, 92, 92, 0.22);
  color: rgba(245, 185, 185, 0.84);
}

body:not(.authPage) .widgetCard[data-widget-id] .widgetCard__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

body:not(.authPage) .widgetCard[data-widget-id] .widgetCard__label::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: currentColor;
  opacity: 0.78;
  -webkit-mask: var(--widget-label-icon) center / contain no-repeat;
  mask: var(--widget-label-icon) center / contain no-repeat;
}

body:not(.authPage) .widgetCard[data-widget-id="checklist"] {
  --widget-label-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

body:not(.authPage) .widgetCard[data-widget-id="calendar"] {
  --widget-label-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
}

body:not(.authPage) .widgetCard[data-widget-id="notes"] {
  --widget-label-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v16H4z'/%3E%3Cpath d='M8 8h8'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='M8 16h5'/%3E%3C/svg%3E");
}

body:not(.authPage) .widgetCard[data-widget-id="call"] {
  --widget-label-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.08 4.18 2 2 0 0 1 4.06 2h3a2 2 0 0 1 2 1.72'/%3E%3C/svg%3E");
}

body:not(.authPage) .widgetCard[data-widget-id="online"] {
  --widget-label-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

body:not(.authPage) .widgetCard[data-widget-id="unread"] {
  --widget-label-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3C/svg%3E");
}

body:not(.authPage) .widgetToolIcon,
body:not(.authPage) .groupOrbPlusIcon,
body:not(.authPage) .serverPanelActionIcon,
body:not(.authPage) .serverCategoryCaretIcon,
body:not(.authPage) .serverQuickIcon,
body:not(.authPage) .serverChannelIcon,
body:not(.authPage) .serverChannelPrefixIcon,
body:not(.authPage) .serverDragGhostIcon,
body:not(.authPage) .mediaControlIcon,
body:not(.authPage) .systemEventIcon,
body:not(.authPage) .msgMenuIcon,
body:not(.authPage) .dmPreviewIcon,
body:not(.authPage) .dmAttachmentIcon,
body:not(.authPage) .msgAttachmentIcon,
body:not(.authPage) .msgActionIcon,
body:not(.authPage) .msgInlineIcon,
body:not(.authPage) .dmPendingIcon,
body:not(.authPage) .composerIcon,
body:not(.authPage) .gifFavoriteIcon,
body:not(.authPage) .dmItemRemoveIcon,
body:not(.authPage) .serverFolderIcon,
body:not(.authPage) .callShareMenu__itemIcon .altaraIcon,
body:not(.authPage) .widgetTodoIcon {
  --icon-size: 16px;
  --icon-stroke: 1.95;
}

body:not(.authPage) .callShareMenu__itemIcon,
body:not(.authPage) .serverChannelItem__icon,
body:not(.authPage) .serverQuickItem__icon,
body:not(.authPage) .dmPinPreview__icon,
body:not(.authPage) .dmAttachmentFileIcon,
body:not(.authPage) .dmPendingCard__fileIcon,
body:not(.authPage) .dmPendingAudioPreview__icon,
body:not(.authPage) .msg__fileIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body:not(.authPage) .callShareMenu__itemIcon {
  width: 20px;
  margin-right: 4px;
  opacity: 0.82;
}

body:not(.authPage) .msgMenu__item > span:last-child:has(.altaraIcon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(242, 240, 236, 0.48);
}

body:not(.authPage) .msgActionBtn .altaraIcon,
body:not(.authPage) .msgVideoBtn .altaraIcon,
body:not(.authPage) .msgAudioBtn .altaraIcon {
  margin: 0;
}

body:not(.authPage) .widgetCard__tools,
body:not(.authPage) .widgetResizeHandle {
  color: rgba(242, 240, 236, 0.62);
}

body:not(.authPage) .widgetCardTool,
body:not(.authPage) .widgetResizeHandle {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
}

body:not(.authPage) .widgetCardTool:hover,
body:not(.authPage) .widgetResizeHandle:hover {
  border-color: rgba(232, 207, 174, 0.22);
  background: rgba(232, 207, 174, 0.08);
  color: rgba(232, 207, 174, 0.94);
}

body:not(.authPage) .groupOrb--create .groupOrbPlus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body:not(.authPage) .groupOrb--create .groupOrbPlusIcon {
  --icon-size: 20px;
}

/* ALTARA FOCUSED TOP BAR / ICON FIX PASS */
body:not(.authPage) .altaraIcon,
body:not(.authPage) svg.altaraIcon {
  overflow: visible;
}

body.desktop-titlebar-overlay .desktopTitlebarDragRegion {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--desktop-titlebar-overlay-height, 40px);
  z-index: 2995;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  background: rgba(16, 16, 16, 0.96);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.025);
  pointer-events: none;
}

body.desktop-native-titlebar-overlay .desktopTitlebarDragRegion {
  pointer-events: auto;
  -webkit-app-region: drag;
}

body:not(.authPage) #midNavButtons,
body:not(.authPage).desktop-titlebar-overlay #midNavButtons,
body:not(.authPage):not(.desktop-titlebar-overlay) #midNavButtons {
  position: fixed !important;
  top: 8px !important;
  left: 12px !important;
  z-index: 3020 !important;
  display: inline-flex !important;
  width: auto;
  height: 28px;
  align-items: center;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-app-region: no-drag;
}

body:not(.authPage) #midNavButtons.hidden {
  display: inline-flex !important;
}

body:not(.authPage) #midNavButtons .midNavBtn,
body:not(.authPage).desktop-titlebar-overlay #midNavButtons .midNavBtn,
body:not(.authPage) .btn.midNavBtn,
body:not(.authPage) .arrowNavBtn {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: rgba(242, 240, 236, 0.58) !important;
  box-shadow: none !important;
  line-height: 0 !important;
  transform: none !important;
}

body:not(.authPage) #midNavButtons .midNavBtn:hover:not(:disabled),
body:not(.authPage) #midNavButtons .midNavBtn:focus-visible:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.075) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(242, 240, 236, 0.92) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

body:not(.authPage) #midNavButtons .midNavBtn:active:not(:disabled) {
  background: rgba(255, 255, 255, 0.085) !important;
}

body:not(.authPage) #midNavButtons .midNavBtn:disabled,
body:not(.authPage) #midNavButtons .midNavBtn[aria-disabled="true"] {
  color: rgba(242, 240, 236, 0.25) !important;
  opacity: 1 !important;
}

body:not(.authPage) #midNavButtons .midNavBtn__icon,
body:not(.authPage) #midNavButtons .arrowNavBtn__icon {
  width: 18px !important;
  height: 18px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

body:not(.authPage) #midNavButtons .altaraIcon {
  --icon-size: 18px;
  --icon-stroke: 2;
}

body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowControls {
  top: 8px;
  right: 12px;
  height: 28px;
  gap: 3px;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
  backdrop-filter: none;
}

body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn,
body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn.desktopWindowBtn--inbox {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(242, 240, 236, 0.58);
  box-shadow: none;
  line-height: 0;
}

body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn.desktopWindowBtn--inbox {
  margin-right: 4px;
}

body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn:hover,
body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn:focus-visible,
body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn--inbox.is-active {
  border-color: rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(242, 240, 236, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transform: none;
}

body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn:active {
  background: rgba(255, 255, 255, 0.085);
}

body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn--close:hover,
body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn--close:focus-visible {
  border-color: rgba(224, 92, 92, 0.16);
  background: rgba(224, 92, 92, 0.14);
  color: rgba(255, 222, 222, 0.96);
}

body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn .altaraIcon,
body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.95;
  margin: 0;
}

body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn__badge {
  top: -3px;
  right: -3px;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border: 1px solid #101010;
  background: #e8cfae;
  color: #101010;
  font-size: 9px;
  font-weight: 700;
  box-shadow: none;
}

body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn__iconRestore {
  display: none;
}

body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn.is-maximized .desktopWindowBtn__iconMax {
  display: none;
}

body:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn.is-maximized .desktopWindowBtn__iconRestore {
  display: block;
}

body:not(.authPage) .groupOrb .altaraIcon,
body:not(.authPage) .meCtrlBtn .altaraIcon,
body:not(.authPage) .searchIcon .altaraIcon,
body:not(.authPage) .gifSearchIcon .altaraIcon,
body:not(.authPage) .widgetCardTool .altaraIcon,
body:not(.authPage) .widgetResizeHandle .altaraIcon,
body:not(.authPage) .msgActionBtn .altaraIcon,
body:not(.authPage) .callShareMenu__itemIcon .altaraIcon,
body:not(.authPage) .serverChannelItem__icon .altaraIcon,
body:not(.authPage) .serverChannelsPanel__actions .altaraIcon,
body:not(.authPage) .serverChannelsGroup__add .altaraIcon,
body:not(.authPage) .serverChannelsCategory__add .altaraIcon {
  margin: 0;
}

body:not(.authPage) .groupOrb,
body:not(.authPage) .meCtrlBtn,
body:not(.authPage) .widgetCardTool,
body:not(.authPage) .widgetResizeHandle,
body:not(.authPage) .msgActionBtn,
body:not(.authPage) .serverChannelsGroup__add,
body:not(.authPage) .serverChannelsCategory__add {
  line-height: 0;
}

/* ALTARA LEFT RAIL POLISH PASS */
body:not(.authPage) .panel.left {
  --left-rail-column-width: 82px;
  grid-template-columns: var(--left-rail-column-width) minmax(0, 1fr);
}

body:not(.authPage) .leftDockGroups {
  position: relative;
  border-right: 1px solid rgba(255, 255, 255, 0.075) !important;
  background:
    linear-gradient(180deg, rgba(16, 16, 16, 0.98), rgba(13, 13, 13, 0.98)) !important;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.3);
}

body:not(.authPage) .leftDockGroups::before {
  content: "";
  position: absolute;
  top: var(--desktop-titlebar-overlay-height, 40px);
  left: 14px;
  right: 14px;
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  pointer-events: none;
}

body:not(.authPage) .groupsRail {
  --rail-orb-size: 52px;
  --rail-home-size: 54px;
  --rail-gap: 13px;
  width: 100%;
  height: 100%;
  gap: var(--rail-gap);
  align-items: center;
  padding: calc(var(--desktop-titlebar-overlay-height, 40px) + 18px) 0 14px;
  scroll-padding-top: calc(var(--desktop-titlebar-overlay-height, 40px) + 18px);
}

body:not(.authPage) .groupsRail > * {
  flex: 0 0 auto;
}

body:not(.authPage) .groupsRail .hint {
  width: calc(var(--left-rail-column-width) - 18px);
  color: rgba(242, 240, 236, 0.38);
  font-size: 11px;
  line-height: 1.25;
}

body:not(.authPage) .groupOrb,
body:not(.authPage) .groupOrb--server,
body:not(.authPage) .groupOrb--dm,
body:not(.authPage) .groupOrb--create,
body:not(.authPage) .groupOrb--folder {
  width: var(--rail-orb-size);
  min-width: var(--rail-orb-size);
  height: var(--rail-orb-size);
  min-height: var(--rail-orb-size);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.07);
  background: #181818;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body:not(.authPage) .groupOrb--server,
body:not(.authPage) .groupOrb--dm,
body:not(.authPage) .groupOrb--create {
  border-radius: 999px;
}

body:not(.authPage) .groupOrb--folder {
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    #181818;
}

body:not(.authPage) .groupOrb--app-home {
  width: var(--rail-home-size);
  min-width: var(--rail-home-size);
  height: var(--rail-home-size);
  min-height: var(--rail-home-size);
  border-radius: 16px;
  border-color: rgba(232, 207, 174, 0.2);
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.07), rgba(255, 255, 255, 0.012)),
    #181818;
}

body:not(.authPage) .groupOrb:hover,
body:not(.authPage) .groupOrb--folder:hover,
body:not(.authPage) .groupOrb--folder.is-open,
body:not(.authPage) .groupOrb--app-home:hover {
  border-color: rgba(232, 207, 174, 0.24);
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.075), rgba(255, 255, 255, 0.014)),
    #202020;
  transform: translateY(-1px);
}

body:not(.authPage) .groupOrb img,
body:not(.authPage) .groupOrbAppLogoImg,
body:not(.authPage) .groupOrbDragGhost__orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body:not(.authPage) .groupOrbAppLogo {
  width: 100%;
  height: 100%;
  border-radius: 14px;
}

body:not(.authPage) .groupOrbFallback {
  font-size: 15px;
  font-weight: 650;
  color: rgba(242, 240, 236, 0.82);
}

body:not(.authPage) .groupOrbFolderWrap,
body:not(.authPage) .groupOrbFolderStack {
  width: 100%;
  gap: 9px;
}

body:not(.authPage) .groupOrbFolderPreview {
  width: 34px;
  height: 34px;
  gap: 4px;
}

body:not(.authPage) .groupOrbFolderPreviewItem {
  width: 15px;
  height: 15px;
  border-radius: 6px;
  border-color: rgba(255, 255, 255, 0.12);
  background: #202020;
  box-shadow: none;
}

body:not(.authPage) .groupOrbFolderPreviewFallback {
  font-size: 9px;
  font-weight: 700;
}

body:not(.authPage) .groupOrbFolderPocket,
body:not(.authPage) .groupOrbFolderIncoming {
  display: none;
}

body:not(.authPage) .groupOrbFolderStack::before {
  width: 1px;
  top: -4px;
  bottom: 4px;
  background: rgba(232, 207, 174, 0.16);
}

body:not(.authPage) .groupOrbRailDivider {
  width: 28px;
  height: 1px;
  margin: 2px 0 1px;
  background: rgba(255, 255, 255, 0.075);
}

body:not(.authPage) .groupOrb--server.is-active::before,
body:not(.authPage) .groupOrb--folder.is-active::before,
body:not(.authPage) .groupOrb--dm.is-active::before,
body:not(.authPage) .groupOrb--app-home.is-active::before {
  left: calc((var(--left-rail-column-width) - var(--rail-orb-size)) / -2 + 7px);
  width: 3px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(232, 207, 174, 0.95), rgba(198, 169, 132, 0.86));
  box-shadow: none;
}

body:not(.authPage) .groupOrb--app-home.is-active::before {
  left: calc((var(--left-rail-column-width) - var(--rail-home-size)) / -2 + 7px);
  height: 26px;
}

body:not(.authPage) .groupOrb.is-active {
  border-color: rgba(232, 207, 174, 0.34);
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.09), rgba(255, 255, 255, 0.012)),
    #1b1b1b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 0 0 1px rgba(232, 207, 174, 0.045);
}

body:not(.authPage) .groupOrb--server.has-notification:not(.is-active)::before,
body:not(.authPage) .groupOrb--folder.has-notification:not(.is-active)::before,
body:not(.authPage) .groupOrb--dm.has-notification:not(.is-active)::before {
  left: calc((var(--left-rail-column-width) - var(--rail-orb-size)) / -2 + 8px);
  width: 5px;
  height: 5px;
  background: rgba(232, 207, 174, 0.92);
}

body:not(.authPage) .groupOrbUnreadBadge {
  top: -3px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-width: 1px;
  border-color: #0d0d0d;
  font-size: 10px;
  font-weight: 700;
}

body:not(.authPage) .groupOrb--create {
  margin-top: auto;
  margin-bottom: 0;
  color: rgba(232, 207, 174, 0.82);
}

body:not(.authPage) .groupOrb--create:hover {
  color: rgba(232, 207, 174, 0.96);
}

body:not(.authPage) .groupOrb--create .groupOrbPlusIcon {
  --icon-size: 19px;
  --icon-stroke: 2;
}

body:not(.authPage) .leftDockDms {
  padding-left: 10px;
}

body:not(.authPage) .sidebarBrand {
  padding-left: 18px;
}

@media (max-width: 1280px) {
  body:not(.authPage) .panel.left {
    --left-rail-column-width: 80px;
  }

  body:not(.authPage) .groupsRail {
    --rail-orb-size: 50px;
    --rail-home-size: 52px;
  }
}

/* ALTARA SECONDARY SIDEBAR HEADER POSITION FIX */
body:not(.authPage) .panel.left {
  --secondary-sidebar-header-height: var(--desktop-titlebar-overlay-height, 40px);
  grid-template-rows: var(--secondary-sidebar-header-height) 64px minmax(0, 1fr) auto;
}

body:not(.authPage) .sidebarBrand {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 3001;
  height: var(--secondary-sidebar-header-height);
  min-height: 0;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  background: rgba(16, 16, 16, 0.96);
  pointer-events: none;
  -webkit-app-region: no-drag;
}

body:not(.authPage) .sidebarBrand__mark {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 14px;
}

body:not(.authPage) .sidebarBrand__name {
  font-size: 15px;
  line-height: 1;
}

body:not(.authPage) .left .searchBox {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  padding: 12px 16px 10px 18px;
}

body:not(.authPage) .left .searchBox .input {
  height: 40px;
}

/* ALTARA SECONDARY SIDEBAR TINY CLEANUP */
body:not(.authPage) .sidebarBrand {
  display: none !important;
}

body:not(.authPage) .panel.left {
  grid-template-rows: var(--desktop-titlebar-overlay-height, 40px) 62px minmax(0, 1fr) auto;
}

body:not(.authPage) .left .searchBox {
  grid-row: 2;
  padding: 10px 16px 12px 18px;
}

body:not(.authPage) .left .searchBox .searchIcon {
  left: 32px;
  top: 30px;
  transform: translateY(-50%);
}

body:not(.authPage) .left .searchBox .input {
  height: 40px;
  padding-left: 40px !important;
}

/* ALTARA ACTIVE NOW + USER DOCK POPOUT POLISH */
body:not(.authPage) .panel.right {
  border-left: 1px solid rgba(255, 255, 255, 0.065);
}

body:not(.authPage) .rightTop {
  min-height: 88px;
  padding: 48px 18px 12px;
}

body:not(.authPage) .rightBody {
  padding: 0 14px 18px;
}

body:not(.authPage) .rightTitleRow {
  min-height: 28px;
}

body:not(.authPage) .rightTitleRow .hTitle {
  color: rgba(242, 240, 236, 0.82);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
}

body:not(.authPage) #onlineCount {
  height: 20px;
  min-width: 20px;
  border: 1px solid rgba(232, 207, 174, 0.14);
  background: rgba(232, 207, 174, 0.08);
  color: rgba(232, 207, 174, 0.86);
}

body:not(.authPage) #activeNow {
  gap: 9px;
}

body:not(.authPage) #activeNow .presenceRow {
  min-height: 68px;
  padding: 11px;
  border-color: rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012) 56%),
    #171717;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 24px rgba(0, 0, 0, 0.16);
}

body:not(.authPage) #activeNow .presenceRow::before {
  content: "";
  width: 3px;
  align-self: stretch;
  flex: 0 0 3px;
  border-radius: 999px;
  background: rgba(232, 207, 174, 0.42);
  opacity: 0.72;
}

body:not(.authPage) #activeNow .presenceRow:hover {
  border-color: rgba(232, 207, 174, 0.18);
  background:
    linear-gradient(135deg, rgba(232, 207, 174, 0.07), rgba(255, 255, 255, 0.014) 56%),
    #1a1a1a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 26px rgba(0, 0, 0, 0.2);
}

body:not(.authPage) #activeNow .presenceLeft {
  gap: 11px;
}

body:not(.authPage) #activeNow .presenceAvatar {
  width: 42px;
  height: 42px;
  border-color: rgba(255, 255, 255, 0.11);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.26);
}

body:not(.authPage) #activeNow .presenceName {
  font-size: 14px;
  font-weight: 620;
}

body:not(.authPage) #activeNow .presenceHandle {
  margin-top: 1px;
  font-size: 11px;
  color: rgba(242, 240, 236, 0.44);
}

body:not(.authPage) #activeNow .presenceState {
  min-height: 23px;
  padding: 4px 8px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
  font-size: 10.5px;
}

body:not(.authPage) #activeNow .hint {
  padding: 18px 12px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 16px;
  background: #151515;
  text-align: center;
}

body:not(.authPage) #meProfileCard {
  cursor: pointer;
}

body:not(.authPage) #meProfileCard:focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.3);
  box-shadow:
    0 0 0 3px rgba(232, 207, 174, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body:not(.authPage) #meProfileCard #meStatusBtn {
  display: none !important;
  width: 36px;
  max-width: 36px;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 1px;
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(12, 12, 12, 0.38);
  color: rgba(242, 240, 236, 0.62);
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

#meProfileCard #meStatusLabel {
  display: none;
}

body:not(.authPage) #meProfileCard #meStatusBtn::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-top: -2px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  opacity: 0.72;
  transform: rotate(45deg);
}

body:not(.authPage) #meProfileCard #meStatusBtn:hover,
body:not(.authPage) #meProfileCard #meStatusBtn:focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.2);
  background: rgba(232, 207, 174, 0.08);
  color: rgba(242, 240, 236, 0.92);
}

body:not(.authPage) #meProfileCard #meStatusBtn .dotMini {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.035);
}

#meStatusLabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meProfilePopout {
  position: fixed;
  left: var(--me-popout-left, 92px);
  bottom: var(--me-popout-bottom, 92px);
  z-index: 3050;
  width: var(--me-popout-width, 310px);
  max-width: calc(100vw - 24px);
  max-height: min(560px, calc(100vh - 28px));
  overflow: auto;
  display: none;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
    #151515;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  color: rgba(242, 240, 236, 0.9);
}

.meProfilePopout.is-floating {
  top: var(--me-popout-top, 92px);
  bottom: auto;
}

.meProfilePopout.is-open {
  display: block;
}

.meProfilePopout__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.meProfilePopout__avatar {
  --status-dot-size: 11px;
  --status-dot-inset: 1px;
  position: relative;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  background: #202020;
}

.meProfilePopout__avatar img,
.meProfilePopout__avatar video {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.meProfilePopout__avatarFallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background:
    radial-gradient(circle at 30% 18%, rgba(232, 207, 174, 0.18), transparent 36%),
    linear-gradient(160deg, rgba(44, 41, 36, 0.92), rgba(18, 18, 18, 0.96));
  color: rgba(232, 207, 174, 0.92);
  font-size: 22px;
  font-weight: 700;
}

.meProfilePopout__identity {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.meProfilePopout__name {
  overflow: hidden;
  color: rgba(242, 240, 236, 0.96);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meProfilePopout__handle,
.meProfilePopout__meta,
.meProfilePopout__bio {
  color: rgba(242, 240, 236, 0.52);
  font-size: 12px;
  line-height: 1.4;
}

.meProfilePopout__statusLine {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(242, 240, 236, 0.72);
  font-size: 12px;
}

.meProfilePopout__about {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.028);
}

.meProfilePopout__sectionLabel {
  margin-bottom: 6px;
  color: rgba(242, 240, 236, 0.48);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.meProfilePopout__statusGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.meProfilePopout__statusBtn,
.meProfilePopout__action {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(242, 240, 236, 0.72);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.meProfilePopout__statusBtn:hover,
.meProfilePopout__action:hover,
.meProfilePopout__statusBtn:focus-visible,
.meProfilePopout__action:focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.2);
  background: rgba(232, 207, 174, 0.075);
  color: rgba(242, 240, 236, 0.92);
}

.meProfilePopout__statusBtn.is-active {
  border-color: rgba(232, 207, 174, 0.24);
  background: rgba(232, 207, 174, 0.11);
  color: rgba(232, 207, 174, 0.94);
}

.meProfilePopout__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.meProfilePopout .dotMini {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
}

/* ALTARA profile preview popout */
.meProfilePopout {
  width: var(--me-popout-width, 260px);
  max-height: var(--me-popout-max-height, calc(100vh - 24px));
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  border-color: rgba(255, 255, 255, 0.095);
  border-radius: 20px;
  background: #151515;
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.meProfilePopout__scroll {
  max-height: var(--me-popout-max-height, min(452px, calc(100vh - 28px)));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 207, 174, 0.24) transparent;
}

.meProfilePopout__banner {
  position: relative;
  height: 72px;
  min-height: 72px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  background:
    radial-gradient(circle at 22% 10%, rgba(232, 207, 174, 0.18), transparent 34%),
    linear-gradient(135deg, #24211d 0%, #171717 54%, #101010 100%);
}

.meProfilePopout__banner .profileBannerMedia,
.meProfilePopout__banner.has-banner-media img,
.meProfilePopout__banner.has-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.meProfilePopout__banner.has-banner-media::after,
.meProfilePopout__banner.has-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.38));
}

.meProfilePopout__bannerSheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent 42%, rgba(232, 207, 174, 0.055));
}

.meProfilePopout__profile {
  position: relative;
  display: grid;
  min-height: 0;
  gap: 8px;
  margin-top: -29px;
  overflow: hidden;
  padding: 0 14px 8px;
}

.meProfilePopout__head {
  display: grid;
  align-items: start;
  gap: 7px;
  min-height: 0;
}

.meProfilePopout__avatar {
  width: 58px;
  height: 58px;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #151515;
  border-radius: 19px;
  background: #202020;
  color: inherit;
  cursor: pointer;
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.38),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.meProfilePopout__avatar:hover,
.meProfilePopout__avatar:focus-visible {
  border-color: rgba(232, 207, 174, 0.34);
}

.meProfilePopout__avatarFallback {
  font-size: 22px;
}

.meProfilePopout__identity {
  min-width: 0;
  margin-top: 1px;
  padding-bottom: 0;
  display: grid;
  gap: 3px;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 2px 4px;
  margin-left: -4px;
}

.meProfilePopout__identity:hover,
.meProfilePopout__identity:focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.14);
  background: rgba(232, 207, 174, 0.055);
}

.meProfilePopout__identity:hover .meProfilePopout__name,
.meProfilePopout__identity:focus-visible .meProfilePopout__name {
  color: rgba(242, 240, 236, 1);
}

.meProfilePopout__name {
  font-size: 16px;
  letter-spacing: 0;
}

.meProfilePopout__handle {
  color: rgba(242, 240, 236, 0.56);
}

.meProfilePopout__body {
  min-height: 0;
  display: grid;
  gap: 7px;
  overflow: hidden;
}

.meProfilePopout__statusLine {
  width: 100%;
  min-height: 30px;
  justify-content: space-between;
  margin-top: 0;
  padding: 5px 7px 5px 9px;
}

.meProfilePopout__statusText {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  padding: 0 7px;
  margin-left: -4px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.meProfilePopout__statusText:hover,
.meProfilePopout__statusText:focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.14);
  background: rgba(232, 207, 174, 0.065);
  color: rgba(242, 240, 236, 0.94);
}

.meProfilePopout__statusText--readonly {
  cursor: default;
}

.meProfilePopout__statusText--readonly:hover,
.meProfilePopout__statusText--readonly:focus-visible {
  border-color: transparent;
  background: transparent;
  color: inherit;
}

.meProfilePopout__statusText [data-me-popout-status-label] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meProfilePopout__statusAction,
.meProfilePopout__subAction {
  min-height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(232, 207, 174, 0.86);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.meProfilePopout__statusAction {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-color: rgba(232, 207, 174, 0.15);
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.075), rgba(232, 207, 174, 0.03));
  color: rgba(232, 207, 174, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.meProfilePopout__statusAction::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.72;
  transform: rotate(45deg);
}

.meProfilePopout__subAction {
  width: fit-content;
  padding: 0 10px;
}

.meProfilePopout__statusAction:hover,
.meProfilePopout__subAction:hover,
.meProfilePopout__statusAction:focus-visible,
.meProfilePopout__subAction:focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.22);
  background: rgba(232, 207, 174, 0.08);
  color: rgba(242, 240, 236, 0.94);
}

.meProfilePopout__meta {
  width: fit-content;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.028);
}

.meProfilePopout__about,
.meProfilePopout__widgets {
  margin-top: 0;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}

.meProfilePopout__sectionTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.meProfilePopout__sectionLabel {
  margin-bottom: 0;
}

.meProfilePopout__about .meProfilePopout__sectionLabel {
  margin-bottom: 4px;
}

.meProfilePopout__sectionCount {
  min-width: 22px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(232, 207, 174, 0.16);
  border-radius: 999px;
  color: rgba(232, 207, 174, 0.88);
  font-size: 10px;
  font-weight: 750;
}

.meProfilePopout__bio {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.meProfilePopout__widgetList {
  display: grid;
  gap: 6px;
}

.meProfilePopout__widgetCard {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 13px;
  background: rgba(12, 12, 12, 0.36);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.meProfilePopout__widgetCard:hover,
.meProfilePopout__widgetCard:focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.18);
  background: rgba(232, 207, 174, 0.055);
}

.meProfilePopout__widgetMedia {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 10px;
  background: #202020;
  color: rgba(232, 207, 174, 0.92);
  font-size: 15px;
  font-weight: 750;
}

.meProfilePopout__widgetMedia img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.meProfilePopout__widgetBody {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.meProfilePopout__widgetType,
.meProfilePopout__widgetMeta {
  overflow: hidden;
  color: rgba(242, 240, 236, 0.48);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.meProfilePopout__widgetMeta {
  color: rgba(242, 240, 236, 0.52);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.meProfilePopout__widgetName {
  overflow: hidden;
  color: rgba(242, 240, 236, 0.9);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meProfilePopout__emptyPreview {
  display: grid;
  gap: 6px;
}

.meProfilePopout__emptyTitle {
  color: rgba(242, 240, 236, 0.58);
  font-size: 12px;
  line-height: 1.45;
}

.meProfilePopout__actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 0;
  padding: 9px 12px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
    #151515;
}

.meProfilePopout__action {
  min-width: 0;
  min-height: 33px;
  justify-content: flex-start;
  padding: 0 9px;
}

.meProfilePopout__action--primary {
  grid-column: 1 / -1;
  justify-content: center;
  border-color: rgba(232, 207, 174, 0.16);
  background: rgba(232, 207, 174, 0.07);
  color: rgba(242, 240, 236, 0.9);
}

.meProfilePopout__actionIcon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
}

.meProfilePopoutIcon {
  width: 16px;
  height: 16px;
  stroke-width: 1.9;
}

/* ALTARA full profile modal */
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) {
  z-index: 3060;
  padding: 22px;
  background: rgba(5, 5, 5, 0.72) !important;
  backdrop-filter: blur(10px) !important;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardCard {
  width: min(920px, calc(100vw - 44px));
  max-width: min(920px, calc(100vw - 44px));
  height: min(700px, calc(100vh - 44px));
  max-height: calc(100vh - 44px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  background: #101010;
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.64),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardCloseBtn {
  top: 14px;
  right: 14px;
  z-index: 12;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(18, 18, 18, 0.82);
  color: rgba(242, 240, 236, 0.8);
  box-shadow: none;
  backdrop-filter: blur(10px);
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardCloseBtn:hover,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardCloseBtn:focus-visible {
  border-color: rgba(232, 207, 174, 0.22);
  background: rgba(32, 32, 32, 0.92);
  color: rgba(242, 240, 236, 0.96);
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardSurface {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(270px, 300px) minmax(0, 1fr);
  background: #101010;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardOverview {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.065);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
    #151515;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 207, 174, 0.24) transparent;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardBanner {
  position: relative;
  height: 104px;
  aspect-ratio: auto;
  padding: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  background:
    radial-gradient(circle at 24% 8%, rgba(232, 207, 174, 0.16), transparent 34%),
    linear-gradient(135deg, #24211d 0%, #171717 54%, #101010 100%);
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardBanner .profileBannerMedia,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardBanner.has-banner-media img,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardBanner.has-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardBanner.has-banner-media::after,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardBanner.has-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.42));
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardBody {
  padding: 0 18px 18px;
  display: grid;
  gap: 14px;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardIdentity {
  display: grid;
  gap: 12px;
  margin-top: -38px;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardAvatar {
  width: 82px;
  height: 82px;
  border: 3px solid #151515;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardAvatarMedia,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardAvatar .profileAvatarMediaClip,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardAvatar img {
  border-radius: 50%;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardAvatarStatusDot {
  --status-dot-size: 15px;
  --status-dot-inset: 3px;
  border-color: #151515;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardIdentityMeta {
  display: grid;
  gap: 7px;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardBadgeRow {
  gap: 7px;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardName {
  color: rgba(242, 240, 236, 0.96);
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: 0;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardHandle,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardPronouns {
  color: rgba(242, 240, 236, 0.58);
  font-size: 13px;
  line-height: 1.35;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardStatus,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardRelation {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(242, 240, 236, 0.68);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardStatus::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(242, 240, 236, 0.36);
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardStatus[data-status="online"]::before { background: var(--ok); }
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardStatus[data-status="idle"]::before { background: var(--warn); }
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardStatus[data-status="dnd"]::before { background: var(--bad); }
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardStatus[data-status="invisible"]::before,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardStatus[data-status="offline"]::before { background: rgba(242, 240, 236, 0.36); }

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardRelation {
  border-color: rgba(232, 207, 174, 0.16);
  background: rgba(232, 207, 174, 0.065);
  color: rgba(232, 207, 174, 0.9);
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardBio,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardFact,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardMediaCard,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardSharedCard,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardEmptyState,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetCard {
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.012)),
    #181818;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardBio {
  min-height: 58px;
  padding: 12px;
  border-radius: 15px;
  color: rgba(242, 240, 236, 0.76);
  font-size: 13px;
  line-height: 1.45;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardSection {
  gap: 9px;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardSection__title,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardFact__label,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardPanelEyebrow {
  color: rgba(242, 240, 236, 0.44);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardFacts {
  grid-template-columns: 1fr;
  gap: 8px;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardFact {
  padding: 10px 11px;
  border-radius: 13px;
  gap: 3px;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardFact__value {
  color: rgba(242, 240, 236, 0.86);
  font-size: 13px;
  font-weight: 550;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardActions {
  gap: 8px;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardActions .btn {
  min-width: 0;
  min-height: 36px;
  flex: 1 1 0;
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(242, 240, 236, 0.76);
  font-size: 12px;
  font-weight: 650;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardActions .btn.primary {
  border-color: rgba(232, 207, 174, 0.18);
  background: rgba(232, 207, 174, 0.075);
  color: rgba(242, 240, 236, 0.92);
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) #btnUserCardOpenProfile {
  display: inline-flex;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardPanelsArea {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% -12%, rgba(232, 207, 174, 0.07), transparent 36%),
    #101010;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardTabs {
  height: 58px;
  align-items: flex-end;
  gap: 22px;
  padding: 0 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
  background: rgba(16, 16, 16, 0.94);
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardTab {
  padding: 0 0 15px;
  color: rgba(242, 240, 236, 0.5);
  font-size: 14px;
  font-weight: 500;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardTab:hover {
  color: rgba(242, 240, 236, 0.84);
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardTab.is-active {
  color: rgba(242, 240, 236, 0.96);
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardTab.is-active::after {
  height: 2px;
  background: rgba(232, 207, 174, 0.94);
  box-shadow: none;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardPanels {
  padding: 22px 24px 24px;
  overflow: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 207, 174, 0.24) transparent;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardPanel {
  gap: 16px;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardPanelTitle {
  color: rgba(242, 240, 236, 0.94);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: 0;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardPanelText,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetsHint,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardMediaSubtitle,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardSharedText,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardEmptyState span {
  color: rgba(242, 240, 236, 0.56);
  font-size: 13px;
  line-height: 1.45;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetsGrid {
  gap: 14px;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetCard {
  padding: 15px;
  border-radius: 17px;
  gap: 14px;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetTitle,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardSharedTitle,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardMediaTitle,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardEmptyState strong {
  color: rgba(242, 240, 236, 0.92);
  font-weight: 650;
  letter-spacing: 0;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetTitle {
  font-size: 18px;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetBadge,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardChip {
  min-height: 24px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(242, 240, 236, 0.66);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetBadge[data-status="favorite"],
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetBadge[data-status="current"],
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetBadge[data-status="wishlist"],
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetBadge[data-status="completed"] {
  border-color: rgba(232, 207, 174, 0.16);
  background: rgba(232, 207, 174, 0.065);
  color: rgba(232, 207, 174, 0.88);
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetBadge[data-status="dropped"] {
  border-color: rgba(232, 132, 132, 0.2);
  background: rgba(232, 132, 132, 0.07);
  color: rgba(242, 205, 205, 0.84);
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetBtn,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetItemActionBtn,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetMenuTrigger {
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(242, 240, 236, 0.74);
  font-size: 12px;
  font-weight: 650;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetAddBtn,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetsTopBar > .userCardWidgetBtn {
  border-color: rgba(232, 207, 174, 0.18);
  background: rgba(232, 207, 174, 0.075);
  color: rgba(242, 240, 236, 0.92);
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetBtn:hover,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetBtn:focus-visible,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetItemActionBtn:hover,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetItemActionBtn:focus-visible,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetMenuTrigger:hover,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetMenuTrigger:focus-visible,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetMenu[open] > .userCardWidgetMenuTrigger {
  border-color: rgba(232, 207, 174, 0.24);
  background: rgba(232, 207, 174, 0.09);
  color: rgba(242, 240, 236, 0.95);
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetItemActionBtn.is-danger,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetMenuItem.is-danger {
  color: rgba(242, 174, 174, 0.9);
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetItemsArea {
  max-height: none;
  gap: 12px;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetItem {
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 15px;
  background: rgba(12, 12, 12, 0.42);
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetFeatured {
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.045), rgba(255, 255, 255, 0.014)),
    rgba(12, 12, 12, 0.46);
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetItemMedia {
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: #202020;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetFeatured .userCardWidgetItemMedia {
  height: 150px;
  min-height: 150px;
  max-height: 150px;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetItemTitle {
  color: rgba(242, 240, 236, 0.9);
  font-weight: 650;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetItemNote,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetItemMeta,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardTimelineMeta,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardTimelineText {
  color: rgba(242, 240, 236, 0.62);
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardTimelineItem,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardServerItem {
  border-color: rgba(255, 255, 255, 0.065);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.028);
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardTimelineDot {
  background: rgba(232, 207, 174, 0.9);
  box-shadow: 0 0 0 5px rgba(232, 207, 174, 0.09);
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardTimelineKind {
  background: rgba(232, 207, 174, 0.07);
  color: rgba(232, 207, 174, 0.88);
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardMediaPreview,
#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardServerOrb {
  border-color: rgba(255, 255, 255, 0.065);
  background: #202020;
}

#userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardEmptyState {
  padding: 18px;
  border-radius: 17px;
}

@media (max-width: 900px) {
  #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardCard {
    width: min(720px, calc(100vw - 24px));
    max-width: min(720px, calc(100vw - 24px));
    height: min(780px, calc(100vh - 24px));
    max-height: calc(100vh - 24px);
  }

  #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardSurface {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardOverview {
    max-height: min(365px, 46vh);
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
  }
}

@media (max-width: 560px) {
  #userCardModal.userCardModal--overlay:not(.userCardModal--preview) {
    padding: 10px;
  }

  #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardCard {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
  }

  #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardTabs {
    gap: 18px;
    padding: 0 16px;
    overflow-x: auto;
  }

  #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardPanels {
    padding: 18px 16px;
  }

  #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardName {
    font-size: 24px;
  }

  #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetTop,
  #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetsTopBar {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ALTARA Settings redesign */
#profileOverlay.settingsOverlay {
  --settings-bg: #101010;
  --settings-panel: #151515;
  --settings-surface: #181818;
  --settings-surface-2: #1c1c1c;
  --settings-row: rgba(255, 255, 255, 0.035);
  --settings-row-hover: rgba(232, 207, 174, 0.07);
  --settings-border: rgba(255, 255, 255, 0.075);
  --settings-border-strong: rgba(255, 255, 255, 0.115);
  --settings-text: rgba(242, 240, 236, 0.94);
  --settings-soft: rgba(242, 240, 236, 0.64);
  --settings-muted: rgba(242, 240, 236, 0.44);
  --settings-accent: #e8cfae;
  --settings-accent-soft: rgba(232, 207, 174, 0.11);
  --settings-accent-border: rgba(232, 207, 174, 0.28);
  --settings-danger: #e58b8b;
  padding: 0;
  place-items: center;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(10px);
}

#profileOverlay.settingsOverlay .settingsCard {
  width: min(1440px, calc(100vw - 4px));
  height: min(900px, calc(100vh - 4px));
  max-height: calc(100vh - 4px);
  grid-template-columns: 312px minmax(0, 1fr);
  border: 1px solid var(--settings-border-strong);
  border-radius: 10px;
  background:
    radial-gradient(circle at 86% 0%, rgba(232, 207, 174, 0.05), transparent 32%),
    var(--settings-bg);
  box-shadow:
    0 34px 120px rgba(0, 0, 0, 0.66),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--settings-text);
  font-family: "Bricolage Grotesque", var(--font-ui);
}

#profileOverlay.settingsOverlay .settingsSidebar {
  padding: 24px 20px 18px;
  gap: 16px;
  border-right: 1px solid var(--settings-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
    #151515;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 207, 174, 0.24) transparent;
}

#profileOverlay.settingsOverlay .settingsSidebarUser {
  min-height: 78px;
  padding: 14px;
  gap: 12px;
  border: 1px solid var(--settings-border);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    var(--settings-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#profileOverlay.settingsOverlay .settingsSidebarAvatar {
  width: 44px;
  height: 44px;
  border-color: rgba(255, 255, 255, 0.11);
  background: #202020;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
}

#profileOverlay.settingsOverlay .settingsSidebarName {
  color: var(--settings-text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}

#profileOverlay.settingsOverlay .settingsSidebarTag {
  color: var(--settings-soft);
  font-size: 12px;
  font-weight: 500;
}

#profileOverlay.settingsOverlay .settingsSearchWrap {
  position: relative;
}

#profileOverlay.settingsOverlay .settingsSearchWrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 13px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  opacity: 0.58;
  transform: translateY(-50%);
  background: var(--settings-soft);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

#profileOverlay.settingsOverlay .settingsSearchInput {
  height: 38px;
  padding: 0 38px 0 12px;
  border-color: var(--settings-border);
  border-radius: 8px;
  background: #101010;
  color: var(--settings-text);
  font-size: 13px;
  font-weight: 500;
}

#profileOverlay.settingsOverlay .settingsSearchInput::placeholder {
  color: rgba(242, 240, 236, 0.42);
}

#profileOverlay.settingsOverlay .settingsSidebarSection {
  gap: 8px;
  padding-bottom: 12px;
}

#profileOverlay.settingsOverlay .settingsSidebarSection + .settingsSidebarSection {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.065);
}

#profileOverlay.settingsOverlay .settingsSidebarSection--logout {
  margin-top: auto;
  padding-top: 16px;
}

#profileOverlay.settingsOverlay .settingsGroupLabel {
  margin: 0 0 5px;
  padding: 0 2px;
  color: var(--settings-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#profileOverlay.settingsOverlay .settingsNav {
  gap: 4px;
}

#profileOverlay.settingsOverlay .settingsNavItem {
  min-height: 38px;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--settings-soft);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}

#profileOverlay.settingsOverlay .settingsNavItem::before {
  content: "";
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  opacity: 0.78;
  background: currentColor;
  -webkit-mask: var(--settings-nav-icon) center / contain no-repeat;
  mask: var(--settings-nav-icon) center / contain no-repeat;
}

#profileOverlay.settingsOverlay .settingsNavItem[data-settings-tab="account"] {
  --settings-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

#profileOverlay.settingsOverlay .settingsNavItem[data-settings-tab="security"] {
  --settings-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.7 8.9a1 1 0 0 1-.6 0C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.2-2.7a1.2 1.2 0 0 1 1.6 0C14.5 3.8 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
}

#profileOverlay.settingsOverlay .settingsNavItem[data-settings-tab="profiles"] {
  --settings-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='M15 8h2M15 12h2M7 16c1.4-2 4.6-2 6 0'/%3E%3C/svg%3E");
}

#profileOverlay.settingsOverlay .settingsNavItem[data-settings-tab="notifications"] {
  --settings-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 21a2 2 0 0 0 3.4 0'/%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3C/svg%3E");
}

#profileOverlay.settingsOverlay .settingsNavItem[data-settings-tab="blocked-users"] {
  --settings-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m4.9 4.9 14.2 14.2'/%3E%3C/svg%3E");
}

#profileOverlay.settingsOverlay .settingsNavItem[data-settings-tab="reports"] {
  --settings-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V4s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cline x1='4' x2='4' y1='22' y2='15'/%3E%3C/svg%3E");
}

#profileOverlay.settingsOverlay .settingsNavItem[data-settings-tab="voice-video"] {
  --settings-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M19 5a9 9 0 0 1 0 14'/%3E%3C/svg%3E");
}

#profileOverlay.settingsOverlay .settingsNavItem[data-settings-tab="keybinds"] {
  --settings-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='M6 8h.01M10 8h.01M14 8h.01M18 8h.01M8 12h.01M12 12h.01M16 12h.01M7 16h10'/%3E%3C/svg%3E");
}

#profileOverlay.settingsOverlay .settingsNavItem[data-settings-tab="appearance"] {
  --settings-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.5' cy='6.5' r='.5'/%3E%3Ccircle cx='17.5' cy='10.5' r='.5'/%3E%3Ccircle cx='8.5' cy='7.5' r='.5'/%3E%3Ccircle cx='6.5' cy='12.5' r='.5'/%3E%3Cpath d='M12 2C6.5 2 2 6 2 11.5S6.5 22 12 22c1.4 0 2.5-1.1 2.5-2.5 0-.7-.3-1.3-.7-1.8-.4-.4-.6-1-.6-1.6 0-1.4 1.1-2.5 2.5-2.5H17c2.8 0 5-2.2 5-5C22 4.9 17.5 2 12 2z'/%3E%3C/svg%3E");
}

#profileOverlay.settingsOverlay .settingsNavItem[data-settings-tab="advanced"] {
  --settings-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.2 2h-.4a2 2 0 0 0-2 2v.2a2 2 0 0 1-1 1.7l-.4.2a2 2 0 0 1-2 0l-.2-.1a2 2 0 0 0-2.7.7l-.2.4a2 2 0 0 0 .7 2.7l.2.1a2 2 0 0 1 1 1.7v.5a2 2 0 0 1-1 1.7l-.2.1a2 2 0 0 0-.7 2.7l.2.4a2 2 0 0 0 2.7.7l.2-.1a2 2 0 0 1 2 0l.4.2a2 2 0 0 1 1 1.7v.2a2 2 0 0 0 2 2h.4a2 2 0 0 0 2-2v-.2a2 2 0 0 1 1-1.7l.4-.2a2 2 0 0 1 2 0l.2.1a2 2 0 0 0 2.7-.7l.2-.4a2 2 0 0 0-.7-2.7l-.2-.1a2 2 0 0 1-1-1.7v-.5a2 2 0 0 1 1-1.7l.2-.1a2 2 0 0 0 .7-2.7l-.2-.4a2 2 0 0 0-2.7-.7l-.2.1a2 2 0 0 1-2 0l-.4-.2a2 2 0 0 1-1-1.7V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

#profileOverlay.settingsOverlay .settingsSidebarSection:nth-of-type(4) .settingsNavItem:nth-child(1) {
  --settings-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h8l-1 8 10-12h-8z'/%3E%3C/svg%3E");
}

#profileOverlay.settingsOverlay .settingsSidebarSection:nth-of-type(4) .settingsNavItem:nth-child(2) {
  --settings-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M5 8h14M5 16h14'/%3E%3C/svg%3E");
}

#profileOverlay.settingsOverlay .settingsSidebarSection:nth-of-type(4) .settingsNavItem:nth-child(3) {
  --settings-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cpath d='M8 6h8M8 10h8M8 14h5'/%3E%3C/svg%3E");
}

#profileOverlay.settingsOverlay .settingsNavItem--danger {
  --settings-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' x2='9' y1='12' y2='12'/%3E%3C/svg%3E");
}

#profileOverlay.settingsOverlay .settingsNavItem:hover,
#profileOverlay.settingsOverlay .settingsNavItem:focus-visible {
  outline: none;
  border-color: var(--settings-border);
  background: var(--settings-row-hover);
  color: var(--settings-text);
}

#profileOverlay.settingsOverlay .settingsNavItem.is-active,
#profileOverlay.settingsOverlay .settingsNavItem[aria-current="page"] {
  border-color: var(--settings-accent-border);
  background:
    linear-gradient(90deg, rgba(232, 207, 174, 0.15), rgba(232, 207, 174, 0.055));
  color: var(--settings-accent);
  box-shadow: inset 3px 0 0 rgba(232, 207, 174, 0.92);
}

#profileOverlay.settingsOverlay .settingsNavItem[disabled] {
  opacity: 0.55;
}

#profileOverlay.settingsOverlay .settingsNavItem[disabled]:hover {
  border-color: transparent;
  background: transparent;
  color: var(--settings-soft);
}

#profileOverlay.settingsOverlay .settingsNavItem small {
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(242, 240, 236, 0.42);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

#profileOverlay.settingsOverlay .settingsNavLabelRow {
  width: auto;
  flex: 1 1 auto;
}

#profileOverlay.settingsOverlay .settingsNavLockIcon {
  color: var(--settings-muted);
}

#profileOverlay.settingsOverlay .settingsNavItem--danger {
  justify-content: flex-start;
  border-color: rgba(229, 139, 139, 0.22);
  background: rgba(229, 139, 139, 0.06);
  color: rgba(242, 190, 190, 0.86);
}

#profileOverlay.settingsOverlay .settingsNavItem--danger:hover,
#profileOverlay.settingsOverlay .settingsNavItem--danger:focus-visible {
  border-color: rgba(229, 139, 139, 0.36);
  background: rgba(229, 139, 139, 0.11);
  color: rgba(255, 224, 224, 0.95);
}

#profileOverlay.settingsOverlay .settingsMain {
  background:
    radial-gradient(circle at 74% -8%, rgba(232, 207, 174, 0.045), transparent 34%),
    var(--settings-bg);
}

#profileOverlay.settingsOverlay .settingsMainTop {
  min-height: 112px;
  padding: 38px 34px 20px;
  border-bottom: 0;
  align-items: flex-start;
}

#profileOverlay.settingsOverlay .settingsTitle {
  color: var(--settings-text);
  font-family: "Bricolage Grotesque", var(--font-display);
  font-size: 29px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.05;
}

#profileOverlay.settingsOverlay .settingsSubtitle {
  margin-top: 7px;
  color: var(--settings-soft);
  font-size: 14px;
  font-weight: 400;
}

#profileOverlay.settingsOverlay .settingsCloseBtn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  border-color: var(--settings-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(242, 240, 236, 0.74);
  font-size: 21px;
  font-weight: 400;
}

#profileOverlay.settingsOverlay .settingsCloseBtn:hover,
#profileOverlay.settingsOverlay .settingsCloseBtn:focus-visible {
  border-color: var(--settings-accent-border);
  background: var(--settings-accent-soft);
  color: var(--settings-text);
  transform: none;
}

#profileOverlay.settingsOverlay .settingsMainBody {
  padding: 8px 34px 34px;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 207, 174, 0.24) transparent;
}

#profileOverlay.settingsOverlay .settingsPanel.is-active {
  gap: 18px;
}

#profileOverlay.settingsOverlay .settingsCardSection,
#profileOverlay.settingsOverlay .settingsIdentityCard,
#profileOverlay.settingsOverlay .settingsReportsDetailCard,
#profileOverlay.settingsOverlay .settingsReportsItem,
#profileOverlay.settingsOverlay .settingsReportsKvItem,
#profileOverlay.settingsOverlay .settingsReportsEvidenceCard,
#profileOverlay.settingsOverlay .settingsKeybindRow,
#profileOverlay.settingsOverlay .settingsSoundRow,
#profileOverlay.settingsOverlay .settingsBlockedRow,
#profileOverlay.settingsOverlay .settingsPlaceholder {
  border: 1px solid var(--settings-border);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    var(--settings-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#profileOverlay.settingsOverlay .settingsCardSection {
  padding: 18px;
  gap: 14px;
}

#profileOverlay.settingsOverlay .settingsSectionTitle,
#profileOverlay.settingsOverlay .themeColorSectionTitle {
  color: rgba(232, 207, 174, 0.74);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

#profileOverlay.settingsOverlay .settingsHint,
#profileOverlay.settingsOverlay .hint,
#profileOverlay.settingsOverlay .appearanceHint,
#profileOverlay.settingsOverlay .themeGradientHint,
#profileOverlay.settingsOverlay .themeLivePreviewHint {
  color: var(--settings-muted);
  font-size: 12px;
  line-height: 1.45;
}

#profileOverlay.settingsOverlay .label,
#profileOverlay.settingsOverlay .field > label,
#profileOverlay.settingsOverlay .themePresetInline > label,
#profileOverlay.settingsOverlay .themeColorField > span,
#profileOverlay.settingsOverlay .appearanceLabel {
  color: var(--settings-soft);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

#profileOverlay.settingsOverlay .input,
#profileOverlay.settingsOverlay textarea,
#profileOverlay.settingsOverlay select,
#profileOverlay.settingsOverlay .themeColorInput,
#profileOverlay.settingsOverlay input:not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]) {
  min-height: 38px;
  border: 1px solid var(--settings-border);
  border-radius: 9px;
  background: #101010;
  color: var(--settings-text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

#profileOverlay.settingsOverlay textarea.input {
  min-height: 106px;
  line-height: 1.45;
}

#profileOverlay.settingsOverlay .input:focus,
#profileOverlay.settingsOverlay textarea:focus,
#profileOverlay.settingsOverlay select:focus,
#profileOverlay.settingsOverlay .themeColorInput:focus,
#profileOverlay.settingsOverlay input:not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus {
  outline: none;
  border-color: var(--settings-accent-border);
  background: #131313;
  box-shadow:
    0 0 0 3px rgba(232, 207, 174, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#profileOverlay.settingsOverlay select.input {
  padding-right: 34px;
}

#profileOverlay.settingsOverlay .btn {
  min-height: 36px;
  border-radius: 9px;
  border-color: var(--settings-border);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(242, 240, 236, 0.78);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none;
}

#profileOverlay.settingsOverlay .btn:hover,
#profileOverlay.settingsOverlay .btn:focus-visible {
  outline: none;
  border-color: var(--settings-accent-border);
  background: var(--settings-accent-soft);
  color: var(--settings-text);
  transform: none;
}

#profileOverlay.settingsOverlay .btn.primary,
#profileOverlay.settingsOverlay .btn.btn--accent {
  border-color: rgba(232, 207, 174, 0.34);
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.92), rgba(205, 169, 123, 0.92));
  color: #18120c;
}

#profileOverlay.settingsOverlay .btn.primary:hover,
#profileOverlay.settingsOverlay .btn.btn--accent:hover,
#profileOverlay.settingsOverlay .btn.primary:focus-visible,
#profileOverlay.settingsOverlay .btn.btn--accent:focus-visible {
  border-color: rgba(232, 207, 174, 0.55);
  background:
    linear-gradient(180deg, rgba(244, 221, 190, 0.96), rgba(216, 181, 134, 0.96));
  color: #12100d;
}

#profileOverlay.settingsOverlay .settingsIdentityCard {
  overflow: hidden;
  border-radius: 16px;
  background: #151515;
}

#profileOverlay.settingsOverlay .settingsIdentityBanner {
  min-height: 150px;
  aspect-ratio: auto;
  background:
    radial-gradient(circle at 18% 0%, rgba(232, 207, 174, 0.16), transparent 34%),
    linear-gradient(135deg, #25221e 0%, #181818 52%, #101010 100%);
}

#profileOverlay.settingsOverlay .settingsIdentityBanner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.42));
}

#profileOverlay.settingsOverlay .settingsIdentityBody {
  padding: 0 22px 22px;
  gap: 18px;
  align-items: flex-end;
}

#profileOverlay.settingsOverlay .settingsAvatarPick {
  width: 104px;
  height: 104px;
  margin-top: -52px;
  border: 4px solid #151515;
  border-radius: 50%;
  background: #202020;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.44),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

#profileOverlay.settingsOverlay .settingsAvatarPick:hover,
#profileOverlay.settingsOverlay .settingsAvatarPick:focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.72);
  box-shadow:
    0 0 0 4px rgba(232, 207, 174, 0.08),
    0 18px 46px rgba(0, 0, 0, 0.44);
}

#profileOverlay.settingsOverlay .settingsIdentityMeta {
  gap: 5px;
  padding-bottom: 6px;
}

#profileOverlay.settingsOverlay .settingsIdentityName {
  color: var(--settings-text);
  font-family: "Bricolage Grotesque", var(--font-display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 700;
  letter-spacing: 0;
}

#profileOverlay.settingsOverlay .settingsIdentityUid {
  color: var(--settings-soft);
  font-size: 13px;
  font-weight: 500;
}

#profileOverlay.settingsOverlay .settingsIdentityPronouns {
  border-color: var(--settings-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--settings-soft);
}

#profileOverlay.settingsOverlay .settingsProfileGrid,
#profileOverlay.settingsOverlay .settingsGrid {
  gap: 16px;
}

#profileOverlay.settingsOverlay .settingsProfileColumn {
  gap: 9px;
}

#profileOverlay.settingsOverlay .settingsProfileActions,
#profileOverlay.settingsOverlay .themeActions,
#profileOverlay.settingsOverlay .settingsDesktopUpdateActions,
#profileOverlay.settingsOverlay .settingsReportsActionRow {
  gap: 9px;
}

#profileOverlay.settingsOverlay .settingsProfileActions .btn {
  min-width: 144px;
}

#profileOverlay.settingsOverlay .themeColorSections,
#profileOverlay.settingsOverlay .appearanceControls,
#profileOverlay.settingsOverlay .settingsKeybindList,
#profileOverlay.settingsOverlay .settingsSoundList,
#profileOverlay.settingsOverlay .settingsBlockedList {
  display: grid;
  gap: 10px;
}

#profileOverlay.settingsOverlay .themeColorSection {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.022);
}

#profileOverlay.settingsOverlay .themeColorGrid,
#profileOverlay.settingsOverlay .themeColorGrid--core,
#profileOverlay.settingsOverlay .themeColorGrid--extended {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

#profileOverlay.settingsOverlay .themeColorField {
  min-width: 0;
  display: grid;
  gap: 6px;
}

#profileOverlay.settingsOverlay .themeColorInput {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
}

#profileOverlay.settingsOverlay .themePresetInline__row,
#profileOverlay.settingsOverlay .themeActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#profileOverlay.settingsOverlay .themePresetInline__row .input,
#profileOverlay.settingsOverlay .themePresetInline__row select {
  flex: 1 1 160px;
}

#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"].is-active .settingsCardSection:first-child {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px 20px;
  align-items: start;
}

#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"].is-active .settingsCardSection:first-child > .settingsSectionTitle {
  grid-column: 1 / -1;
}

#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(360px, 520px) minmax(380px, 1fr);
  gap: 14px;
  align-items: start;
}

#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid > .field,
#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid > .themePresetInline,
#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid > .themeColorSections,
#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid > .themeGradientHint {
  grid-column: 1;
}

#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeLivePreviewBlock {
  position: sticky;
  top: 8px;
  min-height: 520px;
  align-self: start;
  display: grid;
  grid-column: 2;
  grid-row: 1 / span 12;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--settings-border);
  border-radius: 14px;
  background:
    radial-gradient(circle at 78% 0%, rgba(232, 207, 174, 0.06), transparent 38%),
    #151515;
}

#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeLivePreviewBlock::before {
  content: "Interface preview";
  color: rgba(232, 207, 174, 0.72);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

#profileOverlay.settingsOverlay .themeLivePreview {
  min-height: 460px;
  border-radius: 14px;
  border: 1px solid var(--settings-border);
  overflow: hidden;
  background: #101010;
}

#profileOverlay.settingsOverlay .themeLivePreview__frame {
  height: 100%;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  background: #101010;
}

#profileOverlay.settingsOverlay .themeLivePreview__sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  background: #151515;
  display: grid;
  grid-template-rows: 56px 1fr;
  justify-items: center;
  padding: 12px 0;
}

#profileOverlay.settingsOverlay .themeLivePreview__sidebarTop {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(232, 207, 174, 0.26);
  background:
    linear-gradient(135deg, rgba(232, 207, 174, 0.18), rgba(232, 207, 174, 0.04)),
    #202020;
}

#profileOverlay.settingsOverlay .themeLivePreview__sidebarList {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 12px;
}

#profileOverlay.settingsOverlay .themeLivePreview__dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.075);
  background: #202020;
}

#profileOverlay.settingsOverlay .themeLivePreview__dot--active {
  border-color: rgba(232, 207, 174, 0.48);
  box-shadow: 0 0 0 3px rgba(232, 207, 174, 0.08);
}

#profileOverlay.settingsOverlay .themeLivePreview__main {
  display: grid;
  grid-template-rows: 58px 1fr;
  min-width: 0;
}

#profileOverlay.settingsOverlay .themeLivePreview__topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: #151515;
}

#profileOverlay.settingsOverlay .themeLivePreview__topPill {
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

#profileOverlay.settingsOverlay .themeLivePreview__topPill:first-child {
  width: 92px;
  background: rgba(232, 207, 174, 0.13);
}

#profileOverlay.settingsOverlay .themeLivePreview__topPill:last-child {
  width: 140px;
  margin-left: auto;
}

#profileOverlay.settingsOverlay .themeLivePreview__content {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 22px 18px;
}

#profileOverlay.settingsOverlay .themeLivePreview__row {
  height: 48px;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
}

#profileOverlay.settingsOverlay .themeLivePreview__row--accent {
  background:
    linear-gradient(90deg, rgba(232, 207, 174, 0.16), rgba(255, 255, 255, 0.035));
}

#profileOverlay.settingsOverlay .themeLivePreview__composer {
  min-height: 44px;
  margin-top: 26px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 13px;
  background: #181818;
  display: flex;
  align-items: center;
  gap: 10px;
}

#profileOverlay.settingsOverlay .themeLivePreview__composerLine {
  flex: 1;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

#profileOverlay.settingsOverlay .themeLivePreview__composerSend {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(232, 207, 174, 0.82);
}

#profileOverlay.settingsOverlay .appearanceSwitchRow,
#profileOverlay.settingsOverlay .settingsVoiceSelectRow {
  min-height: 56px;
  padding: 11px 12px;
  border-color: var(--settings-border);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
}

#profileOverlay.settingsOverlay .appearanceSwitchText b,
#profileOverlay.settingsOverlay .settingsKeybindMeta b,
#profileOverlay.settingsOverlay .settingsSoundMeta b,
#profileOverlay.settingsOverlay .settingsBlockedMeta b {
  color: var(--settings-text);
  font-size: 13px;
  font-weight: 650;
}

#profileOverlay.settingsOverlay .appearanceSwitchText small,
#profileOverlay.settingsOverlay .settingsKeybindMeta small,
#profileOverlay.settingsOverlay .settingsSoundMeta small,
#profileOverlay.settingsOverlay .settingsBlockedMeta small {
  color: var(--settings-muted);
  font-size: 12px;
}

#profileOverlay.settingsOverlay .appearanceSwitchRow input[type="checkbox"] {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 42px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

#profileOverlay.settingsOverlay .appearanceSwitchRow input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(242, 240, 236, 0.82);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.38);
  transition: transform 0.15s ease, background 0.15s ease;
}

#profileOverlay.settingsOverlay .appearanceSwitchRow input[type="checkbox"]:checked {
  border-color: rgba(232, 207, 174, 0.36);
  background: rgba(232, 207, 174, 0.22);
}

#profileOverlay.settingsOverlay .appearanceSwitchRow input[type="checkbox"]:checked::after {
  transform: translateX(18px);
  background: rgba(232, 207, 174, 0.96);
}

#profileOverlay.settingsOverlay .appearanceSwitchRow input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(232, 207, 174, 0.12);
}

#profileOverlay.settingsOverlay input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
}

#profileOverlay.settingsOverlay input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(232, 207, 174, 0.92), rgba(232, 207, 174, 0.58)) 0 / var(--slider-progress, 50%) 100% no-repeat,
    rgba(255, 255, 255, 0.13);
}

#profileOverlay.settingsOverlay input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  margin-top: -5px;
  border: 2px solid #2a2118;
  border-radius: 50%;
  background: var(--settings-accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.42);
}

#profileOverlay.settingsOverlay input[type="range"]:focus-visible {
  outline: none;
}

#profileOverlay.settingsOverlay input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 4px rgba(232, 207, 174, 0.13),
    0 4px 12px rgba(0, 0, 0, 0.42);
}

#profileOverlay.settingsOverlay input[type="range"]::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
}

#profileOverlay.settingsOverlay input[type="range"]::-moz-range-progress {
  height: 5px;
  border-radius: 999px;
  background: rgba(232, 207, 174, 0.82);
}

#profileOverlay.settingsOverlay input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 2px solid #2a2118;
  border-radius: 50%;
  background: var(--settings-accent);
}

#profileOverlay.settingsOverlay .settingsKeybindBtn {
  font-family: var(--font-mono);
  color: rgba(232, 207, 174, 0.9);
}

#profileOverlay.settingsOverlay .settingsSecurityLockedIcon {
  border-color: var(--settings-accent-border);
  border-radius: 14px;
  background: var(--settings-accent-soft);
  color: var(--settings-accent);
}

#profileOverlay.settingsOverlay .settingsSecuritySetupTitle {
  color: var(--settings-text);
  font-family: "Bricolage Grotesque", var(--font-display);
  font-weight: 700;
}

#profileOverlay.settingsOverlay .settingsVoiceMicTestMeter {
  border-color: var(--settings-border);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.09) 0 3px, transparent 3px 10px),
    #101010;
}

#profileOverlay.settingsOverlay .settingsVoiceMicTestMeterFill {
  background:
    repeating-linear-gradient(90deg, rgba(232, 207, 174, 0.8) 0 3px, rgba(232, 207, 174, 0.56) 3px 10px);
  box-shadow: 0 0 16px rgba(232, 207, 174, 0.2);
}

@media (max-width: 1080px) {
  #profileOverlay.settingsOverlay .settingsCard {
    grid-template-columns: 1fr;
    width: calc(100vw - 8px);
    height: calc(100vh - 8px);
  }

  #profileOverlay.settingsOverlay .settingsSidebar {
    max-height: 240px;
    border-right: 0;
    border-bottom: 1px solid var(--settings-border);
  }

  #profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"].is-active .settingsCardSection:first-child {
    grid-template-columns: 1fr;
  }

  #profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid {
    grid-template-columns: 1fr;
  }

  #profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid > .field,
  #profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid > .themePresetInline,
  #profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid > .themeColorSections,
  #profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid > .themeGradientHint {
    grid-column: 1;
  }

  #profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeLivePreviewBlock {
    grid-column: 1;
    grid-row: auto;
    min-height: 360px;
    position: relative;
    top: auto;
  }
}

@media (max-width: 720px) {
  #profileOverlay.settingsOverlay .settingsMainTop {
    min-height: auto;
    padding: 22px 18px 12px;
  }

  #profileOverlay.settingsOverlay .settingsMainBody {
    padding: 8px 18px 20px;
  }

  #profileOverlay.settingsOverlay .settingsIdentityBody {
    align-items: flex-start;
    flex-direction: column;
  }

  #profileOverlay.settingsOverlay .settingsAvatarPick {
    width: 88px;
    height: 88px;
    margin-top: -44px;
  }

  #profileOverlay.settingsOverlay .settingsProfileActions,
  #profileOverlay.settingsOverlay .themeActions {
    align-items: stretch;
    flex-direction: column;
  }

  #profileOverlay.settingsOverlay .settingsProfileActions .btn,
  #profileOverlay.settingsOverlay .themeActions .btn {
    width: 100%;
    min-width: 0;
  }

  #profileOverlay.settingsOverlay .themeColorGrid,
  #profileOverlay.settingsOverlay .themeColorGrid--core,
  #profileOverlay.settingsOverlay .themeColorGrid--extended {
    grid-template-columns: 1fr;
  }
}

/* ALTARA Settings refinement */
#profileOverlay.settingsOverlay .settingsSidebar {
  padding: 18px 20px;
  gap: 14px;
}

#profileOverlay.settingsOverlay .settingsSidebarUser {
  display: none !important;
}

#profileOverlay.settingsOverlay .settingsSearchWrap {
  margin-top: 0;
}

#profileOverlay.settingsOverlay .settingsSearchInput {
  height: 40px;
}

#profileOverlay.settingsOverlay .settingsSidebarSection {
  gap: 7px;
  padding-bottom: 10px;
}

#profileOverlay.settingsOverlay .settingsSidebarSection + .settingsSidebarSection {
  padding-top: 14px;
}

#profileOverlay.settingsOverlay .settingsSidebarSection--logout {
  padding-top: 14px;
}

#profileOverlay.settingsOverlay .settingsMainTop {
  min-height: 100px;
  padding-top: 32px;
}

#profileOverlay.settingsOverlay .settingsIdentityCard {
  border-radius: 13px;
}

#profileOverlay.settingsOverlay .settingsIdentityBanner {
  aspect-ratio: var(--profile-banner-ratio);
  height: auto;
  min-height: 150px;
  background:
    radial-gradient(circle at 20% 4%, rgba(232, 207, 174, 0.12), transparent 34%),
    linear-gradient(135deg, #211f1b 0%, #181818 54%, #101010 100%);
}

#profileOverlay.settingsOverlay .settingsIdentityBanner::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.32));
}

#profileOverlay.settingsOverlay .settingsIdentityBody {
  min-height: 88px;
  padding: 0 20px 20px;
  gap: 16px;
  align-items: flex-end;
}

#profileOverlay.settingsOverlay .settingsAvatarPick {
  width: 92px;
  height: 92px;
  margin-top: -46px;
  border-width: 3px;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.38),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

#profileOverlay.settingsOverlay .settingsAvatarPick:hover,
#profileOverlay.settingsOverlay .settingsAvatarPick:focus-visible {
  box-shadow:
    0 0 0 4px rgba(232, 207, 174, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.38);
}

#profileOverlay.settingsOverlay .settingsIdentityMeta {
  min-width: 0;
  gap: 3px;
  padding-bottom: 2px;
}

#profileOverlay.settingsOverlay .settingsIdentityNameRow {
  align-items: center;
  gap: 8px;
}

#profileOverlay.settingsOverlay .settingsIdentityName {
  max-width: 100%;
  font-size: clamp(25px, 2.45vw, 34px);
  line-height: 1.08;
}

#profileOverlay.settingsOverlay .settingsIdentityUid {
  font-size: 12px;
}

#profileOverlay.settingsOverlay .settingsIdentityPronouns {
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
}

#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"].is-active {
  gap: 14px;
}

#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"].is-active .settingsCardSection:first-child {
  gap: 14px;
  padding: 16px;
}

#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid {
  grid-template-columns: minmax(0, 1fr) minmax(276px, 340px);
  gap: 12px;
}

#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid > .field,
#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid > .themePresetInline {
  grid-column: 1;
}

#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid > .themeColorSections,
#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid > .themeGradientHint {
  grid-column: 1 / -1;
}

#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeLivePreviewBlock {
  position: relative;
  top: auto;
  min-height: 0;
  grid-column: 2;
  grid-row: 1 / span 3;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 78% 0%, rgba(232, 207, 174, 0.045), transparent 38%),
    #151515;
}

#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeLivePreviewBlock::before {
  font-size: 10px;
}

#profileOverlay.settingsOverlay .themeLivePreview {
  min-height: 232px;
  height: 232px;
  padding: 0;
  border-radius: 12px;
  background:
    radial-gradient(420px 180px at 14% -20%, var(--bg-glow, rgba(232, 207, 174, 0.12)), transparent 62%),
    linear-gradient(var(--bg-angle, 180deg), var(--bg-main, #101010), var(--bg-deep, #0b0b0b));
}

#profileOverlay.settingsOverlay .themeLivePreview__frame {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0;
  min-height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--ui-shell-bg, #101010);
}

#profileOverlay.settingsOverlay .themeLivePreview__sidebar {
  grid-template-rows: 38px 1fr;
  padding: 9px 0;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
  background: var(--left-sidebar-bg, #151515);
}

#profileOverlay.settingsOverlay .themeLivePreview__sidebarTop {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid rgba(232, 207, 174, 0.24);
  background:
    linear-gradient(135deg, rgba(232, 207, 174, 0.16), rgba(232, 207, 174, 0.04)),
    var(--left-sidebar-top-bg, #202020);
}

#profileOverlay.settingsOverlay .themeLivePreview__sidebarList {
  gap: 8px;
  padding: 0;
}

#profileOverlay.settingsOverlay .themeLivePreview__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ui-row-bg, #202020);
}

#profileOverlay.settingsOverlay .themeLivePreview__main {
  grid-template-rows: 38px 1fr;
  border: 0;
  border-radius: 0;
  background: var(--surface-1, #151515);
}

#profileOverlay.settingsOverlay .themeLivePreview__topbar {
  gap: 7px;
  padding: 0 10px;
  background: var(--ui-top-bg, #151515);
}

#profileOverlay.settingsOverlay .themeLivePreview__topPill {
  height: 12px;
}

#profileOverlay.settingsOverlay .themeLivePreview__topPill:first-child {
  width: 70px;
}

#profileOverlay.settingsOverlay .themeLivePreview__topPill:last-child {
  width: 78px;
}

#profileOverlay.settingsOverlay .themeLivePreview__content {
  gap: 8px;
  padding: 12px;
  background: var(--ui-panel-soft-bg, rgba(0, 0, 0, 0.16));
}

#profileOverlay.settingsOverlay .themeLivePreview__row {
  height: 30px;
  border-radius: 9px;
  background:
    linear-gradient(90deg, var(--ui-row-bg, rgba(255, 255, 255, 0.06)), rgba(255, 255, 255, 0.025));
}

#profileOverlay.settingsOverlay .themeLivePreview__row--accent {
  background:
    linear-gradient(90deg, var(--ui-primary-bg, rgba(232, 207, 174, 0.16)), rgba(255, 255, 255, 0.035));
}

#profileOverlay.settingsOverlay .themeLivePreview__composer {
  min-height: 32px;
  margin-top: 8px;
  padding: 0 9px;
  border-radius: 10px;
  background: var(--ui-input-bg, #181818);
}

#profileOverlay.settingsOverlay .themeLivePreview__composerLine {
  height: 8px;
}

#profileOverlay.settingsOverlay .themeLivePreview__composerSend {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: var(--accent, rgba(232, 207, 174, 0.82));
}

#profileOverlay.settingsOverlay .themeLivePreviewHint {
  font-size: 11px;
}

#profileOverlay.settingsOverlay .themeColorSections {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#profileOverlay.settingsOverlay .themeColorSection {
  padding: 11px;
  border-radius: 10px;
}

#profileOverlay.settingsOverlay .themeColorGrid,
#profileOverlay.settingsOverlay .themeColorGrid--core,
#profileOverlay.settingsOverlay .themeColorGrid--extended {
  gap: 8px;
}

#profileOverlay.settingsOverlay .themeAppearanceMetaGrid {
  gap: 10px;
}

#profileOverlay.settingsOverlay .appearanceControls {
  gap: 8px;
}

@media (max-width: 1080px) {
  #profileOverlay.settingsOverlay .settingsSidebar {
    max-height: 220px;
  }

  #profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid {
    grid-template-columns: 1fr;
  }

  #profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid > .field,
  #profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid > .themePresetInline,
  #profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid > .themeColorSections,
  #profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid > .themeGradientHint,
  #profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeLivePreviewBlock {
    grid-column: 1;
  }

  #profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeLivePreviewBlock {
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  #profileOverlay.settingsOverlay .settingsIdentityBanner {
    min-height: 112px;
  }

  #profileOverlay.settingsOverlay .settingsIdentityBody {
    align-items: flex-start;
    gap: 10px;
  }

  #profileOverlay.settingsOverlay .settingsAvatarPick {
    width: 74px;
    height: 74px;
    margin-top: -30px;
  }

  #profileOverlay.settingsOverlay .settingsIdentityNameRow {
    align-items: flex-start;
    flex-direction: column;
  }

  #profileOverlay.settingsOverlay .themeColorSections,
  #profileOverlay.settingsOverlay .themeAppearanceMetaGrid {
    grid-template-columns: 1fr;
  }
}

/* ALTARA Appearance Studio */
#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"].is-active {
  display: block;
}

#profileOverlay.settingsOverlay .appearanceStudio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
  gap: 18px;
  align-items: start;
}

#profileOverlay.settingsOverlay .appearanceStudioMain {
  min-width: 0;
  display: grid;
  gap: 14px;
}

#profileOverlay.settingsOverlay .appearanceStudioCard,
#profileOverlay.settingsOverlay .appearanceStudioActionsCard {
  padding: 16px;
  gap: 14px;
  border-radius: 13px;
}

#profileOverlay.settingsOverlay .appearanceStudioCardHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

#profileOverlay.settingsOverlay .appearanceStudioCardHeader > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

#profileOverlay.settingsOverlay .appearanceStudioBadge {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid rgba(232, 207, 174, 0.24);
  border-radius: 999px;
  background: rgba(232, 207, 174, 0.08);
  color: rgba(232, 207, 174, 0.82);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"].is-active .settingsCardSection:first-child {
  display: grid;
  grid-template-columns: 1fr;
}

#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .appearancePresetGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 0;
}

#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .appearancePresetGrid > .field,
#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .appearancePresetGrid > .themePresetInline {
  grid-column: auto;
}

#profileOverlay.settingsOverlay .appearanceStudioCard--colors .themeColorSections {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#profileOverlay.settingsOverlay .appearanceStudioCard--colors .themeColorSection {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    rgba(255, 255, 255, 0.018);
}

#profileOverlay.settingsOverlay .appearanceStudioCard--colors .themeGradientHint {
  margin-top: -3px;
}

#profileOverlay.settingsOverlay .appearanceStudioCard--layout .themeAppearanceMetaGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#profileOverlay.settingsOverlay .appearanceStudioCard--messages .appearanceControls {
  gap: 7px;
}

#profileOverlay.settingsOverlay .appearanceStudioCard--messages .appearanceControls input[type="range"] {
  margin-bottom: 8px;
}

#profileOverlay.settingsOverlay .appearanceStudioActionsCard {
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.04), rgba(255, 255, 255, 0.012)),
    var(--settings-surface);
}

#profileOverlay.settingsOverlay .appearanceStudioActionsCard .themeActions {
  margin-top: 0;
}

/* ALTARA Appearance cleanup: single-column page, no preview sidebar */
#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"].is-active {
  display: grid;
  gap: 14px;
}

#profileOverlay.settingsOverlay .appearanceStudio {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

#profileOverlay.settingsOverlay .appearanceStudioMain {
  width: 100%;
  max-width: none;
}

#profileOverlay.settingsOverlay .appearanceStudioCard,
#profileOverlay.settingsOverlay .appearanceStudioActionsCard {
  width: 100%;
  overflow: hidden;
}

#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid,
#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .appearancePresetGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid > .field,
#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid > .themePresetInline,
#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid > .themeColorSections,
#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid > .themeGradientHint {
  grid-column: auto;
}

#profileOverlay.settingsOverlay .appearanceStudioCard--colors .themeColorSections {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#profileOverlay.settingsOverlay .appearanceStudioCard--layout .themeAppearanceMetaGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#profileOverlay.settingsOverlay .appearanceStudioCard--messages .appearanceControls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

#profileOverlay.settingsOverlay .appearanceStudioCard--messages .appearanceControls > * {
  min-width: 0;
}

@media (max-width: 1180px) {
  #profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid,
  #profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .appearancePresetGrid,
  #profileOverlay.settingsOverlay .appearanceStudioCard--layout .themeAppearanceMetaGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .themeGrid,
  #profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"] .appearancePresetGrid,
  #profileOverlay.settingsOverlay .appearanceStudioCard--colors .themeColorSections,
  #profileOverlay.settingsOverlay .appearanceStudioCard--layout .themeAppearanceMetaGrid {
    grid-template-columns: 1fr;
  }
}

/* ALTARA Appearance visual page */
#profileOverlay.settingsOverlay .settingsPanel[data-settings-panel="appearance"].is-active {
  display: block;
}

#profileOverlay.settingsOverlay .appearancePage {
  width: 100%;
  max-width: 1180px;
  display: grid;
  gap: 16px;
}

#profileOverlay.settingsOverlay .appearancePageHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 2px 6px;
}

#profileOverlay.settingsOverlay .appearancePageHeader > div:first-child {
  min-width: 0;
  display: grid;
  gap: 5px;
}

#profileOverlay.settingsOverlay .appearancePageEyebrow {
  color: rgba(232, 207, 174, 0.76);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#profileOverlay.settingsOverlay .appearancePageHeader h2 {
  margin: 0;
  color: var(--settings-text);
  font-family: "Bricolage Grotesque", var(--font-display);
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1;
  letter-spacing: 0;
}

#profileOverlay.settingsOverlay .appearancePageHeader p {
  margin: 0;
  color: var(--settings-soft);
  font-size: 14px;
}

#profileOverlay.settingsOverlay .appearancePageHeaderActions {
  flex: 0 0 auto;
  display: flex;
  gap: 9px;
}

#profileOverlay.settingsOverlay .appearanceSection {
  padding: 18px;
  gap: 16px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.012)),
    var(--settings-surface);
}

#profileOverlay.settingsOverlay .appearanceSectionHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

#profileOverlay.settingsOverlay .appearanceSectionHeader > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

#profileOverlay.settingsOverlay .appearanceThemeCards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#profileOverlay.settingsOverlay .appearanceThemeCards--simple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#profileOverlay.settingsOverlay .appearanceThemeCard,
#profileOverlay.settingsOverlay .appearanceChoiceCard,
#profileOverlay.settingsOverlay .appearanceSliderCard,
#profileOverlay.settingsOverlay .appearanceToggleCard {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    #151515;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#profileOverlay.settingsOverlay .appearanceThemeCard {
  display: grid;
  gap: 9px;
  padding: 10px;
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

#profileOverlay.settingsOverlay .appearanceThemeCard.is-selected,
#profileOverlay.settingsOverlay .appearanceChoiceCard.is-selected {
  border-color: rgba(232, 207, 174, 0.42);
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.12), rgba(255, 255, 255, 0.018)),
    #171614;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(232, 207, 174, 0.08);
}

#profileOverlay.settingsOverlay .appearanceThemeCard b,
#profileOverlay.settingsOverlay .appearanceChoiceCard b {
  color: var(--settings-text);
  font-size: 14px;
  line-height: 1.1;
}

#profileOverlay.settingsOverlay .appearanceThemeCard small,
#profileOverlay.settingsOverlay .appearanceChoiceCard small {
  color: var(--settings-muted);
  font-size: 12px;
}

#profileOverlay.settingsOverlay .appearanceThemeThumb {
  height: 86px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 11px;
  overflow: hidden;
  background: #101010;
}

#profileOverlay.settingsOverlay .appearanceThemeThumb span {
  display: block;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

#profileOverlay.settingsOverlay .appearanceThemeThumb span:first-child {
  grid-row: 1 / span 3;
  background: rgba(232, 207, 174, 0.16);
}

#profileOverlay.settingsOverlay .appearanceThemeThumb span:nth-child(2) {
  height: 20px;
  background: rgba(255, 255, 255, 0.11);
}

#profileOverlay.settingsOverlay .appearanceThemeThumb span:nth-child(3) {
  align-self: end;
  height: 34px;
}

#profileOverlay.settingsOverlay .appearanceThemeThumb--midnight {
  background: linear-gradient(135deg, #080808, #191919);
}

#profileOverlay.settingsOverlay .appearanceThemeThumb--system {
  background: linear-gradient(135deg, #151515 0 52%, #d8d2c6 52% 100%);
}

#profileOverlay.settingsOverlay .appearanceThemeThumb--white {
  background: linear-gradient(135deg, #f4f1ea, #fffaf4);
}

#profileOverlay.settingsOverlay .appearanceThemeThumb--custom {
  background:
    radial-gradient(circle at 28% 20%, rgba(146, 116, 187, 0.32), transparent 34%),
    #101010;
}

#profileOverlay.settingsOverlay .appearanceFormGrid,
#profileOverlay.settingsOverlay .themeAppearanceMetaGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#profileOverlay.settingsOverlay .appearanceAccentSwatches {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#profileOverlay.settingsOverlay .appearanceSwatch {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 50%;
  background: var(--swatch);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow:
    inset 0 0 0 3px rgba(16, 16, 16, 0.8),
    0 8px 20px rgba(0, 0, 0, 0.28);
}

#profileOverlay.settingsOverlay .appearanceSwatch.is-selected {
  border-color: rgba(232, 207, 174, 0.68);
  box-shadow:
    inset 0 0 0 3px rgba(16, 16, 16, 0.85),
    0 0 0 3px rgba(232, 207, 174, 0.1),
    0 8px 20px rgba(0, 0, 0, 0.28);
}

#profileOverlay.settingsOverlay .appearanceSwatch--add {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.035);
}

#profileOverlay.settingsOverlay .appearanceSwatch--add::before {
  content: "+";
  color: rgba(242, 240, 236, 0.7);
  font-size: 20px;
  line-height: 1;
}

#profileOverlay.settingsOverlay .appearanceChoiceCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#profileOverlay.settingsOverlay .appearanceChoiceCard {
  display: grid;
  gap: 5px;
  padding: 14px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

#profileOverlay.settingsOverlay .appearanceThemeCard:hover,
#profileOverlay.settingsOverlay .appearanceChoiceCard:hover,
#profileOverlay.settingsOverlay .appearanceSwatch:hover {
  border-color: rgba(232, 207, 174, 0.34);
}

#profileOverlay.settingsOverlay .appearanceThemeCard:focus-visible,
#profileOverlay.settingsOverlay .appearanceChoiceCard:focus-visible,
#profileOverlay.settingsOverlay .appearanceSwatch:focus-visible,
#profileOverlay.settingsOverlay .appearanceToggleCard:focus-within {
  outline: 2px solid rgba(232, 207, 174, 0.48);
  outline-offset: 3px;
}

#profileOverlay.settingsOverlay .appearanceControlGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#profileOverlay.settingsOverlay .appearanceSliderCard,
#profileOverlay.settingsOverlay .appearanceToggleCard {
  display: grid;
  gap: 11px;
  padding: 14px;
}

#profileOverlay.settingsOverlay .appearanceSliderCard input[type="range"] {
  height: 20px;
}

#profileOverlay.settingsOverlay .appearanceToggleCard {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  position: relative;
  cursor: pointer;
}

#profileOverlay.settingsOverlay .appearanceToggleInput {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

#profileOverlay.settingsOverlay .appearanceFakeToggle {
  position: relative;
  width: 42px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
}

#profileOverlay.settingsOverlay .appearanceFakeToggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(242, 240, 236, 0.78);
}

#profileOverlay.settingsOverlay .appearanceToggleInput:checked + .appearanceFakeToggle {
  border-color: rgba(232, 207, 174, 0.46);
  background: rgba(232, 207, 174, 0.28);
}

#profileOverlay.settingsOverlay .appearanceToggleInput:checked + .appearanceFakeToggle::after {
  left: 21px;
  background: rgba(232, 207, 174, 0.96);
}

#profileOverlay.settingsOverlay .appearanceMiniPreview {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  min-height: 210px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 14px;
  overflow: hidden;
  background: #101010;
}

#profileOverlay.settingsOverlay .appearanceMiniPreviewNav {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 12px;
  padding: 18px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.065);
  background: #151515;
}

#profileOverlay.settingsOverlay .appearanceMiniPreviewNav span {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  background: #202020;
}

#profileOverlay.settingsOverlay .appearanceMiniPreviewNav span.is-active {
  border-color: rgba(232, 207, 174, 0.48);
  background: rgba(232, 207, 174, 0.14);
}

#profileOverlay.settingsOverlay .appearanceMiniPreviewBody {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px;
  background:
    radial-gradient(circle at 86% 0%, rgba(232, 207, 174, 0.055), transparent 38%),
    #101010;
}

#profileOverlay.settingsOverlay .appearanceMiniPreviewTab {
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid rgba(232, 207, 174, 0.2);
  border-radius: 9px;
  background: rgba(232, 207, 174, 0.1);
  color: var(--settings-text);
  font-size: 12px;
  font-weight: 750;
}

#profileOverlay.settingsOverlay .appearanceMiniMessage {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

#profileOverlay.settingsOverlay .appearanceMiniAvatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(232, 207, 174, 0.68), transparent 34%),
    #272119;
}

#profileOverlay.settingsOverlay .appearanceMiniMessage b {
  color: var(--settings-accent);
  font-size: 13px;
}

#profileOverlay.settingsOverlay .appearanceMiniMessage p {
  margin: 3px 0 0;
  color: var(--settings-soft);
  font-size: 13px;
}

#profileOverlay.settingsOverlay .appearanceMiniPreviewRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 10px;
}

#profileOverlay.settingsOverlay .appearanceMiniInput,
#profileOverlay.settingsOverlay .appearanceMiniButton {
  height: 38px;
  border-radius: 10px;
}

#profileOverlay.settingsOverlay .appearanceMiniInput {
  border: 1px solid rgba(255, 255, 255, 0.075);
  background: #181818;
}

#profileOverlay.settingsOverlay .appearanceMiniButton {
  background: linear-gradient(180deg, rgba(232, 207, 174, 0.92), rgba(205, 169, 123, 0.92));
}

#profileOverlay.settingsOverlay .appearanceAdvancedTokens {
  padding: 0;
  overflow: hidden;
}

#profileOverlay.settingsOverlay .appearanceAdvancedTokens summary {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}

#profileOverlay.settingsOverlay .appearanceAdvancedTokens summary::-webkit-details-marker {
  display: none;
}

#profileOverlay.settingsOverlay .appearanceAdvancedTokens summary::after {
  content: "+";
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 9px;
  color: rgba(232, 207, 174, 0.82);
  background: rgba(255, 255, 255, 0.035);
}

#profileOverlay.settingsOverlay .appearanceAdvancedTokens[open] summary::after {
  content: "-";
}

#profileOverlay.settingsOverlay .appearanceAdvancedTokens summary span {
  display: grid;
  gap: 4px;
}

#profileOverlay.settingsOverlay .appearanceAdvancedTokens summary b {
  color: rgba(232, 207, 174, 0.78);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

#profileOverlay.settingsOverlay .appearanceAdvancedTokens summary small {
  color: var(--settings-muted);
  font-size: 12px;
}

#profileOverlay.settingsOverlay .appearanceAdvancedTokens[open] .themeColorSections,
#profileOverlay.settingsOverlay .appearanceAdvancedTokens[open] .themeGradientHint {
  margin: 0 18px 18px;
}

#profileOverlay.settingsOverlay .appearanceAdvancedTokens .themeColorSections {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#profileOverlay.settingsOverlay .appearanceSection--actions .themeActions {
  margin-top: 0;
}

@media (max-width: 1180px) {
  #profileOverlay.settingsOverlay .appearanceThemeCards,
  #profileOverlay.settingsOverlay .appearanceThemeCards--simple,
  #profileOverlay.settingsOverlay .appearanceFormGrid,
  #profileOverlay.settingsOverlay .themeAppearanceMetaGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #profileOverlay.settingsOverlay .appearancePageHeader {
    align-items: stretch;
    flex-direction: column;
  }

  #profileOverlay.settingsOverlay .appearancePageHeaderActions {
    width: 100%;
  }

  #profileOverlay.settingsOverlay .appearancePageHeaderActions .btn {
    flex: 1;
  }

  #profileOverlay.settingsOverlay .appearanceThemeCards,
  #profileOverlay.settingsOverlay .appearanceThemeCards--simple,
  #profileOverlay.settingsOverlay .appearanceFormGrid,
  #profileOverlay.settingsOverlay .themeAppearanceMetaGrid,
  #profileOverlay.settingsOverlay .appearanceChoiceCards,
  #profileOverlay.settingsOverlay .appearanceControlGrid,
  #profileOverlay.settingsOverlay .appearanceAdvancedTokens .themeColorSections,
  #profileOverlay.settingsOverlay .appearanceMiniPreview,
  #profileOverlay.settingsOverlay .appearanceMiniPreviewRow {
    grid-template-columns: 1fr;
  }

  #profileOverlay.settingsOverlay .appearanceMiniPreviewNav {
    display: none;
  }
}

/* Local Appearance runtime variables */
:root {
  --altara-accent: var(--accent, #e8cfae);
  --altara-radius: var(--radius-md, 14px);
  --altara-font-scale: var(--theme-font-scale, 1);
  --altara-message-spacing: var(--theme-spacing-scale, 1);
  --altara-density: balanced;
  --altara-bg: var(--bg-main, #101010);
  --altara-bg-soft: #151515;
  --altara-surface: var(--surface-1, #181818);
  --altara-surface-elevated: var(--surface-2, #202020);
  --altara-surface-panel: #1c1c1c;
  --altara-surface-muted: #202020;
  --altara-border: var(--stroke, rgba(255, 255, 255, 0.08));
  --altara-border-strong: var(--stroke-strong, rgba(255, 255, 255, 0.12));
  --altara-text: var(--text-main, #f2f0ec);
  --altara-text-muted: var(--text-muted, rgba(242, 240, 236, 0.58));
  --altara-text-soft: var(--text-soft, rgba(242, 240, 236, 0.64));
  --altara-input: var(--ui-input-bg, #111111);
  --altara-hover: rgba(255, 255, 255, 0.055);
  --altara-active: rgba(232, 207, 174, 0.12);
  --altara-accent-strong: var(--accent-strong, #f0d8b8);
  --altara-accent-soft: rgba(232, 207, 174, 0.11);
  --altara-accent-border: rgba(232, 207, 174, 0.28);
  --altara-muted: var(--altara-text-muted);
}

body {
  font-size: calc(14px * var(--altara-font-scale, 1));
}

.btn,
.input,
.settingsCardSection,
.appearanceSection,
.composerWrap,
.dm-item,
.friend-row,
.quickPanel,
.widgetCard {
  border-radius: min(var(--altara-radius, 14px), 18px);
}

.msg,
.message-row,
.chatMessage {
  margin-block-end: calc(2px * var(--altara-message-spacing, 1));
}

body.density-cozy .dm-item,
body.density-cozy .friend-row,
body.density-cozy .serverChannelItem {
  padding-block: calc(var(--theme-space-2, 8px) * 1.15);
}

body.density-compact .dm-item,
body.density-compact .friend-row,
body.density-compact .serverChannelItem {
  padding-block: calc(var(--theme-space-2, 8px) * 0.78);
}

html.reduce-motion *,
body.reduce-motion * {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.001ms !important;
}

/* Global Appearance runtime: make Theme + Accent affect the whole shell. */
html.theme-resolved-light,
body.theme-resolved-light {
  color-scheme: light;
}

html.theme-resolved-dark,
body.theme-resolved-dark {
  color-scheme: dark;
}

body.theme-resolved-light:not(.authPage) {
  color: var(--altara-text);
  background:
    radial-gradient(1100px 680px at 12% -8%, color-mix(in srgb, var(--altara-accent) 13%, transparent), transparent 58%),
    radial-gradient(900px 620px at 92% 8%, rgba(255, 255, 255, 0.54), transparent 54%),
    linear-gradient(180deg, var(--altara-surface-elevated), var(--altara-bg) 42%, var(--bg-deep, #e4dac8));
}

body.theme-resolved-light:not(.authPage)::before {
  background-image:
    linear-gradient(rgba(20, 18, 15, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 18, 15, 0.035) 1px, transparent 1px);
  opacity: 0.48;
}

body.theme-resolved-light:not(.authPage)::after {
  background: radial-gradient(80% 65% at 50% 100%, rgba(86, 67, 43, 0.11), transparent 72%);
}

body.theme-resolved-light:not(.authPage) .app,
body.theme-resolved-light:not(.authPage) .appGrid {
  background: var(--altara-bg);
}

body.theme-resolved-light:not(.authPage) .panel,
body.theme-resolved-light:not(.authPage) .card {
  border-color: var(--altara-border);
  background:
    radial-gradient(140% 120% at -8% -12%, rgba(255, 255, 255, 0.72), transparent 54%),
    linear-gradient(180deg, var(--altara-surface), var(--altara-surface-elevated));
  box-shadow:
    0 20px 56px rgba(61, 48, 34, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body.theme-resolved-light:not(.authPage) .panel.left,
body.theme-resolved-light:not(.authPage) .panel.mid,
body.theme-resolved-light:not(.authPage) .panel.right,
body.theme-resolved-light:not(.authPage) .leftDockGroups,
body.theme-resolved-light:not(.authPage) .leftDockDms,
body.theme-resolved-light:not(.authPage) .midTop,
body.theme-resolved-light:not(.authPage) .rightTop,
body.theme-resolved-light:not(.authPage) .midBody,
body.theme-resolved-light:not(.authPage) .rightBody,
body.theme-resolved-light:not(.authPage) .panelBody,
body.theme-resolved-light:not(.authPage) .leftList {
  background: var(--altara-bg) !important;
}

body.theme-resolved-light:not(.authPage) .leftDockGroups {
  border-right-color: var(--altara-border) !important;
}

body.theme-resolved-light:not(.authPage) .panel.right {
  border-left-color: var(--altara-border);
}

body.theme-resolved-light:not(.authPage) .panel.left::after {
  background: var(--altara-border);
}

body.theme-resolved-light:not(.authPage) .panelHeader,
body.theme-resolved-light:not(.authPage) .leftTop,
body.theme-resolved-light:not(.authPage) .midTop,
body.theme-resolved-light:not(.authPage) .rightTop {
  border-bottom-color: var(--altara-border);
  background: var(--altara-bg);
}

body.theme-resolved-light:not(.authPage) .sidebarBrand__name,
body.theme-resolved-light:not(.authPage) .panelTitle,
body.theme-resolved-light:not(.authPage) .hTitle,
body.theme-resolved-light:not(.authPage) .sectionTitle,
body.theme-resolved-light:not(.authPage) .rightTitleRow .hTitle,
body.theme-resolved-light:not(.authPage) .dm-name,
body.theme-resolved-light:not(.authPage) .name,
body.theme-resolved-light:not(.authPage) .presenceName,
body.theme-resolved-light:not(.authPage) .meName {
  color: var(--altara-text) !important;
}

body.theme-resolved-light:not(.authPage) .meta,
body.theme-resolved-light:not(.authPage) .meTag,
body.theme-resolved-light:not(.authPage) .dm-handle,
body.theme-resolved-light:not(.authPage) .presenceHandle,
body.theme-resolved-light:not(.authPage) .presenceState,
body.theme-resolved-light:not(.authPage) .hint,
body.theme-resolved-light:not(.authPage) .muted,
body.theme-resolved-light:not(.authPage) .friendsSectionTitle,
body.theme-resolved-light:not(.authPage) .leftDockDms #dmList .dmListSectionTitle,
body.theme-resolved-light:not(.authPage) .sectionTitle {
  color: var(--altara-text-muted) !important;
}

body.theme-resolved-light:not(.authPage) .searchBox .input,
body.theme-resolved-light:not(.authPage) .friendsSearch .input,
body.theme-resolved-light:not(.authPage) .serverMembersSearch,
body.theme-resolved-light:not(.authPage) .input,
body.theme-resolved-light:not(.authPage) input:not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
body.theme-resolved-light:not(.authPage) textarea,
body.theme-resolved-light:not(.authPage) select {
  border-color: var(--altara-border);
  background: var(--altara-input);
  color: var(--altara-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body.theme-resolved-light:not(.authPage) .input::placeholder,
body.theme-resolved-light:not(.authPage) textarea::placeholder {
  color: var(--altara-text-soft);
}

body.theme-resolved-light:not(.authPage) .input:focus,
body.theme-resolved-light:not(.authPage) input:not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus,
body.theme-resolved-light:not(.authPage) textarea:focus,
body.theme-resolved-light:not(.authPage) select:focus {
  border-color: var(--altara-accent-border);
  background: color-mix(in srgb, var(--altara-input) 86%, var(--altara-accent));
  box-shadow: 0 0 0 3px var(--altara-accent-soft);
}

body.theme-resolved-light:not(.authPage) .searchIcon,
body.theme-resolved-light:not(.authPage) .gifSearchIcon {
  color: var(--altara-text-soft);
}

body.theme-resolved-light:not(.authPage) .btn:not(.callCtrlBtn):not(.callMiniBtn),
body.theme-resolved-light:not(.authPage) .smallBtn,
body.theme-resolved-light:not(.authPage) .midNavBtn {
  border-color: var(--altara-border);
  background: var(--altara-surface-elevated);
  color: var(--altara-text);
}

body.theme-resolved-light:not(.authPage) .btn:not(.callCtrlBtn):not(.callMiniBtn):hover,
body.theme-resolved-light:not(.authPage) .smallBtn:hover,
body.theme-resolved-light:not(.authPage) .midNavBtn:hover:not(:disabled) {
  border-color: var(--altara-border-strong);
  background: var(--altara-hover);
  color: var(--altara-text);
}

body.theme-resolved-light:not(.authPage) .btn.primary:not(.callCtrlBtn):not(.callMiniBtn),
body.theme-resolved-light:not(.authPage) .smallBtn.primary,
body.theme-resolved-light:not(.authPage) .btn.btn--accent:not(.callCtrlBtn):not(.callMiniBtn),
body.theme-resolved-light:not(.authPage) .chip.active,
body.theme-resolved-light:not(.authPage) .pill.active {
  border-color: var(--altara-accent-border);
  background: var(--altara-accent-soft);
  color: var(--altara-accent-strong);
}

body.theme-resolved-light:not(.authPage) .midTabs .chip {
  color: var(--altara-text-muted);
}

body.theme-resolved-light:not(.authPage) .midTabs .chip.active {
  color: var(--altara-text) !important;
  background: transparent;
  text-decoration-color: var(--altara-accent);
}

body.theme-resolved-light:not(.authPage) .leftDockDms #dmList .dm-item,
body.theme-resolved-light:not(.authPage) #friendsList .row,
body.theme-resolved-light:not(.authPage) #incomingList .row,
body.theme-resolved-light:not(.authPage) #outgoingList .row,
body.theme-resolved-light:not(.authPage) .row,
body.theme-resolved-light:not(.authPage) .presenceRow,
body.theme-resolved-light:not(.authPage) .dm-item,
body.theme-resolved-light:not(.authPage) .serverMemberRow {
  border-color: transparent;
  background: transparent;
  color: var(--altara-text-soft);
}

body.theme-resolved-light:not(.authPage) .leftDockDms #dmList .dm-item:hover,
body.theme-resolved-light:not(.authPage) #friendsList .row:hover,
body.theme-resolved-light:not(.authPage) #incomingList .row:hover,
body.theme-resolved-light:not(.authPage) #outgoingList .row:hover,
body.theme-resolved-light:not(.authPage) .row:hover,
body.theme-resolved-light:not(.authPage) .presenceRow:hover,
body.theme-resolved-light:not(.authPage) .dm-item:hover,
body.theme-resolved-light:not(.authPage) .serverMemberRow:hover {
  border-color: var(--altara-border);
  background: rgba(20, 18, 15, 0.045);
}

body.theme-resolved-light:not(.authPage) .leftDockDms #dmList .dm-item.is-active,
body.theme-resolved-light:not(.authPage) .dm-item.is-active,
body.theme-resolved-light:not(.authPage) .groupOrb.is-active {
  border-color: var(--altara-accent-border);
  background: var(--altara-accent-soft);
}

body.theme-resolved-light:not(.authPage) .leftDockGroups,
body.theme-resolved-light:not(.authPage) .groupOrbUnreadBadge,
body.theme-resolved-light:not(.authPage) .statusDot {
  border-color: var(--altara-bg) !important;
}

body.theme-resolved-light:not(.authPage) .groupOrb,
body.theme-resolved-light:not(.authPage) .groupOrb--app-home,
body.theme-resolved-light:not(.authPage) #meProfileCard,
body.theme-resolved-light:not(.authPage) #meProfileCard #meAvatar,
body.theme-resolved-light:not(.authPage) .leftDockDms #dmList .avatar,
body.theme-resolved-light:not(.authPage) .row .avatar,
body.theme-resolved-light:not(.authPage) .presenceAvatar,
body.theme-resolved-light:not(.authPage) #activeNow .presenceAvatar,
body.theme-resolved-light:not(.authPage) .serverMemberRow,
body.theme-resolved-light:not(.authPage) .serverMembersSearch,
body.theme-resolved-light:not(.authPage) .addToolCard,
body.theme-resolved-light:not(.authPage) .split2 > div {
  border-color: var(--altara-border) !important;
  background: var(--altara-surface) !important;
  box-shadow: none;
}

body.theme-resolved-light:not(.authPage) .groupOrb:hover,
body.theme-resolved-light:not(.authPage) #meProfileCard .meCtrlBtn:hover,
body.theme-resolved-light:not(.authPage) #activeNow .presenceRow:hover {
  border-color: var(--altara-accent-border) !important;
  background: var(--altara-hover) !important;
}

body.theme-resolved-light:not(.authPage) .groupOrbRailDivider {
  background: var(--altara-border);
}

body.theme-resolved-light:not(.authPage) .groupOrbUnreadBadge,
body.theme-resolved-light:not(.authPage) .sidebarBrand__mark,
body.theme-resolved-light:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn__badge {
  background: var(--altara-accent);
  color: #181512;
}

body.theme-resolved-light:not(.authPage) #meProfileCard {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 16px 36px rgba(61, 48, 34, 0.08);
}

body.theme-resolved-light:not(.authPage) #meProfileCard .meCtrlBtn {
  color: var(--altara-text-soft);
}

body.theme-resolved-light:not(.authPage) #meProfileCard .meCtrlBtn.is-on,
body.theme-resolved-light:not(.authPage) #meProfileCard:focus-visible {
  border-color: var(--altara-accent-border);
  background: var(--altara-accent-soft);
  color: var(--altara-accent-strong);
}

body.theme-resolved-light:not(.authPage) #onlineCount,
body.theme-resolved-light:not(.authPage) #activeNow .presenceState,
body.theme-resolved-light:not(.authPage) .statusPill {
  border-color: var(--altara-border);
  background: var(--altara-surface-elevated);
  color: var(--altara-text-muted);
}

body.theme-resolved-light:not(.authPage) #activeNow .presenceRow {
  border-color: var(--altara-border);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.18) 56%),
    var(--altara-surface-elevated);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 24px rgba(61, 48, 34, 0.08);
}

body.theme-resolved-light:not(.authPage) #activeNow .presenceRow::before {
  background: var(--altara-accent);
}

body.theme-resolved-light:not(.authPage) #activeNow .hint {
  border-color: var(--altara-border);
  background: var(--altara-surface-elevated);
}

body.theme-resolved-light:not(.authPage) .widgetCard {
  border-color: var(--altara-border);
  background:
    radial-gradient(130% 120% at -8% -12%, rgba(255, 255, 255, 0.75), transparent 54%),
    linear-gradient(180deg, var(--altara-surface), var(--altara-surface-elevated));
  box-shadow:
    0 16px 34px rgba(61, 48, 34, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

body.theme-resolved-light:not(.authPage) .widgetCard:hover {
  border-color: var(--altara-border-strong);
  box-shadow:
    0 18px 36px rgba(61, 48, 34, 0.12),
    0 0 0 1px rgba(61, 48, 34, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

body.theme-resolved-light:not(.authPage) .widgetCard__label,
body.theme-resolved-light:not(.authPage) .widgetCard__value,
body.theme-resolved-light:not(.authPage) .widgetCalendarDateDay,
body.theme-resolved-light:not(.authPage) .widgetTodoText {
  color: var(--altara-text);
}

body.theme-resolved-light:not(.authPage) .widgetCard__meta,
body.theme-resolved-light:not(.authPage) .widgetCard__value--small,
body.theme-resolved-light:not(.authPage) .widgetCalendarMonthChip,
body.theme-resolved-light:not(.authPage) .widgetCalendarWeekdayCell {
  color: var(--altara-text-muted);
}

body.theme-resolved-light:not(.authPage) .modalCard,
body.theme-resolved-light:not(.authPage) .userCardCard,
body.theme-resolved-light:not(.authPage) .meProfilePopout,
body.theme-resolved-light:not(.authPage) .meStatusMenu,
body.theme-resolved-light:not(.authPage) .statusMenu,
body.theme-resolved-light:not(.authPage) .appColorPicker__card {
  border-color: var(--altara-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.26)),
    var(--altara-surface);
  color: var(--altara-text);
  box-shadow: 0 24px 70px rgba(61, 48, 34, 0.18);
}

body.theme-resolved-light #profileOverlay.settingsOverlay {
  background: rgba(245, 241, 232, 0.72);
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsCard,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsSidebar {
  background:
    radial-gradient(circle at 86% 0%, var(--settings-accent-soft), transparent 32%),
    var(--settings-bg);
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsSearchInput,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsSidebarAvatar,
body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceMiniInput,
body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceMiniPreview,
body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceMiniPreviewNav,
body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceMiniPreviewBody {
  background: var(--settings-surface);
  color: var(--settings-text);
  border-color: var(--settings-border);
}

body.theme-resolved-light:not(.authPage) ::-webkit-scrollbar-thumb {
  background-color: rgba(20, 18, 15, 0.18);
}

body.theme-resolved-light:not(.authPage) ::-webkit-scrollbar-thumb:hover {
  background-color: var(--altara-accent-border);
}

/* White theme contrast pass for desktop chrome, settings nav, and dense shell text. */
body.theme-resolved-light:not(.authPage) {
  --altara-surface-muted: #efe7db;
}

body.theme-resolved-light:not(.authPage).desktop-native-titlebar-overlay .desktopTitlebarDragRegion {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0)),
    var(--altara-bg);
  border-bottom: 1px solid var(--altara-border);
}

body.theme-resolved-light:not(.authPage).desktop-titlebar-overlay .app:not(.wrap)::before,
body.theme-resolved-light:not(.authPage).desktop-titlebar-overlay .wrap.app::before {
  background: var(--altara-border);
}

body.theme-resolved-light:not(.authPage).desktop-titlebar-overlay .app:not(.wrap) {
  border-color: var(--altara-border);
  background: var(--altara-bg);
  box-shadow: 0 24px 70px rgba(61, 48, 34, 0.12);
}

body.theme-resolved-light:not(.authPage).desktop-native-titlebar-overlay .desktopWindowControls {
  border-color: var(--altara-border);
  background: rgba(255, 253, 248, 0.9);
  box-shadow: 0 8px 22px rgba(61, 48, 34, 0.1);
}

body.theme-resolved-light:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn {
  border-left-color: var(--altara-border);
  color: var(--altara-text);
  background: transparent;
}

body.theme-resolved-light:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn:hover,
body.theme-resolved-light:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn:focus-visible,
body.theme-resolved-light:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn--inbox.is-active {
  background: var(--altara-hover);
  color: var(--altara-text);
}

body.theme-resolved-light:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn--close:hover,
body.theme-resolved-light:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn--close:focus-visible {
  background: #d84b58;
  color: #fffdf8;
}

body.theme-resolved-light:not(.authPage).desktop-native-titlebar-overlay .desktopWindowBtn__badge {
  border-color: var(--altara-surface);
  background: var(--altara-accent);
  color: #181512;
  box-shadow: none;
}

body.theme-resolved-light:not(.authPage).desktop-titlebar-overlay .midNavBtn,
body.theme-resolved-light:not(.authPage) .btn.midNavBtn {
  border-color: var(--altara-border);
  background: rgba(255, 253, 248, 0.82);
  color: var(--altara-text);
  box-shadow: 0 8px 20px rgba(61, 48, 34, 0.08);
}

body.theme-resolved-light:not(.authPage).desktop-titlebar-overlay .midNavBtn:hover:not(:disabled),
body.theme-resolved-light:not(.authPage) .btn.midNavBtn:hover:not(:disabled) {
  border-color: var(--altara-border-strong);
  background: var(--altara-hover);
}

body.theme-resolved-light:not(.authPage).desktop-titlebar-overlay .midNavBtn:disabled,
body.theme-resolved-light:not(.authPage) .btn.midNavBtn:disabled {
  color: var(--altara-text-soft);
  background: rgba(255, 253, 248, 0.54);
}

body.theme-resolved-light:not(.authPage) .desktopInboxPanel,
body.theme-resolved-light:not(.authPage).desktop-native-titlebar-overlay .desktopInboxPanel {
  border-color: var(--altara-border);
  background: var(--altara-surface);
  color: var(--altara-text);
  box-shadow: 0 24px 60px rgba(61, 48, 34, 0.18);
}

body.theme-resolved-light:not(.authPage).desktop-native-titlebar-overlay .desktopInboxPanel__header,
body.theme-resolved-light:not(.authPage).desktop-native-titlebar-overlay .desktopInboxPanel__tabs,
body.theme-resolved-light:not(.authPage).desktop-native-titlebar-overlay .desktopInboxItem {
  border-color: var(--altara-border);
  background: var(--altara-surface-elevated);
  color: var(--altara-text);
}

body.theme-resolved-light:not(.authPage).desktop-native-titlebar-overlay .desktopInboxPanel__summary,
body.theme-resolved-light:not(.authPage).desktop-native-titlebar-overlay .desktopInboxItem__text,
body.theme-resolved-light:not(.authPage).desktop-native-titlebar-overlay .desktopInboxItem__meta,
body.theme-resolved-light:not(.authPage).desktop-native-titlebar-overlay .desktopInboxEmpty {
  color: var(--altara-text-muted);
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsNavItem {
  color: var(--settings-soft);
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsNavItem:hover,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsNavItem:focus-visible {
  border-color: var(--settings-border-strong);
  background: var(--settings-row-hover);
  color: var(--settings-text);
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsNavItem.is-active,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsNavItem[aria-current="page"] {
  border-color: var(--settings-accent-border);
  background: var(--settings-accent-soft);
  color: var(--settings-text);
  box-shadow: inset 3px 0 0 var(--settings-accent);
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsNavItem[disabled],
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsNavItem.is-locked {
  opacity: 0.72;
  color: var(--settings-muted);
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsNavItem small {
  border-color: var(--settings-border);
  background: rgba(32, 28, 22, 0.045);
  color: var(--settings-muted);
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsGroupLabel,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsSubtitle,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsHint,
body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceSectionHeader p,
body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceHint {
  color: var(--settings-muted);
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsCloseBtn,
body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceThemeCard,
body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceSection,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsCardSection,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsIdentityCard {
  border-color: var(--settings-border);
  background: var(--settings-surface);
  color: var(--settings-text);
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsCloseBtn:hover,
body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceThemeCard:hover {
  border-color: var(--settings-border-strong);
  background: var(--settings-row-hover);
}

body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceThemeCard.is-selected,
body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceSwatch.is-selected {
  border-color: var(--settings-accent-border);
  box-shadow: 0 0 0 3px var(--settings-accent-soft);
}

body.theme-resolved-light:not(.authPage) .leftDockTitle,
body.theme-resolved-light:not(.authPage) .serverSidebarName,
body.theme-resolved-light:not(.authPage) .serverNavLabel,
body.theme-resolved-light:not(.authPage) .widgetCard__label,
body.theme-resolved-light:not(.authPage) .widgetCalendarAgendaTitle,
body.theme-resolved-light:not(.authPage) .widgetsAddPanel__title,
body.theme-resolved-light:not(.authPage) .widgetsEditBar__title,
body.theme-resolved-light:not(.authPage) .widgetCard__value,
body.theme-resolved-light:not(.authPage) .widgetTodoHeroValue,
body.theme-resolved-light:not(.authPage) .widgetCalendarDateDay,
body.theme-resolved-light:not(.authPage) .widgetTodoText,
body.theme-resolved-light:not(.authPage) .widgetCalendarDayCell {
  color: var(--altara-text) !important;
}

body.theme-resolved-light:not(.authPage) .serverSidebarSub,
body.theme-resolved-light:not(.authPage) .widgetCard__meta,
body.theme-resolved-light:not(.authPage) .widgetCalendarDateMonth,
body.theme-resolved-light:not(.authPage) .widgetCalendarAgendaDay,
body.theme-resolved-light:not(.authPage) .widgetCalendarAgendaEmpty,
body.theme-resolved-light:not(.authPage) .widgetTodoMetaInline,
body.theme-resolved-light:not(.authPage) .widgetCalendarDayCell.is-other,
body.theme-resolved-light:not(.authPage) .badge,
body.theme-resolved-light:not(.authPage) #pendingBadge {
  color: var(--altara-text-muted) !important;
}

body.theme-resolved-light:not(.authPage) .widgetNotesInput,
body.theme-resolved-light:not(.authPage) .widgetTodoComposer,
body.theme-resolved-light:not(.authPage) .widgetTodoHero,
body.theme-resolved-light:not(.authPage) .widgetTodoItem,
body.theme-resolved-light:not(.authPage) .widgetsAddPanel,
body.theme-resolved-light:not(.authPage) .widgetsEditBar,
body.theme-resolved-light:not(.authPage) .widgetTodoToggle,
body.theme-resolved-light:not(.authPage) .widgetTodoRemove,
body.theme-resolved-light:not(.authPage) .widgetTodoMove,
body.theme-resolved-light:not(.authPage) .widgetTodoEdit,
body.theme-resolved-light:not(.authPage) .widgetCardTool,
body.theme-resolved-light:not(.authPage) .widgetCardSizeBadge,
body.theme-resolved-light:not(.authPage) .widgetResizeHandle,
body.theme-resolved-light:not(.authPage) .widgetTodoHeroChip,
body.theme-resolved-light:not(.authPage) .widgetTodoStatusChip,
body.theme-resolved-light:not(.authPage) .widgetTodoMetaChip,
body.theme-resolved-light:not(.authPage) .widgetCalendarMonthChip {
  border-color: var(--altara-border);
  background: var(--altara-surface-elevated);
  color: var(--altara-text-muted);
}

body.theme-resolved-light:not(.authPage) .widgetTodoToggle:hover,
body.theme-resolved-light:not(.authPage) .widgetTodoRemove:hover,
body.theme-resolved-light:not(.authPage) .widgetTodoMove:hover,
body.theme-resolved-light:not(.authPage) .widgetTodoEdit:hover,
body.theme-resolved-light:not(.authPage) .widgetCardTool:hover,
body.theme-resolved-light:not(.authPage) .widgetCardSizeBadge--btn:hover,
body.theme-resolved-light:not(.authPage) .widgetResizeHandle:hover {
  border-color: var(--altara-accent-border);
  background: var(--altara-hover);
  color: var(--altara-text);
}

body.theme-resolved-light:not(.authPage) .widgetChecklistProgressBar,
body.theme-resolved-light:not(.authPage) .badge,
body.theme-resolved-light:not(.authPage) #pendingBadge {
  background: rgba(32, 28, 22, 0.08);
}

body.theme-resolved-light:not(.authPage) .widgetCalendarDayCell.is-today {
  border-color: var(--altara-accent-border);
  background: var(--altara-accent);
  color: #181512 !important;
}

body.theme-resolved-light:not(.authPage) .modalTitle,
body.theme-resolved-light:not(.authPage) .userCardName,
body.theme-resolved-light:not(.authPage) .meProfilePopout__name {
  color: var(--altara-text) !important;
}

body.theme-resolved-light:not(.authPage) .modalSubtitle,
body.theme-resolved-light:not(.authPage) .userCardHandle,
body.theme-resolved-light:not(.authPage) .meProfilePopout__handle {
  color: var(--altara-text-muted) !important;
}

/* White theme final coverage: app chrome, shared shell surfaces, and readable text. */
html.theme-resolved-light,
body.theme-resolved-light {
  background-color: var(--altara-bg) !important;
  color: var(--altara-text);
}

body.theme-resolved-light:not(.authPage) .desktopTitlebarDragRegion {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0)),
    var(--altara-bg) !important;
  border-bottom: 1px solid var(--altara-border) !important;
}

body.theme-resolved-light:not(.authPage) .app:not(.wrap),
body.theme-resolved-light:not(.authPage) .appGrid,
body.theme-resolved-light:not(.authPage) .wrap.app {
  border-color: var(--altara-border) !important;
  background: var(--altara-bg) !important;
  color: var(--altara-text);
  box-shadow: 0 24px 70px rgba(61, 48, 34, 0.12) !important;
}

body.theme-resolved-light:not(.authPage) .topbar,
body.theme-resolved-light:not(.authPage) .panelHeader,
body.theme-resolved-light:not(.authPage) .serverSidebarHeader,
body.theme-resolved-light:not(.authPage) .secondarySidebarHeader,
body.theme-resolved-light:not(.authPage) .channelHeader,
body.theme-resolved-light:not(.authPage) .dmHeader,
body.theme-resolved-light:not(.authPage) .chatHeader {
  border-color: var(--altara-border) !important;
  background: var(--altara-surface) !important;
  color: var(--altara-text) !important;
  box-shadow: none !important;
}

body.theme-resolved-light:not(.authPage) .leftDockGroups,
body.theme-resolved-light:not(.authPage) .groupsRail,
body.theme-resolved-light:not(.authPage) .leftDockDms,
body.theme-resolved-light:not(.authPage) #leftFriends,
body.theme-resolved-light:not(.authPage) #friendsMain,
body.theme-resolved-light:not(.authPage) .serverSidebar,
body.theme-resolved-light:not(.authPage) .serverChannelList,
body.theme-resolved-light:not(.authPage) .serverMembersPanel,
body.theme-resolved-light:not(.authPage) .settingsPanel,
body.theme-resolved-light:not(.authPage) .settingsMain,
body.theme-resolved-light:not(.authPage) .settingsContent {
  border-color: var(--altara-border) !important;
  background: var(--altara-bg) !important;
  color: var(--altara-text);
}

body.theme-resolved-light:not(.authPage) .serverChannelItem,
body.theme-resolved-light:not(.authPage) .serverNavItem,
body.theme-resolved-light:not(.authPage) .channelRow,
body.theme-resolved-light:not(.authPage) .friend-row,
body.theme-resolved-light:not(.authPage) #leftFriends .row,
body.theme-resolved-light:not(.authPage) #friendsMain .row,
body.theme-resolved-light:not(.authPage) .quickPanel,
body.theme-resolved-light:not(.authPage) .settingsInput,
body.theme-resolved-light:not(.authPage) .settingsSelect,
body.theme-resolved-light:not(.authPage) .settingsTextarea {
  border-color: var(--altara-border) !important;
  background: var(--altara-surface-elevated) !important;
  color: var(--altara-text) !important;
}

body.theme-resolved-light:not(.authPage) .serverChannelItem:hover,
body.theme-resolved-light:not(.authPage) .serverNavItem:hover,
body.theme-resolved-light:not(.authPage) .channelRow:hover,
body.theme-resolved-light:not(.authPage) .friend-row:hover,
body.theme-resolved-light:not(.authPage) #leftFriends .row:hover,
body.theme-resolved-light:not(.authPage) #friendsMain .row:hover {
  border-color: var(--altara-border-strong) !important;
  background: var(--altara-hover) !important;
  color: var(--altara-text) !important;
}

body.theme-resolved-light:not(.authPage) .serverChannelItem.is-active,
body.theme-resolved-light:not(.authPage) .serverNavItem.is-active,
body.theme-resolved-light:not(.authPage) .channelRow.is-active,
body.theme-resolved-light:not(.authPage) .friend-row.is-active {
  border-color: var(--altara-accent-border) !important;
  background: var(--altara-accent-soft) !important;
  color: var(--altara-text) !important;
}

body.theme-resolved-light:not(.authPage) .brand,
body.theme-resolved-light:not(.authPage) .serverChannelName,
body.theme-resolved-light:not(.authPage) .serverMemberName,
body.theme-resolved-light:not(.authPage) .channelTitle,
body.theme-resolved-light:not(.authPage) .chatTitle,
body.theme-resolved-light:not(.authPage) .settingsTitle,
body.theme-resolved-light:not(.authPage) .settingsLabel,
body.theme-resolved-light:not(.authPage) .appearanceSectionHeader h3,
body.theme-resolved-light:not(.authPage) .appearancePageHeader h2 {
  color: var(--altara-text) !important;
}

body.theme-resolved-light:not(.authPage) .serverChannelMeta,
body.theme-resolved-light:not(.authPage) .serverMemberMeta,
body.theme-resolved-light:not(.authPage) .channelMeta,
body.theme-resolved-light:not(.authPage) .settingsHelp,
body.theme-resolved-light:not(.authPage) .settingsDescription,
body.theme-resolved-light:not(.authPage) .settingsSubtext,
body.theme-resolved-light:not(.authPage) .appearancePageEyebrow,
body.theme-resolved-light:not(.authPage) .appearanceThemeCard small {
  color: var(--altara-text-muted) !important;
}

/* White theme profile/settings coverage: same UI, light ALTARA colors. */
body.theme-resolved-light:not(.authPage) {
  --profile-light-overlay: rgba(245, 241, 232, 0.72);
  --profile-light-shadow: rgba(61, 48, 34, 0.16);
}

body.theme-resolved-light:not(.authPage) .modal:not(.hidden):not(#desktopSharePickerModal),
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) {
  background: var(--profile-light-overlay) !important;
}

body.theme-resolved-light:not(.authPage) .modalCard:not(.desktopSharePickerCard),
body.theme-resolved-light:not(.authPage) .profileWidgetModalCard,
body.theme-resolved-light:not(.authPage) .profileWidgetItemModalCard,
body.theme-resolved-light:not(.authPage) .appConfirmModalCard,
body.theme-resolved-light:not(.authPage) .serverCreateCard,
body.theme-resolved-light:not(.authPage) .serverChannelCreateCard,
body.theme-resolved-light:not(.authPage) .dmGroupCreateCard {
  border-color: var(--altara-border) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.24)),
    var(--altara-surface) !important;
  color: var(--altara-text) !important;
  box-shadow: 0 24px 70px var(--profile-light-shadow) !important;
}

body.theme-resolved-light:not(.authPage) .modalClose,
body.theme-resolved-light:not(.authPage) .icon-btn,
body.theme-resolved-light:not(.authPage) .msgActionBtn {
  border-color: var(--altara-border) !important;
  background: var(--altara-surface-elevated) !important;
  color: var(--altara-text-muted) !important;
}

body.theme-resolved-light:not(.authPage) .modalClose:hover,
body.theme-resolved-light:not(.authPage) .icon-btn:hover,
body.theme-resolved-light:not(.authPage) .msgActionBtn:hover {
  border-color: var(--altara-border-strong) !important;
  background: var(--altara-hover) !important;
  color: var(--altara-text) !important;
}

body.theme-resolved-light:not(.authPage) #meStatusMenu.meStatusMenu,
body.theme-resolved-light:not(.authPage) .meStatusMenu,
body.theme-resolved-light:not(.authPage) .statusMenu,
body.theme-resolved-light:not(.authPage) .msgMenu,
body.theme-resolved-light:not(.authPage) .profileWidgetInlinePopover,
body.theme-resolved-light:not(.authPage) .userCardWidgetMenuList {
  border-color: var(--altara-border) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.3)),
    var(--altara-surface) !important;
  color: var(--altara-text) !important;
  box-shadow: 0 18px 46px var(--profile-light-shadow) !important;
}

body.theme-resolved-light:not(.authPage) .meStatusMenu__meta,
body.theme-resolved-light:not(.authPage) .msgMenu__meta,
body.theme-resolved-light:not(.authPage) .profileWidgetInlineStatus {
  color: var(--altara-text-muted) !important;
}

body.theme-resolved-light:not(.authPage) .meStatusMenu__item,
body.theme-resolved-light:not(.authPage) .msgMenu__item,
body.theme-resolved-light:not(.authPage) .userCardWidgetMenuItem {
  color: var(--altara-text-muted) !important;
}

body.theme-resolved-light:not(.authPage) .meStatusMenu__item:hover,
body.theme-resolved-light:not(.authPage) .meStatusMenu__item:focus-visible,
body.theme-resolved-light:not(.authPage) .meStatusMenu__item.is-active,
body.theme-resolved-light:not(.authPage) .msgMenu__item:hover,
body.theme-resolved-light:not(.authPage) .msgMenu__item:focus-visible,
body.theme-resolved-light:not(.authPage) .userCardWidgetMenuItem:hover,
body.theme-resolved-light:not(.authPage) .userCardWidgetMenuItem:focus-visible {
  border-color: var(--altara-accent-border) !important;
  background: var(--altara-accent-soft) !important;
  color: var(--altara-text) !important;
}

body.theme-resolved-light:not(.authPage) .meStatusMenu__label {
  color: inherit !important;
}

body.theme-resolved-light:not(.authPage) .meStatusMenu__indicator {
  border-color: var(--altara-border-strong) !important;
  background: var(--altara-surface-elevated) !important;
}

body.theme-resolved-light:not(.authPage) .meStatusMenu__item.is-active .meStatusMenu__indicator {
  border-color: var(--altara-accent-border) !important;
  background: var(--altara-accent-soft) !important;
}

body.theme-resolved-light:not(.authPage) .meProfilePopout {
  border-color: var(--altara-border) !important;
  background: var(--altara-surface) !important;
  color: var(--altara-text) !important;
  box-shadow:
    0 24px 70px var(--profile-light-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
}

body.theme-resolved-light:not(.authPage) .meProfilePopout__banner {
  border-bottom-color: var(--altara-border) !important;
  background:
    radial-gradient(circle at 22% 10%, var(--altara-accent-soft), transparent 34%),
    linear-gradient(135deg, #efe7db 0%, #f8f3ea 54%, #fffdf8 100%) !important;
}

body.theme-resolved-light:not(.authPage) .meProfilePopout__banner.has-banner-media::after,
body.theme-resolved-light:not(.authPage) .meProfilePopout__banner.has-media::after,
body.theme-resolved-light:not(.authPage) #userCardModal .userCardBanner.has-banner-media::after,
body.theme-resolved-light:not(.authPage) #userCardModal .userCardBanner.has-media::after,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsIdentityBanner::after {
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.02), rgba(32, 28, 22, 0.18)) !important;
}

body.theme-resolved-light:not(.authPage) .meProfilePopout__avatar,
body.theme-resolved-light:not(.authPage) .meProfilePopout__widgetMedia {
  border-color: var(--altara-surface) !important;
  background: var(--altara-surface-elevated) !important;
  color: var(--altara-accent-strong) !important;
  box-shadow: 0 10px 24px rgba(61, 48, 34, 0.12) !important;
}

body.theme-resolved-light:not(.authPage) .meProfilePopout__avatarFallback,
body.theme-resolved-light:not(.authPage) .userCardWidgetItemFallback,
body.theme-resolved-light:not(.authPage) .profileWidgetItemReadonlyPreviewFallback {
  background:
    radial-gradient(circle at 30% 18%, var(--altara-accent-soft), transparent 36%),
    linear-gradient(160deg, var(--altara-surface-elevated), var(--altara-surface-muted)) !important;
  color: var(--altara-accent-strong) !important;
}

body.theme-resolved-light:not(.authPage) .meProfilePopout__identity:hover,
body.theme-resolved-light:not(.authPage) .meProfilePopout__identity:focus-visible,
body.theme-resolved-light:not(.authPage) .meProfilePopout__statusText:hover,
body.theme-resolved-light:not(.authPage) .meProfilePopout__statusText:focus-visible {
  border-color: var(--altara-accent-border) !important;
  background: var(--altara-accent-soft) !important;
  color: var(--altara-text) !important;
}

body.theme-resolved-light:not(.authPage) .meProfilePopout__name,
body.theme-resolved-light:not(.authPage) .meProfilePopout__widgetName,
body.theme-resolved-light:not(.authPage) .meProfilePopout__emptyTitle {
  color: var(--altara-text) !important;
}

body.theme-resolved-light:not(.authPage) .meProfilePopout__handle,
body.theme-resolved-light:not(.authPage) .meProfilePopout__meta,
body.theme-resolved-light:not(.authPage) .meProfilePopout__bio,
body.theme-resolved-light:not(.authPage) .meProfilePopout__sectionLabel,
body.theme-resolved-light:not(.authPage) .meProfilePopout__widgetType,
body.theme-resolved-light:not(.authPage) .meProfilePopout__widgetMeta {
  color: var(--altara-text-muted) !important;
}

body.theme-resolved-light:not(.authPage) .meProfilePopout__statusLine,
body.theme-resolved-light:not(.authPage) .meProfilePopout__about,
body.theme-resolved-light:not(.authPage) .meProfilePopout__widgets,
body.theme-resolved-light:not(.authPage) .meProfilePopout__widgetCard,
body.theme-resolved-light:not(.authPage) .meProfilePopout__action,
body.theme-resolved-light:not(.authPage) .meProfilePopout__statusAction,
body.theme-resolved-light:not(.authPage) .meProfilePopout__subAction {
  border-color: var(--altara-border) !important;
  background: var(--altara-surface-elevated) !important;
  color: var(--altara-text-muted) !important;
}

body.theme-resolved-light:not(.authPage) .meProfilePopout__actions {
  border-top-color: var(--altara-border) !important;
  background: var(--altara-surface) !important;
}

body.theme-resolved-light:not(.authPage) .meProfilePopout__widgetCard:hover,
body.theme-resolved-light:not(.authPage) .meProfilePopout__widgetCard:focus-visible,
body.theme-resolved-light:not(.authPage) .meProfilePopout__action:hover,
body.theme-resolved-light:not(.authPage) .meProfilePopout__action:focus-visible,
body.theme-resolved-light:not(.authPage) .meProfilePopout__statusAction:hover,
body.theme-resolved-light:not(.authPage) .meProfilePopout__statusAction:focus-visible {
  border-color: var(--altara-accent-border) !important;
  background: var(--altara-accent-soft) !important;
  color: var(--altara-text) !important;
}

body.theme-resolved-light:not(.authPage) .meProfilePopout__sectionCount,
body.theme-resolved-light:not(.authPage) .meProfilePopout__action--primary {
  border-color: var(--altara-accent-border) !important;
  background: var(--altara-accent-soft) !important;
  color: var(--altara-accent-strong) !important;
}

body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardCard,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardSurface {
  border-color: var(--altara-border) !important;
  background: var(--altara-surface) !important;
  color: var(--altara-text) !important;
  box-shadow: 0 34px 110px rgba(61, 48, 34, 0.18) !important;
}

body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardOverview,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardPanelsArea,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardPanels {
  border-color: var(--altara-border) !important;
  background: var(--altara-bg) !important;
  color: var(--altara-text) !important;
}

body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardTabs {
  border-bottom-color: var(--altara-border) !important;
  background: var(--altara-surface) !important;
}

body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardTab {
  color: var(--altara-text-muted) !important;
}

body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardTab:hover,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardTab.is-active {
  color: var(--altara-text) !important;
}

body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardTab.is-active::after {
  background: var(--altara-accent) !important;
}

body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardCloseBtn {
  border-color: var(--altara-border) !important;
  background: rgba(255, 253, 248, 0.86) !important;
  color: var(--altara-text-muted) !important;
}

body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardCloseBtn:hover,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardCloseBtn:focus-visible {
  border-color: var(--altara-accent-border) !important;
  background: var(--altara-accent-soft) !important;
  color: var(--altara-text) !important;
}

body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardBanner {
  border-bottom-color: var(--altara-border) !important;
  background:
    radial-gradient(circle at 24% 8%, var(--altara-accent-soft), transparent 34%),
    linear-gradient(135deg, #efe7db 0%, #f8f3ea 54%, #fffdf8 100%) !important;
}

body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardAvatar {
  border-color: var(--altara-surface) !important;
  background: var(--altara-surface-elevated) !important;
  box-shadow: 0 16px 42px rgba(61, 48, 34, 0.16) !important;
}

body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardAvatarStatusDot {
  border-color: var(--altara-surface) !important;
}

body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardName,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardPanelTitle,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetTitle,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetItemTitle,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardSharedTitle,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardMediaTitle,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardEmptyState strong,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardFact__value,
body.theme-resolved-light:not(.authPage) .profileWidgetCatalogResultTitle,
body.theme-resolved-light:not(.authPage) .profileWidgetItemReadonlyPreviewTitle,
body.theme-resolved-light:not(.authPage) .profileWidgetInlineResultTitle {
  color: var(--altara-text) !important;
}

body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardHandle,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardPronouns,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardBio,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardSection__title,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardFact__label,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardPanelEyebrow,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardPanelText,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetsHint,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardMediaSubtitle,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardSharedText,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardEmptyState span,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetItemNote,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetItemMeta,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardTimelineMeta,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardTimelineText,
body.theme-resolved-light:not(.authPage) .profileWidgetCatalogStatus,
body.theme-resolved-light:not(.authPage) .profileWidgetCatalogResultMeta,
body.theme-resolved-light:not(.authPage) .profileWidgetCatalogEmpty,
body.theme-resolved-light:not(.authPage) .profileWidgetItemReadonlyPreviewMeta,
body.theme-resolved-light:not(.authPage) .profileWidgetInlineResultMeta,
body.theme-resolved-light:not(.authPage) .profileWidgetInlineState {
  color: var(--altara-text-muted) !important;
}

body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardStatus,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardRelation,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardBio,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardFact,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardMediaCard,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardSharedCard,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardEmptyState,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetCard,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetItem,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardTimelineItem,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardServerItem,
body.theme-resolved-light:not(.authPage) .profileWidgetEnabledRow,
body.theme-resolved-light:not(.authPage) .profileWidgetCatalogSearch,
body.theme-resolved-light:not(.authPage) .profileWidgetCatalogResult,
body.theme-resolved-light:not(.authPage) .profileWidgetItemReadonlyPreview,
body.theme-resolved-light:not(.authPage) .profileWidgetInlineResultBtn {
  border-color: var(--altara-border) !important;
  background: var(--altara-surface-elevated) !important;
  color: var(--altara-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetFeatured {
  border-color: var(--altara-accent-border) !important;
  background: var(--altara-accent-soft) !important;
}

body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetBadge,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardChip,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetBtn,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetItemActionBtn,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetMenuTrigger {
  border-color: var(--altara-border) !important;
  background: var(--altara-surface-muted) !important;
  color: var(--altara-text-muted) !important;
}

body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetBadge[data-status],
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetAddBtn,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetsTopBar > .userCardWidgetBtn,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardTimelineKind {
  border-color: var(--altara-accent-border) !important;
  background: var(--altara-accent-soft) !important;
  color: var(--altara-accent-strong) !important;
}

body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardWidgetItemMedia,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardMediaPreview,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardServerOrb,
body.theme-resolved-light:not(.authPage) .profileWidgetCatalogResultMedia,
body.theme-resolved-light:not(.authPage) .profileWidgetItemReadonlyPreviewMedia,
body.theme-resolved-light:not(.authPage) .profileWidgetInlineResultMedia {
  border-color: var(--altara-border) !important;
  background: var(--altara-surface-muted) !important;
}

body.theme-resolved-light #profileOverlay.settingsOverlay {
  --settings-bg: var(--altara-bg);
  --settings-panel: var(--altara-bg-soft);
  --settings-surface: var(--altara-surface);
  --settings-surface-2: var(--altara-surface-elevated);
  --settings-row: rgba(32, 28, 22, 0.045);
  --settings-row-hover: var(--altara-hover);
  --settings-border: var(--altara-border);
  --settings-border-strong: var(--altara-border-strong);
  --settings-text: var(--altara-text);
  --settings-soft: var(--altara-text-muted);
  --settings-muted: var(--altara-text-soft);
  --settings-accent: var(--altara-accent);
  --settings-accent-soft: var(--altara-accent-soft);
  --settings-accent-border: var(--altara-accent-border);
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsCard,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsMain,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsMainBody {
  background: var(--settings-bg) !important;
  color: var(--settings-text) !important;
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsSidebar {
  border-right-color: var(--settings-border) !important;
  background: var(--settings-panel) !important;
  color: var(--settings-text) !important;
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsCardSection,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsIdentityCard,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsReportsDetailCard,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsReportsItem,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsReportsKvItem,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsReportsEvidenceCard,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsKeybindRow,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsSoundRow,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsBlockedRow,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsPlaceholder,
body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceSection,
body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceThemeCard,
body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceChoiceCard,
body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceSliderCard,
body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceToggleCard,
body.theme-resolved-light #profileOverlay.settingsOverlay .themeColorSection,
body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceSwitchRow,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsVoiceSelectRow {
  border-color: var(--settings-border) !important;
  background: var(--settings-surface) !important;
  color: var(--settings-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsSearchInput,
body.theme-resolved-light #profileOverlay.settingsOverlay .input,
body.theme-resolved-light #profileOverlay.settingsOverlay textarea,
body.theme-resolved-light #profileOverlay.settingsOverlay select,
body.theme-resolved-light #profileOverlay.settingsOverlay .themeColorInput,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsInput,
body.theme-resolved-light #profileOverlay.settingsOverlay input:not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]) {
  border-color: var(--settings-border) !important;
  background: var(--altara-input) !important;
  color: var(--settings-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsSearchInput::placeholder,
body.theme-resolved-light #profileOverlay.settingsOverlay .input::placeholder,
body.theme-resolved-light #profileOverlay.settingsOverlay textarea::placeholder {
  color: var(--altara-text-soft) !important;
}

body.theme-resolved-light #profileOverlay.settingsOverlay .input:focus,
body.theme-resolved-light #profileOverlay.settingsOverlay textarea:focus,
body.theme-resolved-light #profileOverlay.settingsOverlay select:focus,
body.theme-resolved-light #profileOverlay.settingsOverlay .themeColorInput:focus,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsSearchInput:focus,
body.theme-resolved-light #profileOverlay.settingsOverlay input:not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus {
  border-color: var(--settings-accent-border) !important;
  background: color-mix(in srgb, var(--altara-input) 86%, var(--settings-accent)) !important;
  box-shadow: 0 0 0 3px var(--settings-accent-soft) !important;
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsIdentityCard {
  background: var(--settings-surface) !important;
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsIdentityBanner {
  background:
    radial-gradient(circle at 18% 0%, var(--settings-accent-soft), transparent 34%),
    linear-gradient(135deg, #efe7db 0%, #f8f3ea 52%, #fffdf8 100%) !important;
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsAvatarPick {
  border-color: var(--settings-surface) !important;
  background: var(--settings-surface-2) !important;
  box-shadow: 0 18px 46px rgba(61, 48, 34, 0.14) !important;
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsIdentityName,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsTitle,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsSectionTitle,
body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceSectionHeader h3,
body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceSwitchText b,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsKeybindMeta b,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsSoundMeta b,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsBlockedMeta b {
  color: var(--settings-text) !important;
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsIdentityUid,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsIdentityPronouns,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsSubtitle,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsHint,
body.theme-resolved-light #profileOverlay.settingsOverlay .hint,
body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceHint,
body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceSectionHeader p,
body.theme-resolved-light #profileOverlay.settingsOverlay .label,
body.theme-resolved-light #profileOverlay.settingsOverlay .field > label,
body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceSwitchText small,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsKeybindMeta small,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsSoundMeta small,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsBlockedMeta small {
  color: var(--settings-soft) !important;
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsNavItem {
  color: var(--settings-soft) !important;
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsNavItem.is-active,
body.theme-resolved-light #profileOverlay.settingsOverlay .settingsNavItem[aria-current="page"] {
  border-color: var(--settings-accent-border) !important;
  background: var(--settings-accent-soft) !important;
  color: var(--settings-text) !important;
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsNavItem[disabled] {
  opacity: 1 !important;
  color: var(--settings-muted) !important;
}

body.theme-resolved-light #profileOverlay.settingsOverlay .settingsNavItem--danger {
  border-color: rgba(189, 95, 93, 0.24) !important;
  background: rgba(189, 95, 93, 0.08) !important;
  color: #8d3f3f !important;
}

body.theme-resolved-light #profileOverlay.settingsOverlay .btn:not(.primary):not(.btn--accent) {
  border-color: var(--settings-border) !important;
  background: var(--settings-surface-2) !important;
  color: var(--settings-text) !important;
}

body.theme-resolved-light #profileOverlay.settingsOverlay .btn:not(.primary):not(.btn--accent):hover,
body.theme-resolved-light #profileOverlay.settingsOverlay .btn:not(.primary):not(.btn--accent):focus-visible {
  border-color: var(--settings-accent-border) !important;
  background: var(--settings-accent-soft) !important;
  color: var(--settings-text) !important;
}

body.theme-resolved-light #profileOverlay.settingsOverlay input[type="range"]::-webkit-slider-runnable-track {
  background:
    linear-gradient(90deg, var(--settings-accent), var(--settings-accent)) 0 / var(--slider-progress, 50%) 100% no-repeat,
    rgba(32, 28, 22, 0.14) !important;
}

body.theme-resolved-light #profileOverlay.settingsOverlay input[type="range"]::-webkit-slider-thumb {
  border-color: var(--settings-surface) !important;
  box-shadow: 0 4px 12px rgba(61, 48, 34, 0.18) !important;
}

body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceSwitchRow input[type="checkbox"] {
  border-color: var(--settings-border) !important;
  background: var(--settings-surface-2) !important;
}

body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceSwitchRow input[type="checkbox"]::after {
  background: var(--settings-text) !important;
  box-shadow: 0 3px 8px rgba(61, 48, 34, 0.16) !important;
}

body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceSwitchRow input[type="checkbox"]:checked {
  border-color: var(--settings-accent-border) !important;
  background: var(--settings-accent-soft) !important;
}

body.theme-resolved-light #profileOverlay.settingsOverlay .appearanceSwitchRow input[type="checkbox"]:checked::after {
  background: var(--settings-accent) !important;
}

body.theme-resolved-light:not(.authPage) .userNameCustom {
  color: var(--user-name-color) !important;
}

body.theme-resolved-light:not(.authPage) .dm-name.userNameCustom,
body.theme-resolved-light:not(.authPage) .name.userNameCustom,
body.theme-resolved-light:not(.authPage) .presenceName.userNameCustom,
body.theme-resolved-light:not(.authPage) .meName.userNameCustom,
body.theme-resolved-light:not(.authPage) .userCardName.userNameCustom,
body.theme-resolved-light:not(.authPage) .meProfilePopout__name.userNameCustom,
body.theme-resolved-light:not(.authPage) .msg__author.userNameCustom,
body.theme-resolved-light:not(.authPage) .dmTitle.userNameCustom,
body.theme-resolved-light:not(.authPage) .addFriendPreviewName.userNameCustom {
  color: var(--user-name-color) !important;
}

body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--overlay:not(.userCardModal--preview) .userCardName.userNameCustom,
body.theme-resolved-light:not(.authPage) #userCardModal.userCardModal--preview .userCardName.userNameCustom,
body.theme-resolved-light:not(.authPage) #userCardName.userNameCustom,
body.theme-resolved-light:not(.authPage) #dmTitle.userNameCustom,
body.theme-resolved-light:not(.authPage) #meName.userNameCustom {
  color: var(--user-name-color) !important;
}

/* DM profile preview sidebar: compact premium card language. */
body:not(.authPage) #dmMain .dmProfilePanel {
  width: clamp(292px, 27vw, 360px);
  min-width: 280px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 16px 16px 0 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 72%, rgba(255, 255, 255, 0.035)), var(--altara-surface, #181818));
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body:not(.authPage) #dmMain .dmProfilePanel__top {
  min-height: 38px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  background: color-mix(in srgb, var(--altara-surface-elevated, #202020) 48%, transparent);
}

body:not(.authPage) #dmMain .dmProfilePanel__title {
  font-family: var(--font-ui, inherit);
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

body:not(.authPage) #dmMain .dmProfilePanel__banner {
  aspect-ratio: auto;
  min-height: 86px;
  height: 86px;
  background:
    radial-gradient(230px 110px at 12% 0%, color-mix(in srgb, var(--altara-accent, #e8cfae) 24%, transparent), transparent 70%),
    radial-gradient(220px 120px at 100% 0%, rgba(255, 255, 255, 0.06), transparent 66%),
    linear-gradient(145deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 80%, var(--altara-accent, #e8cfae) 10%), color-mix(in srgb, var(--altara-bg, #101010) 92%, #000 8%));
  border-bottom: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 -28px 34px color-mix(in srgb, var(--altara-bg, #101010) 64%, transparent);
}

body:not(.authPage) #dmMain .dmProfilePanel__banner.has-image {
  box-shadow: inset 0 -32px 42px rgba(0, 0, 0, 0.28);
}

body:not(.authPage) #dmMain .dmProfileAvatar {
  width: 76px;
  height: 76px;
  margin: -38px 0 0 14px;
  border: 4px solid color-mix(in srgb, var(--altara-surface, #181818) 94%, #000 6%);
  background:
    radial-gradient(circle at 32% 18%, var(--altara-accent-soft, rgba(232, 207, 174, 0.11)), transparent 58%),
    var(--altara-surface-elevated, #202020);
  color: var(--altara-accent-strong, #f0d8b8);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.32),
    0 0 0 1px var(--altara-border, rgba(255, 255, 255, 0.08));
}

body:not(.authPage) #dmMain .dmProfileAvatar:hover,
body:not(.authPage) #dmMain .dmProfileAvatar:focus-visible {
  border-color: color-mix(in srgb, var(--altara-surface, #181818) 72%, var(--altara-accent, #e8cfae) 28%);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.34),
    0 0 0 3px var(--altara-accent-soft, rgba(232, 207, 174, 0.11));
}

body:not(.authPage) #dmMain .dmProfilePanel__body {
  flex: 0 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28)) transparent;
}

body:not(.authPage) #dmMain .dmProfileName {
  margin-top: 0;
  color: var(--altara-text, #f2f0ec);
  font-size: 21px;
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: 0;
}

body:not(.authPage) #dmMain .dmProfileHandle {
  margin-top: -4px;
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
  font-size: 12.5px;
  font-weight: 650;
}

body:not(.authPage) #dmMain .dmProfilePresence {
  width: fit-content;
  margin-top: 0;
  padding: 5px 9px;
  gap: 7px;
  border-color: var(--altara-border, rgba(255, 255, 255, 0.08));
  background: color-mix(in srgb, var(--altara-surface-elevated, #202020) 70%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body:not(.authPage) #dmMain .dmProfileStatusDot {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--altara-surface, #181818) 86%, transparent);
}

body:not(.authPage) #dmMain .dmProfileStatusText {
  color: var(--altara-text, #f2f0ec);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

body:not(.authPage) #dmMain .dmProfileSection,
body:not(.authPage) #dmMain .dmProfileWidgetsPreviewShell,
body:not(.authPage) #dmMain .dmGroupMemberRow {
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 13px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 62%, rgba(255, 255, 255, 0.02)), color-mix(in srgb, var(--altara-surface, #181818) 90%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body:not(.authPage) #dmMain .dmProfileSection {
  margin-top: 0;
  padding: 11px 12px;
}

body:not(.authPage) #dmMain .dmProfileSection__title,
body:not(.authPage) #dmMain .dmProfileWidgetsPreviewTitle {
  color: var(--altara-accent-strong, #f0d8b8);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.11em;
  line-height: 1.2;
}

body:not(.authPage) #dmMain .dmProfileBio {
  margin-top: 7px;
  color: var(--altara-text, #f2f0ec);
  font-size: 13px;
  line-height: 1.5;
}

body:not(.authPage) #dmMain .dmProfileWidgetsPreview {
  margin-top: 0;
}

body:not(.authPage) #dmMain .dmProfileWidgetsPreviewShell {
  padding: 11px;
}

body:not(.authPage) #dmMain .dmProfileWidgetPreviewList {
  gap: 7px;
}

body:not(.authPage) #dmMain .dmProfileWidgetPreviewCard {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 9px;
  padding: 7px;
  border-color: var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 11px;
  background: color-mix(in srgb, var(--altara-bg, #101010) 42%, transparent);
}

body:not(.authPage) #dmMain .dmProfileWidgetPreviewCard:hover,
body:not(.authPage) #dmMain .dmProfileWidgetPreviewCard:focus-visible,
body:not(.authPage) #dmMain .dmGroupMemberRow:hover,
body:not(.authPage) #dmMain .dmGroupMemberRow:focus-visible {
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.11));
  outline: none;
}

body:not(.authPage) #dmMain .dmProfileWidgetPreviewMedia {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 18%, var(--altara-accent-soft, rgba(232, 207, 174, 0.11)), transparent 58%),
    var(--altara-surface-elevated, #202020);
  color: var(--altara-accent-strong, #f0d8b8);
}

body:not(.authPage) #dmMain .dmProfileWidgetPreviewBadge {
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.11));
  color: var(--altara-accent-strong, #f0d8b8);
  font-size: 9px;
  padding: 3px 6px;
}

body:not(.authPage) #dmMain .dmProfileWidgetPreviewName {
  color: var(--altara-text, #f2f0ec);
  font-size: 12.5px;
  font-weight: 800;
}

body:not(.authPage) #dmMain .dmProfileWidgetPreviewMeta,
body:not(.authPage) #dmMain .dmProfileWidgetsPreviewLoading {
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
  font-size: 11px;
}

body:not(.authPage) #dmMain .dmProfilePanel__footer {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 0 12px 12px;
  border-top: 0;
  background: transparent;
}

body:not(.authPage) #dmMain .dmProfilePanel__footer .btn {
  height: 39px;
  border-radius: 12px !important;
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.11));
  color: var(--altara-accent-strong, #f0d8b8);
  font-size: 12.5px;
  font-weight: 850;
  letter-spacing: 0.02em;
}

body:not(.authPage) #dmMain .dmProfilePanel__footer .btn:hover,
body:not(.authPage) #dmMain .dmProfilePanel__footer .btn:focus-visible {
  border-color: color-mix(in srgb, var(--altara-accent, #e8cfae) 54%, var(--altara-border, rgba(255, 255, 255, 0.08)));
  background: color-mix(in srgb, var(--altara-accent-soft, rgba(232, 207, 174, 0.11)) 72%, var(--altara-hover, rgba(255, 255, 255, 0.055)));
  color: var(--altara-text, #f2f0ec);
}

/* DM profile preview sidebar: expanded mini-profile structure. */
body:not(.authPage) #dmMain .dmProfilePanel {
  width: clamp(304px, 28vw, 372px);
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 58%, transparent), transparent 28%),
    var(--altara-surface, #181818);
}

body:not(.authPage) #dmMain .dmProfilePanel__top {
  flex: 0 0 auto;
}

body:not(.authPage) #dmMain .dmProfilePanel__banner {
  flex: 0 0 80px;
  min-height: 80px;
  height: 80px;
}

body:not(.authPage) #dmMain .dmProfileAvatar {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  margin-top: -36px;
  border-radius: 22px;
}

body:not(.authPage) #dmMain .dmProfileAvatar img,
body:not(.authPage) #dmMain .dmProfileAvatar .profileAvatarMediaClip,
body:not(.authPage) #dmMain .dmProfileAvatar .profileAvatarMedia {
  border-radius: 18px;
}

body:not(.authPage) #dmMain .dmProfilePanel__body {
  flex: 1 1 auto;
  padding: 8px 12px 12px;
  gap: 9px;
  align-content: start;
}

body:not(.authPage) #dmMain .dmProfileIdentity {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 0 2px 2px;
}

body:not(.authPage) #dmMain .dmProfileName {
  margin-top: 0;
  font-size: 20px;
  line-height: 1.12;
}

body:not(.authPage) #dmMain .dmProfileHandle {
  margin-top: 0;
  font-size: 12px;
}

body:not(.authPage) #dmMain .dmProfilePresence {
  margin-top: 3px;
}

body:not(.authPage) #dmMain .dmProfileSection,
body:not(.authPage) #dmMain .dmProfileWidgetsPreviewShell,
body:not(.authPage) #dmMain .dmProfileContextShell {
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 58%, rgba(255, 255, 255, 0.02)), color-mix(in srgb, var(--altara-surface, #181818) 92%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body:not(.authPage) #dmMain .dmProfileWidgetsPreviewShell,
body:not(.authPage) #dmMain .dmProfileContextShell {
  padding: 10px;
}

body:not(.authPage) #dmMain .dmProfileSection__title,
body:not(.authPage) #dmMain .dmProfileWidgetsPreviewTitle,
body:not(.authPage) #dmMain .dmProfileContextTitle {
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.48));
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

body:not(.authPage) #dmMain .dmProfileBio {
  display: -webkit-box;
  max-height: 5.9em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

body:not(.authPage) #dmMain .dmProfileWidgetPreviewList,
body:not(.authPage) #dmMain .dmProfileContextList {
  display: grid;
  gap: 7px;
}

body:not(.authPage) #dmMain .dmProfileWidgetPreviewCard {
  grid-template-columns: 42px minmax(0, 1fr);
  min-height: 56px;
}

body:not(.authPage) #dmMain .dmProfileWidgetPreviewMedia {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

body:not(.authPage) #dmMain .dmProfileWidgetPreviewBody {
  gap: 2px;
}

body:not(.authPage) #dmMain .dmProfileWidgetPreviewBadge {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.authPage) #dmMain .dmProfileWidgetPreviewName,
body:not(.authPage) #dmMain .dmProfileWidgetPreviewMeta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.authPage) #dmMain .dmProfileEmptyState {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 7px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 38%, transparent), transparent),
    color-mix(in srgb, var(--altara-bg, #101010) 42%, transparent);
}

body:not(.authPage) #dmMain .dmProfileEmptyState__mark {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--altara-accent-border, rgba(232, 207, 174, 0.22));
  border-radius: 11px;
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.08));
  color: var(--altara-accent-strong, #f0d8b8);
}

body:not(.authPage) #dmMain .dmProfileEmptyState__mark::before {
  content: "";
  width: 13px;
  height: 13px;
  border: 1.5px solid currentColor;
  border-radius: 5px;
  opacity: 0.76;
}

body:not(.authPage) #dmMain .dmProfileEmptyState--loading .dmProfileEmptyState__mark::before {
  border-radius: 999px;
  border-top-color: transparent;
  animation: callTileLoadingSpin 0.9s linear infinite;
}

body:not(.authPage) #dmMain .dmProfileEmptyState__body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body:not(.authPage) #dmMain .dmProfileEmptyState__title,
body:not(.authPage) #dmMain .dmProfileEmptyState__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.authPage) #dmMain .dmProfileEmptyState__title {
  color: var(--altara-text, #f2f0ec);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

body:not(.authPage) #dmMain .dmProfileEmptyState__text {
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
  font-size: 11px;
  line-height: 1.25;
}

body:not(.authPage) #dmMain .dmProfileContextSection.hidden {
  display: none !important;
}

body:not(.authPage) #dmMain .dmProfileContextShell {
  display: grid;
  gap: 9px;
}

body:not(.authPage) #dmMain .dmProfileContextHeader {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body:not(.authPage) #dmMain .dmProfileContextCount {
  min-width: 0;
  overflow: hidden;
  padding: 3px 7px;
  border: 1px solid var(--altara-accent-border, rgba(232, 207, 174, 0.24));
  border-radius: 999px;
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.08));
  color: var(--altara-accent-strong, #f0d8b8);
  font-size: 9.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.authPage) #dmMain .dmProfileContextRow {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 6px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  background: color-mix(in srgb, var(--altara-bg, #101010) 42%, transparent);
}

body:not(.authPage) #dmMain .dmProfileContextIcon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 11px;
  background:
    radial-gradient(circle at 30% 18%, var(--altara-accent-soft, rgba(232, 207, 174, 0.11)), transparent 58%),
    var(--altara-surface-elevated, #202020);
  color: var(--altara-accent-strong, #f0d8b8);
  font-size: 13px;
  font-weight: 850;
}

body:not(.authPage) #dmMain .dmProfileContextIcon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

body:not(.authPage) #dmMain .dmProfileContextMeta {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body:not(.authPage) #dmMain .dmProfileContextName {
  min-width: 0;
  overflow: hidden;
  color: var(--altara-text, #f2f0ec);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.authPage) #dmMain .dmProfileContextSub {
  min-width: 0;
  overflow: hidden;
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.authPage) #dmMain .dmProfilePanel__footer {
  flex: 0 0 auto;
  margin-top: auto;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 34%, transparent), transparent),
    var(--altara-surface, #181818);
}

/* Active Now disabled: no hover reveal, no invisible hitbox, no reserved gutter. */
.app.right-collapsed .rightSidebarPeekZone,
.appGrid.right-collapsed .rightSidebarPeekZone,
.app.right-collapsed .rightSidebarResizer,
.appGrid.right-collapsed .rightSidebarResizer,
.app.right-collapsed .panel.right,
.appGrid.right-collapsed .panel.right,
.app.right-collapsed .right,
.appGrid.right-collapsed .right,
.app.right-collapsed .rightCol,
.appGrid.right-collapsed .rightCol {
  display: none !important;
  pointer-events: none !important;
}

.app.right-collapsed .panel.right,
.appGrid.right-collapsed .panel.right {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
}

.app.right-collapsed:not(.left-collapsed),
.appGrid.right-collapsed:not(.left-collapsed),
body:not(.authPage) .app.right-collapsed:not(.left-collapsed),
body:not(.authPage) .appGrid.right-collapsed:not(.left-collapsed) {
  grid-template-columns: clamp(360px, var(--left-sidebar-width), 420px) minmax(0, 1fr) !important;
}

.app.left-collapsed.right-collapsed,
.appGrid.left-collapsed.right-collapsed,
body:not(.authPage) .app.left-collapsed.right-collapsed,
body:not(.authPage) .appGrid.left-collapsed.right-collapsed {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Voice channel pre-join view: keep only the left sidebar and centered join card. */
body:not(.authPage) .app:has(#dmMain.is-server-voice-call-layout:not(.is-server-voice-in-call)):not(.left-collapsed),
body:not(.authPage) .appGrid:has(#dmMain.is-server-voice-call-layout:not(.is-server-voice-in-call)):not(.left-collapsed) {
  grid-template-columns: clamp(360px, var(--left-sidebar-width), 420px) minmax(0, 1fr) !important;
}

body:not(.authPage) .app:has(#dmMain.is-server-voice-call-layout:not(.is-server-voice-in-call)) .panel.right,
body:not(.authPage) .appGrid:has(#dmMain.is-server-voice-call-layout:not(.is-server-voice-in-call)) .panel.right,
body:not(.authPage) .app:has(#dmMain.is-server-voice-call-layout:not(.is-server-voice-in-call)) .rightSidebarResizer,
body:not(.authPage) .appGrid:has(#dmMain.is-server-voice-call-layout:not(.is-server-voice-in-call)) .rightSidebarResizer,
body:not(.authPage) .app:has(#dmMain.is-server-voice-call-layout:not(.is-server-voice-in-call)) .rightSidebarPeekZone,
body:not(.authPage) .appGrid:has(#dmMain.is-server-voice-call-layout:not(.is-server-voice-in-call)) .rightSidebarPeekZone {
  display: none !important;
  pointer-events: none !important;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout:not(.is-server-voice-in-call) .dmHeader {
  display: none !important;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout:not(.is-server-voice-in-call) .dmMainBody,
body:not(.authPage) #dmMain.is-server-voice-call-layout:not(.is-server-voice-in-call) .dmThread {
  min-height: 0;
  height: 100%;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout:not(.is-server-voice-in-call) .dmThread {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

body:not(.authPage) #dmMain.is-server-voice-call-layout:not(.is-server-voice-in-call) .dmCallDock {
  display: grid;
  min-height: calc(100vh - var(--desktop-titlebar-overlay-height, 40px) - 12px);
  height: 100%;
  align-items: center;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout:not(.is-server-voice-in-call) .voiceChannelEmptyState {
  align-self: stretch;
  min-height: 100%;
  height: 100%;
  padding: 0 24px;
  place-items: center;
}

body:not(.authPage) .app:has(#dmMain.is-server-voice-call-layout.is-server-voice-in-call):not(.left-collapsed),
body:not(.authPage) .appGrid:has(#dmMain.is-server-voice-call-layout.is-server-voice-in-call):not(.left-collapsed) {
  grid-template-columns: clamp(360px, var(--left-sidebar-width), 420px) minmax(0, 1fr) !important;
}

body:not(.authPage) .app:has(#dmMain.is-server-voice-call-layout.is-server-voice-in-call) .panel.right,
body:not(.authPage) .appGrid:has(#dmMain.is-server-voice-call-layout.is-server-voice-in-call) .panel.right,
body:not(.authPage) .app:has(#dmMain.is-server-voice-call-layout.is-server-voice-in-call) .rightSidebarResizer,
body:not(.authPage) .appGrid:has(#dmMain.is-server-voice-call-layout.is-server-voice-in-call) .rightSidebarResizer,
body:not(.authPage) .app:has(#dmMain.is-server-voice-call-layout.is-server-voice-in-call) .rightSidebarPeekZone,
body:not(.authPage) .appGrid:has(#dmMain.is-server-voice-call-layout.is-server-voice-in-call) .rightSidebarPeekZone,
body:not(.authPage) .app:has(#dmMain.is-server-voice-call-layout.is-server-voice-in-call) .callBar.is-docked-in-sidebar,
body:not(.authPage) .appGrid:has(#dmMain.is-server-voice-call-layout.is-server-voice-in-call) .callBar.is-docked-in-sidebar {
  display: none !important;
  pointer-events: none !important;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .dmCallDock {
  display: grid;
  min-height: 0;
  height: 100%;
  align-items: stretch;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .dmMainBody,
body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .dmThread {
  min-height: 0;
  height: 100%;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .dmThread {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: calc(100vh - var(--desktop-titlebar-overlay-height, 40px) - 12px);
  position: relative;
  isolation: isolate;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .dmThread::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.98), rgba(12, 12, 12, 0.99));
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .dmCallDock {
  position: relative;
  z-index: 1;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm {
  margin: 0;
  width: 100%;
  min-height: 0;
  height: 100%;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm.is-open {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm .callStageCard {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: clamp(12px, 2.2vh, 26px);
  min-height: calc(100vh - var(--desktop-titlebar-overlay-height, 40px) - 12px);
  height: 100%;
  position: relative;
  padding: clamp(18px, 2.6vw, 34px) clamp(24px, 3vw, 42px) clamp(26px, 4vh, 52px);
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.98), rgba(12, 12, 12, 0.99)) !important;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm .callStageTop {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  min-height: 44px;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStageTitle {
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.1;
  color: var(--altara-text, #f5f1ea);
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStageSub {
  margin-top: 5px;
  color: var(--altara-text-muted, rgba(235, 228, 216, 0.68));
  font-size: 12px;
  font-weight: 700;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStageTopActions .btn {
  min-height: 38px;
  border-radius: 10px;
  border-color: color-mix(in srgb, var(--altara-border, rgba(255,255,255,0.12)) 76%, var(--altara-accent, #e8cfae) 24%);
  background: linear-gradient(180deg, rgba(32, 32, 32, 0.92), rgba(20, 20, 20, 0.94));
  color: var(--altara-text, #f6efe4);
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm .callStageViewport {
  align-self: center;
  justify-self: center;
  width: min(880px, calc(100% - 48px));
  min-width: min(100%, 360px);
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  margin: 0 auto clamp(54px, 9vh, 96px) !important;
  overflow: visible;
  border: 0 !important;
  background: transparent !important;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage:not(.layout-grid) .callVideo,
body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage:not(.layout-grid) .callLocalPreview,
body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage:not(.layout-grid) .callStagePlaceholder {
  width: 100%;
  max-width: 100%;
  border-radius: 18px;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStagePlaceholder,
body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .stageGridTile {
  border: 1px solid color-mix(in srgb, var(--altara-border, rgba(255,255,255,0.12)) 72%, var(--altara-accent, #e8cfae) 28%) !important;
  background:
    radial-gradient(520px 260px at 50% 0%, var(--call-tile-bg-glow, rgba(232, 207, 174, 0.08)), transparent 72%),
    linear-gradient(160deg, var(--call-tile-bg-start, rgba(44, 40, 43, 0.96)), var(--call-tile-bg-end, rgba(19, 19, 19, 0.98))) !important;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage[data-focused-tile-type="screenshare"] .callStagePlaceholder,
body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .stageGridTile[data-call-media-type="share"],
body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .stageGridTile[data-call-tile-type="screenshare"] {
  background:
    radial-gradient(520px 260px at 50% 45%, rgba(232, 207, 174, 0.08), transparent 72%),
    linear-gradient(180deg, rgba(13, 13, 13, 0.92), rgba(0, 0, 0, 0.96)) !important;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStagePlaceholder > #callStageAvatar,
body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStagePlaceholder > #callStageAvatar.avatarBig,
body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStageGrid[data-tile-count="1"] .stageGridAvatar {
  width: clamp(82px, 10vw, 112px);
  height: clamp(82px, 10vw, 112px);
  min-width: clamp(82px, 10vw, 112px);
  min-height: clamp(82px, 10vw, 112px);
  border-color: color-mix(in srgb, var(--altara-accent, #e8cfae) 42%, rgba(255,255,255,0.16));
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm.layout-grid .callStageViewport {
  width: min(1420px, calc(100% - 24px));
  min-width: min(100%, 460px);
  height: clamp(460px, 74vh, 860px);
  min-height: 420px;
  aspect-ratio: auto;
  margin: 0 auto clamp(62px, 9vh, 104px) !important;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm.layout-grid .callStageGrid:not([hidden]) {
  --server-voice-stage-gap: clamp(12px, 1.2vw, 18px);
  --server-voice-tile-width: calc((100% - (var(--server-voice-stage-gap) * 2)) / 3);
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--server-voice-stage-gap);
  align-items: center;
  align-content: center;
  justify-content: center;
  width: 100%;
  max-width: min(100%, 1400px);
  height: 100%;
  min-height: 240px;
  margin: 0 auto;
  padding: 0 !important;
  overflow: visible;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 4;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm.layout-grid .callStageGrid[data-tile-count="1"] {
  --server-voice-tile-width: min(1120px, 100%);
  max-width: min(1120px, 100%);
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm.layout-grid .callStageGrid[data-tile-count="2"] {
  --server-voice-tile-width: calc((100% - var(--server-voice-stage-gap)) / 2);
  max-width: min(1360px, 100%);
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm.layout-grid .callStageGrid[data-tile-count="3"] {
  --server-voice-tile-width: calc((100% - var(--server-voice-stage-gap)) / 2);
  max-width: min(1260px, 100%);
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm.layout-grid .callStageGrid[data-tile-count="4"] {
  --server-voice-tile-width: calc((100% - var(--server-voice-stage-gap)) / 2);
  max-width: min(1320px, 100%);
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm.layout-grid .callStageGrid[data-tile-count="5"],
body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm.layout-grid .callStageGrid[data-tile-count="6"] {
  --server-voice-tile-width: calc((100% - (var(--server-voice-stage-gap) * 2)) / 3);
  max-width: min(1400px, 100%);
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm.layout-grid .stageGridTile[data-call-grid-entry="1"] {
  display: block !important;
  position: relative;
  flex: 0 1 var(--server-voice-tile-width);
  width: var(--server-voice-tile-width) !important;
  max-width: var(--server-voice-tile-width) !important;
  height: auto !important;
  min-width: min(100%, 360px);
  min-height: 204px;
  aspect-ratio: 16 / 9;
  align-self: center;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 1100px) {
  body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm.layout-grid .callStageGrid:not([hidden]):not([data-tile-count="1"]):not([data-tile-count="2"]):not([data-tile-count="3"]):not([data-tile-count="4"]):not([data-tile-count="5"]):not([data-tile-count="6"]),
  body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm.layout-grid .callStageGrid[data-tile-count="5"],
  body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm.layout-grid .callStageGrid[data-tile-count="6"] {
    --server-voice-tile-width: calc((100% - var(--server-voice-stage-gap)) / 2);
    max-width: min(1040px, 100%);
  }
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStageLabel,
body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .stageGridLabel {
  left: 12px;
  bottom: 12px;
  border-radius: 10px;
  background: rgba(12, 12, 12, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--altara-text, #f4efe8);
  backdrop-filter: blur(10px);
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStageLabel .callParticipantLabel__suffix,
body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .stageGridLabel .callParticipantLabel__suffix {
  display: none !important;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStageViewportFsBtn {
  right: 0;
  top: 50%;
  bottom: auto;
  transform: translate(64px, -50%);
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border-color: var(--altara-border, rgba(255,255,255,0.12));
  background: rgba(24, 24, 24, 0.9);
  color: var(--altara-text, #f3ede4);
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStageControls {
  position: absolute;
  left: 50%;
  bottom: clamp(34px, 6vh, 68px);
  z-index: 8;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px;
  gap: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  background: rgba(14, 14, 14, 0.72);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(14px) saturate(120%);
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStageControls__group {
  gap: 3px;
  padding: 3px;
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
  box-shadow: none;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStageControls .callCtrlBtn {
  width: 48px;
  height: 46px;
  border-radius: 12px;
  border-color: transparent;
  background: transparent;
  color: var(--altara-text, #f4efe8);
  box-shadow: none;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStageControls .callCtrlBtn:hover {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStageControls .callCtrlBtn.is-on {
  border-color: color-mix(in srgb, var(--altara-accent, #e8cfae) 34%, transparent);
  background: color-mix(in srgb, var(--altara-accent, #e8cfae) 15%, rgba(255,255,255,0.05));
  color: #fff8ed;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStageControls .callShareSplit__arrow {
  width: 34px;
  border-left-color: rgba(255, 255, 255, 0.055);
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callCtrlBtn__icon {
  width: 23px;
  height: 23px;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callCtrlBtn__icon svg {
  stroke-width: 1.85;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStageControls .callCtrlBtn--danger {
  width: 70px;
  height: 46px;
  border-radius: 13px;
  border-color: rgba(244, 123, 145, 0.42);
  background: linear-gradient(180deg, rgba(202, 62, 92, 0.94), rgba(143, 41, 64, 0.96));
  box-shadow: 0 10px 22px rgba(171, 54, 82, 0.2);
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStageControls .callCtrlBtn--danger:hover {
  border-color: rgba(255, 153, 171, 0.62);
  background: linear-gradient(180deg, rgba(216, 76, 105, 0.96), rgba(160, 48, 74, 0.98));
  box-shadow: 0 12px 24px rgba(171, 54, 82, 0.24);
}

@media (max-width: 1180px) {
  body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStageViewportFsBtn {
    right: 12px;
    top: auto;
    bottom: 12px;
    transform: none;
  }
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm:not(.layout-grid) .callStageViewport {
  width: min(96%, 1480px, var(--call-stage-screenshare-vh-width, 142vh));
  min-width: min(100%, 420px);
  height: auto;
  min-height: 0;
  max-width: calc(100% - 12px);
  max-height: min(82vh, 860px, calc(100% - 92px));
  aspect-ratio: var(--call-stage-screenshare-aspect-ratio, 16 / 9);
  margin: 0 auto clamp(78px, 10vh, 116px) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 18px;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm:not(.layout-grid) .callVideo,
body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm:not(.layout-grid) .callLocalPreview,
body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm:not(.layout-grid) .callStagePlaceholder {
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  transform: none;
  border-radius: inherit;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm:not(.layout-grid) .callVideo,
body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm:not(.layout-grid) .callLocalPreview {
  object-fit: contain;
  object-position: center center;
  background: #000;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm:not(.layout-grid).is-watch-gated .callVideo.is-on {
  transform: scale(1.01);
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm:not(.layout-grid) .callStagePlaceholder {
  place-items: center;
  align-content: center;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm:not(.layout-grid) .callStagePlaceholder > #callStageAvatar,
body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm:not(.layout-grid) .callStagePlaceholder > #callStageAvatar.avatarBig {
  width: clamp(104px, 12vw, 152px);
  height: clamp(104px, 12vw, 152px);
  min-width: clamp(104px, 12vw, 152px);
  min-height: clamp(104px, 12vw, 152px);
}

@media (max-width: 900px), (max-height: 720px) {
  body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm.layout-grid .callStageViewport {
    width: calc(100% - 8px);
    min-width: 0;
    height: clamp(340px, 70vh, 720px);
    min-height: 320px;
    margin-bottom: clamp(70px, 11vh, 96px) !important;
  }

  body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm.layout-grid .callStageGrid:not([hidden]) {
    --server-voice-stage-gap: 10px;
    max-width: 100%;
  }

  body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm.layout-grid .stageGridTile[data-call-grid-entry="1"] {
    min-width: min(100%, 280px);
    min-height: 158px;
  }

  body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm:not(.layout-grid) .callStageViewport {
    width: min(98%, var(--call-stage-screenshare-vh-width, 116vh));
    min-width: 0;
    min-height: 0;
    max-height: min(78vh, calc(100% - 82px));
    margin-bottom: clamp(70px, 11vh, 96px) !important;
  }
}

/* Server voice uses JS-measured safe area so tiles scale to the actual app window. */
body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm .callStageViewport {
  width: min(100%, var(--call-stage-safe-width, 100%)) !important;
  height: min(100%, var(--call-stage-safe-height, 70vh)) !important;
  max-width: 100% !important;
  max-height: var(--call-stage-safe-height, 100%) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  aspect-ratio: auto !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm.layout-grid .callStageViewport {
  width: min(100%, var(--call-stage-safe-width, 100%)) !important;
  height: min(100%, var(--call-stage-safe-height, 74vh)) !important;
  display: block;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm.layout-grid .callStageGrid:not([hidden]) {
  --server-voice-stage-gap: var(--call-grid-gap, clamp(10px, 1vw, 16px));
  --server-voice-tile-width: var(--call-grid-tile-width, min(100%, 640px));
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--server-voice-stage-gap);
  align-items: center;
  align-content: center;
  justify-content: center;
  width: min(100%, var(--call-grid-layout-width, 100%));
  height: min(100%, var(--call-grid-layout-height, 100%));
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0 !important;
  overflow: visible;
  box-sizing: border-box;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm.layout-grid .stageGridTile[data-call-grid-entry="1"] {
  flex: 0 0 var(--call-grid-tile-width, var(--server-voice-tile-width)) !important;
  width: var(--call-grid-tile-width, var(--server-voice-tile-width)) !important;
  max-width: var(--call-grid-tile-width, var(--server-voice-tile-width)) !important;
  height: var(--call-grid-tile-height, auto) !important;
  max-height: var(--call-grid-tile-height, 360px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  box-sizing: border-box;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm.layout-grid .callStageGrid[data-last-fill="1"] .stageGridTile:last-child {
  width: var(--call-grid-tile-width, var(--server-voice-tile-width)) !important;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm:not(.layout-grid) .callStageViewport {
  width: min(100%, var(--call-focus-stage-width, var(--call-stage-safe-width, 96%))) !important;
  height: min(100%, var(--call-focus-stage-height, var(--call-stage-safe-height, 76vh))) !important;
  max-width: min(100%, var(--call-stage-safe-width, 100%)) !important;
  max-height: min(100%, var(--call-stage-safe-height, 100%)) !important;
  margin: 0 auto !important;
  aspect-ratio: var(--call-stage-screenshare-aspect-ratio, 16 / 9) !important;
  overflow: hidden !important;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm :is(.stageGridTile, .participantTile):hover {
  transform: none !important;
  filter: none !important;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm :is(.stageGridTile, .participantTile):not(.has-custom-call-bg):not(.is-active):hover {
  border-color: color-mix(in srgb, var(--altara-border, rgba(255,255,255,0.12)) 72%, var(--altara-accent, #e8cfae) 28%) !important;
  background: linear-gradient(160deg, rgba(44, 40, 43, 0.96), rgba(19, 19, 19, 0.98)) !important;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call
  :is(
    .callStagePlaceholder,
    .stageGridTile:not([data-call-media-type="share"]):not([data-call-tile-type="screenshare"]),
    .participantTile
  ).has-custom-call-bg,
body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call
  :is(
    .callStagePlaceholder,
    .stageGridTile:not([data-call-media-type="share"]):not([data-call-tile-type="screenshare"]),
    .participantTile
  ).has-custom-call-bg:hover,
body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call
  :is(
    .callStagePlaceholder,
    .stageGridTile:not([data-call-media-type="share"]):not([data-call-tile-type="screenshare"]),
    .participantTile
  ).has-custom-call-bg:is(.is-active, .is-speaking, .is-selected, .is-focused) {
  background: var(--participant-call-bg) !important;
  background-color: var(--participant-call-bg) !important;
  background-image: none !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call
  :is(
    .callStagePlaceholder,
    .stageGridTile:not([data-call-media-type="share"]):not([data-call-tile-type="screenshare"]),
    .participantTile
  ).has-custom-call-bg::before,
body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call
  :is(
    .callStagePlaceholder,
    .stageGridTile:not([data-call-media-type="share"]):not([data-call-tile-type="screenshare"]),
    .participantTile
  ).has-custom-call-bg::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  animation: none !important;
}

body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm .callStageViewport,
body:not(.authPage) #dmMain.is-server-voice-call-layout.is-server-voice-in-call .callStage.is-docked-in-dm .callStageViewport.has-custom-call-bg {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

@media (max-width: 1280px) {
  .app.right-collapsed:not(.left-collapsed),
  .appGrid.right-collapsed:not(.left-collapsed),
  body:not(.authPage) .app.right-collapsed:not(.left-collapsed),
  body:not(.authPage) .appGrid.right-collapsed:not(.left-collapsed) {
    grid-template-columns: clamp(340px, var(--left-sidebar-width), 390px) minmax(0, 1fr) !important;
  }
}

@media (max-width: 980px) {
  .app.right-collapsed:not(.left-collapsed),
  .appGrid.right-collapsed:not(.left-collapsed),
  body:not(.authPage) .app.right-collapsed:not(.left-collapsed),
  body:not(.authPage) .appGrid.right-collapsed:not(.left-collapsed) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* GIF picker popover layout parity with emoji picker */
#gifModal {
  position: fixed;
  inset: auto;
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0;
  display: block;
  place-items: initial;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  z-index: 2710;
}

#gifModal.hidden {
  display: none !important;
}

#gifModal:not(.hidden) {
  display: block;
}

#gifModal .modalCard {
  pointer-events: auto;
  position: relative;
  width: min(470px, calc(100vw - 20px));
  max-width: min(470px, calc(100vw - 20px));
  height: min(500px, calc(100vh - 20px));
  max-height: min(500px, calc(100vh - 20px));
  min-height: min(390px, calc(100vh - 20px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  background:
    radial-gradient(520px 220px at 18% 0%, color-mix(in srgb, var(--altara-accent, #e8cfae) 9%, transparent), transparent 68%),
    linear-gradient(180deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 92%, rgba(255, 255, 255, 0.035)), var(--altara-surface, #151515) 72%),
    var(--altara-surface-elevated, #202020);
  color: var(--altara-text, #f2f0ec);
  box-shadow:
    0 26px 82px rgba(0, 0, 0, 0.56),
    0 0 0 1px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(8px) saturate(112%);
  -webkit-backdrop-filter: blur(8px) saturate(112%);
}

#gifModal .modalCard::after {
  content: "";
  position: absolute;
  left: calc(var(--gif-popover-arrow-left, 50%) - 8px);
  right: auto;
  bottom: -8px;
  width: 16px;
  height: 16px;
  border-right: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  border-bottom: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  background: var(--altara-surface, #151515);
  transform: rotate(45deg);
  pointer-events: none;
  box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.18);
}

#gifModal[data-placement="below"] .modalCard::after {
  top: -8px;
  bottom: auto;
  border: 0;
  border-left: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  border-top: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  box-shadow: -8px -8px 18px rgba(0, 0, 0, 0.1);
}

#gifModal .modalTop {
  min-height: 56px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 88%, rgba(255, 255, 255, 0.026)), var(--altara-surface-elevated, #202020));
}

#gifModal .gifModalBrand {
  display: none !important;
}

#gifModal .modalTitle {
  min-width: 0;
  color: var(--altara-text, #f2f0ec);
  font-family: var(--font-display, var(--font-ui, inherit));
  font-size: 16px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
}

#gifModal #btnGifClose {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  background: color-mix(in srgb, var(--altara-bg, #101010) 58%, var(--altara-surface-elevated, #202020));
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.64));
  font-size: 22px;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#gifModal #btnGifClose:hover,
#gifModal #btnGifClose:focus-visible {
  outline: none;
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  background: var(--altara-hover, rgba(232, 207, 174, 0.1));
  color: var(--altara-text, #f2f0ec);
}

#gifModal .editorWrap {
  min-height: 0;
  height: 100%;
  padding: 10px 12px 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-bg, #101010) 12%, transparent), transparent 34%),
    var(--altara-surface, #151515);
}

#gifModal .gifFolderTop {
  flex: 0 0 auto;
  min-height: 32px;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 9px;
}

#gifModal .gifFolderBack {
  width: 32px;
  min-width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  background: color-mix(in srgb, var(--altara-bg, #101010) 58%, var(--altara-surface-elevated, #202020));
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.68));
}

#gifModal .gifFolderTitle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--altara-accent-strong, #f0d8b8);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#gifModal .gifSearchRow {
  flex: 0 0 auto;
  margin: 0;
}

#gifModal .gifSearchField {
  height: 38px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.012)),
    color-mix(in srgb, var(--altara-bg, #101010) 82%, var(--altara-surface, #151515));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 10px 28px rgba(0, 0, 0, 0.14);
  cursor: text;
}

#gifModal .gifSearchField:focus-within {
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.32));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-accent, #e8cfae) 7%, transparent), rgba(255, 255, 255, 0.012)),
    color-mix(in srgb, var(--altara-bg, #101010) 84%, var(--altara-surface, #151515));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 0 0 3px var(--altara-accent-soft, rgba(232, 207, 174, 0.1));
}

#gifModal .gifSearchIcon {
  position: relative;
  left: auto;
  top: auto;
  width: 16px;
  height: 16px;
  display: inline-block;
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.5));
  transform: none;
}

#gifModal .gifSearchIcon::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 9px;
  height: 9px;
  border: 1.8px solid currentColor;
  border-radius: 999px;
}

#gifModal .gifSearchIcon::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 11px;
  width: 6px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: left center;
}

#gifModal #gifSearch.input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--altara-text, #f2f0ec);
  font-size: 13.5px;
  font-weight: 550;
  outline: none;
}

#gifModal #gifSearch.input::placeholder {
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.52));
}

#gifModal .gifQuickTags,
#gifModal .gifGrid {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 4px 2px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28)) transparent;
}

#gifModal .gifQuickTags {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(72px, auto);
  gap: 8px;
  align-content: start;
}

#gifModal .gifGrid {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: min-content;
  gap: 8px;
  align-content: start;
}

#gifModal .gifBrowseTop,
#gifModal .gifGridSectionTop {
  grid-column: 1 / -1;
  min-height: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

#gifModal .gifBrowseTitle,
#gifModal .gifGridSectionTitle {
  color: var(--altara-text, #f2f0ec);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
}

#gifModal .gifGridSectionMeta {
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.6));
}

#gifModal .gif-shortcut,
#gifModal .gif-term {
  min-height: 72px;
  border-radius: 10px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 84%, rgba(255, 255, 255, 0.02)), color-mix(in srgb, var(--altara-bg, #101010) 74%, var(--altara-surface, #151515)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#gifModal .gif-shortcut:hover,
#gifModal .gif-term:hover,
#gifModal .gif-shortcut:focus-visible,
#gifModal .gif-term:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.32));
  background: var(--altara-hover, rgba(232, 207, 174, 0.1));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 26px rgba(0, 0, 0, 0.18);
}

#gifModal .gif-shortcut::after,
#gifModal .gif-term::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.58)),
    radial-gradient(220px 110px at 10% 0%, color-mix(in srgb, var(--altara-accent, #e8cfae) 13%, transparent), transparent 70%);
}

#gifModal .gif-shortcut__title,
#gifModal .gif-term__title {
  color: var(--altara-text, #f2f0ec);
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.46);
}

#gifModal .gif-shortcut__meta {
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.7));
  font-size: 11px;
  font-weight: 620;
}

#gifModal .gifMasonry {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}

#gifModal .gifMasonryColumn {
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: start;
}

#gifModal .gif-item {
  position: relative;
  width: 100%;
  min-height: 112px;
  aspect-ratio: 1.35 / 1;
  display: block;
  overflow: hidden;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  border-radius: 10px;
  background: color-mix(in srgb, var(--altara-bg, #101010) 74%, var(--altara-surface, #151515));
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

#gifModal .gif-item:hover,
#gifModal .gif-item:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.34));
  box-shadow:
    0 0 0 3px var(--altara-accent-soft, rgba(232, 207, 174, 0.1)),
    0 14px 32px rgba(0, 0, 0, 0.22);
  filter: brightness(1.035);
}

#gifModal .gif-item img {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: cover;
  color: transparent;
  transition: transform 0.18s ease;
}

#gifModal .gif-item img:not([src]),
#gifModal .gif-item.is-broken img {
  opacity: 0;
}

#gifModal .gif-item:hover img,
#gifModal .gif-item:focus-visible img {
  transform: scale(1.02);
}

#gifModal .gif-item::after {
  display: none;
}

#gifModal .gif-fav-btn {
  z-index: 3;
  top: 6px;
  right: 6px;
  width: 27px;
  min-width: 27px;
  height: 27px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(16, 16, 16, 0.74);
  color: rgba(242, 240, 236, 0.82);
  backdrop-filter: blur(6px);
}

#gifModal .gif-empty {
  grid-column: 1 / -1;
  min-height: 104px;
  display: grid;
  place-items: center;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  background: var(--altara-surface-elevated, #202020);
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.62));
  font-size: 13px;
  text-align: center;
  padding: 12px;
}

#gifModal #gifHint {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 8px 10px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  background: var(--altara-surface-elevated, #202020);
  font-size: 12px;
}

#gifModal .gifFooterHint {
  flex: 0 0 auto;
  min-height: 18px;
  display: flex;
  align-items: center;
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.56));
  font-size: 11px;
  line-height: 1.35;
}

#gifModal .gifGrid::-webkit-scrollbar,
#gifModal .gifQuickTags::-webkit-scrollbar {
  width: 8px;
  height: 6px;
}

#gifModal .gifGrid::-webkit-scrollbar-track,
#gifModal .gifQuickTags::-webkit-scrollbar-track {
  background: transparent;
}

#gifModal .gifGrid::-webkit-scrollbar-thumb,
#gifModal .gifQuickTags::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--altara-accent, #e8cfae) 24%, transparent);
}

body.theme-resolved-light:not(.authPage) #gifModal .modalCard {
  background:
    radial-gradient(520px 220px at 18% 0%, color-mix(in srgb, var(--altara-accent, #b88952) 10%, transparent), transparent 68%),
    linear-gradient(180deg, color-mix(in srgb, var(--altara-surface-elevated, #fffaf1) 96%, rgba(255, 255, 255, 0.55)), var(--altara-surface, #fff7ea) 72%),
    var(--altara-surface-elevated, #fffaf1);
  box-shadow:
    0 24px 70px rgba(61, 48, 34, 0.18),
    0 0 0 1px rgba(61, 48, 34, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body.theme-resolved-light:not(.authPage) #gifModal .modalCard::after {
  background: var(--altara-surface, #fff7ea);
  box-shadow: 8px 8px 18px rgba(61, 48, 34, 0.08);
}

body.theme-resolved-light:not(.authPage) #gifModal .editorWrap,
body.theme-resolved-light:not(.authPage) #gifModal .modalTop,
body.theme-resolved-light:not(.authPage) #gifModal .gif-empty,
body.theme-resolved-light:not(.authPage) #gifModal #gifHint {
  background: var(--altara-surface, #fff7ea);
}

@media (max-width: 560px) {
  #gifModal .modalCard {
    width: min(420px, calc(100vw - 16px));
    max-width: min(420px, calc(100vw - 16px));
    height: min(480px, calc(100vh - 16px));
    max-height: min(480px, calc(100vh - 16px));
    min-height: min(360px, calc(100vh - 16px));
    border-radius: 15px;
  }

  #gifModal .modalTop {
    min-height: 52px;
    padding: 9px 10px;
  }

  #gifModal .editorWrap {
    padding: 9px 10px 10px;
  }
}

@media (max-width: 430px) {
  #gifModal .gifFooterHint {
    display: none;
  }

  #gifModal .gifMasonry {
    gap: 7px;
  }

  #gifModal .gifMasonryColumn {
    gap: 7px;
  }

  #gifModal .gif-item {
    min-height: 98px;
  }
}

/* DM profile preview avatar: keep the profile photo as a normal circle. */
body:not(.authPage) #dmMain .dmProfileAvatar {
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

body:not(.authPage) #dmMain .dmProfileAvatar img,
body:not(.authPage) #dmMain .dmProfileAvatar .profileAvatarMediaClip,
body:not(.authPage) #dmMain .dmProfileAvatar .profileAvatarMedia {
  border-radius: 50%;
}

body:not(.authPage) #dmMain .dmProfileAvatar:hover,
body:not(.authPage) #dmMain .dmProfileAvatar:focus-visible {
  box-shadow: 0 0 0 3px var(--altara-accent-soft, rgba(232, 207, 174, 0.11));
}

/* DM profile preview: status lives on the avatar; mutuals are compact actions. */
body:not(.authPage) #dmMain .dmProfilePresence {
  display: none !important;
}

body:not(.authPage) #dmMain .dmProfileAvatarStatusDot {
  --status-dot-size: 15px;
  --status-dot-inset: 2px;
  border-width: 3px;
  border-color: var(--altara-surface, #181818);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.34);
  z-index: 5;
}

body:not(.authPage) #dmMain .dmProfileContextShell {
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--altara-surface-elevated, #202020);
}

body:not(.authPage) #dmMain .dmProfileMutualActionList {
  display: grid;
  gap: 0;
}

body:not(.authPage) #dmMain .dmProfileMutualActionRow {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 72%, rgba(255, 255, 255, 0.02)), color-mix(in srgb, var(--altara-surface, #181818) 92%, transparent));
  color: var(--altara-text, #f2f0ec);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

body:not(.authPage) #dmMain .dmProfileMutualActionRow:last-child {
  border-bottom: 0;
}

body:not(.authPage) #dmMain .dmProfileMutualActionRow:hover,
body:not(.authPage) #dmMain .dmProfileMutualActionRow:focus-visible {
  outline: none;
  background: var(--altara-hover, rgba(232, 207, 174, 0.1));
  box-shadow: inset 0 0 0 1px var(--altara-accent-border, rgba(232, 207, 174, 0.24));
}

body:not(.authPage) #dmMain .dmProfileMutualActionRow.is-disabled,
body:not(.authPage) #dmMain .dmProfileMutualActionRow:disabled {
  cursor: default;
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
}

body:not(.authPage) #dmMain .dmProfileMutualActionRow.is-disabled:hover,
body:not(.authPage) #dmMain .dmProfileMutualActionRow.is-disabled:focus-visible,
body:not(.authPage) #dmMain .dmProfileMutualActionRow:disabled:hover,
body:not(.authPage) #dmMain .dmProfileMutualActionRow:disabled:focus-visible {
  outline: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 72%, rgba(255, 255, 255, 0.02)), color-mix(in srgb, var(--altara-surface, #181818) 92%, transparent));
  box-shadow: none;
}

body:not(.authPage) #dmMain .dmProfileMutualActionRow.is-loading .dmProfileMutualActionCount,
body:not(.authPage) #dmMain .dmProfileMutualActionRow.is-unavailable .dmProfileMutualActionCount {
  color: var(--altara-accent-strong, #f0d8b8);
}

body:not(.authPage) #dmMain .dmProfileMutualActionText {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  white-space: nowrap;
}

body:not(.authPage) #dmMain .dmProfileMutualActionLabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 780;
}

body:not(.authPage) #dmMain .dmProfileMutualActionCount {
  flex: 0 0 auto;
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
  font-size: 13px;
  font-weight: 720;
}

body:not(.authPage) #dmMain .dmProfileMutualActionChevron {
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.54));
  font-size: 22px;
  line-height: 1;
}

body:not(.authPage) #dmMain .dmProfileMutualActionBadge {
  min-width: 0;
  padding: 3px 8px;
  border: 1px solid var(--altara-accent-border, rgba(232, 207, 174, 0.24));
  border-radius: 999px;
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.08));
  color: var(--altara-accent-strong, #f0d8b8);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

body.theme-resolved-light:not(.authPage) #dmMain .dmProfileAvatarStatusDot {
  border-color: var(--altara-surface, #fff7ea);
  box-shadow: 0 2px 7px rgba(61, 48, 34, 0.18);
}

body.theme-resolved-light:not(.authPage) #dmMain .dmProfileContextShell {
  background: var(--altara-surface-elevated, #fffaf1);
}

body.theme-resolved-light:not(.authPage) #dmMain .dmProfileMutualActionRow {
  background: var(--altara-surface-elevated, #fffaf1);
}

/* DM profile preview mutual rows: inline expansion using already-loaded data. */
body:not(.authPage) #dmMain .dmProfileMutualActionRow.is-expanded {
  background: var(--altara-active, rgba(232, 207, 174, 0.12));
  box-shadow: inset 0 0 0 1px var(--altara-accent-border, rgba(232, 207, 174, 0.24));
}

body:not(.authPage) #dmMain .dmProfileMutualActionRow.is-expanded .dmProfileMutualActionChevron {
  transform: rotate(90deg);
}

body:not(.authPage) #dmMain .dmProfileMutualActionChevron {
  transition: transform 0.16s ease, color 0.16s ease;
}

body:not(.authPage) #dmMain .dmProfileMutualExpanded {
  display: grid;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-bg, #101010) 28%, transparent), transparent),
    color-mix(in srgb, var(--altara-surface, #181818) 82%, transparent);
}

body:not(.authPage) #dmMain .dmProfileMutualItemRow {
  min-width: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 6px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 11px;
  background: color-mix(in srgb, var(--altara-bg, #101010) 46%, transparent);
}

body:not(.authPage) #dmMain .dmProfileMutualFriendAvatar {
  position: relative;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border-radius: 999px;
  background: var(--altara-surface-elevated, #202020);
  color: var(--altara-text, #f2f0ec);
}

body:not(.authPage) #dmMain .dmProfileMutualFriendAvatar img,
body:not(.authPage) #dmMain .dmProfileMutualFriendAvatar .profileAvatarMediaClip,
body:not(.authPage) #dmMain .dmProfileMutualFriendAvatar .profileAvatarMedia,
body:not(.authPage) #dmMain .dmProfileMutualFriendAvatar .groupDmAvatarFallback {
  width: 100%;
  height: 100%;
  border-radius: 999px;
}

body:not(.authPage) #dmMain .dmProfileMutualFriendAvatar .statusDot {
  --status-dot-size: 10px;
  --status-dot-inset: -1px;
  border-color: var(--altara-surface, #181818);
}

body:not(.authPage) #dmMain .dmProfileMutualMoreRow,
body:not(.authPage) #dmMain .dmProfileMutualEmpty {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  background: color-mix(in srgb, var(--altara-bg, #101010) 38%, transparent);
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
  font-size: 12px;
  font-weight: 720;
  text-align: center;
}

body:not(.authPage) #dmMain .dmProfileMutualMoreRow {
  cursor: pointer;
  color: var(--altara-accent-strong, #f0d8b8);
}

body:not(.authPage) #dmMain .dmProfileMutualMoreRow:hover,
body:not(.authPage) #dmMain .dmProfileMutualMoreRow:focus-visible {
  outline: none;
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  background: var(--altara-hover, rgba(232, 207, 174, 0.1));
}

body.theme-resolved-light:not(.authPage) #dmMain .dmProfileMutualExpanded,
body.theme-resolved-light:not(.authPage) #dmMain .dmProfileMutualItemRow,
body.theme-resolved-light:not(.authPage) #dmMain .dmProfileMutualMoreRow,
body.theme-resolved-light:not(.authPage) #dmMain .dmProfileMutualEmpty {
  background: var(--altara-surface, #fff7ea);
}

body.theme-resolved-light:not(.authPage) #dmMain .dmProfileMutualFriendAvatar .statusDot {
  border-color: var(--altara-surface, #fff7ea);
}

/* DM profile preview should behave as a true right sidebar inside the DM body. */
body:not(.authPage) #dmMain .dmMainBody:has(#dmProfilePanel:not(.hidden)) {
  gap: 0;
  padding: 0 0 0 10px;
}

body:not(.authPage) #dmMain .dmMainBody:has(#dmProfilePanel:not(.hidden)) .dmProfilePanel {
  flex: 0 0 clamp(320px, 26vw, 360px);
  width: clamp(320px, 26vw, 360px);
  min-width: 320px;
  max-width: 360px;
  align-self: stretch;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 0;
  background: var(--altara-surface, #181818);
  box-shadow: none;
}

body:not(.authPage) #dmMain .dmMainBody:has(#dmProfilePanel:not(.hidden)) .dmThread {
  min-width: 0;
}

@media (max-width: 980px) {
  body:not(.authPage) #dmMain .dmMainBody:has(#dmProfilePanel:not(.hidden)) {
    padding: 8px;
    gap: 8px;
  }

  body:not(.authPage) #dmMain .dmMainBody:has(#dmProfilePanel:not(.hidden)) .dmProfilePanel {
    width: min(88vw, 350px);
    min-width: 0;
    max-width: none;
    border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.42);
  }
}

/* DM right-side tools: shared active header state and sidebar shell. */
body:not(.authPage) #dmMain .dmHeaderIconBtn {
  position: relative;
  transition:
    border-color 0.16s ease,
    background-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

body:not(.authPage) #dmMain #btnDmPins.is-on,
body:not(.authPage) #dmMain #btnDmPins[aria-pressed="true"],
body:not(.authPage) #dmMain #btnDmProfilePanel.is-on,
body:not(.authPage) #dmMain #btnDmProfilePanel[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--altara-accent, #e8cfae) 48%, var(--altara-border, rgba(255, 255, 255, 0.1)));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-accent-soft, rgba(232, 207, 174, 0.11)) 74%, var(--altara-surface-elevated, #202020)), color-mix(in srgb, var(--altara-surface, #181818) 82%, var(--altara-accent, #e8cfae) 8%));
  color: var(--altara-accent-strong, #f0d8b8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px var(--altara-accent-soft, rgba(232, 207, 174, 0.11)),
    0 8px 22px rgba(0, 0, 0, 0.18);
}

body:not(.authPage) #dmMain #btnDmPins.is-on::after,
body:not(.authPage) #dmMain #btnDmPins[aria-pressed="true"]::after,
body:not(.authPage) #dmMain #btnDmProfilePanel.is-on::after,
body:not(.authPage) #dmMain #btnDmProfilePanel[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--altara-accent, #e8cfae);
  box-shadow: 0 0 10px var(--altara-accent-soft, rgba(232, 207, 174, 0.28));
  transform: translateX(-50%);
  pointer-events: none;
}

body:not(.authPage) #dmMain #btnDmPins.is-on:hover,
body:not(.authPage) #dmMain #btnDmPins.is-on:focus-visible,
body:not(.authPage) #dmMain #btnDmPins[aria-pressed="true"]:hover,
body:not(.authPage) #dmMain #btnDmPins[aria-pressed="true"]:focus-visible,
body:not(.authPage) #dmMain #btnDmProfilePanel.is-on:hover,
body:not(.authPage) #dmMain #btnDmProfilePanel.is-on:focus-visible,
body:not(.authPage) #dmMain #btnDmProfilePanel[aria-pressed="true"]:hover,
body:not(.authPage) #dmMain #btnDmProfilePanel[aria-pressed="true"]:focus-visible {
  border-color: color-mix(in srgb, var(--altara-accent, #e8cfae) 64%, var(--altara-border, rgba(255, 255, 255, 0.1)));
  background: color-mix(in srgb, var(--altara-active, rgba(232, 207, 174, 0.12)) 78%, var(--altara-hover, rgba(255, 255, 255, 0.055)));
  color: var(--altara-text, #f2f0ec);
}

body:not(.authPage) #dmMain .dmMainBody:has(#dmPinsPanel:not(.hidden)),
body:not(.authPage) #dmMain .dmMainBody:has(#dmProfilePanel:not(.hidden)) {
  gap: 0;
  padding: 0 0 0 10px;
}

body:not(.authPage) #dmMain .dmMainBody:has(#dmPinsPanel:not(.hidden)) .dmPinsPanel,
body:not(.authPage) #dmMain .dmMainBody:has(#dmProfilePanel:not(.hidden)) .dmProfilePanel {
  flex: 0 0 clamp(320px, 26vw, 360px);
  width: clamp(320px, 26vw, 360px);
  min-width: 320px;
  max-width: 360px;
  align-self: stretch;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 0;
  background: var(--altara-surface, #181818);
  box-shadow: none;
}

body:not(.authPage) #dmMain .dmPinsPanel:not(.hidden)::before,
body:not(.authPage) #dmMain .dmProfilePanel:not(.hidden)::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  z-index: 8;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0, var(--altara-accent, #e8cfae) 18%, color-mix(in srgb, var(--altara-accent, #e8cfae) 58%, transparent) 74%, transparent 100%);
  opacity: 0.72;
}

body:not(.authPage) #dmMain .dmPinsPanel__top,
body:not(.authPage) #dmMain .dmProfilePanel__top {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  background: color-mix(in srgb, var(--altara-surface-elevated, #202020) 48%, transparent);
}

body:not(.authPage) #dmMain .dmPinsPanel__title,
body:not(.authPage) #dmMain .dmProfilePanel__title {
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
  font-family: var(--font-ui, inherit);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

body:not(.authPage) #dmMain .dmPinsList {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  gap: 8px;
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28)) transparent;
}

body:not(.authPage) #dmMain .dmPinRow {
  border-color: var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 13px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 58%, rgba(255, 255, 255, 0.02)), color-mix(in srgb, var(--altara-surface, #181818) 92%, transparent));
  color: var(--altara-text, #f2f0ec);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body:not(.authPage) #dmMain .dmPinRow:hover,
body:not(.authPage) #dmMain .dmPinRow:focus-visible {
  outline: none;
  border-color: var(--altara-accent-border, rgba(232, 207, 174, 0.28));
  background: var(--altara-hover, rgba(232, 207, 174, 0.1));
}

body:not(.authPage) #dmMain .dmPinRow__name,
body:not(.authPage) #dmMain .dmPinPreview--text,
body:not(.authPage) #dmMain .dmPinPreview__fileName {
  color: var(--altara-text, #f2f0ec);
}

body:not(.authPage) #dmMain .dmPinRow__meta,
body:not(.authPage) #dmMain .dmPinPreview__fileMeta {
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
}

body:not(.authPage) #dmMain .dmPinPreview--file,
body:not(.authPage) #dmMain .dmPinPreview--media,
body:not(.authPage) #dmMain #dmPinsList > .hint {
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  background: color-mix(in srgb, var(--altara-bg, #101010) 42%, transparent);
}

body:not(.authPage) #dmMain #dmPinsList > .hint {
  min-height: 58px;
  display: grid;
  place-items: center;
  padding: 12px;
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
  font-size: 12px;
  font-weight: 720;
  text-align: center;
}

body.theme-resolved-light:not(.authPage) #dmMain .dmMainBody:has(#dmPinsPanel:not(.hidden)) .dmPinsPanel,
body.theme-resolved-light:not(.authPage) #dmMain .dmMainBody:has(#dmProfilePanel:not(.hidden)) .dmProfilePanel {
  background: var(--altara-surface, #fff7ea);
}

body.theme-resolved-light:not(.authPage) #dmMain .dmPinRow,
body.theme-resolved-light:not(.authPage) #dmMain .dmPinPreview--file,
body.theme-resolved-light:not(.authPage) #dmMain .dmPinPreview--media,
body.theme-resolved-light:not(.authPage) #dmMain #dmPinsList > .hint {
  background: var(--altara-surface-elevated, #fffaf1);
}

@media (max-width: 980px) {
  body:not(.authPage) #dmMain .dmMainBody:has(#dmPinsPanel:not(.hidden)),
  body:not(.authPage) #dmMain .dmMainBody:has(#dmProfilePanel:not(.hidden)) {
    padding: 8px;
    gap: 8px;
  }

  body:not(.authPage) #dmMain .dmMainBody:has(#dmPinsPanel:not(.hidden)) .dmPinsPanel,
  body:not(.authPage) #dmMain .dmMainBody:has(#dmProfilePanel:not(.hidden)) .dmProfilePanel {
    width: min(88vw, 350px);
    min-width: 0;
    max-width: none;
    border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.42);
  }
}

/* Chat media: preserve real ratios and collapse broken previews into compact cards. */
.msg__gifWrap,
.msg__attachmentMedia,
.msg__attachmentPreview,
.dmAttachmentGifWrap {
  max-width: min(640px, 100%);
}

.msg__attachmentsList--media {
  align-items: start;
}

.msg__attachmentsList--media .msg__attachment,
.msg__attachmentsList--media .msg__attachment--image,
.msg__attachmentsList--media .msg__attachmentMedia,
.msg__attachmentsList--media .msg__attachmentPreview,
.msg__attachmentsList--media .msg__videoPlayer {
  width: fit-content;
  max-width: 100%;
}

.msg__attachmentsList--media .msg__attachmentImage,
.msg__attachmentsList--media .msg__attachmentVideo {
  width: var(--chat-media-width, auto);
  max-width: 100%;
  height: auto;
  max-height: min(74vh, 760px);
  aspect-ratio: var(--chat-media-ratio, auto);
  object-fit: contain;
}

.msg__attachmentImage,
.msg__gif {
  width: var(--chat-media-width, auto);
  max-width: 100%;
  height: auto;
  aspect-ratio: var(--chat-media-ratio, auto);
  object-fit: contain;
}

.msg__gif.lazyMediaImage:not([src]),
.msg__attachmentImage.lazyMediaImage:not([src]) {
  width: var(--chat-media-width, min(420px, 72vw));
  max-width: 100%;
  min-height: 0;
  height: auto;
  aspect-ratio: var(--chat-media-ratio, 16 / 10);
  object-fit: contain;
}

.msg__attachmentMedia.is-error,
.msg__gifWrap.is-error {
  width: min(420px, 100%);
  max-width: 100%;
  line-height: normal;
  cursor: default;
}

.msg__attachmentMedia.is-error .msg__attachmentPreview,
.msg__attachmentMedia.is-error .msg__attachmentImage,
.msg__attachmentMedia.is-error .msg__attachmentSpoilerMask,
.msg__attachmentMedia.is-error > .msg__attachmentCornerBtn:not(.msg__attachmentCornerBtn--danger),
.msg__gifWrap.is-error > img,
.msg__gifWrap.is-error > .msg__gifFavBtn {
  display: none !important;
}

.msg__attachmentFallback {
  width: min(420px, 100%);
  min-height: 62px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--altara-border, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--altara-surface-elevated, #202020) 54%, transparent), color-mix(in srgb, var(--altara-surface, #181818) 90%, transparent));
  color: var(--altara-text, #f2f0ec);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.msg__attachmentFallbackIcon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--altara-accent-border, rgba(232, 207, 174, 0.24));
  border-radius: 10px;
  background: var(--altara-accent-soft, rgba(232, 207, 174, 0.08));
  color: var(--altara-accent-strong, #f0d8b8);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.msg__attachmentFallbackBody {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.msg__attachmentFallbackTitle,
.msg__attachmentFallbackMeta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg__attachmentFallbackTitle {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.msg__attachmentFallbackMeta {
  color: var(--altara-text-muted, rgba(242, 240, 236, 0.58));
  font-size: 11.5px;
  line-height: 1.25;
}

.msg__attachmentFallbackActions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.msg__attachmentFallback .msg__attachmentOpen {
  min-height: 30px;
  padding: 0 10px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dmAttachmentBody {
  min-height: 0;
  overflow: auto;
}

.dmAttachmentPreview {
  width: var(--chat-media-width, auto);
  height: auto;
  max-width: 100%;
  max-height: min(82vh, 920px);
  aspect-ratio: var(--chat-media-ratio, auto);
  object-fit: contain;
}

.dmAttachmentPreview--image {
  display: block;
  object-fit: contain;
}

.dmAttachmentGifWrap {
  width: var(--chat-media-width, auto);
  max-width: 100%;
}

.dmAttachmentGifWrap.is-gif-paused .dmAttachmentPreview--image.lazyMediaImage:not([src]) {
  width: var(--chat-media-width, min(720px, 86vw));
  min-height: 0;
  aspect-ratio: var(--chat-media-ratio, 16 / 10);
}

@media (max-width: 640px) {
  .msg__attachmentsList--media {
    grid-template-columns: 1fr;
  }

  .msg__attachmentFallback {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .msg__attachmentFallbackActions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* ALTARA compact voice dock above the profile card */
body:not(.authPage) .leftBottomVoiceStack {
  grid-column: 2;
  grid-row: 4;
  align-self: end;
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 10px 12px 14px;
  z-index: 8;
}

body:not(.authPage) .leftBottomVoiceStack #meProfileCard {
  grid-column: auto;
  grid-row: auto;
  width: 100%;
  min-width: 0;
  margin: 0;
}

body:not(.authPage) .voiceMiniDockSlot {
  display: grid;
  width: 100%;
  min-width: 0;
}

body:not(.authPage) .voiceMiniDockSlot:empty {
  display: none;
}

.callBarCopy {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.callBarSub {
  min-width: 0;
  color: rgba(242, 240, 236, 0.52);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body:not(.authPage) .voiceMiniDockSlot .callBar.is-docked-in-sidebar,
body:not(.authPage) .voiceMiniDockSlot .callBar.is-docked-in-sidebar.is-server-voice-mini-panel {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: 100%;
  max-width: 100%;
  padding: 9px;
  gap: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.095);
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.99), rgba(11, 11, 11, 0.99));
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform: none;
  animation: none;
  overflow: hidden;
  z-index: 0;
}

body:not(.authPage) .voiceMiniDockSlot .callBar.is-docked-in-sidebar.is-open {
  transform: none;
}

body:not(.authPage) .app:has(#dmMain.is-server-voice-call-layout.is-server-voice-in-call) .voiceMiniDockSlot .callBar.is-docked-in-sidebar.is-server-voice-mini-panel,
body:not(.authPage) .appGrid:has(#dmMain.is-server-voice-call-layout.is-server-voice-in-call) .voiceMiniDockSlot .callBar.is-docked-in-sidebar.is-server-voice-mini-panel {
  display: grid !important;
  pointer-events: auto !important;
}

body:not(.authPage) .voiceMiniDockSlot .callBarHeader {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}

body:not(.authPage) .voiceMiniDockSlot .callBarLiveIcon {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(242, 240, 236, 0.64);
}

body:not(.authPage) .voiceMiniDockSlot .callBarText {
  color: rgba(242, 240, 236, 0.94);
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.1;
}

body:not(.authPage) .voiceMiniDockSlot .callBarShareBadge,
body:not(.authPage) .voiceMiniDockSlot .callBarPing,
body:not(.authPage) .voiceMiniDockSlot #btnServerVoiceReconnectSmall,
body:not(.authPage) .voiceMiniDockSlot #btnShareScreenSmallMenu,
body:not(.authPage) .voiceMiniDockSlot #btnCameraSmallMenu,
body:not(.authPage) .voiceMiniDockSlot #btnOpenCallSmall,
body:not(.authPage) .voiceMiniDockSlot #btnMicToggleSmall,
body:not(.authPage) .voiceMiniDockSlot #btnDeafenToggleSmall {
  display: none !important;
}

body:not(.authPage) .voiceMiniDockSlot .callBarActions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}

body:not(.authPage) .voiceMiniDockSlot #callCameraSplitSmall,
body:not(.authPage) .voiceMiniDockSlot #callShareSplitSmall {
  display: contents;
}

body:not(.authPage) .voiceMiniDockSlot #btnCameraSmall {
  order: 1;
}

body:not(.authPage) .voiceMiniDockSlot #btnShareScreenSmall {
  order: 2;
}

body:not(.authPage) .voiceMiniDockSlot #btnCallEndSmall {
  order: 3;
}

body:not(.authPage) .voiceMiniDockSlot .callMiniBtn,
body:not(.authPage) .voiceMiniDockSlot .callShareSplit .callMiniBtn {
  width: 100%;
  min-width: 0;
  height: 32px;
  border-radius: 10px;
  border-color: rgba(255, 255, 255, 0.10);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(24, 24, 24, 0.92);
  color: rgba(242, 240, 236, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body:not(.authPage) .voiceMiniDockSlot .callMiniBtn:hover:not(:disabled),
body:not(.authPage) .voiceMiniDockSlot .callShareSplit .callMiniBtn:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(29, 29, 29, 0.96);
  color: rgba(242, 240, 236, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  transform: none;
}

body:not(.authPage) .voiceMiniDockSlot .callMiniBtn.is-on,
body:not(.authPage) .voiceMiniDockSlot .callShareSplit.is-sharing .callMiniBtn,
body:not(.authPage) .voiceMiniDockSlot .btn.is-on {
  border-color: rgba(232, 207, 174, 0.32);
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.11), rgba(255, 255, 255, 0.018)),
    rgba(31, 29, 26, 0.96);
  color: rgba(242, 240, 236, 0.96);
}

body:not(.authPage) .voiceMiniDockSlot .callMiniBtn--danger {
  border-color: rgba(228, 82, 111, 0.58);
  background: linear-gradient(180deg, rgba(194, 65, 94, 0.92), rgba(145, 42, 65, 0.95));
  color: rgba(255, 239, 242, 0.96);
}

body:not(.authPage) .voiceMiniDockSlot .callMiniBtn--danger:hover:not(:disabled) {
  border-color: rgba(252, 128, 150, 0.68);
  background: linear-gradient(180deg, rgba(214, 76, 107, 0.96), rgba(158, 47, 72, 0.98));
}
/* ALTARA call control menus */
body:not(.authPage) :is(.callShareMenu, .callAudioMenu) {
  z-index: 2147483000;
  max-width: calc(100vw - 20px);
  max-height: calc(100vh - 20px);
  overflow: auto;
  box-sizing: border-box;
  border: 1px solid rgba(232, 207, 174, 0.14);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(24, 23, 22, 0.99), rgba(12, 12, 12, 0.99));
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  color: rgba(246, 243, 238, 0.94);
  scrollbar-color: rgba(232, 207, 174, 0.28) rgba(255, 255, 255, 0.04);
}

body:not(.authPage) .callShareMenu {
  width: min(276px, calc(100vw - 20px));
  padding: 8px;
  overflow: visible;
}

body:not(.authPage) .callAudioMenu {
  width: min(292px, calc(100vw - 20px));
  padding: 10px;
}

body:not(.authPage) .callShareMenu__info,
body:not(.authPage) .callShareMenu__sectionLabel,
body:not(.authPage) .callAudioMenu__title {
  color: rgba(211, 205, 194, 0.66);
}

body:not(.authPage) .callAudioMenu__title {
  margin: 0 2px 9px;
  font-size: 12px;
  letter-spacing: 0.01em;
}

body:not(.authPage) :is(.callShareMenu__item, .callAudioMenu__action) {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: rgba(243, 239, 232, 0.88);
  font-size: 12px;
  font-weight: 750;
  gap: 10px;
}

body:not(.authPage) .callShareMenu__item {
  padding: 10px 11px;
}

body:not(.authPage) .callAudioMenu__action {
  margin-bottom: 4px;
  padding: 0 11px;
}

body:not(.authPage) :is(.callShareMenu__item, .callAudioMenu__action):hover,
body:not(.authPage) :is(.callShareMenu__item, .callAudioMenu__action):focus-visible,
body:not(.authPage) .callShareMenu__submenuAnchor:is(.is-open, :hover, :focus-within) > .callShareMenu__item {
  outline: none;
  border-color: rgba(232, 207, 174, 0.18);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 250, 242, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body:not(.authPage) :is(.callShareMenu__item, .callAudioMenu__action):focus-visible,
body:not(.authPage) :is(.callShareMenu__chip, .callShareMenu__qualityOption):focus-visible {
  box-shadow:
    0 0 0 1px rgba(232, 207, 174, 0.32),
    0 0 0 4px rgba(232, 207, 174, 0.08);
}

body:not(.authPage) .callShareMenu__itemIcon {
  color: rgba(232, 207, 174, 0.76);
  opacity: 1;
}

body:not(.authPage) .callShareMenu__audioState {
  border-radius: 999px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(211, 205, 194, 0.7);
  opacity: 1;
}

body:not(.authPage) .callShareMenu__item--audio.is-off {
  border-color: rgba(255, 255, 255, 0.06);
  color: rgba(192, 186, 176, 0.78);
}

body:not(.authPage) .callShareMenu__item--danger {
  border-color: rgba(236, 92, 117, 0.22);
  background: rgba(79, 24, 35, 0.62);
  color: #ffd2da;
}

body:not(.authPage) .callShareMenu__item--danger:hover,
body:not(.authPage) .callShareMenu__item--danger:focus-visible {
  border-color: rgba(236, 92, 117, 0.44);
  background: rgba(110, 32, 50, 0.78);
  color: #fff1f4;
}

body:not(.authPage) .callShareMenu__chip,
body:not(.authPage) .callShareMenu__qualityOption {
  border: 1px solid rgba(232, 207, 174, 0.11);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(218, 211, 201, 0.75);
}

body:not(.authPage) .callShareMenu__chip:hover,
body:not(.authPage) .callShareMenu__chip:focus-visible,
body:not(.authPage) .callShareMenu__qualityOption:hover,
body:not(.authPage) .callShareMenu__qualityOption:focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.26);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 250, 242, 0.95);
}

body:not(.authPage) .callShareMenu__chip.is-active,
body:not(.authPage) .callShareMenu__qualityOption.is-active {
  border-color: rgba(232, 207, 174, 0.52);
  background: rgba(232, 207, 174, 0.13);
  color: rgba(255, 247, 232, 0.98);
  box-shadow: inset 0 0 0 1px rgba(232, 207, 174, 0.16);
}

body:not(.authPage) .callShareMenu__submenu {
  max-width: calc(100vw - 20px);
  border: 1px solid rgba(232, 207, 174, 0.14);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(24, 23, 22, 0.99), rgba(12, 12, 12, 0.99));
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  padding: 7px;
}

body:not(.authPage) .callAudioMenu__check,
body:not(.authPage) .callAudioMenu__row {
  color: rgba(243, 239, 232, 0.86);
}

body:not(.authPage) .callAudioMenu__value {
  color: rgba(211, 205, 194, 0.64);
}

body:not(.authPage) .callAudioMenu__section + .callAudioMenu__section {
  border-top-color: rgba(232, 207, 174, 0.1);
}

body:not(.authPage) .callAudioMenu__check input,
body:not(.authPage) .callAudioMenu__slider {
  accent-color: #e8cfae;
}

body.motion-ready:not(.authPage) .callAudioMenu__action:hover,
body.motion-ready:not(.authPage) .callShareMenu__item:hover {
  transform: none;
}

/* ALTARA channel create/edit modal polish */
body:not(.authPage) #serverChannelCreateModal.modal {
  background: rgba(3, 3, 3, 0.68);
  backdrop-filter: blur(6px);
}

body:not(.authPage) #serverChannelCreateModal .serverChannelCreateCard {
  border-color: rgba(232, 207, 174, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(19, 18, 17, 0.99), rgba(11, 11, 11, 0.99)) !important;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.64),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

body:not(.authPage) #serverChannelCreateModal .modalTop {
  border-bottom-color: rgba(232, 207, 174, 0.11) !important;
  background: rgba(17, 16, 15, 0.98) !important;
}

body:not(.authPage) #serverChannelCreateModal .serverCreateBody {
  background: rgba(12, 12, 12, 0.99) !important;
}

body:not(.authPage) #serverChannelCreateModal .serverCreateFooter {
  border-top-color: rgba(232, 207, 174, 0.11) !important;
  background: rgba(17, 16, 15, 0.98) !important;
}

body:not(.authPage) #serverChannelCreateModal .modalTitle,
body:not(.authPage) #serverChannelCreateModal .serverChannelCreateSectionTitle,
body:not(.authPage) #serverChannelCreateModal .serverChannelTypeOption__title,
body:not(.authPage) #serverChannelCreateModal .serverChannelCreatePrivate__title,
body:not(.authPage) #serverChannelCreateModal .serverChannelNameField__input,
body:not(.authPage) #serverChannelCreateModal .serverChannelCreateCategorySelect,
body:not(.authPage) #serverChannelCreateModal .input {
  color: rgba(246, 243, 238, 0.95) !important;
}

body:not(.authPage) #serverChannelCreateModal .hint,
body:not(.authPage) #serverChannelCreateModal .serverChannelTypeOption__desc,
body:not(.authPage) #serverChannelCreateModal .serverChannelCreatePrivate__hint,
body:not(.authPage) #serverChannelCreateModal .serverChannelNameField__prefix,
body:not(.authPage) #serverChannelCreateModal .serverChannelCreateAccessRow__meta {
  color: rgba(211, 205, 194, 0.62) !important;
}

body:not(.authPage) #serverChannelCreateModal .serverChannelTypeOption {
  border-radius: 11px;
  padding: 7px 8px;
  transition: background-color .14s ease, box-shadow .14s ease;
}

body:not(.authPage) #serverChannelCreateModal .serverChannelTypeOption:hover,
body:not(.authPage) #serverChannelCreateModal .serverChannelTypeOption:focus-within {
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(232, 207, 174, 0.08);
}

body:not(.authPage) #serverChannelCreateModal .serverChannelTypeOption__icon {
  color: rgba(232, 207, 174, 0.78) !important;
}

body:not(.authPage) #serverChannelCreateModal .serverChannelTypeOption__radio {
  border-color: rgba(232, 207, 174, 0.24) !important;
  background: rgba(7, 7, 7, 0.94) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.38) !important;
}

body:not(.authPage) #serverChannelCreateModal .serverChannelTypeOption__input:checked + .serverChannelTypeOption__radio,
body:not(.authPage) #serverChannelCreateModal.is-edit-mode #serverChannelCreateTypeSection.is-readonly .serverChannelTypeOption__input:checked + .serverChannelTypeOption__radio {
  border-color: rgba(232, 207, 174, 0.72) !important;
  background: rgba(232, 207, 174, 0.12) !important;
  box-shadow:
    0 0 0 1px rgba(232, 207, 174, 0.12),
    0 0 0 4px rgba(232, 207, 174, 0.045) !important;
}

body:not(.authPage) #serverChannelCreateModal .serverChannelTypeOption__input:checked + .serverChannelTypeOption__radio::after {
  background: #e8cfae !important;
}

body:not(.authPage) #serverChannelCreateModal .serverChannelCreateCategorySelect,
body:not(.authPage) #serverChannelCreateModal .serverChannelNameField,
body:not(.authPage) #serverChannelCreateModal .input,
body:not(.authPage) #serverChannelCreateModal .serverChannelCreateAccessGroup,
body:not(.authPage) #serverChannelCreateModal .serverChannelCreateAccessRow {
  border-color: rgba(232, 207, 174, 0.13) !important;
  background: rgba(7, 7, 7, 0.92) !important;
  background-image: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

body:not(.authPage) #serverChannelCreateModal .serverChannelCreateCategorySelect {
  color-scheme: dark;
}

body:not(.authPage) #serverChannelCreateModal .serverChannelCreateCategorySelect option {
  background: #11100f;
  color: rgba(246, 243, 238, 0.95);
}

body:not(.authPage) #serverChannelCreateModal .serverChannelCreateCategorySelect:hover,
body:not(.authPage) #serverChannelCreateModal .serverChannelNameField:hover,
body:not(.authPage) #serverChannelCreateModal .input:hover {
  border-color: rgba(232, 207, 174, 0.22) !important;
}

body:not(.authPage) #serverChannelCreateModal .serverChannelCreateCategorySelect:focus,
body:not(.authPage) #serverChannelCreateModal .serverChannelNameField:focus-within,
body:not(.authPage) #serverChannelCreateModal .input:focus {
  outline: none !important;
  border-color: rgba(232, 207, 174, 0.42) !important;
  box-shadow:
    0 0 0 1px rgba(232, 207, 174, 0.2),
    0 0 0 4px rgba(232, 207, 174, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

body:not(.authPage) #serverChannelCreateModal .serverChannelCreateSelectWrap::after {
  border-right-color: rgba(232, 207, 174, 0.72) !important;
  border-bottom-color: rgba(232, 207, 174, 0.72) !important;
}

body:not(.authPage) #serverChannelCreateModal .serverChannelCreatePrivate__slider {
  border-color: rgba(232, 207, 174, 0.16) !important;
  background: rgba(10, 10, 10, 0.96) !important;
}

body:not(.authPage) #serverChannelCreateModal .serverChannelCreatePrivate__slider::after {
  background: rgba(246, 243, 238, 0.96);
}

body:not(.authPage) #serverChannelCreateModal .serverChannelCreatePrivate__switch input:focus-visible + .serverChannelCreatePrivate__slider {
  box-shadow:
    0 0 0 1px rgba(232, 207, 174, 0.26),
    0 0 0 4px rgba(232, 207, 174, 0.08) !important;
}

body:not(.authPage) #serverChannelCreateModal .serverChannelCreatePrivate__switch input:checked + .serverChannelCreatePrivate__slider {
  border-color: rgba(232, 207, 174, 0.5) !important;
  background: rgba(232, 207, 174, 0.18) !important;
}

body:not(.authPage) #serverChannelCreateModal .serverChannelCreateAccessGroup__title {
  border-bottom-color: rgba(232, 207, 174, 0.11);
  color: rgba(246, 243, 238, 0.9) !important;
}

body:not(.authPage) #serverChannelCreateModal .serverChannelCreateAccessRow:hover {
  background: rgba(255, 255, 255, 0.048) !important;
}

body:not(.authPage) #serverChannelCreateModal .serverChannelCreateAccessRow input {
  accent-color: #e8cfae;
}

body:not(.authPage) #serverChannelCreateModal .serverChannelCreateAccessRow__avatar,
body:not(.authPage) #serverChannelCreateModal .serverChannelCreateAccessRow__swatch {
  border-color: rgba(232, 207, 174, 0.16) !important;
  background: rgba(24, 23, 22, 0.96) !important;
}

body:not(.authPage) #serverChannelCreateModal #btnServerChannelCreateClose {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-color: rgba(232, 207, 174, 0.16) !important;
  border-radius: 10px;
  background: rgba(232, 207, 174, 0.06) !important;
  color: rgba(246, 243, 238, 0.82) !important;
}

body:not(.authPage) #serverChannelCreateModal #btnServerChannelCreateClose:hover,
body:not(.authPage) #serverChannelCreateModal #btnServerChannelCreateClose:focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.34) !important;
  background: rgba(232, 207, 174, 0.11) !important;
  box-shadow: 0 0 0 3px rgba(232, 207, 174, 0.08);
}

body:not(.authPage) #serverChannelCreateModal .serverCreateFooter .btn.ghost {
  border-color: rgba(232, 207, 174, 0.14) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
    rgba(23, 23, 22, 0.96) !important;
  color: rgba(246, 243, 238, 0.9) !important;
}

body:not(.authPage) #serverChannelCreateModal .serverCreateFooter .btn.ghost:hover,
body:not(.authPage) #serverChannelCreateModal .serverCreateFooter .btn.ghost:focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.3) !important;
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.08), rgba(255, 255, 255, 0.018)),
    rgba(29, 28, 26, 0.98) !important;
  box-shadow: 0 0 0 3px rgba(232, 207, 174, 0.07);
}

body:not(.authPage) #serverChannelCreateModal .serverCreateFooter .btn.primary {
  border-color: rgba(232, 207, 174, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.22), rgba(232, 207, 174, 0.11)),
    rgba(35, 31, 25, 0.98) !important;
  color: rgba(255, 249, 238, 0.98) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

body:not(.authPage) #serverChannelCreateModal .serverCreateFooter .btn.primary:hover,
body:not(.authPage) #serverChannelCreateModal .serverCreateFooter .btn.primary:focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.6) !important;
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.28), rgba(232, 207, 174, 0.14)),
    rgba(42, 36, 28, 0.99) !important;
  box-shadow:
    0 0 0 3px rgba(232, 207, 174, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.065);
}

/* ALTARA server settings screen */
body:not(.authPage) #serverSettingsModal {
  --server-settings-bg: #101010;
  --server-settings-panel: #151515;
  --server-settings-surface: #181818;
  --server-settings-surface-2: #1d1b19;
  --server-settings-row: rgba(255, 255, 255, 0.035);
  --server-settings-row-hover: rgba(232, 207, 174, 0.07);
  --server-settings-border: rgba(255, 255, 255, 0.075);
  --server-settings-border-strong: rgba(255, 255, 255, 0.115);
  --server-settings-text: rgba(246, 243, 238, 0.94);
  --server-settings-soft: rgba(246, 243, 238, 0.64);
  --server-settings-muted: rgba(246, 243, 238, 0.43);
  --server-settings-accent: #e8cfae;
  --server-settings-accent-soft: rgba(232, 207, 174, 0.11);
  --server-settings-accent-border: rgba(232, 207, 174, 0.28);
  --server-settings-danger: #e58b8b;
  padding: 0;
  place-items: center;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(10px);
}

body:not(.authPage) #serverSettingsModal .serverSettingsCard {
  width: min(1280px, calc(100vw - 24px));
  height: min(840px, calc(100vh - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 1px solid var(--server-settings-border-strong);
  border-radius: 12px;
  background:
    radial-gradient(circle at 86% 0%, rgba(232, 207, 174, 0.055), transparent 34%),
    var(--server-settings-bg);
  box-shadow:
    0 34px 120px rgba(0, 0, 0, 0.66),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--server-settings-text);
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  overflow: hidden;
}

body:not(.authPage) #serverSettingsModal .serverSettingsSidebar {
  min-width: 0;
  min-height: 0;
  padding: 22px 18px 18px;
  border-right: 1px solid var(--server-settings-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
    #151515;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 207, 174, 0.24) transparent;
}

body:not(.authPage) #serverSettingsModal .serverSettingsSidebarServer {
  min-height: 76px;
  padding: 14px;
  border: 1px solid var(--server-settings-border);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    var(--server-settings-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

body:not(.authPage) #serverSettingsModal .serverSettingsSidebarIcon {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 50%;
  background: #202020;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body:not(.authPage) #serverSettingsModal .serverSettingsSidebarIcon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

body:not(.authPage) #serverSettingsModal .serverSettingsSidebarMeta {
  min-width: 0;
}

body:not(.authPage) #serverSettingsModal .serverSettingsSidebarName {
  min-width: 0;
  color: var(--server-settings-text);
  font-size: 15px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.authPage) #serverSettingsModal .serverSettingsSidebarTag {
  margin-top: 3px;
  color: var(--server-settings-soft);
  font-size: 12px;
  font-weight: 500;
}

body:not(.authPage) #serverSettingsModal .serverSettingsSidebarSection {
  display: grid;
  gap: 8px;
  padding-bottom: 12px;
}

body:not(.authPage) #serverSettingsModal .serverSettingsSidebarSection + .serverSettingsSidebarSection {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.065);
}

body:not(.authPage) #serverSettingsModal .serverSettingsSidebarSection--danger {
  margin-top: auto;
}

body:not(.authPage) #serverSettingsModal .serverSettingsGroupLabel {
  margin: 0 0 5px;
  padding: 0 2px;
  color: var(--server-settings-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body:not(.authPage) #serverSettingsModal .serverSettingsNav {
  display: grid;
  gap: 4px;
}

body:not(.authPage) #serverSettingsModal .serverSettingsNavItem {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--server-settings-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

body:not(.authPage) #serverSettingsModal .serverSettingsNavItem:hover,
body:not(.authPage) #serverSettingsModal .serverSettingsNavItem:focus-visible {
  outline: none;
  border-color: var(--server-settings-border);
  background: var(--server-settings-row-hover);
  color: var(--server-settings-text);
}

body:not(.authPage) #serverSettingsModal .serverSettingsNavItem.is-active,
body:not(.authPage) #serverSettingsModal .serverSettingsNavItem[aria-current="page"] {
  border-color: var(--server-settings-accent-border);
  background:
    linear-gradient(90deg, rgba(232, 207, 174, 0.15), rgba(232, 207, 174, 0.055));
  color: var(--server-settings-accent);
  box-shadow: inset 3px 0 0 rgba(232, 207, 174, 0.92);
}

body:not(.authPage) #serverSettingsModal .serverSettingsNavItem small {
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(246, 243, 238, 0.42);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body:not(.authPage) #serverSettingsModal .serverSettingsNavItem--danger {
  border-color: rgba(229, 139, 139, 0.22);
  background: rgba(229, 139, 139, 0.06);
  color: rgba(242, 190, 190, 0.88);
}

body:not(.authPage) #serverSettingsModal .serverSettingsNavItem--danger:hover,
body:not(.authPage) #serverSettingsModal .serverSettingsNavItem--danger:focus-visible,
body:not(.authPage) #serverSettingsModal .serverSettingsNavItem--danger.is-active {
  border-color: rgba(229, 139, 139, 0.36);
  background: rgba(229, 139, 139, 0.11);
  color: rgba(255, 224, 224, 0.96);
}

body:not(.authPage) #serverSettingsModal .serverSettingsMain {
  min-width: 0;
  min-height: 0;
  background:
    radial-gradient(circle at 74% -8%, rgba(232, 207, 174, 0.045), transparent 34%),
    var(--server-settings-bg);
  display: flex;
  flex-direction: column;
}

body:not(.authPage) #serverSettingsModal .serverSettingsMainTop {
  min-height: 104px;
  padding: 34px 34px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

body:not(.authPage) #serverSettingsModal .serverSettingsTitle {
  color: var(--server-settings-text);
  font-family: "Bricolage Grotesque", var(--font-display);
  font-size: 29px;
  font-weight: 800;
  line-height: 1.05;
}

body:not(.authPage) #serverSettingsModal .serverSettingsSubtitle {
  margin-top: 7px;
  color: var(--server-settings-soft);
  font-size: 14px;
  font-weight: 400;
}

body:not(.authPage) #serverSettingsModal .serverSettingsCloseBtn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border-color: var(--server-settings-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(246, 243, 238, 0.76);
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
}

body:not(.authPage) #serverSettingsModal .serverSettingsCloseBtn:hover,
body:not(.authPage) #serverSettingsModal .serverSettingsCloseBtn:focus-visible {
  outline: none;
  border-color: var(--server-settings-accent-border);
  background: var(--server-settings-accent-soft);
  color: var(--server-settings-text);
  box-shadow: 0 0 0 3px rgba(232, 207, 174, 0.07);
}

body:not(.authPage) #serverSettingsModal .serverSettingsBody {
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 34px 34px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 207, 174, 0.24) transparent;
}

body:not(.authPage) #serverSettingsModal .serverSettingsPanel {
  display: none;
  min-width: 0;
}

body:not(.authPage) #serverSettingsModal .serverSettingsPanel.is-active {
  display: grid;
  gap: 18px;
}

body:not(.authPage) #serverSettingsModal .serverSettingsPanelIntro h2,
body:not(.authPage) #serverSettingsModal .serverSettingsPlaceholder h2 {
  margin: 0;
  color: var(--server-settings-text);
  font-size: 20px;
  line-height: 1.2;
}

body:not(.authPage) #serverSettingsModal .serverSettingsPanelIntro p,
body:not(.authPage) #serverSettingsModal .serverSettingsPlaceholder p {
  max-width: 760px;
  margin: 7px 0 0;
  color: var(--server-settings-soft);
  font-size: 13px;
  line-height: 1.45;
}

body:not(.authPage) #serverSettingsModal .serverSettingsProfileGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: start;
  gap: 18px;
}

body:not(.authPage) #serverSettingsModal .serverSettingsSectionCard,
body:not(.authPage) #serverSettingsModal .serverSettingsPreviewCard,
body:not(.authPage) #serverSettingsModal .serverSettingsRolesSection,
body:not(.authPage) #serverSettingsModal .serverSettingsPlaceholder {
  border: 1px solid var(--server-settings-border);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    var(--server-settings-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body:not(.authPage) #serverSettingsModal .serverSettingsSectionCard,
body:not(.authPage) #serverSettingsModal .serverSettingsRolesSection,
body:not(.authPage) #serverSettingsModal .serverSettingsPlaceholder {
  padding: 18px;
}

body:not(.authPage) #serverSettingsModal .serverSettingsIconRow {
  align-items: center;
  margin-bottom: 18px;
}

body:not(.authPage) #serverSettingsModal .serverCreateIconPreview {
  width: 86px;
  height: 86px;
  border-color: rgba(232, 207, 174, 0.2);
  background:
    radial-gradient(circle at 30% 18%, rgba(232, 207, 174, 0.11), transparent 58%),
    #202020;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
}

body:not(.authPage) #serverSettingsModal .serverCreateIconPreview:hover,
body:not(.authPage) #serverSettingsModal .serverCreateIconPreview:focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.36);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.34),
    0 0 0 3px rgba(232, 207, 174, 0.07);
}

body:not(.authPage) #serverSettingsModal .serverCreateIconPlus {
  border-color: rgba(232, 207, 174, 0.28);
  background: rgba(32, 29, 25, 0.96);
  color: var(--server-settings-accent);
}

body:not(.authPage) #serverSettingsModal .serverSettingsFieldLabel,
body:not(.authPage) #serverSettingsModal .field > label,
body:not(.authPage) #serverSettingsModal .label {
  color: rgba(232, 207, 174, 0.78);
  font-size: 12px;
  font-weight: 800;
}

body:not(.authPage) #serverSettingsModal .serverSettingsFieldHint,
body:not(.authPage) #serverSettingsModal .hint {
  color: var(--server-settings-soft);
}

body:not(.authPage) #serverSettingsModal .serverSettingsButtonRow {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body:not(.authPage) #serverSettingsModal .input,
body:not(.authPage) #serverSettingsModal select.input {
  min-height: 42px;
  border-color: var(--server-settings-border);
  border-radius: 10px;
  background: #101010;
  color: var(--server-settings-text);
}

body:not(.authPage) #serverSettingsModal .input:focus,
body:not(.authPage) #serverSettingsModal select.input:focus {
  outline: none;
  border-color: var(--server-settings-accent-border);
  background: #11100f;
  box-shadow: 0 0 0 3px rgba(232, 207, 174, 0.08);
}

body:not(.authPage) #serverSettingsModal .btn.ghost {
  border-color: rgba(232, 207, 174, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
    rgba(23, 23, 22, 0.96);
  color: rgba(246, 243, 238, 0.9);
}

body:not(.authPage) #serverSettingsModal .btn.ghost:hover,
body:not(.authPage) #serverSettingsModal .btn.ghost:focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.3);
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.08), rgba(255, 255, 255, 0.018)),
    rgba(29, 28, 26, 0.98);
  box-shadow: 0 0 0 3px rgba(232, 207, 174, 0.07);
}

body:not(.authPage) #serverSettingsModal .btn.primary {
  border-color: rgba(232, 207, 174, 0.42);
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.22), rgba(232, 207, 174, 0.11)),
    rgba(35, 31, 25, 0.98);
  color: rgba(255, 249, 238, 0.98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

body:not(.authPage) #serverSettingsModal .btn.primary:hover,
body:not(.authPage) #serverSettingsModal .btn.primary:focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.6);
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.28), rgba(232, 207, 174, 0.14)),
    rgba(42, 36, 28, 0.99);
  box-shadow:
    0 0 0 3px rgba(232, 207, 174, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.065);
}

body:not(.authPage) #serverSettingsModal .serverSettingsPreviewCard {
  overflow: hidden;
  min-height: 304px;
}

body:not(.authPage) #serverSettingsModal .serverSettingsPreviewBanner {
  height: 112px;
  background:
    radial-gradient(circle at 22% 18%, rgba(232, 207, 174, 0.32), transparent 36%),
    linear-gradient(135deg, #2b2119, #151515 72%);
}

body:not(.authPage) #serverSettingsModal .serverSettingsPreviewBody {
  position: relative;
  padding: 44px 16px 16px;
  display: grid;
  gap: 8px;
}

body:not(.authPage) #serverSettingsModal .serverSettingsPreviewIcon {
  position: absolute;
  left: 16px;
  top: -34px;
  width: 68px;
  height: 68px;
  border: 4px solid var(--server-settings-surface);
  border-radius: 50%;
  background: #202020;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.34);
}

body:not(.authPage) #serverSettingsModal .serverSettingsPreviewIcon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

body:not(.authPage) #serverSettingsModal .serverSettingsPreviewName {
  min-width: 0;
  color: var(--server-settings-text);
  font-size: 18px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.authPage) #serverSettingsModal .serverSettingsPreviewMeta,
body:not(.authPage) #serverSettingsModal .serverSettingsPreviewChannel {
  min-width: 0;
  color: var(--server-settings-soft);
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.authPage) #serverSettingsModal .serverSettingsPreviewChannel {
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(232, 207, 174, 0.12);
  border-radius: 10px;
  background: rgba(232, 207, 174, 0.055);
  color: rgba(246, 243, 238, 0.78);
}

body:not(.authPage) #serverSettingsModal .serverSettingsRolesSection {
  border-color: var(--server-settings-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    var(--server-settings-surface);
  gap: 14px;
}

body:not(.authPage) #serverSettingsModal .serverSettingsRolesHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body:not(.authPage) #serverSettingsModal .serverSettingsRoleCreateRow {
  grid-template-columns: minmax(180px, 1fr) 48px minmax(190px, 230px) auto;
  gap: 10px;
}

body:not(.authPage) #serverSettingsModal .serverSettingsRoleColorInput {
  width: 48px;
  height: 42px;
  border: 1px solid rgba(232, 207, 174, 0.18);
  border-radius: 10px;
  background: #101010;
  padding: 3px;
}

body:not(.authPage) #serverSettingsModal .serverSettingsRoleColorInput:focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.36);
  box-shadow: 0 0 0 3px rgba(232, 207, 174, 0.08);
}

body:not(.authPage) #serverSettingsModal .serverSettingsRolesGrid {
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  gap: 12px;
  min-height: 360px;
}

body:not(.authPage) #serverSettingsModal .serverSettingsRolesList,
body:not(.authPage) #serverSettingsModal .serverSettingsRoleMembers {
  max-height: min(52vh, 520px);
  border-color: rgba(232, 207, 174, 0.11);
  background: rgba(12, 12, 12, 0.44);
}

body:not(.authPage) #serverSettingsModal .serverSettingsRolePick {
  border-color: rgba(232, 207, 174, 0.12);
  background: rgba(255, 255, 255, 0.035);
  color: var(--server-settings-text);
}

body:not(.authPage) #serverSettingsModal .serverSettingsRolePick:hover,
body:not(.authPage) #serverSettingsModal .serverSettingsRolePick:focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.28);
  background: rgba(232, 207, 174, 0.065);
}

body:not(.authPage) #serverSettingsModal .serverSettingsRolePick.active {
  border-color: rgba(232, 207, 174, 0.42);
  background:
    linear-gradient(90deg, rgba(232, 207, 174, 0.13), rgba(232, 207, 174, 0.045));
  box-shadow: inset 3px 0 0 rgba(232, 207, 174, 0.82);
}

body:not(.authPage) #serverSettingsModal .serverSettingsRolePermsBadge {
  color: rgba(246, 232, 210, 0.92);
  border-color: rgba(232, 207, 174, 0.24);
  background: rgba(232, 207, 174, 0.09);
}

body:not(.authPage) #serverSettingsModal .serverSettingsRolePermRow,
body:not(.authPage) #serverSettingsModal .serverSettingsRoleMemberRow {
  border-color: rgba(232, 207, 174, 0.11);
  background: rgba(255, 255, 255, 0.035);
}

body:not(.authPage) #serverSettingsModal .serverSettingsRolePermRow input[type="checkbox"],
body:not(.authPage) #serverSettingsModal .serverSettingsRoleMemberRow input[type="checkbox"] {
  accent-color: #e8cfae;
}

body:not(.authPage) #serverSettingsModal .serverSettingsRoleMemberAvatar {
  border-color: rgba(232, 207, 174, 0.16);
  background: rgba(24, 23, 22, 0.96);
}

body:not(.authPage) #serverSettingsModal .serverSettingsPlaceholder {
  min-height: 220px;
  display: grid;
  align-content: start;
}

body:not(.authPage) #serverSettingsModal .serverSettingsPlaceholder--danger {
  border-color: rgba(229, 139, 139, 0.22);
  background:
    linear-gradient(180deg, rgba(229, 139, 139, 0.07), rgba(255, 255, 255, 0.012)),
    var(--server-settings-surface);
}

body:not(.authPage) #serverSettingsModal .serverSettingsDangerLayout {
  display: grid;
  gap: 16px;
}

body:not(.authPage) #serverSettingsModal .serverSettingsDangerNotice,
body:not(.authPage) #serverSettingsModal .serverSettingsDeleteBox {
  border: 1px solid rgba(229, 139, 139, 0.22);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(229, 139, 139, 0.06), rgba(255, 255, 255, 0.012)),
    var(--server-settings-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body:not(.authPage) #serverSettingsModal .serverSettingsDangerNotice {
  padding: 16px 18px;
  display: grid;
  gap: 8px;
}

body:not(.authPage) #serverSettingsModal .serverSettingsDangerNotice p {
  margin: 0;
  color: rgba(246, 221, 221, 0.86);
  font-size: 13px;
  line-height: 1.45;
}

body:not(.authPage) #serverSettingsModal .serverSettingsDeleteBox {
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

body:not(.authPage) #serverSettingsModal .serverSettingsDeleteCopy {
  min-width: 0;
}

body:not(.authPage) #serverSettingsModal .serverSettingsDeleteCopy h3 {
  margin: 0;
  color: rgba(255, 236, 236, 0.98);
  font-size: 16px;
  font-weight: 850;
}

body:not(.authPage) #serverSettingsModal .serverSettingsDeleteCopy p {
  max-width: 780px;
  margin: 7px 0 0;
  color: rgba(246, 218, 218, 0.68);
  font-size: 13px;
  line-height: 1.45;
}

body:not(.authPage) #serverSettingsModal .serverSettingsDangerOwnerNote {
  color: rgba(232, 207, 174, 0.74) !important;
}

body:not(.authPage) #serverSettingsModal .serverSettingsDangerOwnerNote.is-blocked {
  color: rgba(229, 139, 139, 0.82) !important;
}

body:not(.authPage) #serverSettingsModal .serverSettingsDangerButton,
body:not(.authPage) #serverDeleteConfirmModal .serverDeleteConfirmDanger {
  border-color: rgba(223, 82, 102, 0.5);
  background:
    linear-gradient(180deg, rgba(223, 82, 102, 0.9), rgba(151, 42, 62, 0.92)),
    #9c2f45;
  color: rgba(255, 249, 249, 0.98);
  box-shadow:
    0 14px 28px rgba(120, 24, 42, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body:not(.authPage) #serverSettingsModal .serverSettingsDangerButton:hover,
body:not(.authPage) #serverSettingsModal .serverSettingsDangerButton:focus-visible,
body:not(.authPage) #serverDeleteConfirmModal .serverDeleteConfirmDanger:hover,
body:not(.authPage) #serverDeleteConfirmModal .serverDeleteConfirmDanger:focus-visible {
  outline: none;
  border-color: rgba(255, 144, 160, 0.64);
  background:
    linear-gradient(180deg, rgba(239, 97, 118, 0.94), rgba(170, 48, 70, 0.95)),
    #ab354d;
  box-shadow:
    0 0 0 3px rgba(223, 82, 102, 0.12),
    0 16px 34px rgba(120, 24, 42, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body:not(.authPage) #serverSettingsModal .serverSettingsDangerButton:disabled,
body:not(.authPage) #serverDeleteConfirmModal .serverDeleteConfirmDanger:disabled {
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(246, 243, 238, 0.36);
  box-shadow: none;
}

body:not(.authPage) #serverSettingsModal .serverSettingsFooter {
  flex: 0 0 auto;
  padding: 14px 34px;
  border-top: 1px solid var(--server-settings-border);
  background: rgba(255, 255, 255, 0.018);
  justify-content: flex-end;
  gap: 12px;
}

body:not(.authPage) #serverSettingsModal .serverSettingsFooter .btn {
  min-width: 120px;
  min-height: 40px;
}

@media (max-width: 980px) {
  body:not(.authPage) #serverSettingsModal .serverSettingsCard {
    width: calc(100vw - 12px);
    height: calc(100vh - 12px);
    max-height: calc(100vh - 12px);
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  body:not(.authPage) #serverSettingsModal .serverSettingsSidebar {
    max-height: 260px;
    border-right: 0;
    border-bottom: 1px solid var(--server-settings-border);
  }

  body:not(.authPage) #serverSettingsModal .serverSettingsSidebarSection--danger {
    margin-top: 0;
  }

  body:not(.authPage) #serverSettingsModal .serverSettingsMainTop {
    min-height: auto;
    padding: 22px 22px 14px;
  }

  body:not(.authPage) #serverSettingsModal .serverSettingsBody {
    padding: 8px 22px 22px;
  }

  body:not(.authPage) #serverSettingsModal .serverSettingsProfileGrid,
  body:not(.authPage) #serverSettingsModal .serverSettingsRolesGrid {
    grid-template-columns: 1fr;
  }

  body:not(.authPage) #serverSettingsModal .serverSettingsRoleCreateRow {
    grid-template-columns: 1fr auto;
  }

  body:not(.authPage) #serverSettingsModal .serverSettingsRoleCreateRow .serverSettingsRolePresetSelect,
  body:not(.authPage) #serverSettingsModal .serverSettingsRoleCreateRow .btn {
    grid-column: 1 / -1;
  }

  body:not(.authPage) #serverSettingsModal .serverSettingsDeleteBox {
    grid-template-columns: 1fr;
  }
}

body:not(.authPage) #serverDeleteConfirmModal {
  padding: 0;
  place-items: center;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
}

body:not(.authPage) #serverDeleteConfirmModal .serverDeleteConfirmCard {
  width: min(520px, calc(100vw - 28px));
  padding: 0;
  border: 1px solid rgba(229, 139, 139, 0.24);
  border-radius: 14px;
  background:
    radial-gradient(circle at 92% 0%, rgba(229, 139, 139, 0.07), transparent 34%),
    #111;
  color: rgba(246, 243, 238, 0.94);
  box-shadow:
    0 34px 120px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  overflow: hidden;
}

body:not(.authPage) #serverDeleteConfirmModal .serverDeleteConfirmTop {
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.018);
}

body:not(.authPage) #serverDeleteConfirmModal .serverDeleteConfirmTop .modalTitle {
  color: rgba(255, 236, 236, 0.98);
}

body:not(.authPage) #serverDeleteConfirmModal .serverDeleteConfirmBody {
  padding: 18px;
  display: grid;
  gap: 14px;
}

body:not(.authPage) #serverDeleteConfirmModal .serverDeleteConfirmWarning,
body:not(.authPage) #serverDeleteConfirmModal .serverDeleteConfirmNameBlock {
  border: 1px solid rgba(229, 139, 139, 0.18);
  border-radius: 12px;
  background: rgba(229, 139, 139, 0.055);
}

body:not(.authPage) #serverDeleteConfirmModal .serverDeleteConfirmWarning {
  padding: 13px 14px;
  display: grid;
  gap: 6px;
}

body:not(.authPage) #serverDeleteConfirmModal .serverDeleteConfirmWarning strong {
  color: rgba(255, 236, 236, 0.95);
  font-size: 13px;
  line-height: 1.35;
}

body:not(.authPage) #serverDeleteConfirmModal .serverDeleteConfirmWarning span {
  color: rgba(246, 218, 218, 0.68);
  font-size: 12px;
  line-height: 1.45;
}

body:not(.authPage) #serverDeleteConfirmModal .serverDeleteConfirmNameBlock {
  padding: 12px 14px;
  display: grid;
  gap: 4px;
}

body:not(.authPage) #serverDeleteConfirmModal .serverDeleteConfirmNameBlock span {
  color: rgba(232, 207, 174, 0.72);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:not(.authPage) #serverDeleteConfirmModal .serverDeleteConfirmNameBlock strong {
  min-width: 0;
  color: rgba(246, 243, 238, 0.96);
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.authPage) #serverDeleteConfirmModal .field > label {
  color: rgba(232, 207, 174, 0.78);
  font-size: 12px;
  font-weight: 800;
}

body:not(.authPage) #serverDeleteConfirmModal .input {
  min-height: 42px;
  border-color: rgba(255, 255, 255, 0.095);
  border-radius: 10px;
  background: #0d0d0d;
  color: rgba(246, 243, 238, 0.94);
}

body:not(.authPage) #serverDeleteConfirmModal .input:focus {
  outline: none;
  border-color: rgba(229, 139, 139, 0.42);
  box-shadow: 0 0 0 3px rgba(229, 139, 139, 0.1);
}

body:not(.authPage) #serverDeleteConfirmModal .hint {
  color: rgba(246, 243, 238, 0.56);
}

body:not(.authPage) #serverDeleteConfirmModal .serverDeleteConfirmFooter {
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

body:not(.authPage) #serverDeleteConfirmModal .serverDeleteConfirmFooter .btn {
  min-width: 124px;
  min-height: 40px;
}

/* ALTARA confirmation, alert, prompt, and destructive mini-menu surfaces */
body:not(.authPage) .altaraConfirmDialog {
  padding: clamp(14px, 2.4vw, 28px);
  overflow: auto;
  place-items: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(232, 207, 174, 0.045), transparent 36%),
    rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(10px);
}

body:not(.authPage) .altaraConfirmDialog .modal__backdrop {
  background: transparent;
}

body:not(.authPage) .altaraConfirmDialog__card {
  box-sizing: border-box;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(232, 207, 174, 0.16);
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 0%, rgba(232, 207, 174, 0.055), transparent 34%),
    linear-gradient(180deg, rgba(22, 21, 20, 0.99), rgba(11, 11, 11, 0.99));
  color: rgba(246, 243, 238, 0.96);
  box-shadow:
    0 34px 120px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) .appConfirmModalCard {
  width: min(480px, calc(100vw - 28px));
  overflow: hidden;
}

body:not(.authPage) #appConfirmModal.appConfirmModal--prompt:not(.appConfirmModal--whiteThemeEasterEgg) .appConfirmModalCard {
  width: min(560px, calc(100vw - 28px));
}

body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) .modalTop {
  flex: 0 0 auto;
  padding: 17px 18px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.018);
}

body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) .modalTitle {
  color: rgba(255, 250, 242, 0.98);
  font-size: 17px;
  letter-spacing: 0;
}

body:not(.authPage) #appConfirmModal.appConfirmModal--danger:not(.appConfirmModal--whiteThemeEasterEgg) .modalTitle {
  color: rgba(255, 236, 236, 0.98);
}

body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) .appConfirmModalBody {
  flex: 1 1 auto;
  overflow: auto;
  padding: 18px 18px 12px;
}

body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) .appConfirmModalMessage {
  color: rgba(238, 233, 225, 0.78);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
}

body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) .appConfirmModalInput {
  margin-top: 16px;
  gap: 9px;
}

body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) .appConfirmModalInput .label {
  color: rgba(232, 207, 174, 0.78);
  font-size: 12px;
  font-weight: 800;
}

body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) .appConfirmModalTextarea {
  min-height: 132px;
  border-color: rgba(255, 255, 255, 0.095);
  border-radius: 12px;
  background: #0d0d0d;
  color: rgba(246, 243, 238, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) .appConfirmModalTextarea:focus {
  outline: none;
  border-color: rgba(232, 207, 174, 0.42);
  box-shadow:
    0 0 0 3px rgba(232, 207, 174, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) .appConfirmModalInputHint {
  color: rgba(211, 205, 194, 0.62);
}

body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) .appConfirmModalActions {
  flex: 0 0 auto;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.012);
  gap: 10px;
}

body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) .appConfirmModalActions .btn,
body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) #btnAppConfirmClose {
  min-height: 40px;
  border-radius: 11px;
  box-shadow: none;
}

body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) #btnAppConfirmClose,
body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) #btnAppConfirmCancel {
  border-color: rgba(255, 255, 255, 0.095);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(238, 233, 225, 0.74);
}

body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) #btnAppConfirmClose:hover,
body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) #btnAppConfirmClose:focus-visible,
body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) #btnAppConfirmCancel:hover,
body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) #btnAppConfirmCancel:focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.24);
  background: rgba(232, 207, 174, 0.09);
  color: rgba(255, 250, 242, 0.95);
}

body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) #btnAppConfirmOk.primary {
  border-color: rgba(232, 207, 174, 0.42);
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.98), rgba(197, 161, 118, 0.98));
  color: #17130f;
  box-shadow: 0 12px 32px rgba(232, 207, 174, 0.13);
}

body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) #btnAppConfirmOk.primary:hover,
body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) #btnAppConfirmOk.primary:focus-visible {
  outline: none;
  border-color: rgba(255, 232, 198, 0.58);
  background:
    linear-gradient(180deg, rgba(241, 219, 188, 1), rgba(211, 176, 132, 1));
  box-shadow:
    0 0 0 3px rgba(232, 207, 174, 0.1),
    0 14px 34px rgba(232, 207, 174, 0.16);
}

body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) #btnAppConfirmOk.danger {
  border-color: rgba(223, 82, 102, 0.5);
  background:
    linear-gradient(180deg, rgba(223, 82, 102, 0.9), rgba(151, 42, 62, 0.92)),
    #9c2f45;
  color: rgba(255, 249, 249, 0.98);
  box-shadow:
    0 14px 28px rgba(120, 24, 42, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) #btnAppConfirmOk.danger:hover,
body:not(.authPage) #appConfirmModal:not(.appConfirmModal--whiteThemeEasterEgg) #btnAppConfirmOk.danger:focus-visible {
  outline: none;
  border-color: rgba(255, 144, 160, 0.64);
  background:
    linear-gradient(180deg, rgba(239, 97, 118, 0.94), rgba(170, 48, 70, 0.95)),
    #ab354d;
  box-shadow:
    0 0 0 3px rgba(223, 82, 102, 0.12),
    0 16px 34px rgba(120, 24, 42, 0.3);
}

body:not(.authPage) :is(.msgMenu, .userCardWidgetMenuList, .profileWidgetInlinePopover, .dmEmojiShortcodeMenu, #meStatusMenu.meStatusMenu) {
  border-color: rgba(232, 207, 174, 0.14) !important;
  background:
    linear-gradient(180deg, rgba(24, 23, 22, 0.99), rgba(12, 12, 12, 0.99)) !important;
  color: rgba(246, 243, 238, 0.94) !important;
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

body:not(.authPage) :is(.msgMenu__item, .userCardWidgetMenuItem, .dmEmojiShortcodeMenu__item, #meStatusMenu .meStatusMenu__item) {
  color: rgba(243, 239, 232, 0.86);
}

body:not(.authPage) :is(.msgMenu__item, .userCardWidgetMenuItem, .dmEmojiShortcodeMenu__item, #meStatusMenu .meStatusMenu__item):hover,
body:not(.authPage) :is(.msgMenu__item, .userCardWidgetMenuItem, .dmEmojiShortcodeMenu__item, #meStatusMenu .meStatusMenu__item):focus-visible,
body:not(.authPage) #meStatusMenu .meStatusMenu__item.is-active {
  outline: none;
  border-color: rgba(232, 207, 174, 0.18);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 250, 242, 0.96);
}

body:not(.authPage) :is(.msgMenu__item--danger, .userCardWidgetMenuItem.is-danger, .userCardWidgetItemActionBtn.is-danger) {
  color: rgba(255, 190, 198, 0.96);
}

body:not(.authPage) :is(.msgMenu__item--danger, .userCardWidgetMenuItem.is-danger, .userCardWidgetItemActionBtn.is-danger):hover,
body:not(.authPage) :is(.msgMenu__item--danger, .userCardWidgetMenuItem.is-danger, .userCardWidgetItemActionBtn.is-danger):focus-visible {
  border-color: rgba(236, 92, 117, 0.34);
  background: rgba(110, 32, 50, 0.42);
  color: #fff1f4;
}

body:not(.authPage) :is(.userCardWidgetMenuTrigger, .userCardWidgetItemActionBtn) {
  border-color: rgba(232, 207, 174, 0.12);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(243, 239, 232, 0.86);
}

body:not(.authPage) :is(.userCardWidgetMenuTrigger, .userCardWidgetItemActionBtn):hover,
body:not(.authPage) :is(.userCardWidgetMenuTrigger, .userCardWidgetItemActionBtn):focus-visible,
body:not(.authPage) .userCardWidgetMenu[open] > .userCardWidgetMenuTrigger {
  outline: none;
  border-color: rgba(232, 207, 174, 0.24);
  background: rgba(232, 207, 174, 0.09);
  color: rgba(255, 250, 242, 0.95);
}

/* ALTARA create server + invite modal polish */
body:not(.authPage) #serverCreateModal,
body:not(.authPage) #serverInviteModal {
  padding: clamp(14px, 2.2vw, 28px);
  overflow: auto;
  background:
    radial-gradient(circle at 50% 0%, rgba(232, 207, 174, 0.045), transparent 38%),
    rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(10px);
}

body:not(.authPage) #serverCreateModal .serverCreateCard,
body:not(.authPage) #serverInviteModal .serverChannelCreateCard {
  box-sizing: border-box;
  border: 1px solid rgba(232, 207, 174, 0.16) !important;
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 0%, rgba(232, 207, 174, 0.055), transparent 34%),
    linear-gradient(180deg, rgba(22, 21, 20, 0.99), rgba(11, 11, 11, 0.99)) !important;
  color: rgba(246, 243, 238, 0.96);
  box-shadow:
    0 34px 120px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  overflow: hidden;
}

body:not(.authPage) #serverCreateModal .serverCreateCard {
  width: min(540px, calc(100vw - 28px));
  max-height: calc(100vh - 32px);
}

body:not(.authPage) #serverInviteModal .serverChannelCreateCard {
  width: min(800px, calc(100vw - 28px)) !important;
  max-height: calc(100vh - 32px) !important;
}

body:not(.authPage) #serverCreateModal .serverCreateTop,
body:not(.authPage) #serverInviteModal .serverCreateTop {
  padding: 18px 20px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075) !important;
  background: rgba(255, 255, 255, 0.018) !important;
}

body:not(.authPage) #serverCreateModal .modalTitle,
body:not(.authPage) #serverInviteModal .modalTitle {
  color: rgba(255, 250, 242, 0.98) !important;
  font-size: 18px;
  letter-spacing: 0;
}

body:not(.authPage) #serverCreateModal .hint,
body:not(.authPage) #serverInviteModal .hint,
body:not(.authPage) #serverInviteModal #serverInviteSub,
body:not(.authPage) #serverInviteModal #serverInviteMeta {
  color: rgba(211, 205, 194, 0.64) !important;
}

body:not(.authPage) #serverCreateModal .serverCreateBody,
body:not(.authPage) #serverInviteModal .serverCreateBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 20px;
  gap: 16px;
  background: rgba(0, 0, 0, 0.04) !important;
}

body:not(.authPage) #serverCreateModal .field label,
body:not(.authPage) #serverInviteModal .field label {
  color: rgba(232, 207, 174, 0.78) !important;
  font-size: 12px;
  font-weight: 800;
}

body:not(.authPage) #serverCreateModal .input,
body:not(.authPage) #serverInviteModal .input,
body:not(.authPage) #serverInviteModal select.input {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.095) !important;
  border-radius: 12px;
  background: #0d0d0d !important;
  color: rgba(246, 243, 238, 0.94) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

body:not(.authPage) #serverCreateModal .input:focus,
body:not(.authPage) #serverInviteModal .input:focus,
body:not(.authPage) #serverInviteModal select.input:focus {
  outline: none;
  border-color: rgba(232, 207, 174, 0.42) !important;
  background: #0d0d0d !important;
  box-shadow:
    0 0 0 3px rgba(232, 207, 174, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

body:not(.authPage) #serverInviteModal select.input {
  appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(232, 207, 174, 0.72) 50%),
    linear-gradient(135deg, rgba(232, 207, 174, 0.72) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 18px) 52%,
    calc(100% - 13px) 52% !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}

body:not(.authPage) #serverCreateModal .serverCreateIconRow {
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid rgba(232, 207, 174, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}

body:not(.authPage) #serverCreateModal .serverCreateIconPreview {
  width: 88px;
  height: 88px;
  border: 1px dashed rgba(232, 207, 174, 0.34);
  background:
    radial-gradient(circle at 50% 28%, rgba(232, 207, 174, 0.09), transparent 58%),
    rgba(13, 13, 13, 0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 28px rgba(0, 0, 0, 0.3);
}

body:not(.authPage) #serverCreateModal .serverCreateIconPreview:hover,
body:not(.authPage) #serverCreateModal .serverCreateIconPreview:focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.52);
  box-shadow:
    0 0 0 3px rgba(232, 207, 174, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body:not(.authPage) #serverCreateModal .serverCreateIconPlus {
  border-color: rgba(232, 207, 174, 0.42);
  background: linear-gradient(180deg, rgba(232, 207, 174, 0.98), rgba(197, 161, 118, 0.98));
  color: #17130f;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
}

body:not(.authPage) #serverCreateModal .serverCreateFooter,
body:not(.authPage) #serverInviteModal .serverCreateFooter {
  flex: 0 0 auto;
  padding: 15px 20px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.075) !important;
  background: rgba(255, 255, 255, 0.012) !important;
  justify-content: flex-end;
  gap: 10px;
}

body:not(.authPage) #serverCreateModal :is(.btn.ghost, #btnServerCreateClose),
body:not(.authPage) #serverInviteModal :is(.btn.ghost, #btnServerInviteClose) {
  border-color: rgba(255, 255, 255, 0.095) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(238, 233, 225, 0.78) !important;
  box-shadow: none;
}

body:not(.authPage) #serverCreateModal :is(.btn.ghost, #btnServerCreateClose):hover,
body:not(.authPage) #serverCreateModal :is(.btn.ghost, #btnServerCreateClose):focus-visible,
body:not(.authPage) #serverInviteModal :is(.btn.ghost, #btnServerInviteClose):hover,
body:not(.authPage) #serverInviteModal :is(.btn.ghost, #btnServerInviteClose):focus-visible {
  outline: none;
  border-color: rgba(232, 207, 174, 0.24) !important;
  background: rgba(232, 207, 174, 0.09) !important;
  color: rgba(255, 250, 242, 0.95) !important;
}

body:not(.authPage) #serverCreateModal .btn.primary,
body:not(.authPage) #serverInviteModal .btn.primary {
  border-color: rgba(232, 207, 174, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(232, 207, 174, 0.98), rgba(197, 161, 118, 0.98)) !important;
  color: #17130f !important;
  box-shadow: 0 12px 32px rgba(232, 207, 174, 0.13);
}

body:not(.authPage) #serverCreateModal .btn.primary:hover,
body:not(.authPage) #serverCreateModal .btn.primary:focus-visible,
body:not(.authPage) #serverInviteModal .btn.primary:hover,
body:not(.authPage) #serverInviteModal .btn.primary:focus-visible {
  outline: none;
  border-color: rgba(255, 232, 198, 0.58) !important;
  background:
    linear-gradient(180deg, rgba(241, 219, 188, 1), rgba(211, 176, 132, 1)) !important;
  box-shadow:
    0 0 0 3px rgba(232, 207, 174, 0.1),
    0 14px 34px rgba(232, 207, 174, 0.16);
}

body:not(.authPage) #serverInviteModal .serverInviteLinkRow {
  gap: 10px;
}

body:not(.authPage) #serverInviteModal .serverInviteSettingsCard {
  border-color: rgba(232, 207, 174, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.014)),
    rgba(13, 13, 13, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body:not(.authPage) #serverInviteModal .serverInviteSettingsCard__title,
body:not(.authPage) #serverInviteModal .serverInviteFriendName {
  color: rgba(255, 250, 242, 0.96) !important;
}

body:not(.authPage) #serverInviteModal .serverInviteSettingsCard__summary {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(232, 207, 174, 0.14);
  background: rgba(232, 207, 174, 0.07);
  color: rgba(232, 207, 174, 0.78) !important;
  font-weight: 750;
}

body:not(.authPage) #serverInviteModal .serverInviteSettingsCard__note,
body:not(.authPage) #serverInviteModal .serverInviteFriendUsername {
  color: rgba(211, 205, 194, 0.62) !important;
}

body:not(.authPage) #serverInviteModal .serverInviteFriendsList {
  max-height: min(32vh, 280px);
  padding-right: 4px;
  scrollbar-color: rgba(232, 207, 174, 0.28) rgba(255, 255, 255, 0.04);
}

body:not(.authPage) #serverInviteModal .serverInviteFriendRow {
  border-color: rgba(232, 207, 174, 0.11);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

body:not(.authPage) #serverInviteModal .serverInviteFriendRow:hover {
  border-color: rgba(232, 207, 174, 0.18);
  background: rgba(255, 255, 255, 0.045);
}

body:not(.authPage) #serverInviteModal .serverInviteFriendAvatar {
  border-color: rgba(232, 207, 174, 0.16);
  background: rgba(13, 13, 13, 0.98);
}

body:not(.authPage) #serverInviteModal .serverInviteFriendAction {
  min-width: 86px;
  min-height: 34px;
  border-radius: 10px;
  font-size: 12px;
}

body:not(.authPage) #serverInviteModal .serverInviteFriendAction.is-ok {
  border-color: rgba(139, 205, 158, 0.34) !important;
  background: rgba(49, 98, 65, 0.24) !important;
  color: rgba(218, 252, 226, 0.92) !important;
}

@media (max-width: 640px) {
  body:not(.authPage) #serverCreateModal .serverCreateIconRow,
  body:not(.authPage) #serverInviteModal .serverInviteSettingsCard__head {
    align-items: flex-start;
    flex-direction: column;
  }

  body:not(.authPage) #serverInviteModal .serverInviteLinkRow,
  body:not(.authPage) #serverInviteModal .serverInviteFriendRow {
    align-items: stretch;
    flex-direction: column;
  }

  body:not(.authPage) #serverInviteModal .serverInviteFriendAction,
  body:not(.authPage) #serverInviteModal #btnServerInviteCopy {
    width: 100%;
  }
}