@font-face {
  font-family: system-fa;
  src: local(Tahoma);
}
:root {
  color-scheme: dark;
  --bg: #10131d;
  --panel: #171b28;
  --panel2: #1c2131;
  --line: #2a2f40;
  --text: #edf0f9;
  --muted: #8992ab;
  --accent: #ad9aff;
  --mint: #7fe0c5;
  --danger: #ff8b9c;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Tahoma, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.8;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
  border: 0;
  color: inherit;
  transition:
    background 0.16s,
    transform 0.16s;
}
button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}
button:hover:not(:disabled) {
  filter: brightness(1.12);
}
a {
  color: var(--accent);
}
[hidden] {
  display: none !important;
}
h1,
h2,
h3,
p {
  margin: 0;
}
input,
select {
  width: 100%;
  min-width: 0;
  background: #111520;
  border: 1px solid #343a50;
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
}
label {
  display: block;
  margin-bottom: 16px;
  color: #c9cfdf;
}
label input,
label select {
  margin-top: 7px;
}
small {
  font-size: 11px;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 11px;
}
.grow {
  flex: 1;
  min-width: 0;
}
.primary {
  background: var(--accent);
  color: #181329;
  border-radius: 11px;
  padding: 11px 20px;
  font-weight: bold;
  box-shadow: 0 4px 0 #665494;
}
.primary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #665494;
}
.wide {
  width: 100%;
}
.secondary {
  background: #343047;
  color: #d9ceff;
  padding: 9px 16px;
  border: 1px solid #51476c;
  border-radius: 8px;
}
.quiet,
.text-button {
  background: transparent;
  color: var(--muted);
  padding: 6px 10px;
}
.text-button {
  display: block;
  margin: 18px auto;
}
.danger {
  color: var(--danger) !important;
}
.icon-button {
  background: transparent;
  border-radius: 8px;
  width: 32px;
  height: 34px;
  font-size: 21px;
  flex-shrink: 0;
}
.icon-button:hover {
  background: #292e41;
}
.error {
  color: var(--danger);
  font-size: 12px;
  min-height: 16px;
  margin: 7px 0;
}
.eyebrow {
  font:
    10px system-ui,
    sans-serif;
  letter-spacing: 2px;
  color: var(--mint);
  display: block;
  margin-bottom: 12px;
}
.dot,
.small-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 9px #7fe0c533;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: bold;
  color: var(--text);
  text-decoration: none;
}
.brand small {
  display: block;
  font-size: 9px;
  color: var(--muted);
  font-weight: normal;
}
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 40px;
  background: var(--accent);
  border-radius: 13px 13px 13px 3px;
  color: #19142c;
  font-size: 29px;
}
.topbar {
  height: 84px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 32px;
  background: #131722;
}
.server-badge {
  font-size: 11px;
  color: #a6afc6;
}
.server-badge .dot {
  margin-left: 6px;
}
.divider {
  padding: 0 12px;
  color: #41495c;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-right: auto;
}
#clock {
  font-family: system-ui;
  font-size: 16px;
  letter-spacing: 2px;
  color: #bac3d8;
}
.layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 276px;
  min-height: calc(100dvh - 84px);
  max-width: 1800px;
  margin: auto;
}
.sidebar {
  padding: 22px 16px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  background: #131722;
  min-width: 0;
}
.server-card {
  border: 1px solid #343449;
  background: linear-gradient(120deg, #26283e, #1b1f2e);
  border-radius: 12px;
  padding: 13px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 27px;
}
.server-symbol {
  font-size: 29px;
  color: var(--accent);
}
.server-card strong {
  font-size: 11px;
}
.server-card small {
  display: block;
  color: var(--muted);
  font-size: 9px;
}
.server-card .small-dot {
  margin-right: auto;
}
.section-label {
  display: flex;
  justify-content: space-between;
  color: #78859f;
  font-size: 10px;
  margin: 15px 8px 10px;
}
.section-label button {
  background: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
}
.channel {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  text-align: right;
  border-radius: 8px;
  padding: 11px 12px;
  color: #939eb8;
  font-size: 12px;
  margin-bottom: 4px;
  min-width: 0;
}
.channel span.name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel .count {
  margin-right: auto;
  font: 10px system-ui;
  color: #727c94;
}
.channel.active {
  background: #ad9aff16;
  color: #c8baff;
  border: 1px solid #ad9aff30;
}
.channel.voice-active {
  color: var(--mint);
  background: #7fe0c50d;
}
.channel-icon {
  font: 18px system-ui;
  color: #78849e;
}
.voice-members {
  padding: 0 28px 6px 0;
}
.voice-member {
  font-size: 10px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px;
}
.voice-member .avatar {
  width: 22px;
  height: 22px;
  font-size: 10px;
}
.sidebar-bottom {
  margin-top: auto;
  padding-top: 40px;
}
.connection {
  color: var(--mint);
  font-size: 10px;
  margin-bottom: 14px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.profile {
  display: flex;
  align-items: center;
  gap: 7px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: #35324c;
  color: #cbbfff;
  border: 1px solid #59516f;
  border-radius: 12px;
  font-weight: bold;
}
.profile strong {
  font-size: 11px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile small {
  display: block;
  color: var(--mint);
  font-size: 9px;
}
.profile .icon-button {
  width: 23px;
  font-size: 19px;
}
.main {
  padding: 26px 28px;
  min-width: 0;
}
.welcome {
  border: 1px solid #3b3755;
  border-radius: 16px;
  padding: 30px;
  background:
    radial-gradient(ellipse at 15% 20%, #5d427c50, transparent 65%),
    linear-gradient(100deg, #202238, #1d2231);
  display: flex;
  position: relative;
  overflow: hidden;
  min-height: 240px;
  align-items: center;
}
.welcome h1 {
  font-size: 25px;
  line-height: 1.9;
  letter-spacing: -0.8px;
}
.welcome h1 span {
  display: block;
  color: #c5b3ff;
}
.welcome p {
  font-size: 10px;
  color: #a5aac2;
  margin: 7px 0 20px;
}
.welcome .primary {
  font-size: 11px;
  padding: 9px 15px;
}
.welcome .primary span {
  margin-right: 18px;
}
.hero-art {
  position: relative;
  margin-right: auto;
  flex-shrink: 0;
  width: 190px;
  height: 175px;
  display: grid;
  place-items: center;
}
.hero-ring {
  width: 172px;
  height: 172px;
  border: 1px solid #ad9aff30;
  border-radius: 50%;
  position: absolute;
  transform: rotateX(30deg);
}
.hero-ring.second {
  width: 135px;
  height: 135px;
  transform: rotateY(40deg);
}
.sound-disc {
  width: 88px;
  height: 88px;
  border-radius: 27px;
  background: linear-gradient(145deg, #c1aeff, #7d67b9);
  box-shadow:
    12px 14px 35px #0e0a2455,
    inset 0 0 0 4px #d2bfff30;
  transform: rotate(-15deg);
  display: grid;
  place-items: center;
}
.sound-disc span {
  font: 65px Georgia;
  color: #302344;
}
.float-label {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: rotate(-6deg);
  border: 1px solid #68617f;
  background: #29263cdd;
  padding: 6px 13px;
  font-size: 10px;
  border-radius: 8px;
}
.float-label .dot {
  margin-right: 10px;
}
.spark {
  position: absolute;
  color: #c5b3ff;
  font-size: 25px;
}
.s1 {
  top: 8px;
  right: 15px;
}
.s2 {
  bottom: 32px;
  left: 10px;
  color: var(--mint);
}
.channel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 28px 0 14px;
  gap: 8px;
}
.channel-heading strong {
  font-size: 13px;
}
.channel-heading .muted {
  font-size: 10px;
}
.hash {
  font: 23px system-ui;
  color: var(--accent);
  margin-left: 8px;
}
.chat-panel {
  background: #151925;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
}
.chat-intro {
  border-bottom: 1px solid var(--line);
  padding-bottom: 17px;
  margin-bottom: 12px;
}
.intro-symbol {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font: 25px system-ui;
  border-radius: 12px;
  background: #292b40;
  color: #b8a6e8;
  margin-bottom: 9px;
}
.chat-intro h2 {
  font-size: 16px;
}
.chat-intro p {
  color: var(--muted);
  font-size: 10px;
  margin-top: 4px;
}
.messages {
  height: 280px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #343a50 transparent;
  overscroll-behavior: contain;
}
.message {
  display: flex;
  gap: 10px;
  padding: 12px 0;
}
.message .content {
  min-width: 0;
  flex: 1;
}
.message .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
}
.message .meta time {
  font-size: 9px;
  color: #6f7b94;
}
.message .badge {
  font-size: 8px;
  padding: 0 5px;
  border-radius: 4px;
  background: #2e2a40;
  color: #c0aef1;
}
.message p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
  color: #b3bed4;
  margin-top: 4px;
  unicode-bidi: plaintext;
}
.message .delete-msg {
  background: none;
  color: var(--muted);
  font-size: 15px;
  opacity: 0;
}
.message:hover .delete-msg,
.delete-msg:focus {
  opacity: 1;
}
.composer {
  display: flex;
  align-items: center;
  background: #202536;
  border: 1px solid #353c52;
  border-radius: 11px;
  margin-top: 12px;
  padding: 4px 7px;
  gap: 6px;
}
.composer input {
  background: none;
  border: 0;
  padding: 10px 6px;
  font-size: 11px;
}
.send-button {
  background: var(--accent);
  color: #29213e;
  border-radius: 8px;
  width: 31px;
  height: 31px;
  font-size: 24px;
  flex-shrink: 0;
}
.composer-note {
  display: block;
  color: #606d88;
  font-size: 9px;
  margin-top: 9px;
}
.rightbar {
  padding: 26px 18px 22px;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.widget {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 17px;
  margin-bottom: 17px;
}
.widget-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.widget-title strong {
  font-size: 12px;
}
.widget-title h3 {
  font-size: 18px;
}
.live-pill {
  font: 9px system-ui;
  color: var(--mint);
  background: #7fe0c510;
  border: 1px solid #7fe0c530;
  border-radius: 5px;
  padding: 2px 5px;
  letter-spacing: 1px;
}
.person {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0;
}
.person .avatar {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 11px;
}
.person strong {
  display: block;
  font-size: 11px;
}
.person small {
  display: block;
  font-size: 9px;
  color: var(--muted);
}
.person .dot {
  margin-right: auto;
}
.people {
  max-height: 200px;
  overflow: auto;
}
.game-widget {
  background: linear-gradient(125deg, #2d2741, #1d2231);
  border-color: #403653;
}
.game-widget .eyebrow {
  font-size: 8px;
  color: #c7b4ec;
  letter-spacing: 2px;
}
.game-widget p {
  font-size: 11px;
  margin-bottom: 15px;
}
.game-icon {
  color: #c5adf9;
  font: 25px system-ui;
  letter-spacing: 3px;
  transform: rotate(-12deg);
}
.game-actions {
  display: flex;
  gap: 6px;
  margin-top: 13px;
}
.game-actions button {
  font-size: 11px;
  flex: 1;
}
.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 12px;
  direction: ltr;
}
.board button {
  height: 47px;
  border: 1px solid #5d5274;
  border-radius: 8px;
  background: #181825;
  color: var(--mint);
  font: 23px system-ui;
}
.fx-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #262d40;
  padding: 8px 0;
  font-size: 10px;
}
.fx-row strong {
  font: 12px system-ui;
  color: #ced6eb;
  direction: ltr;
}
.fx-widget small {
  display: block;
  font-size: 9px;
  line-height: 1.9;
  color: var(--muted);
  margin-top: 12px;
}
.fx-widget a {
  font: 9px system-ui;
  color: #8493b0;
}
.side-note {
  text-align: center;
  color: #66738d;
  padding: 8px;
  font-size: 10px;
}
.side-note > p {
  margin: 7px 0 14px;
}
.side-note > small {
  font-size: 9px;
  color: #4f5b72;
}
.auth-wrap {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1400px;
  margin: auto;
  align-items: stretch;
  padding: 35px;
  gap: 30px;
}
.auth-art {
  background:
    radial-gradient(ellipse at 60% 30%, #6e558a55, transparent 60%),
    linear-gradient(145deg, #272239, #151f30);
  border: 1px solid #49415d;
  border-radius: 28px;
  padding: 55px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 630px;
}
.auth-copy {
  position: relative;
  z-index: 2;
}
.auth-copy h1 {
  font-size: 46px;
  line-height: 1.8;
  letter-spacing: -2px;
}
.auth-copy em {
  font-style: normal;
  color: #c3adff;
}
.auth-copy p {
  color: #a9abc3;
  font-size: 12px;
  margin: 18px 0;
}
.auth-art > small {
  color: #6d7793;
  position: relative;
  margin-top: 40px;
}
.big-mark {
  font-size: 210px;
  color: #bda5f4;
  position: absolute;
  top: 20px;
  left: 70px;
  transform: rotate(-15deg);
  text-shadow: 10px 15px 0 #5d497e;
}
.orbit {
  position: absolute;
  width: 310px;
  height: 310px;
  border: 1px solid #a389db33;
  border-radius: 50%;
  top: 0;
  left: 20px;
  transform: rotateX(50deg) rotate(-25deg);
}
.orbit-two {
  top: 35px;
  left: 60px;
}
.audio-bars {
  display: flex;
  gap: 5px;
  align-items: center;
  height: 45px;
  margin-top: 25px;
}
.audio-bars i {
  display: block;
  width: 4px;
  border-radius: 3px;
  background: var(--mint);
  height: 15px;
  animation: wave 1.4s ease-in-out infinite alternate;
}
.audio-bars i:nth-child(2n) {
  height: 35px;
  animation-delay: 0.2s;
}
.audio-bars i:nth-child(3n) {
  height: 25px;
  animation-delay: 0.5s;
}
@keyframes wave {
  to {
    height: 8px;
    opacity: 0.4;
  }
}
.auth-card {
  align-self: center;
  max-width: 365px;
  width: 100%;
  margin: auto;
  padding: 25px 12px;
}
.auth-card .brand {
  justify-content: space-between;
  margin-bottom: 45px;
}
.auth-card .pill {
  font-size: 10px;
  color: var(--mint);
  border: 1px solid #7fe0c533;
  border-radius: 30px;
  padding: 5px 12px;
  display: inline-block;
  margin-bottom: 15px;
}
.auth-card h2 {
  font-size: 27px;
}
.auth-card > p {
  margin: 8px 0 25px;
  font-size: 12px;
}
.auth-card form {
  margin-top: 20px;
}
.auth-foot {
  border-top: 1px solid var(--line);
  color: #62718c;
  text-align: center;
  font-size: 10px;
  margin-top: 30px;
  padding-top: 20px;
}
dialog {
  background: #191e2d;
  color: var(--text);
  border: 1px solid #4b4664;
  border-radius: 17px;
  width: min(780px, calc(100% - 28px));
  max-height: 85dvh;
  padding: 24px;
  overscroll-behavior: contain;
}
dialog::backdrop {
  background: #060911bb;
  backdrop-filter: blur(5px);
}
.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.dialog-head h2 {
  font-size: 20px;
}
.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 25px;
  overflow: auto;
  white-space: nowrap;
}
.tabs button {
  background: #23293b;
  border-radius: 8px;
  padding: 8px 14px;
}
.tabs button.active {
  background: var(--accent);
  color: #211a32;
}
.admin-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.admin-row small {
  color: var(--muted);
  display: block;
}
.admin-row button {
  background: #2b3146;
  padding: 5px 11px;
  border-radius: 7px;
  font-size: 11px;
}
.admin-row select {
  max-width: 150px;
  padding: 5px;
  font-size: 11px;
}
.permission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}
.permission-grid label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.permission-grid input {
  width: auto;
}
.toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  background: #33304b;
  border: 1px solid #726490;
  padding: 12px 23px;
  max-width: calc(100% - 30px);
  border-radius: 12px;
  box-shadow: 0 8px 35px #0005;
  font-size: 12px;
}
.mobile-nav {
  display: none;
}
#audio-container {
  display: none;
}
@media (min-width: 1500px) {
  .welcome {
    padding: 35px 40px;
  }
  .welcome h1 {
    font-size: 30px;
  }
  .hero-art {
    width: 250px;
  }
  .messages {
    height: 360px;
  }
}
@media (max-width: 1180px) {
  .layout {
    grid-template-columns: 218px minmax(0, 1fr) 235px;
  }
  .main {
    padding: 22px 18px;
  }
  .rightbar {
    padding: 22px 12px;
  }
  .welcome {
    padding: 24px 20px;
  }
  .welcome h1 {
    font-size: 22px;
  }
  .hero-art {
    width: 105px;
    transform: scale(0.75);
    transform-origin: center;
  }
  .welcome p {
    max-width: 200px;
  }
  .sidebar {
    padding: 20px 10px;
  }
  .channel-heading .muted {
    display: none;
  }
  .widget {
    padding: 14px;
  }
}
@media (max-width: 950px) and (min-width: 701px) {
  .layout {
    grid-template-columns: 200px minmax(0, 1fr);
  }
  .rightbar {
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    border: 0;
    padding-top: 0;
  }
  .sidebar {
    grid-row: 1/3;
  }
  .side-note {
    display: none;
  }
  .live-widget {
    grid-column: 1/3;
  }
  .people {
    display: flex;
    gap: 15px;
  }
  .game-widget {
    margin: 0;
  }
  .welcome h1 {
    font-size: 24px;
  }
}
@media (max-width: 700px) {
  body {
    font-size: 12px;
  }
  .topbar {
    height: 70px;
    padding: 0 15px;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 4;
  }
  .topbar .brand {
    font-size: 20px;
  }
  .brand-mark {
    width: 31px;
    height: 34px;
    font-size: 25px;
  }
  .brand small {
    font-size: 8px;
  }
  .server-badge {
    display: none;
  }
  .top-actions {
    gap: 4px;
  }
  #clock {
    font-size: 13px;
    letter-spacing: 1px;
  }
  .top-actions .quiet {
    font-size: 10px;
  }
  .layout {
    display: block;
    min-height: calc(100dvh - 140px);
  }
  .sidebar,
  .rightbar {
    display: none;
  }
  .main {
    padding: 15px 12px 85px;
  }
  .welcome {
    min-height: 205px;
    padding: 22px 18px;
  }
  .welcome h1 {
    font-size: 21px;
  }
  .welcome p {
    font-size: 10px;
    max-width: 220px;
  }
  .welcome .eyebrow {
    font-size: 7px;
    letter-spacing: 1.5px;
  }
  .hero-art {
    position: absolute;
    left: -35px;
    top: 16px;
    opacity: 0.45;
    transform: scale(0.65);
    pointer-events: none;
  }
  .welcome > div:first-child {
    z-index: 1;
  }
  .channel-heading {
    margin-top: 21px;
  }
  .channel-heading strong {
    font-size: 12px;
  }
  .channel-heading button {
    font-size: 10px;
  }
  .chat-panel {
    padding: 15px;
  }
  .messages {
    height: 300px;
    max-height: 45dvh;
  }
  .chat-intro h2 {
    font-size: 15px;
  }
  .mobile-nav {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 65px;
    padding-bottom: env(safe-area-inset-bottom);
    background: #171b29f5;
    border-top: 1px solid #35394f;
    z-index: 5;
    backdrop-filter: blur(12px);
  }
  .mobile-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background: transparent;
    color: #7c8aa7;
    font-size: 21px;
    padding: 2px 22px;
  }
  .mobile-nav span {
    font-size: 9px;
  }
  .mobile-nav .active {
    color: var(--accent);
  }
  body[data-view="channels"] .sidebar {
    display: flex;
    border: 0;
    min-height: calc(100dvh - 135px);
    padding: 20px 18px 85px;
  }
  body[data-view="channels"] .main,
  body[data-view="people"] .main {
    display: none;
  }
  body[data-view="people"] .rightbar {
    display: block;
    padding: 20px 18px 80px;
    border: 0;
  }
  .sidebar-bottom {
    position: sticky;
    bottom: 70px;
    background: #131722;
    padding-top: 20px;
  }
  .profile .icon-button {
    width: 34px;
  }
  .person strong {
    font-size: 13px;
  }
  .people {
    max-height: 260px;
  }
  .widget {
    padding: 20px;
  }
  .board {
    max-width: 270px;
    margin: 12px auto;
  }
  .board button {
    height: 65px;
  }
  .auth-wrap {
    display: block;
    padding: 20px;
    min-height: 100dvh;
  }
  .auth-art {
    display: none;
  }
  .auth-card {
    max-width: 400px;
    padding: 20px 6px;
  }
  .auth-card .brand {
    margin-bottom: 35px;
  }
  .auth-card h2 {
    font-size: 25px;
  }
  .toast {
    bottom: 80px;
    min-width: 220px;
    text-align: center;
  }
  dialog {
    padding: 18px;
  }
  .message .delete-msg {
    opacity: 0.7;
  }
  .composer input {
    font-size: 12px;
  }
  .permission-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
