/* Threads-style settings. Phones only; markup and behaviour are untouched.
   Scope: body.th-app.settings-view #xpage (every #/settings screen). Colours come from the
   Threads tokens on body.th-app (--bg --text --sub --line --field --pill), so light and dark
   follow the rest of the Threads screens. The long :root chain beats the older arca/p18 rules. */
@media (max-width:768px){
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage{
  --st-red:#ff3040;--st-gutter:16px;--st-rad:16px;--st-row:52px;
  background:var(--bg)!important;color:var(--text)!important;padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))!important}
html.dark:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage{--st-red:#ff453a}

/* top bar: back chevron, centred title, no coloured strip */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage>.xtop{background:var(--bg)!important;color:var(--text)!important;border:0!important;box-shadow:none!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage>.xtop :is(button,a,b,h1,h2,span){color:var(--text)!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage>.xtop svg{stroke:var(--text)!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage>.xtop>:is(b,h1,h2,strong){font-size:17px!important;font-weight:700!important;letter-spacing:-.3px!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage>.xtop .ibtn{background:none!important}

/* sync banner */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .account-device-status{margin:4px var(--st-gutter) 6px!important;padding:12px 14px!important;border:0!important;border-radius:14px!important;background:var(--field)!important;color:var(--sub)!important;font-size:13px!important;line-height:1.45!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .account-device-status button{height:32px!important;min-height:0!important;padding:0 14px!important;border:1px solid var(--line)!important;border-radius:16px!important;background:none!important;color:var(--text)!important;font-size:13px!important;font-weight:600!important}

/* section titles */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(h2.zip14-settings-band,h2.content-group){margin:0!important;padding:22px calc(var(--st-gutter) + 4px) 8px!important;border:0!important;background:none!important;color:var(--sub)!important;font-size:13px!important;font-weight:600!important;letter-spacing:-.2px!important;line-height:1.3!important;min-height:0!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.preflist,.prefcontent,.zip14-display-settings,.fpage){background:none!important;padding-left:0!important;padding-right:0!important;border:0!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.preflist,.prefcontent){padding-top:0!important}

/* group card rows: one filled card per run of consecutive rows */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.prefrow,.prefcontrol,.frow,.zip14-swatch-row){position:relative!important;display:flex!important;align-items:center!important;gap:12px!important;box-sizing:border-box!important;width:calc(100% - 2*var(--st-gutter))!important;min-height:var(--st-row)!important;margin:0 var(--st-gutter)!important;padding:11px 16px!important;border:0!important;border-radius:0!important;background:var(--field)!important;color:var(--text)!important;text-align:left!important;font-size:15px!important;font-weight:400!important;letter-spacing:-.3px!important;line-height:1.3!important;-webkit-tap-highlight-color:transparent}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.prefrow,.prefcontrol,.frow,.zip14-swatch-row)[data-g=first],html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.prefrow,.prefcontrol,.frow,.zip14-swatch-row)[data-g=only]{border-top-left-radius:var(--st-rad)!important;border-top-right-radius:var(--st-rad)!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.prefrow,.prefcontrol,.frow,.zip14-swatch-row)[data-g=last],html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.prefrow,.prefcontrol,.frow,.zip14-swatch-row)[data-g=only]{border-bottom-left-radius:var(--st-rad)!important;border-bottom-right-radius:var(--st-rad)!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.prefrow,.prefcontrol,.frow,.zip14-swatch-row)[data-g=first],html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.prefrow,.prefcontrol,.frow,.zip14-swatch-row)[data-g=mid]{background-image:linear-gradient(rgba(128,128,128,.24),rgba(128,128,128,.24))!important;background-repeat:no-repeat!important;background-position:right bottom!important;background-size:calc(100% - 54px) 1px!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.prefrow,.prefcontrol,.frow,.zip14-swatch-row)[hidden]{display:none!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.prefrow,.prefcontrol,.frow,.zip14-swatch-row):not(:has(>.st-ico))[data-g=first],html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.prefrow,.prefcontrol,.frow,.zip14-swatch-row):not(:has(>.st-ico))[data-g=mid]{background-size:calc(100% - 16px) 1px!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.prefrow,.prefcontrol,.frow):active{background:var(--pill)!important}

