/* ---------- Уведомления и настройки ---------- */
.ns { padding-top: 22px; }
.ns-bc { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #3c424d; }
.ns-bc a { color: #5d6472; display: inline-flex; }
.ns-bc i { font-style: normal; color: #9aa1ab; }
.ns-h { margin: 22px 0 26px; font: 400 46px/1.1 var(--fd); color: var(--ink); }
.ns-g { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.ns-list { padding: 22px 20px 6px; }
.ns-lh { display: flex; align-items: center; gap: 14px; padding: 0 0 22px; border-bottom: 1px solid var(--ln2); }
.ns-lh > svg { color: var(--o); }
.ns-lh h2 { margin: 0; font: 600 24px var(--ff); color: var(--ink); }
.ns-lh em { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--o); color: #fff; font: 600 14px var(--ff); font-style: normal; }
.ns-lh button { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; font: 400 15px var(--ff); color: #5d6472; }
.ns-lh button svg { color: #5d6472; }
.ns-lh button:hover { color: var(--o); }
.ns-n { position: relative; display: flex; align-items: flex-start; gap: 24px; padding: 22px 30px 26px 2px; border-bottom: 1px solid var(--ln2); color: var(--ink); }
.ns-n:last-child { border-bottom: 0; }
.ns-n:hover { color: var(--ink); background: #fcfcfd; }
.ns-n > div { flex: 1; min-width: 0; }
.ns-n > svg { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: #6b7280; }
.ns-ic { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; color: #fff; }
.ns-ic svg { color: #fff; }
.ns-ic.w { background: #fff; border: 1px solid #e3e6eb; box-shadow: 0 2px 8px rgba(20, 30, 50, .06); }
.ns-ic.w svg { color: #1d4fb8; }
.ns-ic.g { background: linear-gradient(180deg, #3cc06a, #22a45a); }
.ns-ic.r { background: linear-gradient(180deg, #f2484d, #d92c32); }
.ns-ic.o { background: linear-gradient(180deg, #ff9a2e, #f57309); }
.ns-ic.b { background: linear-gradient(180deg, #4a8df0, #2f6fd6); }
.ns-ic.y { border-radius: 50%; background: radial-gradient(circle at 50% 40%, #ffe07a, #e0a520 60%, #b77a0e); box-shadow: 0 3px 8px rgba(183, 122, 14, .3); }
.ns-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.ns-new { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 5px; background: var(--o); color: #fff; font: 500 12.5px var(--ff); letter-spacing: .2px; margin-bottom: 8px; }
.ns-meta .ns-new { margin-bottom: 0; }
.ns-meta time { font-size: 15px; color: #6b7280; }
.ns-n b { display: block; font: 500 20px/1.3 var(--ff); }
.ns-n p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.45; color: #6b7280; }
.ns-dot { position: absolute; right: 12px; top: 30px; width: 10px; height: 10px; border-radius: 50%; background: var(--o); }
.ns-btns { display: flex; gap: 10px; margin-top: 14px; }
.ns-btns .xbtn { height: 40px; padding: 0 18px; font-size: 15px; }
.ns-sec { background: #fff; border: 1px solid #dfe3e8; color: #3c424d; }
.ns-empty { padding: 50px 10px; text-align: center; color: #6b7280; }
.ns-r { display: flex; flex-direction: column; gap: 14px; }
.ns-tabs { display: flex; align-items: stretch; height: 54px; padding: 0 10px; }
.ns-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: none; cursor: pointer; font: 400 15px var(--ff); color: #5d6472; white-space: nowrap; position: relative; }
.ns-tabs button + button::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px; background: var(--ln2); }
.ns-tabs button svg { color: #5d6472; }
.ns-tabs button.on { color: var(--o); font-weight: 500; }
.ns-tabs button.on svg { color: var(--o); }
.ns-tabs button.on::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: 0; height: 3px; border-radius: 2px; background: var(--o); }
.ns-c { padding: 18px 22px 16px; scroll-margin-top: 80px; }
.ns-ch { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.ns-ch > svg:first-child { color: #3c424d; }
.ns-ch > svg:last-child:not(:first-child) { margin-left: auto; color: #6b7280; }
.ns-ch h3 { margin: 0; font: 600 20px var(--ff); color: var(--ink); }
.ns-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; cursor: pointer; font: 400 15px var(--ff); color: #5d6472; }
.ns-link:hover { color: var(--o); }
.ns-link.sm { margin-top: 10px; font-size: 14px; }
.ns-prof { display: flex; align-items: center; gap: 22px; padding: 10px 6px 6px; }
.ns-ava { position: relative; flex: none; width: 92px; height: 92px; border-radius: 50%; padding: 0; box-shadow: 0 0 0 1px #e3e6eb, 0 3px 10px rgba(20, 30, 50, .08); }
.ns-ava .av { border-radius: 50%; overflow: hidden; }
.ns-ava label { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid #e3e6eb; cursor: pointer; color: #5d6472; }
.ns-prof b { display: flex; align-items: center; gap: 10px; font: 500 18px var(--ff); color: var(--ink); }
.ns-pen { border: 0; background: none; padding: 0; cursor: pointer; color: #6b7280; display: inline-flex; }
.ns-role { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; height: 22px; padding: 0 8px; border-radius: 5px; background: #f1f3f6; font-size: 12.5px; color: #5d6472; }
.ns-prof small { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 15px; color: #5d6472; }
.ns-prof small svg { color: #6b7280; }
.ns-acc, .ns-row { display: flex; align-items: center; gap: 22px; padding: 10px 2px; border-top: 1px solid var(--ln2); }
.ns-acc > div, .ns-row > div { flex: 1; min-width: 0; }
.ns-acc > svg { color: #6b7280; flex: none; }
.ns-ai { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; }
.ns-ai b { font: 700 13px var(--ff); }
.ns-ai.steam { background: none; }
.ns-ai.psn { background: #1d4fb8; }
.ns-ai.ea { background: #e9253b; font-style: italic; }
.ns-ai.tg { background: #2f9be6; }
.ns-ai.tg svg { color: #fff; }
.ns-acc b, .ns-row b { display: block; font: 500 15.5px var(--ff); color: var(--ink); }
.ns-acc small { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; color: #8b919c; }
.ns-acc small svg { width: 13px; height: 13px; padding: 1px; border-radius: 50%; background: #c4c8ce; color: #fff; }
.ns-acc small.ok { color: #1f9d55; }
.ns-acc small.ok svg { background: #22a45a; }
.ns-av { font-size: 15px; color: #8b919c; }
.ns-acc .ns-link { color: #5d6472; }
.ns-row small { display: block; margin-top: 4px; font-size: 14px; color: #8b919c; }
.ns-ri { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid #e3e6eb; background: #fff; color: #3c424d; box-shadow: 0 2px 6px rgba(20, 30, 50, .05); }
.ns-ri svg { color: #3c424d; }
#ns-notify .ns-ri:not(.tg) svg { color: var(--o); }
.ns-ri.tg svg { color: #2f9be6; }
.ns-ai.tg svg { color: #fff; }
.ns-ri.r svg { color: #e5484d; }
.ns-tg { position: relative; flex: none; width: 52px; height: 28px; cursor: pointer; }
.ns-tg input { position: absolute; opacity: 0; }
.ns-tg i { position: absolute; inset: 0; border-radius: 14px; background: #d6dae0; transition: .2s; }
.ns-tg i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: .2s; }
.ns-tg input:checked + i { background: var(--o); }
.ns-tg input:checked + i::after { left: 27px; }
.ns-tg.dis { cursor: not-allowed; opacity: .7; }
.ns-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-top: 8px; border-top: 1px solid var(--ln2); }
.ns-th { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 8px 10px 10px; border-radius: 6px; border: 1px solid #e3e6eb; background: #fff; cursor: pointer; text-align: left; font-family: var(--ff); }
.ns-th.on { border: 2px solid var(--o); padding: 7px 9px 9px; }
.ns-th em { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--o); color: #fff; }
.ns-th em svg { color: #fff; }
.ns-thp { display: block; width: 100%; height: 66px; border-radius: 4px; background: #f6f7f9; position: relative; overflow: hidden; }
.ns-thp i { position: absolute; left: 34%; height: 5px; border-radius: 3px; background: #e2e5ea; }
.ns-thp i:nth-child(1) { top: 18px; right: 10%; }
.ns-thp i:nth-child(2) { top: 32px; right: 30%; }
.ns-thp i:nth-child(3) { top: 46px; right: 20%; }
.ns-thp::before { content: ''; position: absolute; left: 10%; top: 16px; width: 12%; height: 30px; border-radius: 3px; background: #dfe3e8; }
.ns-th.dark .ns-thp { background: #1d2129; }
.ns-th.dark .ns-thp i, .ns-th.dark .ns-thp::before { background: #3a404b; }
.ns-th.system .ns-thp { background: linear-gradient(90deg, #f6f7f9 50%, #1d2129 50%); }
.ns-th.system .ns-thp i { background: linear-gradient(90deg, #e2e5ea 50%, #3a404b 50%); }
.ns-th b { margin-top: 10px; font: 500 15px var(--ff); color: var(--ink); }
.ns-th small { margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: #8b919c; }
.ns-lang { display: flex; gap: 14px; padding-top: 2px; }
.ns-lang button { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 18px; border-radius: 6px; border: 1px solid #e3e6eb; background: #fff; font: 400 14px var(--ff); color: #5d6472; cursor: pointer; }
.ns-lang button b { font-weight: 400; }
.ns-lang button.on { border: 2px solid var(--o); color: var(--o); }
.ns-lang button:disabled { cursor: not-allowed; opacity: .75; }
.ns-uk { display: inline-block; width: 20px; height: 14px; border-radius: 2px; background: linear-gradient(#0000 40%, #c8102e 40% 60%, #0000 60%), linear-gradient(90deg, #0000 42%, #c8102e 42% 58%, #0000 58%), #012169; box-shadow: inset 0 0 0 1px #fff; }
@media (max-width: 1100px) { .ns-g { grid-template-columns: 1fr; } .ns-tabs { overflow-x: auto; } }