:root{
  --color-accent: #6aa6ff;
  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --color-danger: #ff5d6c;
  --color-text-primary: #e9eefc;
  --color-text-secondary: #a7b3d6;
  --color-surface-1: #070a12;
  --color-surface-2: #0b1220;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;

  --accent: #6aa6ff;
  --accent-rgb: 106,166,255;

  --bg0: #070a12;
  --bg1: #0b1220;

  --stroke: rgba(255,255,255,.08);
  --stroke2: rgba(255,255,255,.12);

  --text: #e9eefc;
  --muted: #a7b3d6;
  --danger: #ff5d6c;
  --ok: #4ade80;
  --away: #fbbf24;

  --blur: 8px;
  --glass: 70;     /* 0-100 */
  --bgOpacity: 35; /* 0-100 */

  --radius2: 18px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

*{ box-sizing:border-box; }
html, body { height: 100%; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1000px 600px at 20% 0%, #142449 0%, var(--bg1) 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow:hidden;
}

/* Background theme layer */
.bgLayer{
  position:fixed;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity: calc(var(--bgOpacity) / 100);
  filter: blur(var(--blur));
  transform: scale(1.06);
  pointer-events:none;
  z-index:0;
}
.bgVignette{
  position:fixed;
  inset:0;
  background:
    radial-gradient(1200px 800px at 50% 10%, rgba(0,0,0,.0), rgba(0,0,0,.55)),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
  pointer-events:none;
  z-index:0;
}

/* Shell */
.tsShell{
  position:relative;
  z-index:1;
  height:100dvh;
  min-height: 100vh;
  display:flex;
  flex-direction:column;
}

.tsTopBar{
  height: 52px;
  border-bottom: 1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(var(--blur));
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 12px;
  gap: 12px;
}

.topLeft{
  display:flex;
  align-items:center;
  gap: 16px;
  min-width: 0;
}
.appBrand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap: 2px;
  font-weight: 1100;
  letter-spacing: .2px;
}
.brandText{ white-space: nowrap; }
.brandWave{
  display:flex;
  align-items:center;
  gap: 2px;
  height: 14px;
  pointer-events:none;
}
.brandWave > span{
  display:block;
  width: 2px;
  height: var(--h, 8px);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .88);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), .45);
  transform-origin: center;
  animation: brandOsc 1.8s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes brandOsc{
  0%, 100% { transform: scaleY(.45); opacity: .55; }
  45% { transform: scaleY(1.15); opacity: 1; }
  65% { transform: scaleY(.75); opacity: .82; }
}

.crumb{
  display:flex;
  align-items:baseline;
  gap: 10px;
  min-width: 0;
}
.crumbLabel{
  color: var(--muted);
  font-weight: 1000;
  font-size: 12px;
}
.crumbValue{
  font-weight: 1100;
}
.crumbDesc{
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 60ch;
}

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

/* Layout */
.tsMain{
  flex:1;
  display:grid;
  grid-template-columns: 72px minmax(0, 1fr) 320px;
  gap: 8px;
  padding: 8px;
  min-height: 0;
}