/* 1.1: native page scrolling, accessible controls and media layout. */
html {
  overflow-x: clip;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
body {
  min-height: 100dvh;
  overflow-x: clip;
  overflow-y: visible;
  touch-action: auto;
}
.messages {
  overscroll-behavior-y: auto;
  touch-action: pan-y;
  overflow-x: hidden;
}
dialog {
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  max-height: calc(100dvh - 40px);
}
.avatar {
  overflow: hidden;
}
.avatar img,
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.brand-mark {
  overflow: hidden;
}
.brand-mark img {
  object-fit: contain;
}
.send-button {
  width: auto;
  min-width: 82px;
  min-height: 42px;
  height: 42px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 9px;
}
.send-button span {
  font-size: 17px;
  transform: rotate(180deg);
  display: inline-block;
}
.composer {
  min-height: 54px;
  align-items: center;
}
.composer input {
  min-height: 44px;
  font-size: 12px;
}
.person[role="button"],
.voice-member[role="button"] {
  cursor: pointer;
  border-radius: 8px;
  outline-offset: 3px;
}
.person[role="button"]:hover,
.voice-member[role="button"]:hover {
  background: #ffffff08;
}
.person[role="button"]:focus-visible,
.voice-member[role="button"]:focus-visible {
  outline: 2px solid var(--mint);
}
.speaking > .avatar {
  border-color: var(--mint);
  box-shadow: 0 0 0 2px #7fe0c540;
}
.member-more {
  margin-right: auto;
  font-size: 18px;
  color: var(--muted);
  padding: 0 5px;
}
.profile-large {
  text-align: center;
  padding: 12px 0;
}
.profile-large .avatar {
  width: 100px;
  height: 100px;
  font-size: 37px;
  border-radius: 24px;
  margin-bottom: 12px;
}
.profile-bio {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-align: center;
  margin: 8px 0 16px;
  color: #bec8df;
}
.volume-label {
  margin-top: 25px;
}
.volume-label input {
  display: block;
  padding: 0;
  accent-color: var(--accent);
  touch-action: pan-x;
  direction: ltr;
  min-height: 44px;
}
.volume-label output {
  display: block;
  text-align: center;
  font: 20px system-ui;
  color: var(--mint);
}
.image-editor {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.image-editor input {
  font-size: 11px;
  padding: 10px;
}
.image-editor button {
  background: #2b3146;
  border-radius: 8px;
  padding: 8px 14px;
}
.image-preview {
  width: 68px;
  height: 68px;
  object-fit: contain;
  border-radius: 12px;
  float: left;
  border: 1px solid var(--line);
  margin: 0 8px 12px;
}
.site-form {
  padding-bottom: 20px;
}
.site-form button {
  min-height: 42px;
}
.screen-stage {
  border: 1px solid #5f517d;
  background: #10131c;
  border-radius: 14px;
  margin-top: 20px;
  overflow: hidden;
}
.screen-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 15px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.screen-heading strong {
  font-size: 12px;
}
.screen-heading button {
  font-size: 11px;
  min-height: 40px;
}
.screen-player {
  position: relative;
  background: #05070c;
  aspect-ratio: 16/9;
  min-width: 0;
  display: grid;
  place-items: center;
}
.screen-player video {
  width: 100%;
  height: 100%;
  max-height: 65dvh;
  object-fit: contain;
  display: block;
}
.screen-player p {
  position: absolute;
  pointer-events: none;
  font-size: 11px;
  color: var(--muted);
}
.screen-choice {
  width: 100%;
  text-align: right;
  padding: 12px 10px;
  border-radius: 8px;
  background: #25283b;
  margin-bottom: 8px;
  font-size: 11px;
  overflow-wrap: anywhere;
}
.screen-choice.active {
  border: 1px solid var(--mint);
  color: var(--mint);
}
.sharing-widget .secondary {
  margin-top: 16px;
  min-height: 44px;
}
#share-hint {
  margin-top: 12px;
}
@media (max-width: 700px) {
  .topbar {
    position: relative;
  }
  .main {
    padding-bottom: 90px;
  }
  .sidebar-bottom {
    position: relative;
    bottom: auto;
  }
  .messages {
    max-height: none;
    height: 300px;
    overscroll-behavior-y: auto;
  }
  .composer input {
    font-size: 16px;
  }
  .send-button {
    min-width: 72px;
    padding: 0 10px;
  }
  .person {
    min-height: 48px;
  }
  .voice-member {
    min-height: 40px;
    font-size: 12px;
  }
  .voice-member .avatar {
    width: 28px;
    height: 28px;
  }
  .screen-heading {
    padding: 9px 12px;
  }
  .screen-heading button {
    padding: 5px;
  }
  .screen-player video {
    max-height: 50dvh;
  }
  dialog {
    width: calc(100% - 20px);
    max-height: calc(100dvh - 24px);
    padding: 18px;
  }
  .image-editor input {
    font-size: 12px;
  }
}
/* 1.2: explicit RTL spacing and consistent vector controls. */
.icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  flex: 0 0 20px;
  vertical-align: middle;
  pointer-events: none;
}
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 40px;
  line-height: 1;
  flex-shrink: 0;
}
.profile {
  gap: 7px;
  flex-wrap: wrap;
}
.profile > .grow {
  flex-basis: 65px;
}
.profile .icon-button {
  width: 36px;
  min-width: 36px;
  height: 40px;
}
.profile .icon-button.danger {
  background: #ff8b9c0c;
}
.channel {
  min-height: 44px;
}
.channel .icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex-basis: 18px;
}
.channel .name {
  flex: 1;
}
.channel:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.drop-target {
  outline: 2px dashed var(--mint);
  background: #7fe0c51a !important;
}
.voice-member[draggable="true"] {
  cursor: grab;
}
.voice-member[draggable="true"]:active {
  cursor: grabbing;
}
.composer {
  gap: 7px;
  padding: 6px;
  flex-wrap: nowrap;
}
.composer #attach-file {
  min-width: 40px;
  min-height: 44px;
  background: #30364b;
  color: var(--accent);
  border-radius: 9px;
}
.composer .send-button {
  min-height: 44px;
  min-width: 84px;
  gap: 8px;
  box-shadow: none;
}
.send-button span {
  transform: none;
  font-size: 12px;
}
.send-button .icon {
  width: 18px;
  flex-basis: 18px;
  transform: scaleX(-1);
}
.message-author {
  background: none;
  color: inherit;
  font-weight: bold;
  padding: 0;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message .meta {
  min-height: 32px;
  gap: 7px;
  line-height: 1.6;
}
.message-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: var(--muted);
  min-width: 36px;
  min-height: 36px;
  margin-right: auto;
  border-radius: 8px;
}
.message-more:hover {
  background: #ffffff0a;
}
.edited {
  font-size: 9px;
  color: var(--muted);
}
.reply-reference {
  display: block;
  text-align: right;
  border-right: 3px solid var(--accent);
  background: #ad9aff0b;
  padding: 8px 11px;
  border-radius: 6px;
  width: 100%;
  color: #aebbd5;
  overflow-wrap: anywhere;
  font-size: 11px;
  margin: 5px 0;
}
.reply-preview {
  background: #29243b;
  border-right: 3px solid var(--accent);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}