/* row content */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.prefcopy,.fcopy){display:flex;flex-direction:column;flex:1 1 auto;min-width:0;gap:2px;color:var(--text)!important;font-size:15px!important;font-weight:400!important;line-height:1.3!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.prefcopy,.fcopy) b{font-size:15px!important;font-weight:400!important;color:var(--text)!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.prefcopy,.fcopy) small{display:block;margin:0!important;color:var(--sub)!important;font-size:12.5px!important;font-weight:400!important;line-height:1.35!important;letter-spacing:-.2px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.prefend,.zip14-choice-value,.fchev){display:inline-flex;align-items:center;flex:none;gap:4px;margin-left:auto;color:var(--sub)!important;font-size:14px!important;font-weight:400!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.prefend,.fchev) svg{width:16px!important;height:16px!important;stroke:var(--sub)!important;stroke-width:2!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .zip14-settings-state{color:var(--sub)!important;font-size:14px!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .zip14-settings-state.is-missing{color:var(--st-red)!important}

/* left icon (same Threads glyph set, 22px) */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .prefrow>.st-ico{display:inline-flex;flex:none;width:22px;height:22px;color:var(--text)!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .prefrow>.st-ico svg{width:22px;height:22px;stroke:currentColor!important;fill:none!important}

/* danger rows */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .prefrow.danger,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .prefrow.danger :is(.prefcopy,.st-ico,small){color:var(--st-red)!important}

/* iOS style switch */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .prefswitch{position:relative!important;flex:none!important;box-sizing:border-box!important;width:51px!important;height:31px!important;margin-left:auto!important;border:0!important;border-radius:16px!important;background:rgba(128,128,128,.38)!important;transition:background .2s ease!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .prefswitch::after{content:""!important;position:absolute!important;top:2px!important;left:2px!important;width:27px!important;height:27px!important;border-radius:50%!important;background:#fff!important;box-shadow:0 2px 4px #0003!important;transform:none!important;transition:transform .2s ease!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage [aria-checked=true] .prefswitch{background:var(--text)!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage [aria-checked=true] .prefswitch::after{background:var(--bg)!important;transform:translateX(20px)!important;box-shadow:none!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.prefcontrol,.prefrow)[disabled] :is(.prefcopy,.prefswitch,.prefend,.st-ico){opacity:.45}

/* segmented choices inside a row */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .prefseg{display:inline-flex!important;gap:2px!important;padding:2px!important;border:0!important;border-radius:10px!important;background:var(--pill)!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .prefseg>button{min-height:30px!important;padding:0 12px!important;border:0!important;border-radius:8px!important;background:none!important;color:var(--sub)!important;font-size:13px!important;font-weight:600!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .prefseg>button.on{background:var(--bg)!important;color:var(--text)!important}

/* notes and legal links */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(p.a-note,.prefcontent>p,.zip14-display-settings>p){margin:8px calc(var(--st-gutter) + 4px) 0!important;padding:0!important;color:var(--sub)!important;font-size:12.5px!important;line-height:1.45!important;background:none!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .p18-settings-legal{display:flex!important;justify-content:center!important;gap:18px!important;padding:22px var(--st-gutter) 8px!important;background:none!important;border:0!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .p18-settings-legal button{border:0!important;background:none!important;color:var(--sub)!important;font-size:12.5px!important;font-weight:400!important;padding:6px 0!important;text-decoration:none!important}

/* form pages (nickname, password, security) */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .xin{box-sizing:border-box!important;width:100%!important;min-height:50px!important;padding:0 16px!important;border:0!important;border-radius:14px!important;background:var(--field)!important;color:var(--text)!important;font-size:15px!important;box-shadow:none!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .xin:focus{outline:0!important;box-shadow:inset 0 0 0 1px var(--text)!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .xin::placeholder{color:var(--sub)!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(label.security-field,.security-field){color:var(--sub)!important;font-size:13px!important;font-weight:600!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.xmain,.security-button){display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;width:100%!important;height:50px!important;min-height:0!important;border:0!important;border-radius:14px!important;background:var(--text)!important;color:var(--bg)!important;font-size:15px!important;font-weight:700!important;letter-spacing:-.3px!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.xmain,.security-button):disabled{opacity:.4!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.xbtn.line,.fmore,.fmini){border:1px solid var(--line)!important;border-radius:16px!important;background:none!important;color:var(--text)!important;font-size:13px!important;font-weight:600!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .security-summary{border:0!important;border-radius:var(--st-rad)!important;background:var(--field)!important;overflow:hidden}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .security-summary>*{border-color:var(--line)!important;color:var(--text)!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .security-summary small{color:var(--sub)!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .security-error{color:var(--st-red)!important;font-size:12.5px!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.empty,.a-empty){color:var(--sub)!important;font-size:14px!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage :is(.fpage,.zip14-setting-page,.zip14-nickname) h2{margin:0!important;padding:22px 4px 8px!important;border:0!important;background:none!important;color:var(--sub)!important;font-size:13px!important;font-weight:600!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .security-factor-row .fcopy{flex-direction:row!important;flex-wrap:wrap;align-items:center;column-gap:8px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .security-factor-row .fcopy small{flex-basis:100%}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .security-factor-row .fcopy small.security-factor-status{flex:none!important;display:inline-flex!important;align-items:center;height:20px;padding:0 8px;border-radius:10px;background:rgba(255,48,64,.14)!important;color:var(--st-red)!important;font-size:11.5px!important;font-weight:600!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage .fpage>h2{padding-left:calc(var(--st-gutter) + 4px)!important}
/* push / pop slide between settings screens (content only, the bar stays) */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage>:not(.xtop){animation:stSlideIn .28s cubic-bezier(.2,.8,.2,1) both}
html[data-st-nav=back]:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage>:not(.xtop){animation-name:stSlideBack}
@media (prefers-reduced-motion:reduce){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body.th-app.settings-view #xpage#xpage>:not(.xtop){animation:none}}
@keyframes stSlideIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes stSlideBack{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
}