/* Vibrozz 2 — settings (/settings, /settings/account|bybit|notify) */
.st{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;align-items:start;min-width:0}
.st-body{min-width:0;max-width:900px}   /* wide screens: a switch stays near its label */
.st-sec{align-content:start}

/* left index */
.st-nav{position:sticky;top:20px}
.st-nav nav{padding:8px;display:grid;gap:2px}
.st-nav a,.st-nav button{height:46px;border:0;border-radius:13px;background:transparent;text-align:left;padding:0 14px;font-weight:500;font-size:15px;color:var(--tx-2);display:flex;align-items:center;gap:12px;width:100%;text-decoration:none}
.st-nav a:hover,.st-nav button:hover{background:var(--soft);color:var(--tx)}
.st-nav a.on{background:var(--soft);color:var(--tx);font-weight:600}
.st-nav a .ic{color:var(--tx-3)}.st-nav a.on .ic{color:var(--tx)}
.st-nav hr{border:0;border-top:1px solid var(--line);margin:6px 8px}
.st-nav .st-out{color:var(--dn)}.st-nav .st-out .ic{color:var(--dn)}
.st-nav .st-out:hover{background:var(--dn-soft);color:var(--dn)}
.st-nav .lbl-s{display:none}

/* shared bits */
.st-note{font-size:13px;font-weight:600;color:var(--tx-3);min-height:18px;text-align:right}
.st-note.ok{color:var(--up)}.st-note.bad{color:var(--dn)}
.st-note:empty{display:none}
.st-mi{width:44px;height:44px;border-radius:14px;background:var(--soft);display:grid;place-items:center;color:var(--tx-2);flex:none}
.st-mi.vk{background:#0077FF;color:#fff}
.st-mi.ya svg{width:26px;height:26px}
.st-mi.vk svg{width:22px;height:22px}
.st-mi.up{background:var(--up-soft);color:var(--up)}.st-mi.dn{background:var(--dn-soft);color:var(--dn)}.st-mi.warn{background:var(--warn-soft);color:var(--warn)}
.st-err{padding:8px 24px 22px}
.st-err .empty{padding:24px}

/* profile */
.st-prof{display:flex;align-items:center;gap:28px;padding:26px 28px;flex-wrap:wrap}
.st-photo{position:relative;flex:none}
.st-photo .ava.lg{width:96px;height:96px;font-size:36px}
.st-photo.busy::after{content:"";position:absolute;inset:0;border-radius:50%;background:color-mix(in srgb,var(--card) 55%,transparent)}
.st-photo.busy::before{content:"";position:absolute;z-index:1;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:2.5px solid var(--tx);border-right-color:transparent;animation:vspin .7s linear infinite}
.st-prof-main{flex:1;min-width:240px;display:grid;gap:14px}
.st-file{position:relative;overflow:hidden;cursor:pointer}
.st-file:focus-within{box-shadow:var(--ring)}
.st-name{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.st-name .field{flex:1;min-width:200px}
.st-prof .st-note{text-align:left}

/* sign-in methods */
.st-ms{padding-bottom:8px}
.st-m{border-top:1px solid var(--line)}
.st-m:first-child{border-top:0}
.st-m-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 24px}
.st-m-row b{display:block;font-weight:600}
.st-m-row small{display:flex;align-items:center;gap:6px;color:var(--tx-3);font-size:13px;min-width:0}
.st-m-row small .ell{display:block}
.st-m-row small .ic{color:var(--up)}
.st-m-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.st-m-form{margin:0 24px 18px 82px;padding:18px;border-radius:var(--r-tile,16px);background:var(--soft);display:grid;gap:14px}
.st-m-form .input{background:var(--card)}
.st-m-form .input:focus{border-color:var(--acc-2)}
.st-m-form .acts{display:flex;gap:8px;flex-wrap:wrap}
.st-m-form .sent{color:var(--tx-2)}
.st-m-form .sent b{color:var(--tx)}
.st-pw{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.st-code{max-width:240px}

/* devices, appearance */
.st-rows{padding-bottom:8px}
.st-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 24px;border-top:1px solid var(--line)}
.st-row:first-child{border-top:0}
.st-row b{display:block;font-weight:600}
.st-row small{display:block;color:var(--tx-3);font-size:13px}
.st-row.plain{grid-template-columns:minmax(0,1fr) auto}
.st-ccy{gap:6px}
.st-ccy .ic{color:var(--tx-3)}

/* Bybit */
.st-bx-new{padding:6px 24px 24px;max-width:560px}
.st-ipf{justify-items:start}
.st-ip{display:inline-flex;align-items:center;gap:8px;min-height:40px;border:0;border-radius:var(--r-ctl);background:var(--soft);padding:0 14px;font:600 14px var(--mono);color:var(--tx)}
.st-ip:hover{background:var(--soft-2)}
.st-ip .ic{color:var(--tx-3)}
.st-form{display:grid;gap:14px;min-width:0}
.st-form h4{font-size:16px;font-weight:700}
.st-form .acts{display:flex;gap:8px;flex-wrap:wrap}
.st-form .input.mono{font-family:var(--mono);font-size:13px}
.st-bx-head{display:flex;align-items:center;gap:14px;padding:22px 24px 6px;flex-wrap:wrap}
.st-bx-head h3{font-size:19px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.st-bx-head small{display:block;color:var(--tx-3);font-size:13px;margin-top:2px}
.st-bx-head code{font:600 12px var(--mono);color:var(--tx-2)}
.st-bx-head .seg{flex:none}
.st-mark{width:52px;height:52px;border-radius:16px;background:var(--soft);display:grid;place-items:center;font-weight:800;font-size:12px;letter-spacing:.02em;color:var(--tx);flex:none}
.st-mark.real{background:var(--acc);color:var(--on-acc)}
.st-mark.off{color:var(--tx-3)}
.st-alert{display:flex;align-items:flex-start;gap:10px;margin:10px 24px 0;padding:12px 14px;border-radius:14px;background:var(--dn-soft);color:var(--dn);font-weight:500}
.st-alert.warn{background:var(--warn-soft);color:var(--tx)}.st-alert.warn .ic{color:var(--warn)}
.st-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:16px 24px 6px}
.st-tile{border-radius:var(--r-tile,16px);background:var(--soft);padding:14px 16px;display:grid;gap:4px;align-content:start;min-width:0}
.st-tile>span{display:flex;align-items:center;gap:8px;color:var(--tx-3);font-size:13px}
.st-tile>b{font-size:15px;font-weight:700;overflow-wrap:anywhere}
.st-tile.ok>span .ic{color:var(--up)}.st-tile.bad>span .ic{color:var(--dn)}.st-tile.mid>span .ic{color:var(--warn)}
.st-tile.bad{background:var(--dn-soft)}.st-tile.bad>b{color:var(--dn)}
.st-bx-acts{display:flex;gap:10px;flex-wrap:wrap;padding:14px 24px 24px}
.st-replace{margin:0 24px 24px;padding:18px;border-radius:var(--r-tile,16px);background:var(--soft)}
.st-replace .input,.st-replace .st-ip{background:var(--card)}
.spin .ic{animation:vspin .8s linear infinite}

/* notifications */
.st-push{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:8px 24px 20px}
.st-push b{display:block;font-weight:600}
.st-push small{display:block;color:var(--tx-3);font-size:13px;overflow-wrap:anywhere}
.st-push .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.st-line{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 24px 20px;border-top:1px solid var(--line)}
.st-line b{font-weight:600}
.st-kinds{padding-bottom:10px}
.st-kind{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 24px;border-top:1px solid var(--line);min-height:58px}
.st-kind:first-child{border-top:0}
.st-kind b{font-weight:600}
.st-kind b .ic,.st-rsi .seg .ic{display:inline-block;vertical-align:-2px}
.st-kind b .ic{color:var(--tx-3)}
.st-kind .toggle{flex:none}
.st-kind .toggle::before{content:"";position:absolute;inset:-8px -6px}
/* 2.4 автостоп */
.st-as-pct .seg{flex:none}
@media (max-width:560px){.st-as-pct{flex-direction:column;align-items:stretch;gap:10px}.st-as-pct .seg{display:flex}.st-as-pct .seg button{flex:1;padding:6px 4px}}
.st-rsi{padding:16px 24px 14px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px 14px;align-items:end}
.st-rsi>.field{grid-column:span 2}
.st-rsi>.f-tf,.st-rsi>.f-coins{grid-column:span 3}
.st-rsi .chips .chip{height:40px;padding:0 14px}
.st-rsi .seg button{padding:9px 14px;font-size:14px}
.st-out-s{margin-top:2px}

@media (max-width:1100px){
  .st{grid-template-columns:220px minmax(0,1fr)}
  .st-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .st{grid-template-columns:1fr;gap:14px}
  .st-nav{position:static;background:transparent;box-shadow:none}
  .st-nav nav{display:flex;padding:3px;gap:2px;border-radius:14px;background:var(--soft-2)}
  .st-nav a,.st-nav button{flex:1 1 auto;width:auto;justify-content:center;height:40px;padding:0 6px;font-size:14px;border-radius:11px;gap:6px;min-width:0}
  .st-nav a .ic{display:none}
  .st-nav a.on{background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.08)}
  .st-nav a:hover{background:transparent}.st-nav a.on:hover{background:var(--card)}
  .st-nav hr{display:none}
  .st-nav .st-out{display:none}
  .st-nav .lbl-l{display:none}.st-nav .lbl-s{display:inline}
  .st-prof{padding:20px 18px;gap:18px}
  .st-photo .ava.lg{width:80px;height:80px;font-size:30px}
  .st-prof-main{min-width:0;flex-basis:100%}
  .st-name .field{min-width:0;flex-basis:100%}
  .st-name .btn{width:100%}
  .st-m-row,.st-row{padding:12px 18px;gap:12px;grid-template-columns:40px minmax(0,1fr) auto}
  .st-row.plain{grid-template-columns:minmax(0,1fr) auto}
  .st-mi{width:40px;height:40px;border-radius:12px}
  .st-m-form{margin:0 12px 14px}
  .st-row.wrap-s{grid-template-columns:40px minmax(0,1fr)}
  .st-row.wrap-s>.btn{grid-column:1/-1}
  .st-bx-new{padding:4px 18px 18px;max-width:none}
  .st-bx-head{padding:18px 18px 4px;gap:12px}
  .st-bx-head .seg{order:3;width:100%;display:flex}.st-bx-head .seg button{flex:1}
  .st-mark{width:46px;height:46px;border-radius:14px}
  .st-alert{margin:10px 18px 0}
  .st-tiles{padding:14px 18px 4px;gap:10px}
  .st-tile{padding:12px 14px}
  .st-bx-acts{padding:12px 18px 18px}
  .st-bx-acts .btn{flex:1}
  .st-replace{margin:0 12px 14px}
  .st-push{padding:6px 18px 18px;grid-template-columns:40px minmax(0,1fr)}
  .st-push .acts{grid-column:1/-1;justify-content:stretch}
  .st-push .acts .btn{flex:1}
  .st-line{padding:12px 18px 18px}
  .st-kind{padding:10px 18px}
  .st-rsi{padding:14px 18px 12px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-rsi>.field{grid-column:span 1}
  .st-rsi>.f-tf,.st-rsi>.f-coins,.st-rsi>.f-turn{grid-column:1/-1}
  .st-err{padding:6px 18px 18px}
}
/* phone tap targets ≥ 40 px (the switch keeps its 46×28 look: the extra is a transparent border) */
@media (max-width:760px){
  .pg-settings .btn.sm{height:40px}
  .pg-settings .seg button{min-height:40px}
  .pg-settings .toggle{width:58px;height:40px;border:6px solid transparent;border-radius:20px;background-clip:padding-box;margin:-6px}
}

/* iOS zooms the page when a focused field is under 16 px */
@media (max-width:760px){.pg-settings input:not([type=checkbox]):not([type=radio]):not([type=range]):not(.sr),.pg-settings select,.pg-settings textarea{font-size:16px}}

/* ---------- tablets ---------- */
/* portrait tablets (761–1000): the section index becomes one row of tabs over full-width content */
@media (min-width:761px) and (max-width:1000px){
  .st{grid-template-columns:minmax(0,1fr);gap:16px}
  .st-nav{position:static}
  .st-nav nav{display:flex;align-items:center;gap:4px;padding:6px}
  .st-nav a,.st-nav button{width:auto;flex:none;height:44px;padding:0 16px;gap:10px}
  .st-nav hr{display:none}
  .st-nav .st-out{margin-left:auto}
  .st-body{max-width:none}
}
/* 761–900: the full labels and «Выйти» no longer fit in one row — short labels, sign-out as an icon */
@media (min-width:761px) and (max-width:900px){
  .st-nav .lbl-l{display:none}.st-nav .lbl-s{display:inline}
  .st-nav a,.st-nav button{padding:0 14px}
  .st-nav .st-out{padding:0 13px}.st-nav .st-out span{display:none}
}
@media (min-width:761px) and (pointer:coarse){
  .pg-settings .seg button{min-height:40px}
  .pg-settings .toggle{width:58px;height:40px;border:6px solid transparent;border-radius:20px;background-clip:padding-box;margin:-6px}
  .st-form .input.mono{font-size:16px}
}