.reply-preview span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-self: center;
  font-size: 11px;
}
.chat-image {
  display: block;
  max-width: min(100%, 420px);
  max-height: 320px;
  border-radius: 12px;
  object-fit: contain;
  margin-top: 10px;
  background: #0b0f17;
}
.chat-media {
  display: block;
  max-width: 100%;
  width: 100%;
  max-height: 340px;
  margin-top: 10px;
  border-radius: 10px;
  background: #0b0f17;
}
.file-download {
  display: block;
  overflow-wrap: anywhere;
  font-size: 10px;
  margin-top: 7px;
}
.upload-progress {
  background: #23283b;
  border: 1px solid #4d4568;
  border-radius: 10px;
  padding: 12px;
  margin-top: 12px;
}
.upload-progress strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 11px;
}
.upload-progress progress {
  width: 100%;
  height: 9px;
  accent-color: var(--mint);
  margin: 9px 0;
  direction: ltr;
}
.upload-progress > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.upload-progress span {
  font-size: 10px;
  color: var(--muted);
}
.message-menu {
  max-width: 360px;
}
.message-menu #message-actions {
  display: grid;
  gap: 9px;
}
.message-menu #message-actions button {
  background: #2b3148;
  padding: 12px;
  border-radius: 9px;
  text-align: right;
  min-height: 44px;
}
.acl-section {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 12px 0;
  padding: 12px;
}
.acl-section summary {
  cursor: pointer;
  font-weight: bold;
  margin-bottom: 12px;
}
.acl-section > label {
  display: flex;
  gap: 8px;
  align-items: center;
}
.acl-section input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
  flex: 0 0 18px;
}
.acl-section .permission-grid label {
  font-size: 11px;
  min-height: 34px;
}
.moderator-controls {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 18px;
  display: grid;
  gap: 10px;
}
.moderator-controls button {
  padding: 10px 12px;
  background: #303349;
  border-radius: 8px;
  min-height: 44px;
}
.moderator-controls select {
  min-height: 44px;
}
textarea {
  width: 100%;
  min-height: 130px;
  resize: vertical;
  background: #101520;
  color: var(--text);
  border: 1px solid #394058;
  border-radius: 10px;
  padding: 12px;
  font: inherit;
  line-height: 1.9;
  margin-top: 8px;
}
@media (max-width: 700px) {
  .profile {
    flex-wrap: nowrap;
  }
  .profile .icon-button {
    min-width: 38px;
    width: 38px;
    height: 44px;
  }
  .composer input {
    font-size: 16px;
    padding: 9px 3px;
  }
  .composer .send-button {
    min-width: 68px;
    padding: 0 8px;
  }
  .composer #attach-file {
    min-width: 36px;
  }
  .composer .send-button span {
    font-size: 11px;
  }
  .message .meta {
    gap: 5px;
  }
  .message-author {
    max-width: 115px;
  }
  .message .badge {
    font-size: 8px;
  }
  .message .avatar {
    width: 29px;
    height: 29px;
    border-radius: 10px;
  }
  .message {
    gap: 8px;
  }
  .message .meta time {
    font-size: 8px;
  }
  .message-more {
    min-width: 32px;
  }
  .chat-image {
    max-width: 100%;
  }
  .permission-grid {
    grid-template-columns: 1fr 1fr;
  }
  .screen-heading {
    gap: 5px;
  }
  .screen-heading > div {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
  }
}
@media (max-width: 360px) {
  .profile > .grow {
    flex-basis: 40px;
  }
  .profile .icon-button {
    min-width: 34px;
    width: 34px;
  }
  .composer .send-button .icon {
    display: none;
  }
  .composer .send-button {
    min-width: 48px;
  }
  .message .badge {
    display: none;
  }
  .top-actions .quiet {
    padding: 6px;
  }
  .brand small {
    font-size: 7px;
  }
}
.profile {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.profile > .avatar {
  grid-column: 1;
  justify-self: start;
}
.profile > .grow {
  grid-column: 2/4;
}
.profile .icon-button {
  width: 100%;
  background: #252b3d;
  border: 1px solid #343a50;
  border-radius: 9px;
}
.mobile-voice-bar {
  display: none;
}
@media (max-width: 700px) {
  .mobile-voice-bar:not([hidden]) {
    position: fixed;
    bottom: 64px;
    right: 0;
    left: 0;
    z-index: 6;
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 7px 10px;
    background: #1e2636f5;
    border-top: 1px solid #3f4a62;
    backdrop-filter: blur(12px);
  }
  .mobile-voice-bar > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mint);
    font-size: 10px;
  }
  .mobile-voice-bar .icon-button {
    width: 36px;
    min-width: 36px;
    min-height: 40px;
    background: #2b3448;
    border-radius: 8px;
  }
  .mobile-voice-bar .icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }
  body[data-in-voice="true"] .main,
  body[data-in-voice="true"][data-view="channels"] .sidebar,
  body[data-in-voice="true"][data-view="people"] .rightbar {
    padding-bottom: 145px;
  }
  .profile {
    display: flex;
  }
  .profile > .grow {
    flex: 1;
  }
  .profile .icon-button {
    width: 38px;
  }
  body[data-in-voice="true"] .sidebar-bottom .profile .icon-button {
    display: none;
  }
}
.server-symbol img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.server-symbol {
  flex-shrink: 0;
}
/* 1.3: readable, direction-aware message bubbles and consistent media surfaces. */
.messages {
  padding: 8px 3px 14px;
}
.message {
  direction: rtl;
  align-items: flex-start;
  padding: 9px 0;
  gap: 9px;
}
.message.other {
  flex-direction: row-reverse;
}
.message .content {
  flex: 0 1 auto;
  min-width: 0;
  width: fit-content;
  max-width: min(85%, 620px);
  padding: 12px 14px;
  border: 1px solid #30394d;
  border-radius: 16px 5px 16px 16px;
  background: #202635;
  box-shadow: 0 3px 14px #05081125;
}
.message.own .content {
  background: linear-gradient(130deg, #302b47, #27243a);
  border-color: #504367;
}
.message.other .content {
  border-radius: 5px 16px 16px 16px;
  background: #1b2635;
}
.message .meta {
  direction: rtl;
  gap: 8px;
  min-height: 30px;
  min-width: 200px;
  flex-wrap: wrap;
  border-bottom: 1px solid #ffffff09;
  padding-bottom: 6px;
  margin-bottom: 6px;
}
.message-author {
  font-size: 12px;
  max-width: 200px;
}
.message .meta time {
  font-size: 10px;
  color: #a0abc0;
}
.message .badge {
  font-size: 9px;
}
.message .message-text {
  font-size: 13px;
  line-height: 2;
  text-align: start;
  unicode-bidi: plaintext;
  margin: 4px 0 0;
  color: #e1e6f0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.message-more {
  margin-right: auto;
  min-height: 30px;
  min-width: 30px;
}
.message > .avatar {
  margin-top: 3px;
}
.attachment-card {
  width: 360px;
  max-width: 100%;
  border: 1px solid #ffffff10;
  border-radius: 12px;
  background: #0e152080;
  overflow: hidden;
  margin-top: 10px;
}
.attachment-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: #ffffff04;
}
.attachment-header strong {
  font-size: 11px;
}
.attachment-header small {
  font-size: 10px;
  color: #a7b4cb;
}
.attachment-name {
  display: block;
  font:
    10px Tahoma,
    sans-serif;
  line-height: 1.8;
  color: #a4b0c8;
  padding: 8px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start;
}
.image-open {
  display: block;
  width: 100%;
  padding: 0;
  background: #080e17;
  cursor: zoom-in;
}
.image-open .chat-image {
  margin: 0;
  border-radius: 0;
  max-width: 100%;
  width: 100%;
  max-height: 330px;
  object-fit: contain;
}
.media-player {
  width: 100%;
  background: #0a101b;
}
.media-player video {
  display: block;
  width: 100%;
  max-height: 340px;
  object-fit: contain;
  cursor: pointer;
}
.media-player audio {
  display: none;
}
.media-toolbar {
  padding: 11px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  direction: ltr;
  min-height: 58px;
}
.media-play,
.media-fullscreen {
  display: inline-grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  background: #a99af5;
  color: #1a1731;
  border-radius: 10px;
}
.media-fullscreen {
  background: #26324a;
  color: #d4dcee;
}
.media-play .icon {
  width: 18px;
  height: 18px;
}
.media-seek {
  padding: 0;
  min-width: 0;
  flex: 1;
  accent-color: var(--accent);
  height: 24px;
  border: 0;
  background: none;
  touch-action: pan-x;
  direction: ltr;
}
.media-time {
  font:
    10px Tahoma,
    sans-serif;
  color: #b5c3dd;
  direction: ltr;
  white-space: nowrap;
}
.audio-player .media-toolbar {
  padding: 16px 12px;
}
.audio-player .media-play {
  border-radius: 50%;
  width: 44px;
  height: 44px;
  flex-basis: 44px;
}
.media-player:fullscreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.media-player:fullscreen video {
  max-height: calc(100dvh - 65px);
  flex: 1;
  min-height: 0;
}
.media-player:fullscreen .media-toolbar {
  flex-shrink: 0;
}
.media-viewer {
  width: min(1200px, calc(100% - 24px));
  max-width: none;
  height: calc(100dvh - 30px);
  max-height: none;
  padding: 0;
  background: #0a0e17;
  border: 1px solid #4b5570;
  overflow: hidden;
}
.media-viewer header {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 16px;
  border-bottom: 1px solid #30394c;
  min-height: 70px;
}
.media-viewer header > div {
  flex: 1;
  min-width: 0;
}
.media-viewer header strong {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
}
.media-viewer header small {
  display: block;
  color: #a8b4ce;
  font-size: 11px;
}
.viewer-image-wrap {
  height: calc(100% - 70px);
  display: grid;
  place-items: center;
  padding: 12px;
  overflow: auto;
}
.viewer-image-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.media-viewer::backdrop {
  background: #03060af0;
  backdrop-filter: blur(8px);
}
.image-editor {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px 18px;
  padding: 22px 0;
}
.image-editor .image-preview {
  float: none;
  width: 88px;
  height: 88px;
  grid-row: 1/3;
  margin: 0;
  border-radius: 20px;
  background: #0b1421;
}
.image-editor label {
  margin: 0;
  font-weight: bold;
}
.image-editor input {
  margin-top: 10px;
  min-height: 44px;
  font-weight: normal;
}
.image-status {
  grid-column: 2;
  font-size: 11px;
  color: var(--mint);
  min-height: 22px;
}
.image-actions {
  grid-column: 1/-1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.image-actions button {
  min-height: 43px;
  padding: 9px 17px;
  border-radius: 9px;
}
.image-actions .primary {
  background: var(--accent);
  color: #211a36;
  box-shadow: none;
}
.image-actions .primary:disabled {
  opacity: 0.4;
}
.color-control {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #4d4767;
  background: #111827;
  border-radius: 12px;
  margin-top: 8px;
}
.color-control input[type="color"] {
  width: 62px;
  min-width: 62px;
  height: 46px;
  padding: 4px;
  margin: 0;
  border: 1px solid #69718a;
  border-radius: 9px;
  cursor: pointer;
}
.color-control input[type="text"] {
  font:
    14px ui-monospace,
    monospace;
  max-width: 160px;
  margin: 0;
  min-height: 44px;
}
.color-swatch {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 2px solid #ffffff50;
  border-radius: 12px;
}
.color-field > small {
  display: block;
  margin-top: 7px;
}
.permission-title {
  font-size: 14px;
  margin: 18px 0 12px;
}
.permission-grid {
  padding: 14px;
  background: #121b2b;
  border: 1px solid #34405b;
  border-radius: 12px;
  gap: 9px 16px;
}
.permission-grid label {
  min-height: 36px;
  line-height: 1.7;
  align-items: flex-start;
  font-size: 12px;
}
.permission-grid input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  accent-color: var(--accent);
}
.screen-stage {
  padding: 0;
  background: #0b121d;
}
.screen-stage-title {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--mint);
  border-bottom: 1px solid #303a51;
}
.screen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 12px;
  padding: 12px;
}
.screen-tile {
  min-width: 0;
  background: #070c14;
  border: 1px solid #34435d;
  border-radius: 12px;
  overflow: hidden;
}
.screen-tile .screen-heading {
  padding: 8px 10px;
  gap: 5px;
}
.screen-tile .screen-heading strong {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 45%;
}
.screen-tile .screen-heading button {
  font-size: 10px;
  min-height: 34px;
  padding: 5px;
}
.screen-wait {
  position: absolute;
  color: #90a1bc;
  font-size: 11px;
  pointer-events: none;
}
.screen-tile .screen-player:fullscreen video {
  max-height: 100dvh;
  object-fit: contain;
}
.profile {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.profile > .grow {
  grid-column: 2/5;
}
.profile .sharing {
  border-color: var(--mint);
  color: var(--mint);
  background: #23433f;
}
.profile .icon-button[aria-pressed="true"] {
  color: #ffadb9;
  border-color: #8c5c6a;
  background: #412535;
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 700px) {
  .message .content {
    max-width: calc(100% - 38px);
    padding: 10px 11px;
  }
  .message .meta {
    min-width: 165px;
    gap: 6px;
  }
  .message-author {
    max-width: 125px;
    font-size: 12px;
  }
  .message .meta time {
    font-size: 9px;
  }
  .message .message-text {
    font-size: 13px;
  }
  .attachment-card {
    width: 270px;
  }
  .message .badge {
    display: none;
  }
  .media-toolbar {
    gap: 6px;
    padding: 10px 8px;
  }
  .media-time {
    font-size: 9px;
  }
  .media-play,
  .media-fullscreen {
    width: 32px;
    height: 34px;
    flex-basis: 32px;
  }
  .media-viewer {
    width: calc(100% - 12px);
    height: calc(100dvh - 12px);
    padding: 0;
  }
  .media-viewer header {
    padding: 10px;
    gap: 8px;
  }
  .media-viewer header .secondary {
    padding: 8px;
    font-size: 10px;
  }
  .image-editor {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 10px;
  }
  .image-editor .image-preview {
    width: 66px;
    height: 66px;
  }
  .image-status {
    grid-column: 1/-1;
  }
  .image-actions .primary {
    flex: 1;
  }
  .color-control {
    gap: 8px;
  }
  .color-control input[type="text"] {
    width: 110px;
    font-size: 13px;
  }
  .permission-grid {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .screen-grid {
    grid-template-columns: 1fr;
    padding: 8px;
  }
  .profile {
    display: flex;
    flex-wrap: wrap;
  }
  .profile > .grow {
    flex: 1;
  }
  .profile .icon-button {
    flex: 1;
    min-width: 40px;
  }
  body[data-in-voice="true"] .sidebar-bottom .profile .icon-button {
    display: none;
  }
}
.image-editor > label {
  grid-column: 2;
}
.image-editor .image-preview {
  grid-column: 1;
}
.image-editor:has(.image-preview[hidden])::before {
  content: "عکس";
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  background: #121c2c;
  border: 1px dashed #53617d;
  border-radius: 20px;
  color: #8a9cbb;
  font-size: 12px;
  grid-column: 1;
  grid-row: 1/3;
}
.permission-group-heading {
  grid-column: 1/-1;
  margin: 10px 0 3px;
  color: var(--mint);
  font-size: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #34425b;
}
@media (max-width: 700px) {
  .image-editor:has(.image-preview[hidden])::before {
    width: 66px;
    height: 66px;
  }
  .image-editor > label {
    grid-column: 2;
  }
}

/* Vonava 1.4 — deep ocean, luminous mint, restrained motion. */
:root {
  --bg: #080f18;
  --panel: #101c28;
  --panel2: #152634;
  --line: #243748;
  --text: #e9f4f6;
  --muted: #8da9b5;
  --accent: #3ce0be;
  --mint: #51cbd1;
  --danger: #ff8592;
}
body {
  background:
    radial-gradient(ellipse at 60% 0, #10313b66, transparent 55%), var(--bg);
  font-family: Tahoma, system-ui, sans-serif;
}
button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}
button,
a {
  transition:
    background 0.18s,
    color 0.18s,
    border-color 0.18s,
    box-shadow 0.18s,
    transform 0.18s;
}
button:not(:disabled):hover {
  transform: translateY(-1px);
}
button:active:not(:disabled) {
  transform: translateY(1px);
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.topbar {
  background: #09131ee8;
  border-color: #233847;
  backdrop-filter: blur(18px);
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.top-actions time {
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}
.brand-mark,
.server-symbol {
  background: linear-gradient(145deg, #4de8c8, #249da8);
  color: #05282c;
  box-shadow: 0 5px 28px #17c7a61a;
  border-radius: 14px;
}
.brand-mark .icon,
.server-symbol .icon {
  width: 27px;
  height: 27px;
}
.sidebar,
.rightbar {
  background: linear-gradient(180deg, #0d1824ee, #0a141e);
  border-color: #223444;
}
.server-card {
  background: linear-gradient(125deg, #18343c, #12232f);
  border: 1px solid #2d555c;
  border-radius: 18px;
}
.channel {
  border-radius: 12px;
  margin-block: 4px;
}
.channel:hover {
  background: #18313d;
}
.channel.active,
.channel.voice-active {
  color: #b0ffee;
  background: linear-gradient(90deg, #123f3d66, #194447);
  border: 1px solid #2c746f;
  box-shadow: inset -3px 0 #40d7b6;
}
.channel .count {
  color: #6ecabf;
}
.section-label {
  color: #8eabb5;
  letter-spacing: 0;
}
.channel .icon {
  color: #68b5b9;
}
.primary,
.send-button {
  background: linear-gradient(145deg, #70efd0, #34cdb6);
  color: #052b2c;
  border: 1px solid #88f6d8;
  box-shadow:
    0 4px 0 #167b77,
    0 8px 20px #13bba320;
}
.primary:hover,
.send-button:hover {
  background: #9af8e0;
  color: #052b2c;
  box-shadow:
    0 4px 0 #167b77,
    0 10px 24px #13bba338;
}
.secondary,
.action-button {
  background: #1a303d;
  border: 1px solid #365866;
  color: #d0efee;
  border-radius: 10px;
  padding: 9px 14px;
  box-shadow: none;
}
.secondary:hover,
.action-button:hover {
  background: #234c55;
  border-color: #58a69f;
  color: white;
}
.icon-button {
  background: #152935;
  border: 1px solid #2c4757;
  border-radius: 12px;
  color: #a8d8d5;
}
.icon-button:hover {
  background: #234652;
  color: #a4ffe6;
}
.welcome {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 12% 20%, #27887844, transparent 55%),
    linear-gradient(125deg, #173641, #0d242f);
  border: 1px solid #35636c;
  min-height: 265px;
  box-shadow: 0 24px 50px #0002;
  animation: surface-in 0.5s ease both;
}
.welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.14;
  background-image:
    linear-gradient(#7cffe812 1px, transparent 1px),
    linear-gradient(90deg, #7cffe812 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, black, transparent);
}
.welcome h1 {
  line-height: 1.9;
}
.welcome h1 em {
  color: #5ce8cc;
}
.welcome .eyebrow {
  color: #83eadd;
}
.sound-disc {
  background: linear-gradient(145deg, #46d8c8, #157589);
  box-shadow:
    inset 0 0 0 2px #80ffdf77,
    0 30px 70px #13d8b52a;
  color: #b1fff1;
  border-radius: 28px;
  animation: float-disc 6s ease-in-out infinite;
}
.sound-disc span {
  color: #073f48;
}
.hero-art {
  filter: drop-shadow(0 0 28px #26f1bb20);
}
.chat-panel {
  background: #0e1b27;
  border: 1px solid #263e4e;
  border-radius: 20px;
  box-shadow: 0 12px 40px #0002;
}
.chat-intro {
  border-color: #294251;
}
.message .content {
  background: #162a37;
  border-color: #284b5c;
  box-shadow: 0 6px 18px #0001;
}
.message.own .content {
  background: linear-gradient(140deg, #173d40, #16313a);
  border-color: #30615f;
}
.message.other .content {
  background: #142633;
  border-color: #294552;
}
.message .reply-reference {
  background: #20474e66;
  border-color: #4cd4bd;
}
.message-author {
  color: #d8eeee;
}
.message {
  animation: message-in 0.2s ease both;
}
.composer {
  background: #142937;
  border-color: #365461;
  border-radius: 14px;
}
.composer input {
  color: #e7f4f2;
}
.composer .send-button {
  color: #062b2e;
}
.composer #attach-file {
  background: #223e4c;
  color: #6ae6cb;
  border: 1px solid #365663;
}
.sidebar-bottom {
  border-color: #29444f;
}
.profile .avatar,
.avatar {
  background: #254753;
  color: #83f4dc;
  border-color: #36616a;
}
.connection {
  color: #65dbc6;
}
.profile .danger {
  background: #402633;
  border-color: #67414e;
  color: #ff9baa;
}
.widget {
  background: #122532;
  border: 1px solid #2c4554;
  border-radius: 18px;
}
.widget-title h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.5px;
}
.widget-title .eyebrow {
  font-size: 9px;
  color: #75b9b7;
}
.direct-widget {
  padding: 3px 0 18px;
}
.direct-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 22px;
}
.direct-row {
  display: flex;
  align-items: center;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 13px;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.direct-row:hover {
  background: #162b37;
  border-color: #294a56;
}
.direct-row.active {
  background: #19403f;
  border-color: #34746b;
}
.direct-person {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  padding: 12px 9px;
  min-width: 0;
  flex: 1;
  text-align: start;
  color: var(--text);
}
.direct-person .grow {
  min-width: 0;
}
.direct-person strong {
  font-size: 12px;
  display: block;
}
.direct-person small {
  display: block;
  max-width: 135px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 10px;
}
.direct-remove {
  padding: 4px;
  background: transparent;
  color: #6d929b;
  margin: 0 3px;
}
.direct-remove .icon {
  width: 15px;
  height: 15px;
}
.unread-count {
  border-radius: 8px;
  background: #56e0c0;
  color: #073331;
  min-width: 20px;
  font-size: 10px;
  font-weight: bold;
}
.empty-direct {
  color: #769ba7;
  padding: 24px 8px;
  font-size: 11px;
  line-height: 2.2;
}
.music-shortcut {
  margin-top: 32px;
  background: linear-gradient(125deg, #17313d, #143939);
}
.music-shortcut .secondary {
  width: 100%;
}
.side-note {
  font-family: system-ui, sans-serif;
  letter-spacing: 3px;
  color: #4d8f96;
}
.side-note span {
  display: block;
  font-family: Tahoma;
  letter-spacing: 0;
  font-size: 9px;
  margin-top: 5px;
}
.donation-button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  text-decoration: none;
  font-size: 11px;
  white-space: nowrap;
  background: #283a2b;
  border: 1px solid #65683c;
  color: #ece9b0;
  border-radius: 20px;
  padding: 7px 12px;
}
.donation-button:hover {
  background: #445035;
  color: #fff;
}
.donation-button .icon {
  width: 16px;
  height: 16px;
}
.remember-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
  margin: 16px 0;
}
.remember-label input {
  width: 18px;
  min-height: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}
.auth-wrap {
  background:
    radial-gradient(ellipse at 15% 30%, #12464b66, transparent 60%), #0a1420;
}
.auth-art {
  background: linear-gradient(125deg, #12434488, #112a37);
  border-color: #2a5660;
}
.big-mark {
  background: linear-gradient(135deg, #58ebcb, #17738a);
  color: #062f38;
  box-shadow: 0 40px 100px #1cdfaf22;
  border-color: #6beed699;
}
.auth-copy em {
  color: #6cebd0;
}
.orbit {
  border-color: #4ce8c52b;
}
.pill {
  background: #1c494b;
  color: #8cf5d8;
  border-color: #376b6b;
}
dialog {
  background: #101f2c;
  color: var(--text);
  border: 1px solid #3c5e6c;
  border-radius: 22px;
  box-shadow: 0 30px 100px #0009;
  animation: surface-in 0.2s ease both;
}
dialog::backdrop {
  background: #030b16c9;
  backdrop-filter: blur(9px);
}
#settings {
  max-width: 1100px;
  width: calc(100% - 40px);
}
#settings-tabs {
  gap: 7px;
  padding-bottom: 16px;
  flex-wrap: wrap;
}
#settings-tabs button {
  border: 1px solid #2e4a59;
  background: #152c39;
  color: #91b7c2;
  border-radius: 11px;
  padding: 9px 13px;
}
#settings-tabs button.active {
  background: #1f5652;
  color: #bcffee;
  border-color: #4d9f8a;
}
#settings-content {
  padding: 10px 3px;
}
#settings-content > .action-button {
  margin: 6px 3px 12px;
}
#settings-content label {
  margin-top: 18px;
}
.admin-row {
  background: #142a37;
  border: 1px solid #2a4656;
  border-radius: 14px;
  padding: 16px;
  margin: 10px 0;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-row small {
  display: block;
  color: #86a7b5;
  max-width: 650px;
  line-height: 2;
}
.admin-row .action-button {
  font-size: 11px;
}
.admin-search {
  margin: 4px 0 16px !important;
  border-radius: 14px !important;
}
.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.stat-card {
  background: linear-gradient(130deg, #183c43, #142a39);
  border: 1px solid #32616a;
  border-radius: 16px;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
}
.stat-card strong {
  font-size: 25px;
  line-height: 1.7;
  color: #8cf5d8;
}
.stat-card small {
  font-size: 11px;
  color: #9abcc3;
}
.bot-card,
.playlist-card {
  border: 1px solid #2e5260;
  border-radius: 18px;
  padding: 22px;
  background: linear-gradient(140deg, #17313d, #12222f);
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.bot-card > select {
  flex: 1;
  min-width: 180px;
}
.bot-heading,
.playlist-card > h3 {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: center;
}
.bot-heading > .icon {
  width: 32px;
  height: 32px;
  color: #63edce;
}
.bot-heading strong {
  font-size: 17px;
}
.bot-heading span {
  margin-inline-start: auto;
  font-size: 10px;
}
.status-online {
  color: #69ebc1;
}
.bot-card label,
.bot-card .error {
  width: 100%;
}
.playlist-card .admin-row {
  width: 100%;
  margin: 0;
}
.playlist-card input {
  width: 100%;
}
.playlist-card progress {
  width: 100%;
  accent-color: #4bdfb8;
}
.music-intro {
  text-align: center;
  padding: 20px 10px;
}
.music-intro .icon {
  color: #65f2ce;
  width: 40px;
  height: 40px;
}
.people-search {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  max-height: 42dvh;
  overflow: auto;
}
.people-search button {
  text-align: start;
}
.color-input-row {
  background: #142d3b;
  border-color: #3b6170;
}
.permission-grid label {
  background: #142c3a;
  border-color: #2a4d5c;
}
.permission-group-title {
  color: #72d8cc;
  border-color: #315665;
}
.screen-tile {
  border-color: #345b66;
  background: #0d1b27;
}
.screen-heading {
  background: #18323d;
  color: #d5f8ef;
}
[hidden] {
  display: none !important;
}
@keyframes surface-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes message-in {
  from {
    opacity: 1;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes float-disc {
  0%,
  100% {
    transform: translateY(0) rotate(-9deg);
  }
  50% {
    transform: translateY(-9px) rotate(-4deg);
  }
}
@media (min-width: 1101px) {
  .main {
    padding-top: 26px;
  }
  body:not(.home-view) .main {
    padding-top: 20px;
  }
  body:not(.home-view) .chat-panel {
    min-height: calc(100dvh - 180px);
  }
  body:not(.home-view) .messages {
    height: calc(100dvh - 350px);
    max-height: none;
    min-height: 280px;
  }
}
@media (max-width: 1100px) and (min-width: 701px) {
  .rightbar {
    display: block;
  }
  .direct-widget {
    min-width: 0;
  }
  .direct-person small {
    max-width: 160px;
  }
}
@media (max-width: 700px) {
  .top-actions {
    gap: 7px;
  }
  .top-actions time {
    display: none;
  }
  .topbar {
    padding: 0 12px;
  }
  .topbar .brand small {
    display: none;
  }
  .topbar .brand {
    font-size: 15px;
  }
  .brand-mark {
    width: 32px;
    height: 32px;
  }
  .server-badge {
    display: none;
  }
  .top-actions .icon-button {
    width: 33px;
    height: 33px;
    padding: 7px;
  }
  .top-actions .quiet {
    font-size: 10px;
    padding: 5px;
  }
  .donation-button {
    font-size: 9px;
    padding: 6px 8px;
  }
  .donation-button .icon {
    display: none;
  }
  .main {
    padding: 14px 12px 90px;
  }
  .welcome {
    min-height: 240px;
    border-radius: 20px;
  }
  .welcome h1 {
    font-size: 24px;
  }
  .welcome .eyebrow {
    font-size: 8px;
  }
  .chat-panel {
    border-radius: 17px;
    padding: 12px;
  }
  .mobile-nav {
    background: #0c202ded;
    border-color: #2e4d5a;
  }
  .mobile-nav .active {
    color: #68efc9;
  }
  .mobile-voice-bar {
    background: #173945f5;
    border-color: #39727b;
  }
  .direct-person small {
    max-width: 220px;
  }
  #settings {
    width: calc(100% - 16px);
    padding: 16px;
    max-height: calc(100dvh - 18px);
  }
  #settings-tabs {
    gap: 5px;
  }
  #settings-tabs button {
    font-size: 10px;
    padding: 8px 10px;
  }
  .admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .stat-card {
    padding: 12px;
  }
  .stat-card strong {
    font-size: 20px;
  }
  .admin-row {
    padding: 13px;
  }
  .admin-row > .grow {
    flex-basis: 100%;
  }
  .bot-card,
  .playlist-card {
    padding: 14px;
  }
  .bot-card > select {
    min-width: 100%;
    width: 100%;
  }
  .bot-card > .action-button {
    flex: 1;
    font-size: 10px;
  }
  .remember-label {
    font-size: 11px;
  }
  .music-shortcut {
    margin-top: 20px;
  }
  body:not(.home-view) .messages {
    height: calc(100dvh - 360px);
    max-height: none;
    min-height: 230px;
  }
  .channel-heading {
    margin-top: 10px;
  }
  .direct-remove {
    padding: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.screen-access {
  margin-bottom: 12px;
}
#screen-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.screen-choice {
  background: #17313e;
  border: 1px solid #365967;
  color: #b9e6dd;
  border-radius: 10px;
  padding: 8px 12px;
}
.screen-choice.active {
  border-color: #56bb9b;
  background: #1d4847;
}
.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.action-button .icon {
  width: 16px;
  height: 16px;
}
.direct-view .channel-heading .muted {
  display: none;
}
.bot-card input[type="range"] {
  accent-color: #4bdfb8;
}
.bot-card output {
  display: block;
  color: #88f4d3;
  font-size: 17px;
  font-weight: bold;
}
.bot-card select {
  background: #122a36;
  color: #d3f3ed;
  border-color: #3a6270;
}
.bot-card input[type="file"]::file-selector-button,
.playlist-card input[type="file"]::file-selector-button {
  background: #275a60;
  color: #d4ffed;
  border: 0;
  border-radius: 7px;
  padding: 8px 14px;
}
#toast {
  background: #214b4e;
  border: 1px solid #498e83;
  color: #e3fff5;
}
.mobile-nav button:has([data-mobile="people"]) {
  color: var(--muted);
}
.big-mark > .icon {
  width: 90px;
  height: 90px;
}
.sound-disc .icon {
  width: 68px;
  height: 68px;
  color: #0c4c54;
}
.mobile-nav .icon {
  width: 21px;
  height: 21px;
  margin-bottom: 2px;
}
/* 1.5 workspace: one stable navigation, bounded panels and content-sized editors. */
.obsolete-decoration {
  display: none !important;
}
.topbar .brand {
  cursor: pointer;
}
.topbar .brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}
.welcome,
.auth-art,
.hero-art,
.resource-card {
  overflow: hidden;
}
.welcome .hero-art {
  overflow: visible;
}
.welcome {
  isolation: isolate;
}
.message {
  animation: none;
}
.main,
.sidebar,
.rightbar {
  min-width: 0;
  min-height: 0;
}
.layout {
  min-height: calc(100dvh - 84px);
}
@media (min-width: 701px) {
  #app {
    height: 100dvh;
    display: grid;
    grid-template-rows: 84px minmax(0, 1fr);
  }
  .layout {
    height: 100%;
    min-height: 0;
  }
  .main {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding-bottom: 22px;
  }
  .main > .welcome,
  .channel-heading,
  .screen-access,
  .screen-stage {
    flex-shrink: 0;
  }
  .main > .chat-panel {
    flex: 1;
    min-height: 300px !important;
    display: flex;
    flex-direction: column;
  }
  .messages,
  body:not(.home-view) .messages {
    flex: 1;
    height: auto !important;
    max-height: none !important;
    min-height: 120px !important;
  }
  .chat-intro,
  .composer,
  .composer-note,
  .reply-preview,
  .upload-progress {
    flex-shrink: 0;
  }
  .sidebar,
  .rightbar {
    height: 100%;
    overflow-y: auto;
  }
  .sidebar-bottom {
    margin-top: auto;
  }
  .main > .welcome {
    min-height: 220px;
  }
  .rightbar {
    padding: 22px 16px;
  }
  .direct-widget {
    padding: 0;
  }
  .side-note {
    margin-top: 30px;
  }
  .chat-panel {
    box-shadow: none;
    background: #0e1e2b;
    border: 1px solid #254250;
  }
  .channel-heading {
    margin: 10px 0 14px;
  }
}
#settings[open] {
  position: fixed;
  inset: 0;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: 86px minmax(0, 1fr);
  grid-template-areas: "head head" "nav content";
  background: #0b1722;
  animation: none;
  overflow: hidden;
}
#settings > .dialog-head {
  grid-area: head;
  margin: 0;
  padding: 16px 28px;
  border-bottom: 1px solid #29404e;
  background: #102230;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
#settings > .dialog-head h2 {
  font-size: 20px;
  margin: 0;
}
#settings > .dialog-head .eyebrow {
  font-size: 9px;
  color: #7abcb6;
  letter-spacing: 2px;
}
#settings-tabs {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  overflow-y: auto;
  flex-wrap: nowrap !important;
  margin: 0;
  padding: 22px 14px;
  border: 0;
  border-inline-end: 1px solid #29404e;
  background: #0f202c;
}
#settings-tabs button {
  margin: 0;
  text-align: start;
  min-height: 45px;
  border-color: transparent;
  background: transparent;
  border-radius: 10px;
  padding: 10px 15px;
  flex-shrink: 0;
}
#settings-tabs button.active {
  background: #1d4c4b;
  border-color: #347773;
  color: #d7fff0;
}
#settings-content {
  grid-area: content;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 28px 32px 60px;
  scrollbar-gutter: stable;
}
#settings-content > h3 {
  margin-top: 30px;
}
.dashboard-page-head {
  margin-bottom: 25px;
}
.dashboard-page-head h2 {
  font-size: 24px;
  margin: 0 0 6px;
}
.dashboard-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}
.dashboard-section {
  padding: 22px;
  border: 1px solid #2c4d5a;
  border-radius: 16px;
  background: #112934;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.dashboard-section > label,
.dashboard-section > .error {
  flex-basis: 100%;
}
.dashboard-section > select {
  flex: 1;
  min-width: 180px;
}
.dashboard-section > label input {
  width: 100%;
}
.dashboard-section output {
  display: block;
  color: var(--accent);
  font-weight: bold;
}
.admin-row {
  box-shadow: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #243f4c;
  border-radius: 0;
  padding: 16px 4px;
  margin: 0;
  min-width: 0;
}
.admin-row strong {
  overflow-wrap: anywhere;
}
.admin-row .grow {
  min-width: 0;
}
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin: 15px 0 28px;
}
.resource-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  background: #112a36;
  color: #d8f4ed;
  border: 1px solid #315564;
  border-radius: 16px;
  padding: 22px;
  text-align: start;
  min-height: 150px;
  font-size: 15px;
  font-weight: bold;
  overflow-wrap: anywhere;
  box-shadow: none;
}
.resource-card .icon {
  color: #65d8bf;
  width: 28px;
  height: 28px;
}
.resource-card small {
  font-size: 11px;
  font-weight: normal;
}
.resource-card:hover {
  background: #1a3a43;
  border-color: #59a494;
}
.search-form {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 20px 0;
}
.search-form input {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.search-form button {
  flex-shrink: 0;
}
.pagination {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin: 24px 0;
}
.file-drop-label {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px;
  border: 1px dashed #477582;
  border-radius: 12px;
  flex-wrap: wrap;
  color: #b9eade;
}
.file-drop-label input {
  width: 100%;
}
.track-table {
  margin-top: 24px;
}
.track-table .admin-row {
  min-height: 70px;
}
#settings-content progress {
  width: 100%;
  accent-color: var(--accent);
}
.permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 9px;
}
.permission-grid label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid #325362 !important;
  border-radius: 11px !important;
  background: #142c39 !important;
  min-height: 48px;
  cursor: pointer;
  line-height: 1.8;
}
.permission-grid input[type="checkbox"],
.acl-section input[type="checkbox"],
.remember-label input[type="checkbox"] {
  appearance: auto !important;
  display: inline-block !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  flex: 0 0 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: #39dab8 !important;
  border-radius: 4px;
  box-shadow: none !important;
}
.permission-group-title {
  grid-column: 1/-1;
  margin: 15px 0 0;
}
.acl-section label {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 42px;
}
.message-reactions,
.reaction-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.message-reactions button {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 16px;
  background: #20434b;
}
.message-reactions button[aria-pressed="true"] {
  border-color: #62d6b8;
}
.reaction-picker button {
  min-width: 40px;
  min-height: 40px;
  font-size: 20px;
}
.people-search .avatar {
  flex-shrink: 0;
}
.people-search button {
  justify-content: flex-start;
}
.people-search {
  overflow: auto;
  min-height: 40px;
}
@media (max-width: 700px) {
  #settings[open] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 75px auto minmax(0, 1fr);
    grid-template-areas: "head" "nav" "content";
  }
  #settings > .dialog-head {
    padding: 12px 16px;
  }
  #settings > .dialog-head h2 {
    font-size: 15px;
  }
  #settings-tabs {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px;
    gap: 5px;
    border: 0;
    border-bottom: 1px solid #29404e;
  }
  #settings-tabs button {
    flex-shrink: 0;
    min-height: 40px;
    font-size: 11px;
    padding: 7px 12px;
  }
  #settings-content {
    padding: 18px 14px 40px;
  }
  .dashboard-page-head h2 {
    font-size: 20px;
  }
  .resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .resource-card {
    padding: 16px;
    min-height: 135px;
    font-size: 12px;
  }
  .dashboard-section {
    padding: 16px;
  }
  .dashboard-section > select {
    width: 100%;
    min-width: 100%;
  }
  .dashboard-toolbar .action-button {
    flex: 1;
    min-width: 120px;
  }
  .search-form {
    gap: 7px;
  }
  .search-form button {
    font-size: 10px;
    padding: 10px;
  }
  .permission-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .pagination {
    gap: 7px;
    font-size: 10px;
  }
  .pagination button {
    font-size: 10px;
    padding: 8px;
  }
  .chat-panel {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 240px);
  }
  .messages,
  body:not(.home-view) .messages {
    flex: 1;
    height: calc(100dvh - 360px) !important;
    min-height: 240px !important;
    max-height: none !important;
  }
  .main {
    padding-bottom: 95px;
  }
  .welcome {
    overflow: hidden;
  }
  .sidebar {
    max-height: none;
  }
  .resource-card small {
    font-size: 10px;
  }
  .rightbar {
    padding-bottom: 100px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
.layout {
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 701px) and (max-width: 950px) {
  .layout {
    grid-template-columns: 170px minmax(0, 1fr) 180px;
  }
  .sidebar {
    grid-row: auto;
  }
  .rightbar {
    grid-column: auto;
    display: block !important;
    padding: 18px 9px;
  }
  .rightbar .direct-person {
    padding: 10px 4px;
    gap: 6px;
  }
  .direct-person small {
    max-width: 96px;
  }
  .direct-person .avatar {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }
  .direct-remove {
    padding: 2px;
  }
  .main {
    padding: 18px 12px;
  }
  .topbar {
    gap: 16px;
    padding-inline: 18px;
  }
}
.message-reactions button .icon {
  width: 16px;
  height: 16px;
}
.reaction-picker button .icon {
  width: 22px;
  height: 22px;
}
.dashboard-section input[type="range"] {
  accent-color: var(--accent);
}
.sidebar {
  overflow: hidden !important;
}
.channel-browser {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
.sidebar-bottom {
  position: static !important;
  flex-shrink: 0;
  margin-top: 14px;
  padding-top: 12px;
  background: transparent;
}
.channel-browser .section-label:first-child {
  margin-top: 4px;
}
@media (max-width: 700px) {
  body[data-view="channels"] .sidebar {
    height: calc(100dvh - 135px);
    min-height: 0;
    padding: 14px 16px;
  }
  .channel-browser {
    min-height: 100px;
  }
  body[data-in-voice="true"][data-view="channels"] .sidebar {
    height: calc(100dvh - 193px);
  }
}

.profile-quota-settings {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-block-end: 1rem;
}
.profile-quota-row {
  display: flex;
  align-items: end;
  gap: 0.75rem;
  padding-block: 0.65rem;
}
.profile-quota-row label {
  display: grid;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
}
.profile-quota-row input {
  width: 100%;
  direction: ltr;
}
.profile-quota-row button {
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .profile-quota-row {
    flex-wrap: wrap;
  }
  .profile-quota-row label {
    flex-basis: 100%;
  }
}

.role-picker {
  min-width: 0;
  width: 100%;
  padding-block: 0.75rem;
}
.role-picker .permission-grid {
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.role-picker .permission-grid label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.profile-role-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block: 0.75rem;
  max-width: 100%;
}
.profile-role-badges .badge {
  border: 1px solid;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.release-error {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  background: #10131df5;
  text-align: center;
}