@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(static/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(static/fonts/inter-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(static/fonts/inter-cyrillic-400-normal.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(static/fonts/inter-latin-500-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(static/fonts/inter-cyrillic-500-normal.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(static/fonts/space-grotesk-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(static/fonts/space-grotesk-latin-500-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(static/fonts/space-grotesk-latin-700-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
:root{
  --bg:#080810;
  --surface:#0f0f1a;
  --surface-2:#161626;
  --border:rgba(255,255,255,.09);
  --border-hover:rgba(255,255,255,.2);
  --text:#dddde8;
  --text-muted:#8c8ca8;
  --text-dim:#585870;
  --accent:#7b5ea7;
  --accent-light:#a78bda;
  --accent-hover:#c3aef0;
  --accent-blue:#3d6b9e;
  --accent-cyan:#4a9ead
}
*{
  box-sizing:border-box;
  margin:0;
  padding:0
}
@keyframes stopShake{
  0%,100%{
    transform:rotate(0)
  }
  25%{
    transform:translateX(-1px) rotate(-1deg)
  }
  50%{
    transform:rotate(1deg)
  }
  75%{
    transform:translateX(1px) rotate(-1deg)
  }
}
html,body{
  overflow-x:hidden
}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.25
}
img{
  filter:brightness(0) invert(88%)
}
button,input,select{
  color:var(--text);
  font:inherit
}
button{
  appearance:none;
  background:transparent;
  border:0;
  cursor:pointer
}
button:disabled{
  cursor:default;
  opacity:.45
}
select:disabled{
  color:var(--text);
  opacity:1
}
input,select{
  background:var(--bg);
  border:0;
  box-shadow:none;
  outline:0
}
select{
  direction:rtl;
  transition:color .12s ease-out
}
select:hover,button:hover{
  color:var(--accent-hover)
}
option{
  background:var(--bg)
}
.text-select{
  align-items:center;
  color:var(--text);
  cursor:pointer;
  display:inline-flex;
  gap:.2rem;
  line-height:1.2;
  min-width:0;
  position:relative
}
.text-select::before{
  content:"▾";
  flex:0 0 auto;
  font-size:1em;
  line-height:1;
  pointer-events:none;
  transform:scale(1.2)
}
.text-select-display{
  min-width:0;
  overflow:hidden;
  pointer-events:none;
  text-overflow:ellipsis;
  white-space:nowrap
}
.text-select:is(:hover,:focus-within){
  color:var(--accent-hover)
}
.text-select>select{
  cursor:pointer;
  direction:ltr;
  height:100%;
  inset:0;
  opacity:0;
  position:absolute;
  width:100%
}
.text-select>select:disabled{
  cursor:default
}
.text-select:has(>select:disabled){
  cursor:default;
  opacity:.45
}
#dot-grid{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0
}
main{
  margin:clamp(1rem,4vh,3rem) auto;
  max-width:32rem;
  width:calc(100% - 1rem);
  position:relative;
  z-index:1;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.5)
}
header{
  align-items:center;
  display:flex;
  justify-content:space-between;
  gap:.6rem;
  padding:.65rem .9rem;
  background:var(--surface-2);
  border-bottom:1px solid var(--border)
}
.header-left{
  align-items:center;
  display:flex;
  gap:.6rem;
  min-width:0
}
.console-dots{
  display:flex;
  gap:.3rem;
  flex:0 0 auto
}
.console-dots>span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--border-hover)
}
.console-body{
  padding:1rem 1rem 1.2rem
}
.logo{
  align-items:center;
  color:var(--text);
  display:flex;
  gap:.3rem;
  text-decoration:none;
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:700
}
.logo:hover{
  color:var(--accent-hover)
}
.logo>img{
  height:2rem;
  width:2rem
}
.server-stats,.server-hint,.stream-hint{
  font-size:.75rem
}
.version{
  align-self:center;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:3px;
  color:var(--text-muted);
  font-family:'JetBrains Mono',monospace;
  font-size:.62rem;
  letter-spacing:.06em;
  padding:.1rem .35rem
}
.server-selection{
  align-items:flex-end;
  display:flex;
  flex-direction:column
}
.server-select-row{
  justify-content:flex-end;
  min-height:1.3rem
}
.server-select-display{
  font-size:.85rem;
  margin-right:.25rem;
  max-width:16rem
}
.server-hint,.stream-hint{
  background:var(--surface);
  border:1px solid var(--border-hover);
  display:none;
  padding:.15rem .35rem;
  text-align:left;
  white-space:pre-wrap;
  width:max-content;
  z-index:2
}
.server-hint{
  left:calc(100% + .45rem);
  max-width:min(18rem,calc(100vw - 1rem));
  position:absolute;
  top:0
}
.stream-hint{
  line-height:1.35;
  position:fixed
}
.stream-hint.is-visible{
  display:block
}
.server-select-row:is(:focus-within,:hover) .server-hint{
  display:block
}
.server-stats{
  color:var(--text-muted);
  margin-right:.25rem
}
.motd{
  background:rgba(224,193,58,.08);
  border:1px solid rgba(224,193,58,.45);
  border-radius:4px;
  color:#d7c66a;
  font-size:.95rem;
  line-height:1.35;
  margin:.85rem 0 0;
  padding:.55rem .7rem;
  text-align:center;
  white-space:pre-wrap
}
[hidden]{
  display:none!important
}
.custom-server{
  align-items:center;
  display:grid;
  gap:.45rem;
  grid-template-columns:minmax(0,1fr) auto;
  margin:.8rem .5rem 0
}
.custom-server>button{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:4px;
  height:2rem;
  justify-self:start;
  padding:0 .8rem;
  transition:background .12s ease-out,border-color .12s ease-out,color .12s ease-out;
  white-space:nowrap
}
.custom-server>button:hover{
  background:var(--surface);
  border-color:var(--accent-light);
  color:var(--accent-hover)
}
.stream-panel{
  min-height:20.9rem;
  position:relative
}
.stream-panel{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  margin:1rem .5rem 0;
  padding-bottom:1.2rem
}
.first-source-selection{
  margin:1.8rem auto 0;
  position:relative
}
.first-source-selection>h2,.stream-panel>h2{
  color:var(--text);
  line-height:1;
  text-align:center;
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:700
}
.first-source-selection>h2{
  margin-bottom:1.4rem
}
.stream-panel>h2{
  flex:0 0 auto;
  margin-bottom:.45rem
}
.first-source-selection>div:first-of-type{
  display:flex;
  gap:.5rem;
  justify-content:center
}
.start-tip{
  color:var(--text-muted);
  font-size:.72rem;
  line-height:1.35;
  margin:2rem auto;
  max-width:28rem;
  text-align:center
}
.tab-audio-hint{
  color:var(--text-dim);
  display:none;
  font-size:.62rem;
  left:0;
  line-height:1.3;
  margin:.75rem auto 0;
  max-width:26rem;
  pointer-events:none;
  position:absolute;
  right:0;
  text-align:center
}
.tab-audio-hint.is-visible{
  display:block
}
.source-choice{
  align-items:center;
  display:flex;
  flex:1 1 0;
  flex-direction:column;
  gap:.2rem;
  min-width:0;
  position:relative
}
.source-choice>button{
  align-items:center;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  justify-content:flex-start;
  min-height:7rem;
  padding:.2rem .25rem;
  width:100%
}
.source-choice>button>span{
  align-items:center;
  display:flex;
  justify-content:center;
  min-height:2.3rem;
  width:100%
}
.source-choice>button>span.is-select-placeholder{
  visibility:hidden
}
.source-choice>button:hover>img{
  transform:scale(1.05)
}
.source-choice>button.is-browser-disabled{
  color:var(--text-dim);
  cursor:not-allowed
}
.source-choice>button.is-browser-disabled:hover>img{
  transform:none
}
.source-choice>button.is-browser-disabled img{
  filter:brightness(0) invert(55%);
  opacity:.55
}
.source-choice img{
  display:block;
  height:clamp(6rem,calc((100vw - 3rem)/3),9.4rem);
  object-fit:contain;
  transition:transform .12s ease-out;
  width:clamp(6rem,calc((100vw - 3rem)/3),9.4rem)
}
.source-choice span,.source-label-select{
  font-size:.82rem;
  font-weight:600;
  line-height:1.15;
  max-width:100%;
  overflow-wrap:anywhere;
  text-align:center;
  white-space:normal
}
.source-label-select{
  direction:ltr;
}
.source-label-select-wrap{
  bottom:.2rem;
  justify-content:center;
  left:.25rem;
  max-width:none;
  min-height:2.3rem;
  position:absolute;
  right:.25rem;
  width:auto
}
.source-label-select-display{
  overflow-wrap:anywhere;
  text-align:center;
  white-space:normal;
  width:100%
}
.url-wrap{
  flex:0 0 auto;
  margin:0 -.5rem;
  position:relative
}
.url-wrap input,.custom-server input,.add-source-button{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:4px;
  transition:background .12s ease-out,border-color .12s ease-out,color .12s ease-out
}
.url-wrap input,.custom-server input{
  height:2rem;
  line-height:1.25;
  min-width:0;
  padding:.35rem .45rem;
  text-align:center
}
.url-wrap input{
  cursor:pointer;
  width:100%
}
.custom-server input{
  height:1.65rem;
  text-align:left;
  width:100%
}
:is(.url-wrap,.custom-server) input:is(:focus,:hover),.add-source-button:hover{
  background:var(--surface-2);
  border-color:var(--accent-light);
  color:var(--accent-hover)
}
.custom-server input::placeholder{
  color:var(--text-dim);
  opacity:1
}
.link-actions{
  align-items:center;
  display:flex;
  flex:0 0 auto;
  gap:.75rem;
  justify-content:space-between;
  margin:-.25rem -.5rem 0
}
.link-actions span,#newLink{
  font-size:.75rem
}
.link-actions span{
  color:var(--text-muted);
  min-width:0
}
#newLink{
  flex:0 0 auto;
  text-align:right
}
.stream-panel #sources{
  display:grid;
  flex:0 0 auto;
  gap:.45rem;
  margin:1.4rem -.5rem 0
}
.add-sources{
  align-items:center;
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  gap:.45rem;
  margin:1.4rem 0
}
.add-sources:empty{
  display:none
}
.add-source-button{
  align-items:center;
  direction:ltr;
  display:inline-flex;
  font-size:.82rem;
  font-weight:600;
  gap:.35rem;
  justify-content:center;
  line-height:1.15;
  max-width:100%;
  min-height:1.9rem;
  padding:.35rem .65rem;
  text-align:center;
  white-space:normal
}
.add-source-button img{
  flex:0 0 1rem;
  height:1rem;
  object-fit:contain;
  width:1rem
}
.add-source-mic{
  display:inline-flex;
  max-width:100%
}
.add-source-mic>button{
  width:100%
}
.add-source-hidden-select{
  height:1px;
  opacity:0;
  pointer-events:none;
  position:fixed;
  width:1px
}
#stop{
  align-items:center;
  background:#1a0e0e;
  border:1px solid #4a1d1d;
  border-radius:4px;
  color:#e0605f;
  display:inline-flex;
  flex:0 0 max-content;
  font-size:.92rem;
  font-weight:700;
  justify-content:center;
  line-height:1.15;
  margin:1.4rem auto;
  min-height:1.9rem;
  padding:.35rem .75rem;
  transition:background .12s ease-out,border-color .12s ease-out,color .12s ease-out;
  width:max-content;
  white-space:nowrap
}
#stop:hover{
  animation:stopShake .13s linear infinite;
  background:#261111;
  border-color:#e0605f;
  color:#ff7a7a
}
#stop:disabled{
  opacity:.7
}
.add-sources #stop{
  margin:0
}
.stream-panel #sources>.source-card{
  background:var(--surface);
  border-radius:8px;
  color:var(--source-fg,var(--text));
  display:flex;
  min-width:0;
  position:relative;
  width:100%
}
.source-card[data-source-kind=mic]{
  --source-bg-a:#0d1a1a;
  --source-bg-b:#0a1414;
  --source-icon-bg:#102524;
  --source-fg:#8fd4d0;
  --source-soft:var(--accent-cyan);
  --source-accent:var(--accent-cyan)
}
.source-card[data-source-kind=screen]{
  --source-bg-a:#0f1a29;
  --source-bg-b:#0b131d;
  --source-icon-bg:#13233a;
  --source-fg:#8fb8e0;
  --source-soft:var(--accent-blue);
  --source-accent:#5a8ec4
}
.source-card[data-source-kind=video]{
  --source-bg-a:#171025;
  --source-bg-b:#100b18;
  --source-icon-bg:#1f1730;
  --source-fg:var(--accent-light);
  --source-soft:var(--accent);
  --source-accent:var(--accent-light)
}
.source-icon{
  align-items:center;
  background:var(--source-icon-bg,var(--surface-2));
  border-radius:8px 0 0 8px;
  display:flex;
  flex:0 0 4.15rem;
  justify-content:center;
  padding:.55rem;
  position:relative;
  transition:background .12s ease-out
}
.source-icon:is(:hover,:focus-visible) .source-icon-img{
  transform:scale(1.1)
}
.source-icon-hint{
  background:var(--bg);
  border:1px solid var(--source-soft,var(--accent-light));
  color:var(--source-fg,var(--text));
  display:none;
  font-size:.75rem;
  line-height:1;
  padding:.2rem .35rem;
  position:absolute;
  right:calc(100% + .35rem);
  top:50%;
  transform:translateY(-50%);
  white-space:nowrap;
  z-index:3
}
.source-icon:is(:hover,:focus-visible) .source-icon-hint{
  display:block
}
.source-card.is-muted .source-icon{
  background:#241414
}
.source-icon-img{
  background:var(--source-fg,var(--accent-hover));
  display:block;
  height:2.7rem;
  transition:background .12s ease-out,transform .12s ease-out;
  width:2.7rem
}
.source-card.is-muted .source-icon-img{
  background:#d45a5a
}
.source-body{
  background:var(--source-bg-a,var(--surface));
  border-radius:0 8px 8px 0;
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  gap:.55rem;
  min-width:0;
  padding:.55rem
}
.source-body button,.source-body select,.source-body label,.source-body .text-select,.source-gain-value{
  color:var(--source-fg,var(--text))
}
.source-head{
  align-items:center;
  display:flex;
  gap:.6rem;
  justify-content:space-between;
  min-width:0
}
.source-control{
  font-size:1rem;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.source-head>.source-control{
  flex:1 1 auto;
  width:100%
}
.source-head>button.source-control{
  text-align:left
}
.source-remove{
  align-items:center;
  color:var(--source-soft,var(--text));
  display:flex;
  flex:0 0 1.25rem;
  font-size:1.45rem;
  justify-content:flex-end;
  line-height:1;
  min-height:1.45rem;
  width:1.25rem
}
.source-remove:hover{
  color:var(--source-fg,var(--accent-hover))
}
.source-settings{
  align-items:center;
  display:flex;
  gap:.55rem
}
.source-settings>label{
  white-space:nowrap
}
.source-preview{
  aspect-ratio:16/9;
  background:#050508;
  border:1px solid color-mix(in srgb,var(--source-soft,var(--accent-light)) 45%,var(--bg));
  border-radius:5px;
  display:block;
  min-width:0;
  object-fit:contain;
  width:100%
}
.source-gain{
  align-items:center;
  display:flex;
  flex:1 1 auto;
  gap:.45rem;
  min-width:6rem
}
.source-gain-meter{
  background:color-mix(in srgb,var(--source-bg-b,var(--surface)) 82%,var(--bg));
  border:1px solid color-mix(in srgb,var(--source-soft,var(--accent-light)) 55%,var(--bg));
  border-radius:2px;
  flex:1 1 auto;
  height:1rem;
  min-width:0;
  overflow:hidden;
  position:relative
}
.source-gain-meter::before{
  background:var(--source-fg,var(--accent-light));
  content:"";
  inset:0 auto 0 0;
  position:absolute;
  transition:width .07s linear;
  width:var(--source-level,0%)
}
.source-gain-meter::after{
  background:linear-gradient(90deg,transparent 0 68%,rgba(224,193,58,.34) 68% 85%,rgba(226,75,75,.42) 85%);
  content:"";
  inset:0;
  pointer-events:none;
  position:absolute
}
.source-gain-meter input[type=range]{
  appearance:none;
  background:transparent;
  cursor:pointer;
  height:100%;
  inset:0;
  min-width:0;
  position:absolute;
  width:100%
}
.source-gain-meter input[type=range]::-webkit-slider-runnable-track{
  background:transparent;
  border:0;
  height:1rem
}
.source-gain-meter input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  background:#f0eef8;
  border:1px solid var(--bg);
  border-radius:1px;
  height:1rem;
  margin-top:0;
  width:.35rem
}
.source-gain-meter input[type=range]::-moz-range-track{
  background:transparent;
  border:0;
  height:1rem
}
.source-gain-meter input[type=range]::-moz-range-progress{
  background:transparent
}
.source-gain-meter input[type=range]::-moz-range-thumb{
  background:#f0eef8;
  border:1px solid var(--bg);
  border-radius:1px;
  height:1rem;
  width:.35rem
}
.source-gain-value{
  font-size:.75rem;
  min-width:2.35rem;
  text-align:right
}
.source-mono{
  align-items:center;
  display:flex;
  font-size:.82rem;
  gap:.28rem;
  justify-content:flex-end;
  line-height:1;
  min-width:3.55rem;
  padding-right:.2rem
}
.stream-panel #sources input[type=checkbox]{
  appearance:none;
  background:color-mix(in srgb,var(--source-bg-b,var(--surface)) 80%,var(--source-accent,var(--accent-light)));
  border:1px solid var(--source-soft,var(--accent-light));
  border-radius:2px;
  cursor:pointer;
  display:inline-grid;
  flex:0 0 .85rem;
  height:.85rem;
  place-content:center;
  width:.85rem
}
.stream-panel #sources input[type=checkbox]::before{
  background:var(--bg);
  clip-path:polygon(14% 52%,0 66%,38% 100%,100% 20%,85% 8%,36% 68%);
  content:"";
  height:.5rem;
  transform:scale(0);
  transition:transform .08s ease-out;
  width:.55rem
}
.stream-panel #sources input[type=checkbox]:checked{
  background:var(--source-accent,var(--accent-light));
  border-color:var(--source-accent,var(--accent-light))
}
.stream-panel #sources input[type=checkbox]:checked::before{
  transform:scale(1)
}
.stream-bottom{
  align-items:center;
  bottom:0;
  display:flex;
  gap:.75rem;
  justify-content:space-between;
  left:0;
  margin:0 -.5rem;
  position:absolute;
  right:0
}
.stream-selects{
  align-items:center;
  display:flex;
  gap:.5rem;
  min-width:0
}
.stream-select{
  flex:0 1 auto;
  font-size:.75rem;
  max-width:15rem;
  min-width:0
}
.stream-select::before{
  margin-left:.05rem;
  order:1
}
.stream-select-icon{
  flex:0 0 .9rem;
  height:.9rem;
  object-fit:contain;
  width:.9rem
}
.video-quality-select{
  flex-shrink:0;
  max-width:none
}
.stream-info-wrap{
  cursor:help;
  display:flex;
  flex:0 0 auto;
  justify-content:flex-end;
  outline:0
}
.stream-info{
  color:var(--text-muted);
  font-size:.75rem
}
.main-footer{
  align-items:center;
  border-top:1px solid var(--border);
  display:flex;
  font-size:.75rem;
  gap:.45rem;
  margin:.5rem auto 0;
  padding:.25rem 0 0;
  width:100%
}
.main-footer>a{
  color:var(--text-muted);
  text-decoration:none
}
.language-select{
  font-size:.75rem;
  margin-left:auto;
  max-width:6rem;
  text-align:right
}
.patrons{
  align-items:center;
  display:flex;
  flex-direction:column;
  font-size:.68rem;
  gap:.45rem;
  line-height:1.35;
  margin:1rem auto 0;
  text-align:center
}
.patrons-header{
  color:#e0605f;
  font-weight:700
}
.patrons-list{
  display:flex;
  flex-wrap:wrap;
  gap:.2rem .55rem;
  justify-content:center
}
.patron-name{
  white-space:nowrap
}
.patrons-link{
  color:var(--text-muted);
  text-decoration:none
}
.patrons-link:hover{
  color:var(--text-muted)
}
.patron-tier4{
  color:#b56cff
}
.patron-tier3{
  color:#f28c28
}
.patron-tier2{
  color:var(--accent-light)
}
.patron-tier1{
  color:#fff
}
@media (max-width:540px){
  .stream-bottom{gap:.35rem}
  .stream-selects{gap:.35rem}
  .stream-select{max-width:8rem}
  .video-quality-select{
    flex-shrink:1;
    max-width:8rem
  }
  .custom-server{
    grid-template-columns:1fr
  }
}