/* R416 Notification preferences — flat grouping, real switches stay switches.
 * Existing private account preferences, disabled/loading state, security alerts
 * and device/browser push permission paths are preserved.
 */
html body[data-vr-notification-controls="r344"] .ncHeader{
  min-height:73px!important;
  gap:8px!important;
  padding:8px 13px!important;
  background:#050408!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:none!important
}
html body[data-vr-notification-controls="r344"] .ncIcon{
  display:grid!important;place-items:center!important;
  flex:0 0 44px!important;width:44px!important;height:44px!important;min-height:44px!important;
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important
}
html body[data-vr-notification-controls="r344"] .ncBrandName{font-size:18px!important}
html body[data-vr-notification-controls="r344"] .ncBrand h1{font-size:18px!important}
html body[data-vr-notification-controls="r344"] .ncMain{
  padding:10px 15px calc(83px + env(safe-area-inset-bottom,0px))!important
}
html body[data-vr-notification-controls="r344"] .ncIntro{
  display:flex!important;align-items:flex-start!important;
  gap:10px!important;margin:0!important;padding:8px 0!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important
}
html body[data-vr-notification-controls="r344"] .ncIntroIcon{
  flex:0 0 38px!important;height:38px!important;
  border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  font-size:23px!important
}
html body[data-vr-notification-controls="r344"] .ncIntro h2{font-size:16px!important;margin:0 0 4px!important}
html body[data-vr-notification-controls="r344"] .ncIntro p{font-size:12px!important;line-height:1.45!important}
html body[data-vr-notification-controls="r344"] .ncNavLinks{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;margin:7px 0!important;
  border-bottom:1px solid rgba(255,255,255,.1)!important
}
html body[data-vr-notification-controls="r344"] .ncNavLinks a{
  display:flex!important;align-items:center!important;
  min-width:0!important;min-height:45px!important;
  margin:0!important;padding:8px 4px!important;
  background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;
  color:var(--nc-accent,#c46dff)!important;
  text-decoration:none!important;
  font:770 clamp(10px,2.9vw,13px)/1.35 system-ui,sans-serif!important
}
html body[data-vr-notification-controls="r344"] .ncDeviceNote{
  font-size:11px!important;line-height:1.4!important;
  margin:5px 2px!important
}
html body[data-vr-notification-controls="r344"] .ncStatus{
  margin:9px 2px 4px!important;min-height:22px!important
}
html body[data-vr-notification-controls="r344"] .ncGroup{
  border:0!important;border-top:1px solid rgba(255,255,255,.14)!important;
  border-radius:0!important;background:transparent!important;box-shadow:none!important;
  margin:9px 0!important;padding:0!important;overflow:visible!important
}
html body[data-vr-notification-controls="r344"] .ncGroup h2{
  padding:14px 2px 8px!important;margin:0!important;
  border:0!important;font-size:15px!important
}
html body[data-vr-notification-controls="r344"] .ncRow{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  min-height:69px!important;gap:10px!important;
  padding:10px 2px!important;
  border:0!important;border-bottom:1px solid rgba(255,255,255,.065)!important;
  background:transparent!important;box-shadow:none!important
}
html body[data-vr-notification-controls="r344"] .ncRow strong{
  font-size:13px!important
}
html body[data-vr-notification-controls="r344"] .ncRow small{
  font-size:11px!important;line-height:1.4!important
}
/* Keep functional on/off switch with clear thumb, checked/disabled state.
 * Do not reset checkbox appearance or flatten it into a text-only label.
 */
html body[data-vr-notification-controls="r344"] .ncRow input[type="checkbox"]{
  min-width:49px!important;width:49px!important;height:29px!important;
  flex:0 0 49px!important
}
html body[data-vr-notification-controls="r344"] .ncFoot{
  padding:8px 2px!important;line-height:1.45!important
}
/* Auth is a real safety/permission gate. Never make it look like plain text. */
html body[data-vr-notification-controls="r344"] #ncLocked{
  border-color:var(--nc-line)!important
}
html body[data-vr-notification-controls="r344"] :is(.ncIcon,.ncNavLinks a,.ncRow input):focus-visible{
  outline:2px solid var(--nc-accent,#c774ff)!important;outline-offset:2px!important
}
@media(max-width:365px){
 html body[data-vr-notification-controls="r344"] .ncMain{padding-left:10px!important;padding-right:10px!important}
 html body[data-vr-notification-controls="r344"] .ncNavLinks a{font-size:10px!important}
}

/* Keep the full title and account-mode label on one line at 320px.
   A responsive font adjustment avoids a 106px double-wrapped header. */
@media(max-width:350px){
 html body[data-vr-notification-controls="r344"] .ncHeader{
   gap:4px!important;min-height:70px!important;
   padding:5px 9px!important;
 }
 html body[data-vr-notification-controls="r344"] .ncBrand{flex:1 1 auto!important;min-width:0!important}
 html body[data-vr-notification-controls="r344"] .ncBrandName{
   font-size:15px!important;white-space:nowrap!important
 }
 html body[data-vr-notification-controls="r344"] .ncBrand h1{
   font-size:16px!important;line-height:1.1!important;
   white-space:nowrap!important;letter-spacing:-.045em!important;
   margin:2px 0!important
 }
 html body[data-vr-notification-controls="r344"] .ncMode{
   font-size:8px!important;letter-spacing:.07em!important;white-space:nowrap!important
 }
}