/* Settings hub. Builds on system.css + account.css */

.swrap { max-width:1000px; margin:0 auto; padding:var(--s12) var(--s6) var(--s20); }
.settings-grid { display:grid; grid-template-columns:212px 1fr; gap:var(--s8); align-items:start; }

/* left sub-nav */
.ssubnav { display:flex; flex-direction:column; gap:3px; position:sticky; top:88px; }
.ssgroup { font-family:var(--font-mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-faint); padding:12px 12px 6px; }
.ssitem { display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:9px; color:var(--text); font-size:14px; cursor:pointer; background:transparent; border:none; text-align:left; width:100%; }
.ssitem .ic { width:18px; color:var(--text-faint); font-family:var(--font-mono); font-size:13px; text-align:center; }
.ssitem:hover { background:var(--surface-2); }
.ssitem.active { background:rgba(8,145,178,0.12); color:var(--text-bright); }
.ssitem.active .ic { color:#0e7490; }
.ssitem.danger { color:var(--red-soft); margin-top:8px; border-top:1px solid var(--line-2); border-radius:0 0 9px 9px; }
.ssitem.danger .ic { color:var(--red-soft); }

/* content */
.scontent { min-width:0; }
.shead { font-family:var(--font-display); font-size:24px; color:var(--text-bright); font-weight:700; margin:0 0 4px; }
.ssubt { color:var(--text-dim); font-size:14px; margin:0 0 var(--s6); line-height:1.6; }
.scard { margin-bottom:var(--s5); }
.srow { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 0; border-top:1px solid var(--line-2); }
.srow:first-child { border-top:none; }
.srl { font-size:14px; color:var(--text-bright); }
.srl .sd { font-size:12.5px; color:var(--text-dim); margin-top:3px; font-family:var(--font-body); line-height:1.5; }
.srv { font-size:13.5px; color:var(--text-dim); font-family:var(--font-mono); white-space:nowrap; }

/* toggle switch */
.tgl { position:relative; width:46px; height:26px; border-radius:99px; background:var(--surface-3); border:1px solid var(--line-2); cursor:pointer; flex:0 0 auto; transition:background .18s; }
.tgl::after { content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--text-dim); transition:transform .18s, background .18s; }
.tgl.on { background:rgba(16,185,129,0.25); border-color:rgba(52,211,153,0.45); }
.tgl.on::after { transform:translateX(20px); background:var(--green-soft); }

/* telegram connect */
.tgrow { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.tgin { flex:1; min-width:160px; background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:10px 12px; color:var(--text-bright); font-size:13px; outline:none; }
.tgin:focus { border-color:var(--line-strong); }
.tgrow .btn { padding:9px 13px; font-size:12.5px; }
.tgmsg { font-size:12px; min-height:15px; color:var(--amber-soft); }

/* integrations */
.intg { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.intg-card { border:1px solid var(--line-2); border-radius:12px; background:var(--surface-2); padding:16px; display:flex; flex-direction:column; gap:8px; }
.intg-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.intg-name { font-size:14.5px; color:var(--text-bright); font-weight:600; }
.intg-desc { font-size:12.5px; color:var(--text-dim); line-height:1.55; flex:1; }
.intg-pill { font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; padding:4px 9px; border-radius:99px; white-space:nowrap; }
.intg-pill.soon { background:rgba(244,183,64,0.12); border:1px solid rgba(244,183,64,0.3); color:var(--amber-soft); }
.intg-pill.edge { background:rgba(16,185,129,0.12); border:1px solid rgba(52,211,153,0.35); color:var(--green-soft); }
@media (max-width:680px){ .intg { grid-template-columns:1fr; } }

/* sign-in gate */
.sgate { max-width:420px; margin:0 auto; text-align:center; }
.sgate .mascot { display:flex; justify-content:center; margin-bottom:var(--s5); }

@media (max-width:820px){
  .settings-grid { grid-template-columns:1fr; }
  .ssubnav { flex-direction:row; flex-wrap:wrap; position:static; gap:6px; margin-bottom:var(--s4); }
  .ssgroup { display:none; }
  .ssitem { width:auto; }
  .ssitem.danger { border-top:none; margin-top:0; }
}