:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#e9f6ff;background:#050715;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh}.ambient{position:fixed;inset:0;background:radial-gradient(ellipse at 15% 15%,#7624d044,transparent 36%),radial-gradient(ellipse at 80% 70%,#00f5ff22,transparent 42%),radial-gradient(ellipse at 60% 0,#fc2d9333,transparent 36%);pointer-events:none}.app{position:relative;display:grid;grid-template-columns:76px 255px minmax(340px,1fr) 245px;min-height:100vh;max-height:100vh;overflow:hidden}.rail,.sidebar,.members{background:#080e22d9;border-right:1px solid #6b8fff32;backdrop-filter:blur(20px)}.rail{padding:18px 10px;display:flex;align-items:center;flex-direction:column;gap:20px}.logo,.orb{display:grid;place-items:center;border-radius:19px;background:#111b37;color:#eafaff;border:1px solid #6f86e366;box-shadow:0 0 16px #1d79ff33}.logo{width:56px;height:56px;font-size:29px;border-color:#ffd76a;box-shadow:0 0 20px #ffcb4144}.orb{width:49px;height:49px;font-size:24px;cursor:pointer}.orb.active,.orb:hover{border-color:#00e5ff;box-shadow:0 0 23px #00e5ff70}.sidebar{display:flex;flex-direction:column;padding:23px 13px 14px;gap:9px}.brand{padding:4px 10px 20px}.brand small,header small,.heroText small,.stats small{letter-spacing:2px;color:#6cdaff;font-size:10px}.brand h1{font-size:17px;letter-spacing:1px;line-height:1.5;margin:10px 0}.brand span{display:block;color:#e27dff;letter-spacing:4px}.server{padding:15px 11px;border:1px solid #b347ff70;background:linear-gradient(110deg,#8925da32,#00e5ff14);border-radius:12px;font-size:13px;font-weight:700}.server span,.section b{float:right}.section{color:#9e8bd6;font-size:10px;letter-spacing:2px;margin:25px 10px 4px}.channel{display:block;text-align:left;width:100%;padding:12px 14px;border:0;border-radius:9px;background:transparent;color:#a6bbda;cursor:pointer;font-size:14px}.channel:hover,.channel.selected{background:linear-gradient(90deg,#2e87ff55,#9d32f922);color:white;box-shadow:inset 3px 0 #3cefff}.voice span{float:right;color:#b57cff;font-size:9px}.profile{display:flex;gap:9px;align-items:center;margin-top:auto;border:1px solid #48588d66;background:#111c37;border-radius:13px;padding:10px 7px}.avatar{width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;border:1px solid #ffcc60;background:linear-gradient(135deg,#40331c,#15152c);color:#ffe6a0;font-size:12px;font-weight:900;box-shadow:0 0 12px #ffbf4d44}.profile strong,.member strong{font-size:11px;display:block}.profile small,.member small{font-size:10px;color:#69d7b4;display:block;margin-top:5px}.profile button{background:none;border:0;color:#b2d3ff;margin-left:auto;cursor:pointer}.main{display:flex;flex-direction:column;min-height:0;padding:24px 24px 13px;gap:17px}header{display:flex;align-items:center;justify-content:space-between}header h2{font-size:23px;margin:6px 0}.headerActions{display:flex;gap:18px;color:#93f6ff;align-items:center}.live{font-size:10px;letter-spacing:1px;color:#7bffb9}.hero{height:238px;flex-shrink:0;position:relative;overflow:hidden;display:flex;align-items:center;border:1px solid #777aff77;border-radius:19px;background:radial-gradient(circle at 26% 50%,#622bd38a,transparent 32%),radial-gradient(circle at 85% 30%,#ff248c66,transparent 45%),linear-gradient(110deg,#10133d,#071f3b);box-shadow:inset 0 0 60px #3d72ff22,0 0 26px #9037ff24}.planet{margin-left:7%;width:156px;height:156px;border:2px solid #70f6ff;border-radius:50%;display:grid;place-items:center;font-size:77px;background:radial-gradient(circle at 40% 30%,#3465bd,#0b0d34 70%);box-shadow:0 0 24px #29e5ff,0 0 60px #bd3bff77,inset 0 0 26px #42c7ff}.heroText{z-index:1;margin-left:6%}.heroText h2{font-size:clamp(20px,2.4vw,35px);letter-spacing:1px;margin:12px 0}.heroText em{font-style:normal;color:#75f2ff;text-shadow:0 0 15px #27c7ff}.heroText p{color:#d2b9ff}.rings{position:absolute;width:360px;height:360px;border:1px solid #6bc9ff44;border-radius:50%;right:-130px;top:-120px;box-shadow:0 0 0 35px #9b43ff11,0 0 0 70px #00ffff0b}.chat{flex:1;overflow:auto;min-height:90px;display:flex;flex-direction:column;gap:16px;padding:5px 7px}.message{display:flex;gap:13px}.message .bubble{max-width:100%}.message strong{font-size:13px;color:#89dfff}.message time{font-size:10px;color:#8393b8;margin-left:12px}.message p{font-size:14px;line-height:1.5;margin:6px 0;overflow-wrap:anywhere}.purple{border-color:#e37bff;background:#39225e;color:#f3b8ff}.cyan{border-color:#65e8ff;background:#15435b;color:#a1f4ff}.composer{display:flex;align-items:center;gap:12px;border:1px solid #4f91ff99;border-radius:14px;background:#111b39;padding:11px 15px;box-shadow:0 0 19px #2075ff27}.composer span{color:#e084ff}.composer input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:white;font-size:14px}.composer button{border:0;border-radius:8px;background:linear-gradient(90deg,#3a96ff,#a447ff,#f344b0);color:white;font-weight:800;padding:11px 16px;cursor:pointer}.disclaimer{font-size:10px;text-align:center;color:#8d98b6}.members{border-left:1px solid #6384ff33;border-right:0;padding:30px 16px}.memberTitle{font-size:11px;letter-spacing:1px;color:#a1b6ff;margin-bottom:28px}.memberTitle span{float:right;color:#68f5ff}.member{display:flex;align-items:center;gap:11px;margin-bottom:23px}.stats{border:1px solid #39e5ff55;border-radius:13px;background:#0e244388;padding:17px 13px;margin-top:35px}.stats strong{display:block;font-size:12px;margin:12px 0;color:#e2b1ff}.meter{height:5px;background:#273454;border-radius:10px;margin-bottom:12px}.meter i{display:block;width:82%;height:100%;background:linear-gradient(90deg,#3eeeff,#f654cb);border-radius:10px}@media(max-width:1100px){.app{grid-template-columns:65px 220px minmax(300px,1fr)}.members{display:none}.main{padding:18px}}@media(max-width:680px){.app{grid-template-columns:55px minmax(0,1fr)}.sidebar{display:none}.rail{padding:15px 4px}.logo{width:45px;height:45px}.orb{width:42px;height:42px}.main{padding:14px;gap:12px}.hero{height:190px}.planet{width:90px;height:90px;font-size:43px}.heroText h2{font-size:19px}.headerActions{display:none}}

