:root {
  --bg: #11141b;
  --panel: #171a22;
  --deep: #0b0d12;
  --surface: #1d212b;
  --surface-hover: #252a36;
  --line: #2a3040;
  --text: #f7f8fb;
  --muted: #929aab;
  --brand: #6c72ff;
  --brand-bright: #8990ff;
  --green: #36d991;
  --danger: #ff6470;
  color-scheme: dark;
  font-family: "Segoe UI Variable Text", "Segoe UI Variable", Inter, "Segoe UI", system-ui, sans-serif;
  font-synthesis: none;
}

body {
  background:
    radial-gradient(circle at 72% -10%, #353a8b22, transparent 32%),
    var(--deep);
  letter-spacing: -.005em;
  font-family: inherit;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select { font-family: inherit; }
h1, h2, h3, .server-title, .header, .profile-name, .member-name { font-family: "Segoe UI Variable Display", "Segoe UI Variable Text", Inter, "Segoe UI", system-ui, sans-serif; }
h1, h2, h3 { font-weight: 720; }
button { transition: color .16s, background .16s, border-color .16s, transform .16s, box-shadow .16s; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 2px;
}

.app {
  grid-template-columns: 76px 258px minmax(0, 1fr) 236px;
  background: var(--bg);
}

.servers {
  gap: 11px;
  padding: 14px 0;
  border-right: 1px solid #202430;
  background: linear-gradient(180deg, #0d1016, #090b0f 72%);
}
.server {
  width: 50px;
  height: 50px;
  border: 1px solid #ffffff0a;
  background: #191d26;
  box-shadow: 0 7px 18px #0005;
}
.server:hover {
  border-color: #ffffff1c;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px #0007;
}
.server.active {
  background: linear-gradient(145deg, var(--brand-bright), #5359db);
  box-shadow: 0 8px 24px #5961ff44;
}
.server.home { font-size: 19px; letter-spacing: -.04em; }
.server::before { left: -13px; background: #e8eaff; box-shadow: 0 0 12px #aeb2ff; }
.divider { width: 34px; border-color: #242936; }

.channels {
  border-right: 1px solid #282d3a;
  background: linear-gradient(180deg, #181b24, #14171e);
}
.server-title {
  height: 56px;
  padding: 0 18px;
  border-bottom: 1px solid #292e3b;
  box-shadow: 0 8px 24px #0002;
  font-size: 14px;
}
.server-title:hover { background: #1d212b; }
.channel-scroll { padding: 16px 10px; }
.category {
  margin: 13px 5px 7px;
  color: #747d90;
  font-size: 10px;
  letter-spacing: .08em;
}
.category button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -6px -3px -6px auto;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #8e97aa;
  font-size: 17px;
}
.category button:hover {
  border-color: #3a4253;
  background: #262c38;
  color: white;
}
#text-channels, #voice-channel-list {
  padding: 3px;
  border: 1px solid #252b38;
  border-radius: 11px;
  background: #10131a55;
}
#voice-channel { display: none !important; }
#text-channels { margin-bottom: 17px; }
.room-channel { position: relative; gap: 9px; }
.room-kind-icon {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  flex: none;
  border-radius: 7px;
  background: #292f3d;
  color: #939caf;
  font-size: 14px;
  font-weight: 750;
}
.room-channel-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-channel:hover .room-kind-icon { background: #343b4c; color: #dfe2e9; }
.room-channel.active .room-kind-icon,
.voice-channel-button.selected .room-kind-icon {
  background: #6c72ff2e;
  color: #aeb2ff;
  box-shadow: inset 0 0 0 1px #7d84ff3d;
}
.room-settings-button {
  display: grid;
  place-items: center;
  width: 25px;
  height: 24px;
  flex: none;
  border-radius: 6px;
  color: #778094;
  font-size: 12px;
  letter-spacing: 1px;
  opacity: 0;
}
.room-channel:hover .room-settings-button,
.room-channel:focus-visible .room-settings-button { opacity: 1; }
.room-settings-button:hover { background: #3a4151; color: white; }
.voice-channel-block { padding-bottom: 2px; }
.voice-channel-button.selected { background: linear-gradient(90deg, #36d99117, #202832); }
.voice-channel-button.selected .room-kind-icon { background: #36d99120; color: #64e5a9; box-shadow: inset 0 0 0 1px #36d9913d; }
.room-occupancy {
  min-width: 18px;
  padding: 2px 5px;
  border-radius: 999px;
  background: #2e3543;
  color: #aeb5c2;
  text-align: center;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
.room-occupancy:empty { display: none; }
.channel {
  min-height: 38px;
  height: auto;
  margin: 2px 0;
  padding: 7px 10px;
  border-radius: 8px;
  color: #9ba3b4;
}
.channel:hover { color: #e9ebf1; background: #222733; }
.channel.active {
  color: white;
  background: linear-gradient(90deg, #6c72ff24, #262b39);
  box-shadow: inset 3px 0 0 var(--brand-bright), 0 5px 14px #0002;
}
.channel .hash, .channel .speaker { color: #737c90; }
.voice-users { margin: 4px 8px 10px 17px; }
.voice-user {
  min-height: 32px;
  margin: 2px 0;
  border-radius: 7px;
}
.voice-user:hover { background: #20242e; }
.voice-user[data-speaking="true"] {
  color: #c4ffe2 !important;
  background: #193328;
}

.profile {
  min-height: 62px;
  padding: 9px 11px;
  border-top: 1px solid #2a2f3b;
  background: #0f1218;
  box-shadow: 0 -10px 28px #0003;
}
.profile .avatar {
  width: 36px;
  height: 36px;
  border: 2px solid #2c3342;
  box-shadow: 0 4px 12px #0005;
}
.profile-name { font-size: 12px; }
.profile-status { color: var(--green); font-size: 10px; }
.profile button {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  font-size: 15px;
}
.profile button:hover { background: #242936; }

.main { grid-template-rows: 56px minmax(0, 1fr); background: transparent; }
.header {
  padding: 0 20px;
  border-bottom: 1px solid #292e3b;
  background: #151820e8;
  box-shadow: 0 8px 24px #0002;
  backdrop-filter: blur(14px);
}
.header .hash { color: #788195; }
.header small { border-color: #323746; color: #858e9f; }
.header-actions { padding-left: 14px; }
.chat {
  background:
    radial-gradient(circle at 72% 0%, #363d8a16, transparent 34%),
    linear-gradient(180deg, #141820, #11141a);
}
#messages { padding: 30px 28px 14px; }
.welcome {
  margin: 0 0 22px;
  padding: 24px;
  border: 1px solid #2a3040;
  border-radius: 16px;
  background: linear-gradient(135deg, #202532dd, #171b24bb);
  box-shadow: 0 16px 44px #0003;
}
.welcome-icon {
  width: 58px;
  height: 58px;
  background: linear-gradient(145deg, #858aff, #5158d9);
  box-shadow: 0 10px 28px #5961ff4d;
  font-size: 30px;
}
.welcome h1 { margin-top: 16px; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.035em; }
.welcome p { color: #9ba3b4; }
.message {
  margin: 1px -12px;
  padding: 8px 12px;
  border-radius: 10px;
}
.message:hover { background: #ffffff06; }
.message .avatar { box-shadow: 0 4px 12px #0004; }
.message-head { color: #f1f2f7; }
.message-text { color: #c8cdd7; }
.message-time { color: #737c8d; }
.compose { padding: 6px 28px 24px; }
.compose-inner {
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid #303747;
  border-radius: 14px;
  background: #20242f;
  box-shadow: 0 12px 34px #0004;
}
.compose-inner:focus-within {
  border-color: #6f77ff99;
  box-shadow: 0 0 0 3px #6c72ff1f, 0 14px 38px #0005;
}
#message { height: 48px; }
#send {
  width: 32px;
  height: 32px;
  background: linear-gradient(145deg, #8389ff, #5860e5);
  box-shadow: 0 5px 14px #5961ff55;
}
#send:hover { transform: translateY(-1px) scale(1.04); }

.members {
  padding: 27px 12px;
  border-left: 1px solid #282d3a;
  background: linear-gradient(180deg, #181b24, #14171e);
  overflow-y: auto;
}
.member-section + .member-section { margin-top: 22px; }
.member-section-title { display: flex; align-items: center; gap: 7px; margin: 0 9px 10px; color: #8b93a5; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.member-section-title i { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 3px #ffffff0a; }
.member-list-toolbar { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 4px; margin: -6px 2px 22px; padding-bottom: 12px; border-bottom: 1px solid #2a303d; }
.member-list-toolbar>span { padding-left: 7px; color: #7e879a; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.member-list-toolbar button { padding: 5px 7px; border: 0; border-radius: 6px; background: transparent; color: #747d90; cursor: pointer; font-size: 9px; }
.member-list-toolbar button:hover { color: #dfe2e8; background: #242a36; }
.member-list-toolbar button.active { color: #dfe2ff; background: #5f68e52b; }
.member {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 44px;
  margin-bottom: 4px;
  padding: 7px 9px;
  border-radius: 9px;
  cursor: default;
}
.member { transform: translateZ(0); transition: background-color .2s ease, border-color .2s ease, box-shadow .22s ease, opacity .2s ease, filter .2s ease, transform .22s cubic-bezier(.2,.8,.2,1); }
.member::before { content: ""; position: absolute; z-index: -2; inset: 0; background-image: var(--member-banner); background-position: center; background-size: cover; opacity: 0; transform: scale(1.03); transition: opacity .25s ease,transform .4s cubic-bezier(.2,.8,.2,1); }
.member::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#171b24 15%,#171b24d9 58%,#171b2460); opacity: 0; transition: opacity .22s ease; }
.member.has-banner::before { opacity: .42; }
.member.has-banner::after { opacity: 1; }
.member:hover,.member:focus-visible { background: #222733; box-shadow: 0 8px 22px #05070b55; outline: 0; transform: translateY(-2px); }
.member:active { transform: translateY(0) scale(.985); }
.member.has-banner:hover::before,.member.has-banner:focus-visible::before { opacity: .62; transform: scale(1); }
.member .avatar { width: 34px; height: 34px; box-shadow: 0 4px 12px #0004; transition: transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease; }
.member:hover .avatar,.member:focus-visible .avatar { transform: scale(1.07); box-shadow: 0 7px 18px #0007; }
.member-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.member-name { overflow: hidden; color: #d9dce3; font-size: 13px; font-weight: 620; letter-spacing: -.012em; text-overflow: ellipsis; text-shadow: 0 1px 3px #000; white-space: nowrap; }
.member-role { width: max-content; max-width: 100%; overflow: hidden; color: #7f889a; font-size: 9px; letter-spacing: .015em; text-overflow: ellipsis; white-space: nowrap; }
.member-role.role-owner { color: #f4c45c; }
.member-role.role-admin { color: #a9a7ff; }
.member-role.role-member { color: #747d90; }
.member.is-offline { opacity: .48; filter: saturate(.55); }
.member.is-offline:hover { opacity: .75; }
.presence { border-color: #171a22; box-shadow: 0 0 0 2px #171a22; }
.presence.online { box-shadow: 0 0 0 2px #171a22, 0 0 10px #36d99188; }

.voice-state.modern-call-panel {
  margin: 10px;
  border-color: #343b4b;
  border-radius: 14px;
  background: linear-gradient(180deg, #202530, #151920);
  box-shadow: 0 14px 34px #0005;
}
.call-panel-head { padding: 13px; border-color: #303646; }
.call-panel-head small { background: #2a3040; color: #c2c7d2; }
.call-action { border-color: #333a4a !important; background: #252b37 !important; }
.call-action:hover { border-color: #596276 !important; background: #303746 !important; }
.call-action.is-active { border-color: #36d99155 !important; background: #17372a !important; }
.call-action.is-danger { border-color: #ff647044 !important; background: #3b2027 !important; }
.stream-settings { border-color: #303646; background: #11151c; }
.connection-details { border-color: #343b4b; background: #0e1117; }

.join-modal { background: #07090dcc; backdrop-filter: blur(16px); }
.join-card {
  border: 1px solid #353c4d;
  border-radius: 16px;
  background: linear-gradient(160deg, #202530, #151820);
  box-shadow: 0 28px 90px #000c;
}
.join-card h1 { letter-spacing: -.035em; }
.join-card input {
  border-color: #303748;
  border-radius: 8px;
  background: #10131a;
}
.join-card button { border-radius: 8px; background: linear-gradient(145deg, #777eff, #565ddd); }
.profile-editor-modal { z-index:95; padding: 16px; }
.profile-editor-modal:not([hidden]) { display: grid; }
.profile-editor-modal.is-opening { animation: profile-overlay-in .24s ease-out; }
.profile-editor-modal.is-opening .profile-editor-card { animation: profile-editor-in .4s cubic-bezier(.16,1,.3,1); }
.profile-editor-card { width: min(920px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 0; text-align: left; scrollbar-width: thin; }
.profile-editor-heading { display: flex; align-items: flex-start; justify-content: space-between; position:sticky; top:0; z-index:3; padding: 26px 28px 20px; border-bottom: 1px solid #303747; background: linear-gradient(135deg,#242b3af5,#191d27f5); backdrop-filter:blur(14px); }
.profile-editor-heading span { color: #858fff; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.profile-editor-heading h1 { margin: 5px 0 0; font-size: 27px; }
.profile-editor-heading p { margin: 7px 0 0; color: #939cad; font-size: 12px; }
.profile-editor-heading button { width: 36px; height: 36px; margin: 0; padding: 0; border-radius: 50%; background: #151922; color: #aab1bf; font-size: 22px; transition: background-color .18s ease,color .18s ease,transform .18s ease; }
.profile-editor-heading button:hover { background: #303748; color: white; transform: rotate(90deg); }
.profile-editor-layout { display: grid; grid-template-columns:minmax(0,1fr) 330px; gap: 26px; padding: 26px 28px 20px; }
.profile-editor-fields { min-width: 0; }
.profile-upload-grid { display: grid; gap: 9px; margin-bottom: 22px; }
.profile-editor-card .profile-upload { display: grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap: 11px; margin: 0 !important; padding: 11px 12px; border:1px solid #303849; border-radius:11px; background:#141821; cursor:pointer; transition:border-color .2s ease,background-color .2s ease,transform .2s ease,box-shadow .2s ease; }
.profile-editor-card .profile-upload:hover { border-color:#6671ec; background:#1c2230; box-shadow:0 8px 24px #080a0f55; transform:translateY(-1px); }
.profile-upload-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:linear-gradient(145deg,#626cff,#8d68e9); color:white; font-size:17px; }
.profile-upload strong,.profile-upload small { display:block; }
.profile-upload strong { color:#e9ebf1; font-size:12px; }
.profile-upload small { margin-top:3px; color:#7f899c; font-size:9px; font-weight:500; }
.profile-upload-action { padding:6px 9px; border-radius:7px; background:#282e3c; color:#cbd0da; font-size:9px; font-weight:800; }
.profile-upload input { position:absolute; width:1px!important; height:1px!important; opacity:0; pointer-events:none; }
.profile-field-heading { display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.profile-field-heading label { margin:0; }
.profile-field-heading span { color:#697286; font-size:9px; }
.profile-editor-preview { position: relative; min-height: 330px; overflow: hidden; border: 1px solid #394156; border-radius: 18px; background: #11151c; box-shadow:0 18px 45px #05070b88; transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease; }
.profile-editor-preview:hover { transform:translateY(-3px); box-shadow:0 25px 55px #05070baa; }
.profile-editor-banner { height: 126px; background-position: center; background-size: cover; transition:background-color .25s ease,filter .25s ease; }
.profile-editor-avatar { position: absolute; left: 20px; top: 82px; width: 84px; height: 84px; margin: 0; border: 6px solid #11151c; font-size: 24px; box-shadow: 0 10px 28px #0008; transition:background-color .25s ease,background-image .25s ease,transform .25s ease; }
.profile-editor-preview:hover .profile-editor-avatar { transform:scale(1.04); }
.profile-editor-preview-copy { margin: 50px 18px 16px; }
.profile-editor-preview-copy strong,.profile-editor-preview-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-editor-preview-copy strong { font-size:19px; letter-spacing:-.025em; }
.profile-editor-preview-copy small { margin-top: 3px; color: #8b93a4; font-size: 10px; }
.profile-editor-preview-copy>div { width:max-content; max-width:100%; margin-top:13px; padding:8px 10px; overflow:hidden; border:1px solid #303849; border-radius:9px; background:#1b202b; color:#dce0e8; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.profile-editor-preview-copy p { margin:13px 0 0; color:#aeb5c3; font-size:11px; line-height:1.5; white-space:pre-wrap; }
.profile-preview-column>span { display:block; margin-bottom:9px; color:#768096; font-size:9px; font-weight:800; letter-spacing:.08em; }
.profile-preview-tip { display:flex; gap:9px; margin-top:12px; padding:11px 12px; border:1px solid #303849; border-radius:10px; background:#141821; }
.profile-preview-tip strong { flex:none; color:#8f97ff; font-size:10px; }
.profile-preview-tip span { color:#798397; font-size:9px; line-height:1.45; }
.profile-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.profile-editor-grid label { margin-top: 10px; }
.profile-editor-card input:not([type=file]),.profile-editor-card textarea { transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease; }
.profile-editor-card input:not([type=file]):focus,.profile-editor-card textarea:focus { border-color:#6873f1; background:#131823; box-shadow:0 0 0 3px #6873f122; outline:0; }
.profile-editor-card textarea { width: 100%; min-height: 90px; margin: 7px 0 0; padding: 11px; border: 1px solid #303748; border-radius: 9px; resize: vertical; background: #10131a; color: #f2f3f5; font: inherit; }
.profile-editor-card input[type="color"] { height: 42px; padding: 5px; cursor:pointer; }
.profile-card-customization { margin-top:20px; padding:16px; border:1px solid #303849; border-radius:13px; background:linear-gradient(145deg,#171c27,#12161e); }
.profile-card-customization>span { color:#8c95ff; font-size:9px; font-weight:800; letter-spacing:.09em; }
.profile-editor-card select { display:block; width:100%; height:42px; margin-top:7px; padding:0 11px; border:1px solid #303748; border-radius:8px; outline:0; background:#10131a; color:#eef0f5; cursor:pointer; transition:border-color .2s ease,box-shadow .2s ease; }
.profile-editor-card select:focus { border-color:#6873f1; box-shadow:0 0 0 3px #6873f122; }
#profile-photo-error { min-height:18px; margin:0 28px 4px; color:#ff8891; font-size:11px; }
.profile-editor-actions { display: flex; align-items:center; justify-content:space-between; position:sticky; bottom:0; z-index:3; gap: 8px; padding:16px 28px 22px; border-top:1px solid #303747; background:#171b24f5; backdrop-filter:blur(14px); }
.profile-editor-actions>div { display:flex; gap:8px; }
.profile-editor-actions button { margin: 0 !important; }
.profile-editor-actions>#profile-photo-save { min-width:150px; }
.profile-editor-actions>#profile-photo-save:disabled { opacity:.65; cursor:wait; }
.profile-remove-photo { background: #252a35 !important; color: #aeb5c3 !important; font-size: 10px; transition:background-color .18s ease,color .18s ease,transform .18s ease; }
.profile-remove-photo:hover { background:#38242b!important; color:#ffadb4!important; transform:translateY(-1px); }
#member-profile-card { --card-base:#171b23; --card-soft:#202632; position: fixed; z-index: 90; isolation:isolate; width: 326px; padding: 0; overflow: visible; border: 1px solid color-mix(in srgb,var(--profile-accent) 55%,#414a60); border-radius: 20px; background:var(--card-base); color: #eef0f5; box-shadow: 0 26px 75px #000d; transform-origin:top left; }
#member-profile-card[hidden] { display: none; }
#member-profile-card.is-opening { animation:member-card-in .28s cubic-bezier(.16,1,.3,1); }
.member-card-decoration { position:absolute; z-index:0; inset:-14px; overflow:hidden; border-radius:28px; pointer-events:none; }
.member-card-banner { position:relative; z-index:1; height: 120px; overflow:hidden; border-radius:19px 19px 0 0; background-position: center; background-size: cover; animation:member-banner-in .45s ease-out; }
.member-card-body { position:relative; z-index:1; overflow:visible; padding: 0 18px 18px; border-radius:0 0 19px 19px; background:linear-gradient(160deg,color-mix(in srgb,var(--card-base) 94%,var(--profile-accent)),var(--card-base)); }
.member-card-avatar { width: 84px; height: 84px; display: grid; place-items: center; margin: -43px 0 12px; border: 6px solid var(--card-base); border-radius: 50%; color: white; font-size: 21px; font-weight: 800; box-shadow: 0 9px 22px #0009; animation:member-avatar-in .38s .05s cubic-bezier(.16,1,.3,1) both; }
.member-card-identity { display:flex; align-items:center; flex-wrap:wrap; gap:5px 7px; }
.member-card-identity>strong { max-width:100%; overflow:hidden; font-size:19px; letter-spacing:-.025em; text-overflow:ellipsis; white-space:nowrap; }
.member-card-badge,#profile-badge-preview { max-width:130px; overflow:hidden; padding:3px 7px; border:1px solid color-mix(in srgb,var(--profile-accent) 55%,transparent); border-radius:999px; background:color-mix(in srgb,var(--profile-accent) 18%,transparent); color:color-mix(in srgb,var(--profile-accent) 40%,white); font-size:9px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.member-card-pronouns { color: #7e8799; font-size: 10px; }
.member-card-role { display: block; margin-top: 4px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.member-card-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 11px; color: #8c94a5; font-size: 12px; }
.member-card-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #596171; }
.member-card-status.online { color: #58df9a; }.member-card-status.online::before { background: #36d991; box-shadow: 0 0 9px #36d99188; }
.member-card-custom-status { margin: 12px 0; padding: 10px 11px; border:1px solid color-mix(in srgb,var(--profile-accent) 22%,#303849); border-radius: 9px; background:var(--card-soft); color: #d3d6dd; font-size: 11px; }
#member-profile-card p { min-height: 38px; margin: 6px 0 0; color: #c3c8d2; font-size: 12px; line-height: 1.45; white-space: pre-wrap; }
#member-profile-card small { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid #343a49; color: #70798b; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.member-card-action { width:100%; min-height:40px; margin-top:15px; border:1px solid color-mix(in srgb,var(--profile-accent) 32%,#384054); border-radius:10px; background:color-mix(in srgb,var(--profile-accent) 18%,var(--card-soft)); color:#eef0f5; font-weight:700; cursor:pointer; transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.member-card-action:hover { border-color:var(--profile-accent); background:color-mix(in srgb,var(--profile-accent) 30%,var(--card-soft)); box-shadow:0 8px 22px #0005; transform:translateY(-1px); }
.profile-preview-name { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.profile-preview-name strong { min-width:0; }
.card-theme-midnight { --card-base:#111722; --card-soft:#1a2230; }
.card-theme-aurora { --card-base:#101d22; --card-soft:#183036; }
.card-theme-neon { --card-base:#180f25; --card-soft:#2a173a; }
.card-theme-sunset { --card-base:#28151b; --card-soft:#3a2028; }
.card-theme-ocean { --card-base:#0d1d2a; --card-soft:#132e40; }
.card-theme-royal { --card-base:#1b132b; --card-soft:#3d235a; }
.card-theme-forest { --card-base:#101f1b; --card-soft:#183e31; }
.card-theme-rose { --card-base:#261421; --card-soft:#4a2039; }
#member-profile-card.card-border-solid{border:3px solid var(--profile-accent)}#member-profile-card.card-border-gradient{border:3px solid transparent;background:linear-gradient(var(--card-base),var(--card-base)) padding-box,linear-gradient(135deg,var(--profile-accent),#65dcff,#a873ff) border-box}#member-profile-card.card-border-neon{border:2px solid var(--profile-accent);animation:profile-border-pulse 1.8s ease-in-out infinite alternate}#member-profile-card.card-border-gold{border:3px solid transparent;background:linear-gradient(var(--card-base),var(--card-base)) padding-box,linear-gradient(135deg,#8c6422,#ffe39a,#b47a25) border-box}#member-profile-card.card-border-prismatic{border:3px solid transparent;background:linear-gradient(var(--card-base),var(--card-base)) padding-box,linear-gradient(90deg,#ff6b8b,#ffd36b,#5ce3b2,#68a7ff,#ba72ff,#ff6b8b) border-box;background-size:100% 100%,300% 100%;animation:profile-prism 4s linear infinite}#member-profile-card.avatar-frame-ring .member-card-avatar{border-color:var(--profile-accent);box-shadow:0 0 0 3px var(--card-base)}#member-profile-card.avatar-frame-double .member-card-avatar{box-shadow:0 0 0 3px var(--profile-accent),0 0 0 6px var(--card-base)}#member-profile-card.avatar-frame-neon .member-card-avatar{border-color:var(--profile-accent);box-shadow:0 0 18px var(--profile-accent),inset 0 0 8px var(--profile-accent)}#member-profile-card.avatar-frame-crown .member-card-avatar{border-color:#f4c75b;box-shadow:0 0 0 3px #8d6525}#member-profile-card.avatar-frame-crown .member-card-avatar::after{content:'♛';position:absolute;right:-8px;top:-18px;color:#ffe083;font-size:24px;text-shadow:0 2px 6px #000}@keyframes profile-border-pulse{to{box-shadow:0 0 24px color-mix(in srgb,var(--profile-accent) 70%,transparent),0 24px 70px #000d}}@keyframes profile-prism{to{background-position:0 0,300% 0}}
.profile-editor-preview.card-theme-aurora { background:linear-gradient(160deg,#183c3e,#101d22 58%,#172840); }
.profile-editor-preview.card-theme-neon { background:linear-gradient(160deg,#35144a,#180f25 58%,#121b3c); }
.profile-editor-preview.card-theme-sunset { background:linear-gradient(160deg,#4b2029,#28151b 58%,#30203f); }
.profile-editor-preview.card-theme-ocean { background:linear-gradient(160deg,#123c54,#0d1d2a 58%,#112941); }
.card-effect-glow { box-shadow:0 0 0 1px color-mix(in srgb,var(--profile-accent) 70%,transparent),0 0 34px color-mix(in srgb,var(--profile-accent) 45%,transparent),0 28px 80px #000d!important; }
.card-effect-crystal .member-card-decoration::before { content:""; position:absolute; inset:-6px -4px auto; height:70px; background:linear-gradient(135deg,transparent 5%,#d8c5ffbb 6% 12%,transparent 13% 18%,#9168ffcc 19% 28%,transparent 29% 36%,#e9ddffbb 37% 44%,transparent 45% 54%,#7652e9cc 55% 66%,transparent 67%); clip-path:polygon(0 100%,5% 42%,12% 72%,18% 5%,26% 62%,34% 15%,44% 72%,53% 0,62% 65%,71% 20%,80% 72%,89% 8%,96% 60%,100% 100%); filter:drop-shadow(0 0 8px #9c70ff); animation:card-crystal 3s ease-in-out infinite; }
.card-effect-stars .member-card-decoration::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 12% 18%,#fff 0 1px,transparent 2px),radial-gradient(circle at 80% 14%,#fff 0 1px,transparent 2px),radial-gradient(circle at 68% 76%,#fff 0 1px,transparent 2px),radial-gradient(circle at 22% 84%,#fff 0 1px,transparent 2px),radial-gradient(circle at 93% 48%,#fff 0 1px,transparent 2px); filter:drop-shadow(0 0 4px var(--profile-accent)); animation:card-stars 2.8s ease-in-out infinite alternate; }
.profile-editor-preview.card-effect-glow { box-shadow:0 0 30px color-mix(in srgb,var(--profile-accent) 38%,transparent),0 18px 45px #05070b88; }
.profile-editor-preview.card-effect-crystal::before,.profile-editor-preview.card-effect-stars::before { content:"✦  ✧  ◆  ✦"; position:absolute; z-index:3; top:8px; right:10px; color:color-mix(in srgb,var(--profile-accent) 45%,white); letter-spacing:8px; text-shadow:0 0 9px var(--profile-accent); animation:card-stars 2.8s ease-in-out infinite alternate; }
@keyframes card-crystal { 0%,100% { transform:translateY(0); filter:drop-shadow(0 0 7px #9c70ff) } 50% { transform:translateY(-3px); filter:drop-shadow(0 0 13px #c3a9ff) } }
@keyframes card-stars { from { opacity:.45; transform:scale(.98) } to { opacity:1; transform:scale(1.02) } }
@keyframes profile-overlay-in { from { opacity:0 } to { opacity:1 } }
@keyframes profile-editor-in { from { opacity:0; transform:translateY(18px) scale(.975) } to { opacity:1; transform:none } }
@keyframes member-card-in { from { transform:translateY(8px) scale(.94) } to { transform:none } }
@keyframes member-banner-in { from { filter:brightness(.55); transform:scale(1.04) } to { filter:brightness(1); transform:scale(1) } }
@keyframes member-avatar-in { from { transform:translateY(7px) scale(.82) } to { transform:none } }
@media(max-width:760px){.profile-editor-layout{grid-template-columns:1fr}.profile-preview-column{order:-1}.profile-editor-preview{min-height:280px}.profile-editor-actions{align-items:stretch;flex-direction:column-reverse}.profile-editor-actions>div{display:grid;grid-template-columns:1fr 1fr}.profile-editor-actions>#profile-photo-save{width:100%}}
@media(prefers-reduced-motion:reduce){.profile-editor-modal.is-opening,.profile-editor-modal.is-opening .profile-editor-card,#member-profile-card.is-opening,.member-card-banner,.member-card-avatar{animation:none}.member,.member::before,.member .avatar,.profile-editor-preview,.profile-upload{transition:none}}

/* Cartão público de membro: perfil vertical, temático e completo. */
#member-profile-card.card-border-gold{border:3px solid transparent;background:linear-gradient(var(--card-base),var(--card-base)) padding-box,linear-gradient(125deg,#6f4a14 0%,#ffe6a0 18%,#b67a24 38%,#fff0b7 53%,#8b5b18 72%,#e8bd63 100%) border-box;background-size:100% 100%,220% 220%;box-shadow:0 0 0 1px #2e1d08,0 0 22px #d39b3b40,0 30px 90px #000e;animation:member-gold-frame 6s ease-in-out infinite alternate}.card-border-gold .member-card-decoration::after{content:"";position:absolute;inset:17px;border:1px solid #ffe19a59;border-radius:17px;box-shadow:inset 0 0 16px #d89b3430;pointer-events:none}.card-border-gold .member-card-avatar{border-color:#17130b;box-shadow:0 0 0 3px #e3b85e,0 0 0 5px #5d3d13,0 9px 25px #000b}.card-border-gold .member-card-avatar::before{content:"✦";position:absolute;z-index:3;right:-10px;bottom:5px;display:grid;width:23px;height:23px;place-items:center;border:2px solid #6b4716;border-radius:50%;background:linear-gradient(145deg,#fff0ad,#b87920);color:#49300e;font-size:11px;box-shadow:0 3px 10px #0009}.card-border-gold .member-card-top-actions{top:10px;right:10px}@keyframes member-gold-frame{from{background-position:0 0,0% 50%}to{background-position:0 0,100% 50%}}
#member-profile-card{width:min(340px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:hidden;border-radius:22px;background:var(--card-base);box-shadow:0 30px 90px #000e}
#member-profile-card::after{content:"";position:absolute;z-index:0;inset:0;border-radius:inherit;background:linear-gradient(180deg,transparent 12%,color-mix(in srgb,var(--card-base) 58%,transparent) 36%,var(--card-base) 70%);pointer-events:none}
.member-card-backdrop{position:absolute;z-index:-1;inset:0;background-position:center;background-size:cover;filter:blur(12px) saturate(1.35);opacity:.3;transform:scale(1.08);pointer-events:none}
.member-card-hero{position:relative;z-index:2;height:190px}
.member-card-banner{height:164px;border-radius:19px 19px 0 0;background-image:linear-gradient(135deg,color-mix(in srgb,var(--profile-accent) 78%,#101521),color-mix(in srgb,var(--profile-accent) 28%,#101521));box-shadow:inset 0 -60px 75px #0005}
.member-card-top-actions{position:absolute;z-index:4;top:12px;right:12px;display:flex;gap:8px}
.member-card-icon-action{display:grid;place-items:center;width:35px;height:35px;padding:0;border:1px solid #ffffff20;border-radius:50%;background:#0a0d14c7;color:#fff;font-size:17px;line-height:1;cursor:pointer;box-shadow:0 6px 18px #0007;backdrop-filter:blur(9px);transition:transform .18s ease,background .18s ease}
.member-card-icon-action:hover{background:color-mix(in srgb,var(--profile-accent) 55%,#11151e);transform:translateY(-2px)}
.member-card-avatar{position:absolute;z-index:3;left:18px;bottom:-2px;width:86px;height:86px;margin:0;border-width:5px;background:var(--card-base);font-size:22px}
.member-card-avatar img{width:100%;height:100%;border-radius:inherit;object-fit:cover}
.member-card-avatar-presence{position:absolute;right:0;bottom:5px;width:16px;height:16px;border:4px solid var(--card-base);border-radius:50%;background:#626a79}
.member-card-avatar-presence.online{background:#35d992}.member-card-avatar-presence.idle{background:#e4ad39}.member-card-avatar-presence.dnd{background:#ef5364}
.member-card-body{position:relative;z-index:2;max-height:calc(100vh - 214px);overflow:auto;padding:7px 17px 17px;border-radius:0 0 19px 19px;background:linear-gradient(180deg,color-mix(in srgb,var(--card-base) 88%,transparent),color-mix(in srgb,var(--card-base) 97%,#05070c));scrollbar-width:thin}
.member-card-identity{gap:6px 8px}.member-card-identity>strong{font-size:22px;line-height:1.12;text-shadow:0 2px 10px #000b}
.member-card-metadata{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:5px;color:#abb2c2;font-size:11px}
.member-card-pronouns{font-size:11px}.member-card-status{margin:0}.member-card-status::before{width:6px;height:6px}
.member-card-mutual{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px;border:1px solid #ffffff12;border-radius:12px;background:#ffffff0a;backdrop-filter:blur(10px)}
.member-card-server-mark{display:grid;place-items:center;width:35px;height:35px;flex:none;overflow:hidden;border-radius:11px;background:color-mix(in srgb,var(--profile-accent) 35%,#252b39);font-size:12px;font-weight:850}
.member-card-server-mark img{width:100%;height:100%;object-fit:cover}.member-card-mutual>span:last-child{min-width:0}.member-card-mutual strong{display:block;overflow:hidden;color:#f1f3f8;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
#member-profile-card .member-card-mutual small{margin:2px 0 0;padding:0;border:0;color:#8c95a8;font-size:9px;letter-spacing:.04em;text-transform:none}
.member-card-section{margin-top:11px;padding:11px 12px;border:1px solid #ffffff10;border-radius:12px;background:#0d111a52;backdrop-filter:blur(9px)}
#member-profile-card .member-card-section small{margin:0 0 7px;padding:0;border:0;color:color-mix(in srgb,var(--profile-accent) 48%,white);font-size:9px;font-weight:850;letter-spacing:.11em}
.member-card-activity strong{display:block;overflow:hidden;color:#f1f3f7;font-size:12px;line-height:1.4;text-overflow:ellipsis}
#member-profile-card .member-card-about p{min-height:0;margin:0;color:#c7ccd6;font-size:11px;line-height:1.5}
.member-card-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.member-card-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;overflow:hidden;padding:6px 9px;border:1px solid color-mix(in srgb,var(--chip-color,var(--profile-accent)) 36%,#ffffff16);border-radius:999px;background:color-mix(in srgb,var(--chip-color,var(--profile-accent)) 15%,#111620);color:#e4e7ee;font-size:9px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}
.member-card-chip::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--chip-color,var(--profile-accent))}.member-card-chip.presence-online::before{background:#35d992}.member-card-chip.presence-idle::before{background:#e4ad39}.member-card-chip.presence-dnd::before{background:#ef5364}
.member-card-action{min-height:44px;margin-top:14px;border-radius:12px;background:color-mix(in srgb,var(--profile-accent) 24%,#202633);backdrop-filter:blur(8px)}
@media(max-width:520px){#member-profile-card{position:fixed;left:12px!important;right:12px!important;bottom:12px!important;top:auto!important;width:auto}.member-card-hero{height:170px}.member-card-banner{height:146px}.member-card-body{max-height:calc(100vh - 206px)}}
.room-creator-card{position:relative;width:min(550px,100%);overflow:hidden;padding:0!important;border:1px solid #414966!important;border-radius:22px!important;background:radial-gradient(circle at 10% 0,#796dff24,transparent 32%),linear-gradient(155deg,#202634,#151922 68%)!important;box-shadow:0 30px 100px #000c,0 0 0 1px #ffffff08!important;text-align:left}
.room-creator-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#756bff,#9d68ed,#62b5ff);box-shadow:0 0 22px #766dff99}
.room-creator-head{display:grid;grid-template-columns:50px minmax(0,1fr) 34px;align-items:start;gap:14px;padding:26px 28px 20px;border-bottom:1px solid #303748;background:#ffffff03}
.room-creator-symbol{display:grid;width:50px;height:50px;place-items:center;border:1px solid #8078ff80;border-radius:15px;background:linear-gradient(145deg,#736aff,#6655d9);box-shadow:0 10px 27px #5247c866;color:#fff;font-size:25px;font-weight:350}
.room-modal-kicker{display:block;margin:1px 0 6px;color:#969eff;font-size:9px;font-weight:850;letter-spacing:.14em}
.room-creator-card h1{margin:0!important;color:#f7f8fc;font-size:25px;letter-spacing:-.045em}
.room-creator-card #room-creator-copy{margin:6px 0 0;color:#8f99ac;font-size:11px}
#channel-creator-close{display:grid;width:34px;height:34px;margin:0;padding:0;border:1px solid #394154;border-radius:10px;background:#171c25;color:#929caf;font-size:21px;box-shadow:none;cursor:pointer;transition:.18s}
#channel-creator-close:hover{border-color:#59637b;background:#252c39;color:#fff;transform:rotate(4deg)}
.room-creator-step{display:flex;align-items:center;gap:8px;margin:20px 28px 10px;color:#b8bfcc;font-size:10px;font-weight:750}
.room-creator-step>span{display:grid;width:19px;height:19px;place-items:center;border:1px solid #5f68c4;border-radius:6px;background:#343c72;color:#cbd0ff;font-size:9px}
.room-type-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:0 28px 22px}
.room-type-picker label{margin:0;cursor:pointer}.room-type-picker input{position:absolute;width:1px;height:1px;opacity:0}
.room-type-picker label>span{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;min-height:72px;padding:12px;border:1px solid #343d4f;border-radius:13px;background:linear-gradient(145deg,#171c25,#11151d);box-shadow:inset 0 1px #ffffff08;transition:.2s cubic-bezier(.2,.8,.2,1)}
.room-type-picker label>span::after{content:"";position:absolute;right:9px;top:9px;width:7px;height:7px;border:2px solid #444d61;border-radius:50%;background:#131821;transition:.18s}
.room-type-picker label:hover>span{border-color:#525c75;background:linear-gradient(145deg,#1e2430,#151a23);transform:translateY(-2px)}
.room-type-picker b{display:grid;grid-row:1/3;width:30px;height:30px;place-items:center;align-self:center;border-radius:9px;background:#242a37;color:#929bad;font-size:17px;transition:.18s}
.room-type-picker strong{color:#e8ebf2;font-size:11px}.room-type-picker small{align-self:start;margin-top:2px;color:#778296;font-size:8px;line-height:1.35}
.room-type-picker input:checked+span{border-color:#7b76ff;background:linear-gradient(145deg,#302f59,#1d2340);box-shadow:0 0 0 3px #746cff14,0 10px 25px #080b1255;transform:translateY(-2px)}
.room-type-picker input:checked+span::after{border-color:#a5a0ff;background:#817aff;box-shadow:0 0 9px #817aff}.room-type-picker input:checked+span b{background:linear-gradient(145deg,#7169f5,#5852c7);color:#fff;box-shadow:0 5px 14px #5149bd66}.room-type-picker input:focus-visible+span{outline:2px solid #8990ff;outline-offset:2px}
#room-name-label,#room-category-wrap{margin-right:28px;margin-left:28px;color:#939daf;font-size:9px;font-weight:800;letter-spacing:.065em}
.room-name-field{display:flex;align-items:center;height:46px;margin:7px 28px 0;border:1px solid #354055;border-radius:11px;background:#0e1219;box-shadow:inset 0 2px 8px #0003;transition:.18s}.room-name-field:focus-within{border-color:#56647c;box-shadow:0 0 0 3px #8fa4c20e,inset 0 2px 8px #0003}.room-name-field>span{display:grid;width:45px;height:28px;place-items:center;border-right:1px solid #2c3443;color:#8f98ab;font-size:17px}.room-name-field>span .vix-icon{width:17px;height:17px}.room-name-field input{height:44px;margin:0!important;border:0!important;outline:none!important;background:transparent!important;box-shadow:none!important}.room-name-field input:focus,.room-name-field input:focus-visible{border:0!important;outline:none!important;box-shadow:none!important}
#room-category-wrap{display:grid;gap:7px;margin-top:14px}#room-category-wrap[hidden]{display:none}#new-channel-category{width:100%;height:44px;padding:0 12px;border:1px solid #354055;border-radius:11px;outline:0;background:#0e1219;color:#e8ebf2;box-shadow:inset 0 2px 8px #0003}#new-channel-category:focus{border-color:#7974ff;box-shadow:0 0 0 3px #746cff1c}
#channel-creator-error{min-height:17px;margin:10px 28px 0;color:#ff8792;font-size:10px}
.room-creator-actions{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:4px;padding:18px 28px 25px;border-top:1px solid #2d3544;background:#0c10161f}.room-creator-actions button{height:43px;margin:0!important}.room-creator-actions #room-creator-submit{position:relative;border:1px solid #8a83ff;background:linear-gradient(135deg,#7770ff,#6559df)!important;box-shadow:0 10px 25px #5148c755;color:#fff;font-weight:750;transition:.18s}.room-creator-actions #room-creator-submit::after{content:"→";margin-left:10px}.room-creator-actions #room-creator-submit:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 13px 30px #5148c777}.room-cancel{padding:0 17px!important;border:1px solid #374052!important;background:#171c25!important;color:#9da6b7!important;box-shadow:none!important}.room-cancel:hover{border-color:#505b70!important;background:#242a36!important;color:#fff!important}
@media(max-width:560px){.room-creator-head{grid-template-columns:42px minmax(0,1fr) 32px;padding:22px 20px 17px}.room-creator-symbol{width:42px;height:42px;border-radius:13px}.room-type-picker{grid-template-columns:1fr;margin-inline:20px}.room-type-picker label>span{min-height:58px}.room-creator-step,#room-name-label,#room-category-wrap{margin-inline:20px}.room-name-field{margin-inline:20px}.room-creator-actions{padding-inline:20px}}
.channel-settings-card{width:min(500px,100%)!important;overflow:hidden;padding:0!important;border:1px solid #3a4356!important;border-radius:20px!important;background:linear-gradient(155deg,#202633,#151922 70%)!important;box-shadow:0 30px 95px #000c!important;text-align:left!important}.channel-settings-head{display:grid;grid-template-columns:46px minmax(0,1fr) 34px;align-items:start;gap:13px;padding:24px 26px 20px;border-bottom:1px solid #303848;background:radial-gradient(circle at 10% 0,#6179a918,transparent 46%)}.channel-settings-symbol{display:grid;width:46px;height:46px;place-items:center;border:1px solid #4c5b72;border-radius:14px;background:linear-gradient(145deg,#29364a,#202939);color:#aebcd1;box-shadow:0 9px 23px #090c124d}.channel-settings-symbol .vix-icon{width:20px;height:20px}.channel-settings-head small{display:block;margin:2px 0 5px;color:#7f8ca1;font-size:8px;font-weight:850;letter-spacing:.13em}.channel-settings-head h1{margin:0!important;color:#f4f6fa;font-size:23px;letter-spacing:-.04em}.channel-settings-head p{margin:5px 0 0!important;color:#8792a5!important;font-size:10px}.channel-settings-head>button{display:grid;width:34px;height:34px;margin:0;padding:0;border:1px solid #394255;border-radius:10px;background:#171c25;color:#929caf;font-size:20px;box-shadow:none}.channel-settings-head>button:hover{border-color:#566177;background:#242b37;color:#fff;transform:rotate(4deg)}.channel-settings-body{padding:22px 26px 25px}.channel-settings-body>label{margin:0 0 7px;color:#929daf;font-size:9px;font-weight:850;letter-spacing:.07em}.channel-settings-field{display:flex;align-items:center;height:46px;border:1px solid #364155;border-radius:11px;background:#0e1219;box-shadow:inset 0 2px 8px #0003;transition:.18s}.channel-settings-field:focus-within{border-color:#56647c;box-shadow:0 0 0 3px #8fa4c20e,inset 0 2px 8px #0003}.channel-settings-field>span{display:grid;width:45px;height:28px;place-items:center;border-right:1px solid #2c3443;color:#8e9aaf}.channel-settings-field>span .vix-icon{width:17px;height:17px}.channel-settings-field input{height:44px;margin:0!important;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important}.channel-settings-field input:focus,.channel-settings-field input:focus-visible{border:0!important;outline:0!important;box-shadow:none!important}#channel-settings-error{min-height:18px;margin:8px 0 0!important;color:#ff818d!important;font-size:10px}.channel-settings-save{height:43px;margin:4px 0 18px!important;border:1px solid #7d83e8!important;border-radius:10px!important;background:linear-gradient(135deg,#6670e8,#5762d4)!important;color:#fff;font-weight:750;box-shadow:0 9px 23px #313a9b4d}.channel-settings-save:hover{filter:brightness(1.1);transform:translateY(-1px)}.channel-settings-danger{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px;border:1px solid #673744;border-radius:12px;background:linear-gradient(145deg,#2b2028,#211a20)}.channel-settings-danger strong,.channel-settings-danger small{display:block}.channel-settings-danger strong{color:#f2d5da;font-size:11px}.channel-settings-danger small{margin-top:4px;color:#967d84;font-size:9px;line-height:1.4}.channel-settings-danger #channel-delete{width:auto;height:34px;margin:0;padding:0 13px;border:1px solid #8a3d4c;border-radius:8px;background:#49252d;color:#ffb0ba;font-size:10px;font-weight:750;box-shadow:none}.channel-settings-danger #channel-delete:hover{background:#612b36;color:#fff;transform:translateY(-1px)}@media(max-width:520px){.channel-settings-head{grid-template-columns:40px minmax(0,1fr) 32px;padding:21px 19px 17px}.channel-settings-symbol{width:40px;height:40px}.channel-settings-body{padding:19px}.channel-settings-danger{grid-template-columns:1fr}.channel-settings-danger #channel-delete{width:100%}}

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 10px; background: #343a49; background-clip: padding-box; }

@media (max-width: 1050px) {
  .app { grid-template-columns: 68px 236px minmax(0, 1fr) 210px; }
}
@media (max-width: 840px) {
  .app { grid-template-columns: 64px 226px minmax(0, 1fr); }
  .members { display: none; }
  #messages { padding-inline: 20px; }
  .compose { padding-inline: 20px; }
}
@media (max-width: 600px) {
  .app { grid-template-columns: 58px minmax(0, 1fr); }
  .channels { left: 58px; width: min(260px, calc(100vw - 58px)); }
  .header { padding-inline: 12px; }
  #messages { padding: 18px 12px 10px; }
  .welcome { padding: 18px; }
  .compose { padding: 4px 12px 14px; }
}