/* Discord-like server rail */
.tsRail{
  background: rgba(8,12,22,.78);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  overflow: auto;
}
.railList{
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 10px;
}
.railBtn{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 1000;
  transition: border-radius .14s ease, background .14s ease, transform .14s ease, border-color .14s ease;
  position: relative;
}
.railBtn:hover{
  border-radius: 12px;
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), .45);
  background: rgba(var(--accent-rgb), .22);
}
.railBtn.active{
  border-radius: 12px;
  border-color: rgba(var(--accent-rgb), .55);
  background: rgba(var(--accent-rgb), .30);
}
.railBtnAdd{
  color: var(--ok);
  background: rgba(74,222,128,.12);
  border-color: rgba(74,222,128,.34);
}
.railBtnAdd:hover{
  background: rgba(74,222,128,.22);
  border-color: rgba(74,222,128,.52);
}
.railDmBtn{
  color: #dce7ff;
}
.railLabel{
  font-size: 12px;
  letter-spacing: .2px;
}
.railDmBadge{
  position: absolute;
  right: -4px;
  top: -4px;
  min-width: 17px;
  height: 17px;
  border-radius: 999px;
  padding: 0 5px;
  border: 1px solid rgba(var(--accent-rgb), .55);
  background: rgba(var(--accent-rgb), .95);
  color: #fff;
  font-size: 10px;
  font-weight: 1100;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.railDmBadge.mention{
  border-color: rgba(255,93,108,.65);
  background: rgba(255,93,108,.95);
}
.railSep{
  width: 30px;
  height: 2px;
  border-radius: 99px;
  background: rgba(255,255,255,.14);
}

/* Left center area: channels + chat + user strip */
.tsLeft{
  display:grid;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "tree chat"
    "user chat";
  gap: 8px;
  min-height: 0;
}
.panelTree{ grid-area: tree; }
.panelChat{ grid-area: chat; }
.panelUserStrip{ grid-area: user; }

.panel{
  background: rgba(17,28,49, calc(var(--glass)/100));
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  backdrop-filter: blur(var(--blur));
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  overflow:hidden;
  min-height: 0;
}

.panelHead{
  padding: 12px 12px;
  border-bottom: 1px solid var(--stroke);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  background: rgba(0,0,0,.10);
}
.panelTitle{
  font-weight: 1100;
  letter-spacing: .2px;
}
.panelSub{
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.treeHeadTools{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.panelTree{
  display:flex;
  flex-direction:column;
  background: rgba(10,16,30, calc(var(--glass)/100));
}
.panelTree .treeWrap{
  padding: 10px 10px 8px;
  overflow:auto;
  flex:1;
}

.treeGroupTitle{
  margin: 10px 8px 8px;
  color: var(--muted);
  font-weight: 1100;
  font-size: 11px;
  letter-spacing: .7px;
  opacity:.9;
}
.treeGroupToggle{
  cursor: pointer;
  user-select: none;
}
.treeGroupToggle:hover{
  color: var(--accent);
}
.treeList{
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.treeItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor:pointer;
  background: rgba(255,255,255,.03);
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.treeItem:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.treeItem.active{
  background: rgba(var(--accent-rgb), .12);
  border-color: rgba(var(--accent-rgb), .28);
}
.treeItem.active .tiName,
.treeItem.active .tiIcon,
.treeItem.active .tiMeta{
  color: var(--accent);
}
.treeItem.locked{ opacity:.75; }
.treeItem.disabled{
  opacity: .62;
  cursor: not-allowed;
}
.treeItem .roomQuickCfg{
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.treeItem:hover .roomQuickCfg,
.treeItem:focus-within .roomQuickCfg{
  opacity: 1;
  pointer-events: auto;
}
.roomQuickCfg{
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  border-radius: 8px;
  font-size: 13px;
}
.roomSettingsModal{
  width: min(1180px, 97vw);
}
.roomSettingsSplit{
  grid-template-columns: 290px 1fr;
  min-height: min(78vh, 820px);
}
.roomSettingsSidebar{
  background: linear-gradient(180deg, rgba(8,10,20,.86), rgba(8,10,20,.58));
}
.roomSettingsRoomsBlock{
  margin-bottom: 12px;
  background: rgba(0,0,0,.24);
}
.roomSettingsSidebar .splitNavBtn{
  border-radius: 8px;
  padding: 9px 10px;
}
.roomSettingsSidebar .splitNavBtn.active{
  color: #fff;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.06);
}
.roomSettingsSidebar .splitNavBtn.roomDangerTab{
  color: rgba(255,109,118,.95);
}
.roomSettingsSidebar .splitNavBtn.roomDangerTab.active{
  color: #fff;
  background: rgba(255,93,108,.20);
  border-color: rgba(255,93,108,.35);
}
.roomSettingsContent{
  padding: 22px 26px;
}
.roomSettingsContent .splitPane{
  gap: 10px;
}
.roomSettingsContent .formBlock{
  background: rgba(0,0,0,.10);
}
.roomSettingsActions{
  margin-top: 6px;
}
.roomSettingsActions .primaryBtn{
  width: auto;
  min-width: 160px;
}
.roomDangerBlock{
  border-color: rgba(255,93,108,.30);
  background: rgba(255,93,108,.06);
}
.tiLeft{ display:flex; align-items:center; gap: 8px; }
.tiIcon{ width: 18px; display:inline-flex; justify-content:center; color: var(--muted); font-weight: 1100; }
.tiName{ font-weight: 1000; }
.tiMeta{ color: var(--muted); font-size: 12px; }
.dmInlineBadge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 18px;
  height: 18px;
  padding: 0 7px 0 5px;
  border-radius: 999px;
  border: 1px solid rgba(255,93,108,.45);
  background: rgba(255,93,108,.20);
  color: var(--text);
  font-size: 11px;
  line-height: 1;
  vertical-align: middle;
}
.dmInlineBadge::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #ff5d6c;
  box-shadow: 0 0 0 2px rgba(255,93,108,.22);
}
.dmInlineBadge.mention{
  border-color: rgba(255,64,89,.65);
  background: rgba(255,64,89,.28);
}
.tiBadge{
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  margin-right: 6px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), .35);
  background: rgba(var(--accent-rgb), .18);
  color: var(--text);
  font-size: 11px;
  text-align: center;
}
.tiBadge.mention{
  border-color: rgba(255,93,108,.45);
  background: rgba(255,93,108,.20);
}

.tinyHint{
  margin: 10px 10px 0;
  color: var(--muted);
  font-size: 12px;
  opacity:.75;
}
.voiceAudioSink{
  display: grid;
  gap: 6px;
}
.voiceVideoSink{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.voiceAudioItem{
  display: grid;
  gap: 4px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  padding: 6px;
  background: rgba(255,255,255,.02);
}
.voiceAudioItem .tiny{
  font-size: 11px;
}
.voiceAudioItem audio{
  width: 100%;
  height: 28px;
}
.voiceVideoItem{
  display: grid;
  gap: 6px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  padding: 6px;
  background: rgba(255,255,255,.02);
}
.voiceVideoItem.local{
  border-color: rgba(74,222,128,.35);
  background: rgba(74,222,128,.08);
}
.voiceVideoEl{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(0,0,0,.35);
}
.voiceScreenModalMount{
  width: 100%;
  min-height: 260px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: rgba(0,0,0,.4);
  padding: 6px;
}
.voiceScreenModalVideo{
  width: 100%;
  max-height: 76vh;
  border-radius: 8px;
  background: #000;
}
.voiceScreenModalControls{
  margin-top: 10px;
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 8px;
}
.voiceScreenModalControls input[type="range"]{
  width: 100%;
  margin: 0;
  accent-color: rgb(var(--accent-rgb));
}
.dangerMini{
  border-color: rgba(255,93,108,.45);
  background: rgba(255,93,108,.14);
}
.dangerMini:hover{
  border-color: rgba(255,93,108,.65);
  background: rgba(255,93,108,.22);
}
.treeItem.voiceActive{
  border-color: rgba(74,222,128,.35);
  background: rgba(74,222,128,.12);
}
.voiceUserRow{
  margin: 4px 0 2px 24px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.02);
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: visible;
}
.voiceUserRowPassive{
  opacity: .9;
  cursor: default;
}
.voiceUserRow.clickable{
  cursor: pointer;
}
.voiceUserRow.clickable:hover{
  border-color: rgba(var(--accent-rgb), .35);
  background: rgba(var(--accent-rgb), .12);
}
.voiceUserName{
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.voiceUserFlags{
  display: inline-flex;
  gap: 4px;
}
.voiceUserFlag{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,93,108,.45);
  background: rgba(255,93,108,.15);
  color: #ffd8dc;
  font-size: 11px;
  line-height: 1;
}
.voiceUserFlag.iconDeafen{
  border-color: rgba(255,174,89,.45);
  background: rgba(255,174,89,.15);
  color: #ffe2b8;
}
.voiceUserMeta{
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.voiceUserScreenBtn{
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 10px;
  border-color: rgba(74,222,128,.42);
  background: rgba(74,222,128,.14);
  white-space: nowrap;
}
.voiceUserScreenBtn:hover{
  border-color: rgba(74,222,128,.62);
  background: rgba(74,222,128,.22);
}
.voiceUserWave{
  display: flex;
  align-items: center;
  gap: 2px;
  height: 10px;
}
.voiceUserWave > span{
  width: 2px;
  height: var(--h, 8px);
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  opacity: .45;
  transform: scaleY(.42);
  transform-origin: center;
  transition: opacity .14s ease, transform .14s ease, box-shadow .14s ease;
}
.voiceUserWave.speaking > span{
  background: var(--ok);
  opacity: .98;
  box-shadow: 0 0 8px rgba(74,222,128,.35);
  animation: voiceUserTalkBars .9s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes voiceUserTalkBars{
  0%, 100% { transform: scaleY(.40); }
  45% { transform: scaleY(1.15); }
  68% { transform: scaleY(.70); }
}
.voiceVolumeTooltip{
  position: absolute;
  left: 8px;
  right: 8px;
  top: calc(100% + 6px);
  transform: none;
  width: auto;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(var(--accent-rgb), .30);
  background: rgba(9, 13, 24, .94);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 8px;
  z-index: 8;
  animation: voiceVolTooltipIn .14s ease-out;
}
.voiceVolumeTooltipTitle{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .03em;
  color: var(--muted);
  text-transform: uppercase;
}
.voiceVolumeTooltipValue{
  font-size: 11px;
  font-weight: 900;
  color: #e6edff;
}
.voiceVolumeTooltip input[type="range"]{
  grid-column: 1 / span 2;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin: 0;
  height: 18px;
  background: transparent;
  cursor: ew-resize;
  --fill: 100%;
}
.voiceVolumeTooltip input[type="range"]::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(to right,
    rgb(var(--accent-rgb)) 0%,
    rgb(var(--accent-rgb)) var(--fill),
    rgba(255,255,255,.22) var(--fill),
    rgba(255,255,255,.22) 100%);
}
.voiceVolumeTooltip input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), .9);
  background: #dce9ff;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .35);
}
.voiceVolumeTooltip input[type="range"]::-moz-range-track{
  height: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.22);
}
.voiceVolumeTooltip input[type="range"]::-moz-range-progress{
  height: 6px;
  border-radius: 999px;
  background: rgb(var(--accent-rgb));
}
.voiceVolumeTooltip input[type="range"]::-moz-range-thumb{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), .9);
  background: #dce9ff;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .35);
}
@keyframes voiceVolTooltipIn{
  from{
    opacity: 0;
    transform: translateY(-4px) scale(.98);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 900px){
  .voiceVolumeTooltip{
    left: 8px;
    right: 8px;
    width: auto;
    animation: voiceVolTooltipInMobile .14s ease-out;
  }
  @keyframes voiceVolTooltipInMobile{
    from{
      opacity: 0;
      transform: translateY(-4px) scale(.98);
    }
    to{
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}
.voiceUserContextMenu{
  position: fixed;
  width: min(250px, calc(100vw - 16px));
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(22,24,32,.98);
  box-shadow: 0 16px 34px rgba(0,0,0,.5);
  padding: 6px;
  z-index: 80;
  display: grid;
  gap: 2px;
  animation: voiceCtxIn .12s ease-out;
}
.voiceCtxItem{
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #edf2ff;
  font-size: 13px;
  font-weight: 760;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}
.voiceCtxItem:hover{
  background: rgba(255,255,255,.08);
}
.voiceCtxItem.disabled{
  color: rgba(238,243,255,.6);
  cursor: default;
}
.voiceCtxItem.disabled:hover{
  background: transparent;
}
.voiceCtxItem.danger{
  color: #ff6f76;
}
.voiceCtxDivider{
  height: 1px;
  margin: 4px 3px;
  background: rgba(255,255,255,.12);
}
.voiceCtxArrow::after{
  content: "›";
  opacity: .9;
}
.voiceCtxToggle{
  align-items: center;
}
.voiceCtxVolWrap{
  padding: 6px 10px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  margin: 2px 0;
}
.voiceCtxVolHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(238,243,255,.86);
  margin-bottom: 6px;
}
.voiceCtxVolWrap input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin: 0;
  height: 18px;
  background: transparent;
  --fill: 100%;
}
.voiceCtxVolWrap input[type="range"]::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(to right,
    rgb(var(--accent-rgb)) 0%,
    rgb(var(--accent-rgb)) var(--fill),
    rgba(255,255,255,.22) var(--fill),
    rgba(255,255,255,.22) 100%);
}
.voiceCtxVolWrap input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), .9);
  background: #dce9ff;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .35);
}
.voiceCtxVolWrap input[type="range"]::-moz-range-track{
  height: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.22);
}
.voiceCtxVolWrap input[type="range"]::-moz-range-progress{
  height: 6px;
  border-radius: 999px;
  background: rgb(var(--accent-rgb));
}
.voiceCtxVolWrap input[type="range"]::-moz-range-thumb{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), .9);
  background: #dce9ff;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .35);
}
.voiceCtxCheck{
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.05);
  display: inline-block;
}
.voiceCtxCheck.on{
  border-color: rgba(var(--accent-rgb), .65);
  background: rgba(var(--accent-rgb), .3);
  position: relative;
}
.voiceCtxCheck.on::after{
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 6px;
  height: 9px;
  border: solid #dce9ff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.voiceCtxIdBadge{
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 1000;
  color: rgba(230,236,255,.95);
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
}
.voiceCtxSubWrap{
  position: relative;
  padding-right: 8px;
  margin-right: -8px;
}
.voiceCtxSubMenu{
  position: absolute;
  left: 100%;
  top: -6px;
  width: min(260px, calc(100vw - 20px));
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(22,24,32,.98);
  box-shadow: 0 16px 34px rgba(0,0,0,.5);
  padding: 6px;
  z-index: 82;
  display: grid;
  gap: 3px;
  max-height: min(66vh, 420px);
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(6px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}
.voiceCtxSubWrap:hover .voiceCtxSubMenu,
.voiceCtxSubWrap:focus-within .voiceCtxSubMenu,
.voiceCtxSubMenu:hover{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}
.voiceCtxRoleBtn{
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #edf2ff;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}
.voiceCtxRoleBtn:hover{
  background: rgba(255,255,255,.08);
}
.voiceCtxRoleBtn.disabled{
  opacity: .62;
  pointer-events: none;
}
.voiceCtxRoleLeft{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.voiceCtxRoleDot{
  width: 11px;
  height: 11px;
  border-radius: 999px;
  flex: 0 0 11px;
}
.voiceCtxRoleName{
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.voiceCtxSubHint{
  padding: 6px 8px;
  color: rgba(238,243,255,.72);
  font-size: 12px;
}
.voiceCtxSubHint.err{
  color: #ff8f98;
}
@media (max-width: 980px){
  .voiceCtxSubMenu{
    left: 0;
    top: calc(100% + 6px);
    transform: translateY(6px);
  }
  .voiceCtxSubWrap:hover .voiceCtxSubMenu,
  .voiceCtxSubWrap:focus-within .voiceCtxSubMenu,
  .voiceCtxSubMenu:hover{
    transform: translateY(0);
  }
}
@keyframes voiceCtxIn{
  from{
    opacity: 0;
    transform: translateY(-4px) scale(.98);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Chat */
.panelChat{
  display:flex;
  flex-direction:column;
  background: rgba(17,28,49, calc(var(--glass)/100));
}
.chatHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.chatTabs{ display:flex; gap: 6px; }
.tab{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  font-weight: 1000;
  font-size: 12px;
}
.tab.active{
  border-color: rgba(var(--accent-rgb), .35);
  background: rgba(var(--accent-rgb), .14);
  color: var(--accent);
}
.tab:hover{ filter: brightness(1.05); }
.tabBadge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  margin-left: 6px;
  border: 1px solid rgba(255,93,108,.45);
  background: rgba(255,93,108,.20);
  color: var(--text);
  font-size: 11px;
  line-height: 1;
}

.chatScopeBar{
  padding: 8px 12px;
  border-bottom: 1px solid var(--stroke);
  background: rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.scopeLeft{ display:flex; align-items:baseline; gap: 10px; min-width:0; }
.scopeLabel{ color: var(--muted); font-weight: 1000; font-size: 12px; }
.scopeValue{ font-weight: 1100; }
.scopeValue{ color: var(--accent); }
.scopeHint{
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 40ch;
}
.scopeRight{ display:flex; gap: 8px; }
.miniBtn{
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight: 1000;
  font-size: 12px;
  cursor:pointer;
}
.miniBtn:hover{ filter: brightness(1.05); }
.miniBtn.active{
  border-color: rgba(var(--accent-rgb), .45);
  background: rgba(var(--accent-rgb), .18);
  color: #d9e8ff;
}
.miniBtn:disabled{
  opacity: .55;
  cursor: not-allowed;
}

.chatScroll{
  overflow:auto;
  padding: 12px;
  flex:1;
}

.msgBubble{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  margin-bottom: 10px;
}
.msgBubble.mention{
  border-color: rgba(var(--accent-rgb), .38);
  background: rgba(var(--accent-rgb), .12);
}
.msgBubble.deleted{
  opacity: .72;
}
.msgMeta{
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
  display:flex;
  align-items:center;
  gap: 8px;
  justify-content: space-between;
}
.msgMeta .name{
  color: rgba(233,238,252,.95);
  font-weight: 1100;
}
.msgActions{
  display: inline-flex;
  gap: 6px;
}
.msgActBtn{
  padding: 3px 8px;
  font-size: 11px;
}
.msgBody{
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.35;
}
.msgAttachment{
  margin-top: 8px;
  display: grid;
  gap: 8px;
}
.msgAttachment a{
  color: var(--accent);
  text-decoration: none;
  font-size: 12px;
}
.msgAttachment img{
  max-width: min(360px, 80vw);
  border-radius: 12px;
  border: 1px solid var(--stroke);
}
.sysLine{
  color: var(--muted);
  font-size: 12px;
  margin: 10px 0;
  opacity:.85;
}

.composer{
  height: 62px;
  border-top: 1px solid var(--stroke);
  padding: 10px 12px;
  display:flex;
  align-items:center;
  gap: 10px;
  background: rgba(0,0,0,.14);
  backdrop-filter: blur(var(--blur));
}
.composerInput{
  flex:1;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  outline:none;
  background: rgba(0,0,0,.25);
  color: var(--text);
}
.sendBtn{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-rgb), .35);
  background: rgba(var(--accent-rgb), .16);
  color: var(--text);
  font-weight: 1100;
  cursor:pointer;
}
.sendBtn:hover{ filter: brightness(1.05); }
.attachBtn{
  min-width: 44px;
  text-align: center;
  font-size: 18px;
  padding: 10px;
}
.composerAttachPreview{
  padding: 8px 12px 10px;
  border-top: 1px solid var(--stroke);
  background: rgba(0,0,0,.12);
}
.capInner{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
}
.capInner img{
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--stroke);
}
.capMeta{
  min-width: 0;
  flex: 1;
}
.capName{
  font-size: 12px;
  font-weight: 1100;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.capSub{
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.imagePreviewWrap{
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 74vh;
  overflow: auto;
}
.imagePreviewWrap img{
  max-width: 100%;
  max-height: 72vh;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  transform-origin: center center;
  transition: transform .08s linear;
  cursor: zoom-in;
}

/* User strip panel */
.panelUserStrip{
  overflow: visible;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
  z-index: 40;
}
.userStrip{
  min-height: 72px;
  display:flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0,0,0,.12);
  overflow: visible;
}

.userAvatar{
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1100;
}
.userMeta{ min-width:0; flex:1; }
.userNameRow{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width:0;
}
.userName{
  font-weight: 1100;
  font-size: 13px;
  line-height: 1.1;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 22ch;
}
.userTag{
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}
.userBtns{
  display:inline-flex;
  gap: 8px;
}
.userControls{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  width: auto;
  flex-wrap: nowrap;
}
.voiceActionRow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  justify-self: auto;
}
.voiceActionRow #btnVoiceLeave{
  width: 34px;
  height: 34px;
  border-radius: 11px;
  padding: 0;
}
.userControls .miniBtn,
.userControls .iconBtn{
  white-space: nowrap;
}
.userStrip .iconBtn.big{
  width: 34px;
  height: 34px;
  border-radius: 11px;
}
.userStrip .iconBtn.big svg{
  width: 17px;
  height: 17px;
}
.userStrip .voiceMediaMenuWrap > summary.iconBtn{
  width: 34px;
  height: 34px;
  border-radius: 11px;
}
.userStrip .statusBtn{
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 12px;
  gap: 7px;
  min-height: 30px;
}
.userStrip .statusDot{
  width: 9px;
  height: 9px;
}
.voiceQuickBar{
  border-top: 1px solid var(--stroke);
  padding: 10px 12px;
  background: rgba(9,14,24,.55);
  display: grid;
  gap: 8px;
}
.voiceQuickHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.voiceQuickTitle{
  font-size: 11px;
  font-weight: 1000;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.voiceStatePill{
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 2px 8px;
  background: rgba(255,255,255,.04);
}
.voiceStatePill.stateOn{
  border-color: rgba(74,222,128,.45);
  background: rgba(74,222,128,.14);
  color: #b9f5d1;
}
.voiceStatePill.stateMid{
  border-color: rgba(251,191,36,.45);
  background: rgba(251,191,36,.14);
  color: #ffe8ad;
}
.voiceStatePill.stateOff{
  border-color: rgba(255,93,108,.35);
  background: rgba(255,93,108,.12);
  color: #ffc6cc;
}
.voiceQuickMeta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  color: var(--muted);
  min-width: 0;
}
.voiceMetaStrong{
  color: var(--text);
  font-weight: 900;
  max-width: 25ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.voiceQuickActions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.voiceQuickActions .miniBtn{
  width: 100%;
}
.voiceMediaMenuWrap{
  position: relative;
  width: 100%;
}
.voiceMediaMenuWrapTop{
  width: auto;
}
.voiceMediaMenuWrap > summary{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.voiceMediaMenuWrap > summary::-webkit-details-marker{
  display: none;
}
.voiceMediaMenu{
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  width: 180px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--stroke2);
  background: rgba(12, 18, 31, .96);
  box-shadow: 0 14px 34px rgba(0,0,0,.36);
  display: grid;
  gap: 6px;
  z-index: 1400;
}
.voiceMediaMenuWrapTop .voiceMediaMenu{
  width: 210px;
}

/* Status picker */
.statusPick{ position:relative; }
.statusBtn{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight: 1000;
  font-size: 12px;
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap: 8px;
  max-width: 190px;
}
.statusBtn:hover{ filter: brightness(1.05); }
.statusDot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  box-shadow: 0 0 0 4px rgba(255,255,255,.10);
}
.chev{ opacity:.8; }

.statusMenu{
  position:absolute;
  left:0;
  bottom: 46px;
  width: 190px;
  background: rgba(17,28,49, calc(var(--glass)/100));
  border: 1px solid var(--stroke2);
  border-radius: 14px;
  backdrop-filter: blur(var(--blur));
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  overflow:hidden;
  z-index: 9;
}
.statusItem{
  width:100%;
  text-align:left;
  padding: 10px 12px;
  border:0;
  background: rgba(0,0,0,.08);
  color: var(--text);
  font-weight: 1000;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap: 10px;
}
.statusItem:hover{ background: rgba(var(--accent-rgb), .10); }

.sd{
  width: 10px;
  height: 10px;
  border-radius: 999px;
}
.sd.online{ background: var(--ok); box-shadow: 0 0 0 4px rgba(74,222,128,.14); }
.sd.away{ background: var(--away); box-shadow: 0 0 0 4px rgba(251,191,36,.14); }
.sd.invisible{ background: rgba(255,255,255,.25); box-shadow: 0 0 0 4px rgba(255,255,255,.08); }

/* Right users */
.panelUsers{
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.panelUsers .usersList{
  padding: 10px;
  overflow:auto;
  flex: 1;
  min-height: 0;
}
.userGroupTitle{
  margin: 10px 8px 8px;
  color: var(--muted);
  font-weight: 1100;
  font-size: 11px;
  letter-spacing: .7px;
  opacity:.9;
}
.userRow{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid transparent;
  cursor: pointer;
}
.userRow:hover{
  background: rgba(var(--accent-rgb), .08);
  border-color: rgba(var(--accent-rgb), .30);
}
.userMiniAvatar{
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 1100;
  flex: 0 0 26px;
}
.userInfo{ min-width:0; }
.userNick{ font-weight: 1100; }
.userDot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(74,222,128,.14);
}
.userRole{ color: var(--muted); font-size: 12px; margin-top: 2px; }

.loadingSkeleton{
  display: grid;
  gap: 6px;
}
.skLine{
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.14), rgba(255,255,255,.06));
  background-size: 240px 100%;
  animation: skMove 1.15s linear infinite;
}
.skLine.short{ width: 60%; }
@keyframes skMove{
  from{ background-position: -240px 0; }
  to{ background-position: 240px 0; }
}