.authOverlay{position:fixed;inset:0;z-index:100;background:rgba(3,6,24,.88);backdrop-filter:blur(24px);display:grid;place-items:center;padding:20px}.authOverlay[hidden]{display:none}.authCard{width:min(440px,100%);display:flex;flex-direction:column;gap:16px;padding:36px;border:1px solid #41e8ff;border-radius:24px;background:linear-gradient(140deg,#141b45,#241139 70%,#071c32);box-shadow:0 0 55px #12d9ff55,0 0 90px #d439ff33;color:#fff}.authCard small{letter-spacing:2px;color:#73eaff}.authCard h2{font-size:24px;margin:4px 0 12px}.authLogo{text-align:center;font-size:60px}.authCard input{background:#09132b;border:1px solid #6e60ba;border-radius:10px;padding:14px;color:white;font-size:16px}.authCard input[hidden]{display:none}.authCard button{cursor:pointer;border:0;border-radius:10px;padding:13px;font-weight:800;color:white;background:linear-gradient(90deg,#0fcfff,#a04cff,#f13abb)}#authToggle{background:transparent;border:1px solid #7b6cc0}#authError{min-height:18px;color:#ff8fa9;margin:0}.logoutButton{margin-left:8px;background:#25123e;color:#fff;border:1px solid #a35afa;border-radius:8px;padding:7px;cursor:pointer}


/* MWCONNECT_HOLOGRAPHIC_MEMBERS_V1 */
.mwMemberOverlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(3, 7, 25, .86);
  backdrop-filter: blur(14px);
  display: grid;
  place-items: center;
  padding: 18px;
}

