/* V306 — Settings follows the same right-side drawer language as Profile. */
#settingsOverlayV300{
  position:fixed;
  inset:0;
  z-index:300000;
  display:block;
  visibility:hidden;
  pointer-events:none;
  padding:0;
  background:#02070a00;
  transition:visibility 0s linear .24s,background .24s ease;
}

#settingsOverlayV300.open{
  display:block;
  visibility:visible;
  pointer-events:auto;
  background:#02070a52;
  transition-delay:0s;
}

.settingsWindowV300{
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:clamp(360px,24vw,460px);
  height:100dvh;
  max-height:none;
  grid-template-rows:auto minmax(0,1fr) auto;
  border:0;
  border-left:2px solid #40535f;
  background:#081117;
  box-shadow:inset 3px 0 #030609,-18px 0 55px #000c;
  transform:translateX(105%);
  transform-origin:right center;
  transition:transform .24s cubic-bezier(.22,.8,.26,1);
}

#settingsOverlayV300.open .settingsWindowV300{transform:translateX(0)}

.settingsWindowV300>header{
  min-height:64px;
  padding:10px 14px;
  border-bottom:1px solid #354853;
  background:linear-gradient(180deg,#111b23,#090f14);
}

.settingsWindowV300 h2{margin:3px 0 0;font-size:20px}
.settingsWindowV300 header small{font-size:11px;letter-spacing:.2em}
.settingsWindowV300 header button{
  width:42px;
  height:42px;
  border-color:#875047;
  background:#281513;
}

.settingsBodyV300{grid-template-columns:112px minmax(0,1fr)}
.settingsTabsV300{padding:6px;background:#070d11}
.settingsTabsV300 button{
  min-height:55px;
  padding:7px 8px;
  font-size:11px;
  letter-spacing:.06em;
}
.settingsTabsV300 button small{margin-top:4px;font-size:11px;line-height:1.25}

.settingsPanelsV300{
  padding:13px 12px;
  background:radial-gradient(circle at 100% 0,#17304055,transparent 45%),#0a1218;
  scrollbar-color:#6a7880 #071016;
  scrollbar-width:thin;
}
.settingsPanelsV300 h3{margin-bottom:8px;padding-bottom:8px;font-size:11px}
.settingsRowV300,.settingsToggleV300,.settingsSelectV300{
  min-height:58px;
  grid-template-columns:minmax(0,1fr) 116px;
  gap:9px;
  padding:8px 6px;
}
.settingsRowV300 b,.settingsToggleV300 b,.settingsSelectV300>span{font-size:11px}
.settingsToggleV300 small{font-size:11px}
.settingsSelectV300 select{min-width:0;width:116px;padding:0 6px;font-size:11px}
.settingsBindingsV300{gap:6px;margin-top:10px;padding:9px}
.settingsBindingsV300 span{font-size:11px}
.settingsServerNoteV300{margin-top:10px;padding:9px;font-size:11px}

.settingsWindowV300>footer{
  min-height:82px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  padding:8px 12px;
  border-top:1px solid #30434d;
  background:#070d11;
}
.settingsWindowV300>footer span{
  grid-column:1/-1;
  margin:0;
  color:#738791;
  font-size:11px;
}
.settingsWindowV300>footer button{min-width:0;width:100%;height:36px;font-size:11px}

@media(max-width:760px){
  .settingsWindowV300{width:min(440px,92vw)}
}

@media(pointer:coarse) and (orientation:landscape) and (max-height:520px){
  .settingsWindowV300{
    right:0;
    width:min(430px,92vw);
    height:100dvh;
    max-height:none;
    transform:translateX(105%);
  }
  #settingsOverlayV300.open .settingsWindowV300{transform:translateX(0)}
  .settingsWindowV300>header{min-height:48px;padding:5px 9px}
  .settingsWindowV300 h2{font-size:17px}
  .settingsBodyV300{grid-template-columns:100px minmax(0,1fr)}
  .settingsTabsV300 button{min-height:42px;padding:4px 7px}
  .settingsPanelsV300{padding:7px 9px}
  .settingsRowV300,.settingsToggleV300,.settingsSelectV300{min-height:44px;padding:4px}
  .settingsWindowV300>footer{min-height:48px;padding:5px 9px}
  .settingsWindowV300>footer span{display:none}
  .settingsWindowV300>footer button{height:36px}
}