/* Buttons */
.iconBtn{
  width: 34px; height: 34px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.iconBtn svg{
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.iconBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), .35);
  background: rgba(var(--accent-rgb), .08);
}
.iconBtn:disabled{
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}
.iconBtn.danger{
  border-color: rgba(255,93,108,.25);
}
.iconBtn.danger:hover{
  border-color: rgba(255,93,108,.45);
  background: rgba(255,93,108,.12);
}
.iconBtn.warn{
  border-color: rgba(255,174,89,.30);
}
.iconBtn.warn:hover{
  border-color: rgba(255,174,89,.52);
  background: rgba(255,174,89,.14);
}
.iconBtn.big{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  font-size: 16px;
}
.iconBtn.big svg{
  width: 20px;
  height: 20px;
}
.iconBtn.active{
  border-color: rgba(var(--accent-rgb), .45);
  background: rgba(var(--accent-rgb), .18);
  color: var(--accent);
}

.pill{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 12px;
}

/* Modals */
.modalOverlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
  z-index: 50;
}
.modalCard{
  width: min(960px, 96vw);
  background: rgba(17,28,49, calc(var(--glass)/100));
  border: 1px solid var(--stroke2);
  border-radius: 18px;
  backdrop-filter: blur(var(--blur));
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  overflow:hidden;
}
.modalCard.wide{
  width: min(1320px, 98vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.modalCard.authCard{
  width: min(520px, 94vw);
}
.modalHead{
  padding: 14px 14px;
  border-bottom: 1px solid var(--stroke);
}
.rowBetween{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.modalTitle{ font-weight: 1200; letter-spacing: .2px; }
.modalSub{ margin-top: 4px; color: var(--muted); font-size: 12px; }
.modalBody{
  padding: 14px 14px;
  overflow: auto;
}
.modalFoot{
  padding: 12px 14px;
  border-top: 1px solid var(--stroke);
  color: var(--muted);
  font-size: 12px;
}
.splitModal .modalBody{
  padding: 0;
  overflow: hidden;
}
.splitLayout{
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: min(72vh, 760px);
}
.splitSidebar{
  border-right: 1px solid var(--stroke);
  background: rgba(5,8,16,.45);
  padding: 14px 10px;
  overflow: auto;
}
.splitGroupTitle{
  margin: 2px 8px 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 1100;
  letter-spacing: .3px;
}
.splitNavBtn{
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-weight: 1000;
  cursor: pointer;
  margin-bottom: 4px;
}
.splitNavBtn:hover{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.splitNavBtn.active{
  border-color: rgba(var(--accent-rgb), .28);
  background: rgba(var(--accent-rgb), .16);
  color: var(--accent);
}
.splitContent{
  padding: 14px;
  overflow: auto;
}
.splitPane{
  display: none;
}
.splitPane.active{
  display: grid;
  gap: 12px;
}
.formGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.formBlock{
  padding: 12px;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: rgba(0,0,0,.12);
}
.authCard .formBlock{
  max-width: 460px;
  margin: 0 auto;
}
.formTitle{ font-weight: 1200; margin-bottom: 10px; }
input{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  outline:none;
  background: rgba(0,0,0,.25);
  color: var(--text);
  margin-bottom: 10px;
}
select{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  outline:none;
  background: rgba(0,0,0,.25);
  color: var(--text);
  margin-bottom: 10px;
}
.passWrap{
  position: relative;
  margin-bottom: 10px;
}
.passWrap input{
  padding-right: 44px;
  margin-bottom: 0;
}
.passToggle{
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor: pointer;
}
.passToggle:hover{
  border-color: rgba(var(--accent-rgb), .35);
  background: rgba(var(--accent-rgb), .10);
}
.passToggle.active::after{
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 14px;
  border-top: 2px solid rgba(255,93,108,.95);
  transform: rotate(-28deg);
  transform-origin: center;
  pointer-events: none;
}
.primaryBtn{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-rgb), .35);
  background: rgba(var(--accent-rgb), .16);
  color: var(--text);
  font-weight: 1200;
  cursor:pointer;
}
.primaryBtn:hover{ filter: brightness(1.05); }
.primaryBtn.ghosty{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.hint{ color: var(--muted); font-size: 12px; min-height: 16px; }
.tiny{ color: var(--muted); font-size: 12px; opacity:.85; }
.linkBtn{
  width: 100%;
  margin-top: 6px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 1000;
  cursor: pointer;
  padding: 6px 0 2px;
}
.linkBtn:hover{
  filter: brightness(1.1);
}

.themeGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.themeCol{
  padding: 12px;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: rgba(0,0,0,.12);
}
.field{ display:block; margin-bottom: 10px; }
.field span{
  display:block;
  color: var(--muted);
  font-weight: 1100;
  font-size: 12px;
  margin-bottom: 6px;
}
.field span input[type="checkbox"]{
  margin-left: 10px;
  vertical-align: middle;
}
.field input[type="color"]{ height: 42px; padding: 0; border-radius: 14px; }
.field input[type="range"]{ margin: 6px 0 0; }

input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.08);
  position: relative;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
  flex: 0 0 auto;
}
input[type="checkbox"]::after{
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e7eeff;
  box-shadow: 0 1px 1px rgba(0,0,0,.25);
  transition: transform .14s ease;
}
input[type="checkbox"]:checked{
  border-color: rgba(var(--accent-rgb), .65);
  background: rgba(var(--accent-rgb), .86);
}
input[type="checkbox"]:checked::after{
  transform: translateX(18px);
}
input[type="checkbox"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .22);
}
input[type="checkbox"]:disabled{
  opacity: .5;
  cursor: not-allowed;
}