.mwMemberDialog {
  width: min(680px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  border: 1px solid #5ddfff;
  border-radius: 22px;
  padding: 25px;
  color: #fff;
  background: linear-gradient(135deg, #101c3b, #25143e 70%, #071d30);
  box-shadow: 0 0 55px #00dfff33, 0 0 80px #ad46ff22;
}

.mwMemberHeading {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 24px;
}

.mwMemberHeading small {
  color: #73eaff;
  letter-spacing: 1.6px;
  font-size: 10px;
}

.mwMemberHeading h2 {
  font-size: 26px;
  margin: 8px 0;
}

.mwMemberHeading p {
  color: #b7c8ed;
  margin: 0;
}

.mwMemberClose {
  align-self: flex-start;
  background: #172447;
  border: 1px solid #526ca4;
  border-radius: 10px;
  color: white;
  padding: 10px 14px;
  cursor: pointer;
}

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

.mwMemberRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: #101b37;
  border: 1px solid #304773;
  border-radius: 14px;
  padding: 14px;
}

.mwMemberIdentity,
.mwMemberActions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mwMemberIdentity strong,
.mwMemberIdentity small {
  display: block;
}

.mwMemberIdentity small {
  color: #79e5cf;
  margin-top: 5px;
  text-transform: capitalize;
}

.mwMemberAvatar {
  width: 42px;
  height: 42px;
  border: 1px solid #d9b45b;
  background: #312c25;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffe18c;
  font-weight: 800;
}

.mwMemberActions select {
  background: #172447;
  border: 1px solid #6c63ba;
  border-radius: 9px;
  padding: 9px;
  color: white;
  cursor: pointer;
}

.mwMemberRemove {
  border: 1px solid #f073a6;
  border-radius: 9px;
  background: #44203b;
  color: #ffc5da;
  padding: 10px 13px;
  cursor: pointer;
}

.mwProtected {
  color: #f7d883;
  font-size: 12px;
}

.mwMemberStatus {
  color: #ffb4ca;
  min-height: 18px;
  margin-top: 15px;
}

@media (max-width: 520px) {
  .mwMemberDialog { padding: 17px; }
  .mwMemberRow { align-items: flex-start; }
  .mwMemberActions { width: 100%; }
}


/* MWCONNECT_CONFIRM_DIALOG_V1 */
.mwConfirmOverlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 6, 22, .83);
  backdrop-filter: blur(12px);
}