.row{ display:flex; gap: 10px; align-items:center; }
.rowTight{ margin-top: 8px; }
.rowTight .primaryBtn{ width:auto; padding: 10px 12px; }

.previewCard{
  height: 180px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  position:relative;
  overflow:hidden;
}
.previewLine{
  height: 14px;
  width: 80%;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  margin: 18px;
}
.previewLine.short{ width: 55%; }
.previewChip{
  position:absolute;
  right: 16px;
  bottom: 16px;
  width: 110px;
  height: 34px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .16);
  border: 1px solid rgba(var(--accent-rgb), .35);
}
.voiceMeter{
  width: 100%;
  height: 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  overflow: hidden;
  margin-top: 10px;
  margin-bottom: 8px;
}
.voiceMeterFill{
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--ok), var(--accent));
  transition: width .08s linear;
}

.adminGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.adminCol{
  padding: 12px;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: rgba(0,0,0,.12);
}
.tableWrap{
  border: 1px solid var(--stroke);
  border-radius: 16px;
  overflow:auto;
  background: rgba(0,0,0,.12);
  max-height: 380px;
}
.table{
  width:100%;
  border-collapse: collapse;
  min-width: 740px;
}
.table th, .table td{
  padding: 10px 10px;
  border-bottom: 1px solid var(--stroke);
  font-size: 13px;
}
.table th{
  color: var(--muted);
  font-weight: 1200;
  letter-spacing: .2px;
  text-align:left;
}
.badge{
  display:inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  color: var(--muted);
  font-size: 12px;
}
.badge.ok{ border-color: rgba(74,222,128,.35); color: rgba(74,222,128,.95); }
.badge.bad{ border-color: rgba(255,93,108,.35); color: rgba(255,93,108,.95); }
code{
  background: rgba(0,0,0,.25);
  border: 1px solid var(--stroke);
  padding: 2px 6px;
  border-radius: 10px;
}

/* DM picker */
.dmList{
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: rgba(0,0,0,.12);
  max-height: 360px;
  overflow: auto;
  padding: 8px;
}
.dmUserRow{
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor: pointer;
  margin-bottom: 6px;
}
.dmUserRow:last-child{ margin-bottom: 0; }
.dmUserRow:hover{
  border-color: rgba(var(--accent-rgb), .35);
  background: rgba(var(--accent-rgb), .10);
}
.dmUserRow.active{
  border-color: rgba(var(--accent-rgb), .50);
  background: rgba(var(--accent-rgb), .16);
}
.dmUserMain{
  min-width: 0;
}
.dmUserName{
  font-weight: 1100;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dmUserMeta{
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}
.roomAclList{
  max-height: 180px;
}
.roomAclRow{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.03);
}
.roomAclRow:last-child{
  margin-bottom: 0;
}
.roomAclRow:hover{
  border-color: rgba(var(--accent-rgb), .26);
}
.roomAclRow input[type="checkbox"]{
  margin: 0 0 0 auto;
  order: 2;
}
.roomAclRow span{
  order: 1;
  min-width: 0;
  flex: 1;
}
.soundEventList{
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.soundEventRow{
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 260px);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
}
.soundEventToggle{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: space-between;
  font-size: 13px;
}
.soundEventToggle input[type="checkbox"]{
  order: 2;
  margin-left: auto;
}
.soundEventToggle span{
  order: 1;
  min-width: 0;
  flex: 1;
}
.soundEventVol{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.soundEventVol input[type="range"]{
  width: 100%;
}
@media (max-width: 820px){
  .soundEventRow{
    grid-template-columns: 1fr;
  }
}
.primaryBtn.danger{
  border-color: rgba(255,93,108,.45);
  background: rgba(255,93,108,.18);
  color: #ffdfe2;
}
.primaryBtn.danger:hover{
  filter: brightness(1.06);
}
.permItem{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.03);
  margin-bottom: 6px;
}
.permItem input[type="checkbox"]{
  order: 2;
}
.permItem span{
  order: 1;
  min-width: 0;
  flex: 1;
}
.permItem:last-child{ margin-bottom: 0; }
.permItem:hover{
  border-color: rgba(var(--accent-rgb), .24);
  background: rgba(var(--accent-rgb), .08);
}
.roleBadge{
  display:inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  color: var(--muted);
  font-size: 11px;
  margin-right: 4px;
  margin-bottom: 4px;
}