.mwConfirmDialog {
  width: min(450px, 100%);
  padding: 30px;
  border: 1px solid #60dfff;
  border-radius: 20px;
  color: white;
  background: linear-gradient(135deg, #101c3b, #27163f);
  box-shadow: 0 0 55px #00ddff44, 0 0 65px #a84cff33;
}

.mwConfirmDialog h3 {
  margin: 0 0 16px;
  font-size: 23px;
}

.mwConfirmDialog p {
  color: #c6d4f2;
  line-height: 1.6;
  margin-bottom: 25px;
}

.mwConfirmActions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.mwConfirmActions button {
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
  color: white;
  font-weight: 700;
}

.mwConfirmCancel {
  background: #1b294b;
  border: 1px solid #52658f;
}

.mwConfirmAccept {
  background: linear-gradient(90deg, #168cdb, #9549e9);
  border: 1px solid #70dfff;
}

.mwConfirmDanger {
  background: #7b2048;
  border: 1px solid #f47ca9;
}


/* MWCONNECT_VIEWPORT_FIX_V1 */

/* Keep the application inside the visible browser viewport. */
html,
body {
  height: 100%;
  margin: 0;
}

.app {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}

/* Allow the main panels to shrink correctly. */
.rail,
.sidebar,
.main,
.members {
  min-height: 0;
}

/* Scroll the sidebar instead of clipping its contents. */
.sidebar {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Keep the message composer at the bottom. */
.main {
  overflow: hidden;
}

.chat {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

.composer,
.disclaimer {
  flex-shrink: 0;
}

/* Smaller screens get a slightly shorter welcome banner. */
@media (max-height: 750px) {
  .main {
    gap: 10px;
    padding-top: 14px;
    padding-bottom: 9px;
  }

  .hero {
    height: 170px;
  }
}

@media (max-height: 600px) {
  .hero {
    height: 115px;
  }

  .planet {
    width: 85px;
    height: 85px;
    font-size: 43px;
  }
}


/* MWCONNECT_COMMUNITY_RAIL_V1 */

.rail {
  min-height: 0;
  overflow: hidden;
  gap: 14px;
}

.mwCommunityRailList {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #4c74a8 transparent;
  padding: 5px 0;
}

.mwCommunityRailIcon {
  position: relative;
  width: 49px;
  height: 49px;
  min-height: 49px;
  border-radius: 17px;
  border: 1px solid #6478bb88;
  background: linear-gradient(135deg, #182449, #26183e);
  color: #e7faff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0 13px #3c71ff24;
  transition:
    border-radius .2s,
    border-color .2s,
    box-shadow .2s,
    transform .2s;
}

.mwCommunityRailIcon:hover {
  border-radius: 14px;
  transform: translateY(-1px);
  border-color: #56edff;
  box-shadow: 0 0 18px #00dfff70;
}

.mwCommunityRailIcon.active {
  border-radius: 14px;
  border-color: #70f5ff;
  background: linear-gradient(135deg, #164a71, #682c9b);
  box-shadow: 0 0 22px #00dfff88;
}

.mwCommunityRailIcon.active::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 30px;
  left: -11px;
  top: 9px;
  border-radius: 0 5px 5px 0;
  background: #77f7ff;
  box-shadow: 0 0 12px #00e5ff;
}

.rail > .orb {
  flex-shrink: 0;
}

@media (max-width: 680px) {
  .mwCommunityRailIcon {
    width: 42px;
    height: 42px;
    min-height: 42px;
    font-size: 12px;
  }

  .mwCommunityRailIcon.active::before {
    left: -7px;
    top: 6px;
  }
}


/* MWCONNECT_COLLAPSIBLE_CHANNELS_V1 */

.mwChannelCategory {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  padding: 8px 10px;
  margin-top: 18px;
  border-radius: 8px;
  transition: background .2s, color .2s;
}

.mwChannelCategory:hover {
  background: #3d56a322;
  color: #8cefff;
}

.mwCategoryArrow {
  display: inline-block;
  width: 13px;
  font-size: 16px;
  color: #70eaff;
  transition: transform .2s;
}

.mwCategoryName {
  flex: 1;
  font-size: 10px;
  letter-spacing: 1.5px;
}

.mwChannelCategory b {
  float: none;
  color: #80eaff;
  font-size: 15px;
}

.mwChannelCategory:focus-visible {
  outline: 2px solid #68eaff;
  outline-offset: 2px;
}

.mwCategoryCollapsed {
  opacity: .8;
}

/* Hide collapsed sections, including flex containers. */
.sidebar [hidden] {
  display: none !important;
}


/* MWCONNECT_FIXED_PROFILE_V1 */

.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0 !important;
  gap: 0;
}

.mwSidebarScroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 23px 13px 22px;
  scrollbar-width: thin;
  scrollbar-color: #6981a9 transparent;
}

.mwSidebarScroll > * {
  margin-bottom: 9px;
}

.mwSidebarScroll .section {
  margin-top: 25px;
}

.mwProfileDock {
  flex: 0 0 auto;
  width: 100%;
  padding: 10px 9px;
  border-top: 1px solid #65dfff55;
  background: linear-gradient(
    120deg,
    #101a37,
    #101029
  );
  box-shadow: 0 -6px 22px #00dfff12;
}

.mwProfileDock .profile {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 8px;
  border-radius: 11px;
}

.mwProfileDock .profile > div:nth-child(2) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.mwProfileDock .profile strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mwProfileDock .profile small {
  font-size: 9px;
}

.mwProfileDock .profile button {
  flex-shrink: 0;
  margin-left: 0;
  padding: 4px;
}

.mwProfileTools {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 7px;
}

.mwProfileTool {
  width: 32px;
  height: 29px;
  border: 1px solid #4a7ba777;
  border-radius: 8px;
  background: #19264b;
  color: #b8faff;
  font-size: 15px;
}

.mwProfileTool:disabled {
  opacity: .55;
  cursor: not-allowed;
}

@media (max-width: 680px) {
  .mwProfileDock {
    display: none;
  }
}


/* MWCONNECT_NO_COMMUNITY_DROPDOWN_V1 */

.server {
  cursor: default !important;
  user-select: none;
}

.server:hover {
  border-color: #b347ff70;
}


/* MWCONNECT_CREATE_DIALOG_V1 */

.mwCreateOverlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(2, 5, 20, .83);
  backdrop-filter: blur(9px);
}

.mwCreateDialog {
  box-sizing: border-box;
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 28px;
  border: 1px solid #54dfff;
  border-radius: 19px;
  background: linear-gradient(
    145deg,
    #111c3d,
    #190d36
  );
  box-shadow:
    0 0 45px #00cfff44,
    0 0 80px #ae35ff22;
  color: #f1faff;
}

.mwCreateDialog h2 {
  margin: 0;
  color: #75efff;
  font-size: 23px;
}

.mwCreateDialog p {
  margin: 0;
  color: #b8c7e8;
  font-size: 14px;
  line-height: 1.5;
}

.mwCreateInput {
  box-sizing: border-box;
  width: 100%;
  padding: 14px;
  border: 1px solid #548ac0;
  border-radius: 10px;
  background: #090f27;
  color: white;
  font: inherit;
  outline: none;
}

.mwCreateInput:focus {
  border-color: #65efff;
  box-shadow: 0 0 14px #00e5ff44;
}

.mwCreateError {
  color: #ff99b9;
  font-size: 12px;
}

.mwCreateError:empty {
  display: none;
}

.mwCreateActions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.mwCreateActions button {
  padding: 11px 20px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}

.mwCreateCancel {
  border: 1px solid #61739d;
  background: #182345;
  color: white;
}

.mwCreateSubmit {
  border: 0;
  background: linear-gradient(
    110deg,
    #428fff,
    #d338cf
  );
  color: white;
}

.mwCreateSubmit:hover {
  filter: brightness(1.15);
}