/* Profile modal */
.profileGrid{
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap: 14px;
}
.profileCard{
  padding: 12px;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  gap: 12px;
}
.profileAvatar{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1200;
  font-size: 22px;
}
.profileMain{ min-width:0; }
.profileName{
  font-weight: 1200;
  font-size: 18px;
  line-height: 1.1;
}
.profileRole{
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}
.profileFields{
  padding: 12px;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: rgba(0,0,0,.12);
}
.profileRoleList{
  min-height: 36px;
  padding: 8px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
}
.profileFields .formTitle{
  margin-top: 10px;
}
.keybindPanel{
  display: grid;
  gap: 12px;
}
.voiceKeybindList{
  display: grid;
  gap: 10px;
}
.voiceKbRow{
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255,255,255,.02);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.voiceKbRow.editing{
  border-color: rgba(var(--accent-rgb), .45);
  background: rgba(var(--accent-rgb), .10);
}
.voiceKbAction{
  min-width: 0;
}
.voiceKbActionTitle{
  font-weight: 1100;
  margin-bottom: 4px;
}
.voiceKbBind{
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.voiceKbPill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.28);
  font-size: 12px;
  font-weight: 1000;
}
.voiceKbSwitch{
  position: relative;
  display: inline-flex;
  width: 46px;
  height: 26px;
}
.voiceKbSwitch input{
  opacity: 0;
  width: 0;
  height: 0;
}
.voiceKbSwitch span{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  transition: background .14s ease, border-color .14s ease;
}
.voiceKbSwitch span::before{
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dbe8ff;
  transition: transform .14s ease;
}
.voiceKbSwitch input:checked + span{
  border-color: rgba(var(--accent-rgb), .6);
  background: rgba(var(--accent-rgb), .28);
}
.voiceKbSwitch input:checked + span::before{
  transform: translateX(20px);
}

/* Responsive */
@media (max-width: 1050px){
  .tsMain{ grid-template-columns: 64px 1fr; }
  .tsRight{ display:none; }
  .tsLeft{
    grid-template-columns: 250px minmax(0, 1fr);
  }
  .splitLayout{ grid-template-columns: 1fr; min-height: auto; }
  .splitSidebar{
    border-right: 0;
    border-bottom: 1px solid var(--stroke);
    display: flex;
    gap: 6px;
    overflow: auto;
    padding: 10px;
  }
  .splitGroupTitle{ display: none; }
  .splitNavBtn{
    width: auto;
    white-space: nowrap;
    margin-bottom: 0;
  }
}
@media (max-width: 840px){
  .tsMain{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .tsRail{
    flex-direction: row;
    justify-content: flex-start;
    padding: 8px;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .railList{
    display: inline-flex;
    gap: 8px;
    width: auto;
  }
  .railSep{
    width: 2px;
    height: 24px;
    flex: 0 0 auto;
  }
  .railBtn{
    width: 40px;
    height: 40px;
    border-radius: 13px;
    flex: 0 0 auto;
  }
  .tsLeft{
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, .42fr) minmax(0, 1fr) auto;
    grid-template-areas:
      "tree"
      "chat"
      "user";
    gap: 10px;
  }
  .panelUserStrip{ margin-bottom: 10px; }
  .userStrip{
    min-height: 66px;
    display:flex;
    align-items: center;
    padding: 10px;
    gap: 8px;
  }
  .crumbDesc{ display:none; }
  .userBtns{ gap: 6px; }
  .userControls{
    gap: 6px;
    min-width: 0;
    width: auto;
    justify-content: flex-end;
  }
  .voiceActionRow{
    justify-self: auto;
  }
  .statusBtn{ max-width: 150px; }
  .statusMenu{ width: 150px; }
  .voiceQuickActions{
    grid-template-columns: 1fr;
  }
  .voiceKbRow{
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .voiceKbBind{
    justify-content: flex-start;
  }
}