/* Шрифты лежат рядом с панелью: она работает и без выхода в интернет. */
@font-face {
  font-family: 'Onest'; font-weight: 100 900; font-display: swap;
  src: url('/fonts/onest-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest'; font-weight: 100 900; font-display: swap;
  src: url('/fonts/onest-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat'; font-weight: 700; font-display: swap;
  src: url('/fonts/montserrat-cyrillic-700.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat'; font-weight: 700; font-display: swap;
  src: url('/fonts/montserrat-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Палитра nvy: графит и металл, как у карточек /rank и /stats. Только тёмная тема.
   Цвет — только там, где он что-то значит: красный у опасных действий, зелёный у «в сети». */
:root {
  color-scheme: dark;
  --bg: #121214;       /* фон под шумом */
  --rail: #0d0d0f;     /* боковая колонка */
  --deep: #19191c;     /* поля и вложенные поверхности */
  --field: #19191c;
  --seam: rgba(255, 255, 255, .08);
  --hairline: rgba(255, 255, 255, .12);
  --hover: rgba(255, 255, 255, .05);
  --active: rgba(255, 255, 255, .09);
  --text: #e4e4e7;
  --head: #f4f4f5;
  --muted: #8b8b93;
  --accent: #f4f4f5;   /* «акцент» — белый: фокус, отметки, главная кнопка */
  --accent-hover: #ffffff;
  --ok: #46c47e;
  --warn: #e8b04b;
  --bad: #ff8589;
  --danger: #e5484d;
  --btn: #f4f4f5;
  --btn-ink: #121214;
  --btn2: rgba(255, 255, 255, .07);
  --btn2-ink: #e4e4e7;
  --link: #d4d4d8;
  --code: #1f1f23;
  --embed: #17171a;
  --embed-line: #2a2a2e;
  --pill: rgba(255, 255, 255, .1);
  --pill-ink: #f4f4f5;
  --glass: linear-gradient(135deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .015)) #141416;
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .07);
  --ui: 'Onest', 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Montserrat', var(--ui);
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* графики */
:root { --s1: #e4e4e7; --s2: #7c7c85; --gridline: rgba(255, 255, 255, .07); }
.chart { position: relative; }
.plot { display: block; max-width: 100%; }
.plot .grid { stroke: var(--gridline); stroke-width: 1; }
.plot .base { stroke: var(--seam); stroke-width: 1; }
.plot .ax { fill: var(--muted); font-size: 11.5px; font-family: var(--ui); }
.plot .hit { fill: transparent; }
.plot .bar.s1, .plot .dot.s1 { fill: var(--s1); } .plot .bar.s2, .plot .dot.s2 { fill: var(--s2); }
.plot .dot { stroke: var(--bg); stroke-width: 2; }
.plot .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.plot .line.s1 { stroke: var(--s1); } .plot .area.s1 { fill: var(--s1); opacity: .12; }
.plot .cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.tip { position: absolute; z-index: 5; pointer-events: none; background: var(--deep); color: var(--text); border: 1px solid var(--seam); border-radius: 6px; padding: 6px 10px; font-size: 12.5px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.tip-h { color: var(--head); font-weight: 600; }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.sw.s1 { background: var(--s1); } .sw.s2 { background: var(--s2); }
.grp { margin: 8px 0 20px; padding-top: 24px; border-top: 1px solid var(--seam); }
details.sec summary { cursor: pointer; font-weight: 600; color: var(--head); margin-bottom: 10px; }
th.r, td.r { text-align: right; }

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--text); font: 15px/1.5 var(--ui); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
h2 { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--head); }
.note { color: var(--muted); font-size: 13.5px; margin: 4px 0 10px; max-width: 64ch; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* ── Каркас: список разделов как каналы Discord ── */
.shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--rail); }
.wordmark { font-family: 'Montserrat', var(--ui); font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: -.01em; color: var(--head); height: 48px; display: flex; align-items: center; padding: 0 16px; box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.rail .cat-h { padding: 18px 16px 4px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.rail nav { display: flex; flex-direction: column; padding: 0 8px; gap: 2px; }
.rail a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; color: var(--muted); text-decoration: none; font-weight: 500; }
.rail a::before { content: '#'; font-size: 20px; line-height: 1; font-weight: 400; width: 14px; text-align: center; opacity: .8; }
.rail a:hover { background: var(--hover); color: var(--text); }
.rail a[aria-current='page'] { background: var(--active); color: var(--head); }
.rail .n { margin-left: auto; background: var(--danger); color: #fff; border-radius: 8px; min-width: 16px; padding: 0 5px; font-size: 12px; font-weight: 700; line-height: 16px; text-align: center; }
.rail .foot { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--deep); }
.rail .state { flex: 1; font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 8px; font-weight: 500; }
.rail button.link { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 8px; border-radius: 4px; }
.rail button.link:hover { background: var(--hover); color: var(--text); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; }
.dot.off { background: var(--danger); }

.main { padding: 32px 40px 80px; max-width: 920px; width: 100%; }
.main.wide { max-width: 1240px; }
.main.feed { max-width: 1040px; }
.head { margin-bottom: 26px; }
.head h1 { font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--head); }
.head p { color: var(--muted); margin-top: 4px; max-width: 60ch; }

.sec { margin-bottom: 40px; }
.sec > h2 { margin-bottom: 4px; }
.sec > .note { margin-bottom: 10px; }

.lede { font-size: 20px; line-height: 1.45; font-weight: 500; max-width: 38em; margin-bottom: 36px; text-wrap: pretty; color: var(--head); }
.lede.down { color: var(--bad); }

/* ── Вкладки и панель действий ── */
.tabs { display: flex; gap: 8px; margin-bottom: 18px; overflow-x: auto; flex-wrap: wrap; }
.tabs button { background: none; border: 0; border-radius: 4px; padding: 5px 12px; color: var(--muted); cursor: pointer; white-space: nowrap; font-weight: 500; }
.tabs button:hover { background: var(--hover); color: var(--text); }
.tabs button[aria-selected='true'] { background: var(--active); color: var(--head); }
.bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.bar input[type=search] { flex: 1; min-width: 200px; }
.bar label { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.bar .grow { flex: 1; min-width: 200px; }

/* ── Списки, таблицы ── */
.row { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--seam); }
.row .grow { flex: 1; min-width: 0; }
.row .sub { color: var(--muted); font-size: 13.5px; }
.rank { width: 1.6rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 700; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .02em; padding: 0 12px 8px 0; border-bottom: 1px solid var(--seam); white-space: nowrap; }
td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--seam); vertical-align: middle; }
td.r, th.r { text-align: right; padding-right: 0; }
td.act { white-space: nowrap; text-align: right; padding-right: 0; }
td.act .btn + .btn { margin-left: 6px; }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who img, .who .ph { width: 28px; height: 28px; border-radius: 50%; background: var(--deep); flex: none; }
.st { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.st::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.st.pending { color: var(--warn); } .st.pending::before { background: var(--warn); }
.st.approved { color: var(--ok); } .st.approved::before { background: var(--ok); }
.st.rejected, .st.banned { color: var(--bad); } .st.rejected::before, .st.banned::before { background: var(--danger); }
.empty { color: var(--muted); padding: 14px 0; }
.tag { margin-left: 10px; color: var(--muted); font-size: 12px; border-radius: 3px; background: var(--deep); padding: 1px 6px; font-weight: 500; }

/* ── Кнопки и поля ── */
.btn { background: var(--btn); color: var(--btn-ink); border: 0; border-radius: 3px; padding: 8px 16px; font-weight: 500; cursor: pointer; transition: background .1s; }
.btn:hover { background: var(--accent-hover); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.quiet { background: var(--btn2); color: var(--btn2-ink); }
.btn.quiet:hover { filter: brightness(1.12); background: var(--btn2); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger:hover { background: #a12828; }
.btn.sm { padding: 3px 12px; font-size: 13.5px; }

input, select, textarea { width: 100%; background: var(--field); color: var(--text); border: 0; border-radius: 3px; padding: 9px 10px; font: inherit; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
input::placeholder, textarea::placeholder { color: var(--muted); }
textarea { min-height: 96px; resize: vertical; font-family: var(--mono); font-size: 13px; line-height: 1.5; }
input[type=number] { font-variant-numeric: tabular-nums; }
input[type=checkbox] { width: auto; }
input[type=search] { -webkit-appearance: none; appearance: none; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }

/* Переключатель как в Discord */
.switch { position: relative; width: 40px; height: 24px; display: inline-block; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 12px; background: #80848e; transition: background .12s; }
.switch i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .12s; }
.switch input:checked + i { background: var(--ok); }
.switch input:checked + i::after { transform: translateX(16px); }
.switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Настройки ── */
.settings { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 36px; align-items: start; }
.sub-nav { position: sticky; top: 32px; display: flex; flex-direction: column; gap: 2px; }
.sub-nav button { background: none; border: 0; border-radius: 4px; text-align: left; color: var(--muted); padding: 6px 10px; cursor: pointer; font-weight: 500; }
.sub-nav button:hover { background: var(--hover); color: var(--text); }
.sub-nav button[aria-current='true'] { background: var(--active); color: var(--head); }
.field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: 8px 28px; padding: 14px 0; border-bottom: 1px solid var(--seam); align-items: start; }
.field.wide { grid-template-columns: 1fr; }
.field .lab { font-weight: 500; color: var(--head); }
.field .hint { color: var(--muted); font-size: 13px; margin-top: 2px; }
.field .err, .err { color: var(--bad); font-size: 13px; margin-top: 4px; }
.field .ctl.end { display: flex; justify-content: flex-end; }

.dirty { position: sticky; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; margin-top: 16px; background: var(--deep); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); animation: rise .16s ease-out; flex-wrap: wrap; }
.dirty span { flex: 1; min-width: 160px; color: var(--head); font-weight: 500; }
.extra { margin-top: 18px; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Вход ── */
.gate { width: min(400px, calc(100vw - 32px)); margin: 18vh auto 0; background: var(--rail); border-radius: 6px; padding: 32px; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.gate .wordmark { font-size: 48px; height: auto; padding: 0; box-shadow: none; margin-bottom: 22px; justify-content: center; }
.wordmark .logo { width: 30px; height: 30px; margin-right: 9px; flex: none; object-fit: contain; }
.gate .wordmark .logo { width: 60px; height: 60px; margin-right: 14px; }
.gate input { margin-bottom: 14px; }
.gate .btn { width: 100%; padding: 10px 16px; }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; background: var(--deep); color: var(--head); padding: 10px 18px; border-radius: 4px; z-index: 30; max-width: calc(100vw - 32px); font-weight: 500; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); border-left: 4px solid var(--ok); }
.toast.bad { border-left-color: var(--danger); }

/* ── Редакторы: достижения и сообщения ── */
li.ed { list-style: none; border-bottom: 1px solid var(--seam); }
li.ed .row { border-bottom: 0; }
.editor { padding: 6px 0 18px; max-width: 640px; }
.f { margin-bottom: 12px; }
.f > label { display: block; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.f > label > input, .f > label > select, .f > label > textarea { margin-top: 6px; color: var(--text); font-size: 15px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.f > .lbl { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 6px; }
.f .hint { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
textarea.plain { font-family: var(--ui); font-size: 15px; min-height: 76px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
.tog { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btns.pad { margin: 18px 0 6px; }
.builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 48px; align-items: start; }
.form h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); margin: 26px 0 10px; padding-top: 16px; border-top: 1px solid var(--seam); }
.form .items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.item { background: var(--rail); border-radius: 6px; padding: 12px 12px 8px; }
.item input, .item select, .item textarea { background: var(--deep); }
.item .btns { margin: 4px 0 4px; }
.colorrow { display: flex; gap: 8px; margin-top: 6px; }
.colorrow input[type=text] { flex: 1; margin: 0; }
.swatch { width: 44px; padding: 2px; height: 38px; flex: none; margin: 0; cursor: pointer; }
.pv { position: sticky; top: 24px; }
.pv-cap { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 8px; }

table.matrix { max-width: 560px; }
table.matrix .mx { text-align: center; width: 110px; padding-right: 0; }
table.matrix .switch { vertical-align: middle; }

/* ── Выбор ролей и каналов (как в Discord) ── */
.pick { position: relative; }
.pick-box { width: 100%; min-height: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 30px 4px 6px; background: var(--field); border: 0; border-radius: 3px; text-align: left; cursor: pointer; position: relative; color: var(--text); }
.pick-box::after { content: ''; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
.pick-box:focus-visible { outline: 2px solid var(--accent); }
.pick-ph { color: var(--muted); padding: 0 4px; }
.pick-pop { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: var(--deep); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); padding: 6px; max-height: 300px; display: flex; flex-direction: column; min-width: 220px; }
.pick-pop input { background: var(--bg); margin-bottom: 6px; }
.pick-list { overflow-y: auto; flex: 1; }
.pick-opt { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; text-align: left; padding: 6px 8px; border-radius: 4px; cursor: pointer; color: var(--text); }
.pick-opt:hover, .pick-opt.cur { background: var(--hover); }
.pick-opt .chk { width: 16px; height: 16px; border-radius: 3px; border: 2px solid var(--muted); flex: none; position: relative; }
.pick-opt[aria-selected='true'] .chk { background: var(--accent); border-color: var(--accent); }
.pick-opt[aria-selected='true'] .chk::after { content: ''; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.pick-opt .sub { margin-left: auto; color: var(--muted); font-size: 12px; }
.pick-none { color: var(--muted); padding: 8px; font-size: 13.5px; }
/* Роль как в Discord: цветной кружок и название */
.role { display: inline-flex; align-items: center; gap: 6px; background: var(--rail); border-radius: 4px; padding: 2px 8px 2px 6px; font-size: 13.5px; font-weight: 500; color: var(--text); max-width: 100%; line-height: 1.4; }
.pick-box .role { background: var(--deep); }
.role i { width: 12px; height: 12px; border-radius: 50%; background: #99aab5; flex: none; }
.role span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role button { background: none; border: 0; padding: 0 0 0 2px; cursor: pointer; color: var(--muted); font-size: 15px; line-height: 1; }
.role button:hover { color: var(--text); }
.pick-opt .role, .row .role { background: none; padding: 0; }
.chan { display: inline-flex; align-items: center; gap: 5px; color: var(--text); font-weight: 500; }
.chan svg { width: 14px; height: 14px; fill: currentColor; opacity: .8; flex: none; }
.chan b { color: var(--muted); font-weight: 400; }
.pick-box .chan { background: var(--deep); border-radius: 4px; padding: 2px 8px; font-size: 13.5px; }
.chan .x { background: none; border: 0; padding: 0 0 0 2px; cursor: pointer; color: var(--muted); font-size: 15px; line-height: 1; }
.chan .x:hover { color: var(--text); }

/* ── Сообщения Discord: журнал и предпросмотр ── */
.dc { background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.4; border-radius: 6px; padding: 12px 8px; border: 1px solid var(--seam); }
.feed-list { padding-bottom: 12px; }
.msg { position: relative; padding: 2px 16px 2px 72px; min-height: 22px; }
.msg:hover { background: var(--hover); }
.msg.first { margin-top: 16px; padding-top: 2px; }
.msg-ava { position: absolute; left: 16px; top: 2px; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 600; object-fit: cover; }
.msg-time { position: absolute; left: 0; width: 72px; text-align: center; top: 4px; font-size: 11px; color: var(--muted); visibility: hidden; }
.msg:hover .msg-time { visibility: visible; }
.msg-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.msg-head b { color: var(--head); font-weight: 500; }
.msg-head time, .msg-head .ct { color: var(--muted); font-size: 12px; }
.dc-tag { display: inline-block; background: var(--accent); color: #fff; font-size: 10px; border-radius: 3px; padding: 0 4px; line-height: 15px; font-weight: 600; vertical-align: 1px; }
.dc-text, .dc-desc, .dc-fval { overflow-wrap: anywhere; }
.dc a, .msg a { color: var(--link); text-decoration: none; }
.dc a:hover, .msg a:hover { text-decoration: underline; }
.dc code, .msg code { background: var(--code); border-radius: 3px; padding: 1px 5px; font-family: var(--mono); font-size: 13px; }
pre.dc-code { margin: 6px 0 0; background: var(--deep); border: 1px solid var(--embed-line); border-radius: 4px; padding: 8px 10px; font-family: var(--mono); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dc-embed { display: flex; gap: 14px; margin-top: 4px; max-width: 520px; background: var(--embed); border: 1px solid var(--embed-line); border-left: 4px solid var(--embed-line); border-radius: 4px; padding: 8px 14px 12px 12px; }
.dc-main { min-width: 0; flex: 1; }
.dc-author { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--head); }
.dc-ico { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.dc-ico.sm { width: 20px; height: 20px; }
.dc-title { margin-top: 8px; font-weight: 600; color: var(--head); font-size: 16px; overflow-wrap: anywhere; }
.dc-desc { margin-top: 6px; font-size: 14px; }
.dc-desc:first-child { margin-top: 8px; }
.dc-fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.dc-field { grid-column: 1 / -1; font-size: 14px; }
.dc-field.inline { grid-column: span 4; }
.dc-fname { font-weight: 600; color: var(--head); }
.dc-image { display: block; max-width: 100%; max-height: 300px; border-radius: 4px; margin-top: 16px; }
.dc-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; margin-top: 8px; flex: none; }
.dc-footer { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.dc-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dc-btn { display: inline-block; padding: 2px 16px; min-height: 32px; line-height: 28px; border-radius: 3px; font-size: 14px; font-weight: 500; color: #fff; background: #5865f2; }
.dc-btn.secondary, .dc-btn.link { background: var(--btn2); color: var(--btn2-ink); }
.dc-btn.success { background: #248046; }
.dc-btn.danger { background: #da373c; }
.dc-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.dc-head b { color: var(--head); font-weight: 500; }
.dc-msg { display: flex; gap: 14px; padding: 0 8px; }
.dc-ava { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 600; flex: none; }
.dc-body { min-width: 0; flex: 1; }
.divider { display: flex; align-items: center; gap: 8px; margin: 18px 16px 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--seam); }
/* Упоминания */
.pill { border-radius: 3px; padding: 0 2px; font-weight: 500; background: var(--pill); color: var(--pill-ink); }
.pill.role-m { background: rgba(153, 170, 181, .18); }
.dc u, .msg u { text-decoration: underline; }
.when { color: var(--text); background: var(--code); border-radius: 3px; padding: 0 3px; }

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; height: auto; }
  .wordmark { height: 44px; }
  .rail .cat-h { display: none; }
  .rail nav { flex-direction: row; overflow-x: auto; padding: 6px 8px; }
  .rail a { white-space: nowrap; }
  .rail .foot { margin-top: 0; }
  .main { padding: 22px 16px 70px; }
  .lede { font-size: 18px; }
  .settings { grid-template-columns: 1fr; gap: 16px; }
  .sub-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .field { grid-template-columns: 1fr; }
  .field .ctl.end { justify-content: flex-start; }
  .builder { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pv { position: static; order: -1; }
  .two { grid-template-columns: minmax(0, 1fr); }
  .row { flex-wrap: wrap; }
  .msg { padding-left: 60px; padding-right: 8px; }
  .msg-ava { left: 8px; width: 38px; height: 38px; }
  .msg-time { width: 60px; }
  .dc-field.inline { grid-column: span 6; }
}
@media (prefers-reduced-motion: reduce) { .dirty { animation: none; } .switch i, .switch i::after { transition: none; } }

/* страница участника */
.member-search { position: relative; max-width: 420px; margin-bottom: 28px; }
.member-search input { width: 100%; }
.found { position: absolute; left: 0; right: 0; top: 100%; z-index: 6; background: var(--rail); border: 1px solid var(--seam); border-radius: 6px; margin-top: 4px; }
.found li { padding: 2px 4px; }
.linkish { background: none; border: 0; padding: 4px 6px; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 4px; width: 100%; }
.linkish:hover { background: var(--hover); }
.back { margin-bottom: 16px; }
.m-head { display: flex; gap: 18px; align-items: center; margin-bottom: 28px; }
.m-ava { width: 80px; height: 80px; border-radius: 50%; background: var(--deep); flex: none; object-fit: cover; }
.m-name { font-size: 24px; }
.m-id .note { margin: 6px 0 0; }
.stats { display: flex; flex-wrap: wrap; gap: 8px 36px; margin-bottom: 14px; }
.stat .v { font-size: 22px; font-weight: 700; color: var(--head); }
.stat .k { font-size: 13px; color: var(--muted); }
.xp-line { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); max-width: 560px; }
.xpbar { flex: 1; height: 8px; border-radius: 4px; background: var(--deep); overflow: hidden; }
.xpbar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.row-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.row-form input[type=text] { flex: 1 1 220px; min-width: 0; }
.ach-list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--seam); }
.ach-list li.done strong::before { content: '✓ '; color: var(--ok); }
.ach-list .num { color: var(--muted); white-space: nowrap; font-size: 13px; }
@media (max-width: 720px) { .m-head { flex-direction: column; align-items: flex-start; } .ach-list li { flex-direction: column; gap: 2px; } }
.row-form select { width: auto; min-width: 200px; max-width: 100%; }
.field .hint { color: var(--muted); font-size: 12.5px; margin-top: 4px; max-width: 60ch; }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger:hover { filter: brightness(.9); }
.linkish.inline { display: inline; width: auto; padding: 0 4px; color: var(--link); }
textarea.plain { flex: 1 1 300px; min-width: 0; }
.notes li, .timeline li { padding: 10px 0; border-bottom: 1px solid var(--seam); }
.tl-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.timeline li.ban strong, .timeline li.kick strong { color: var(--bad); }
.timeline li.warn strong { color: var(--warn); }
.btn.discord { display: block; text-align: center; background: #5865f2; color: #fff; text-decoration: none; padding: 10px 16px; border-radius: 4px; font-weight: 600; margin-bottom: 14px; }
.btn.discord:hover { filter: brightness(.92); }
.gate .or { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.gate .lede { margin: 0 0 16px; font-size: 14px; }
.rail .foot { flex-wrap: wrap; }
.rail .state { white-space: nowrap; }
.rail .me { order: -1; flex-basis: 100%; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px; }
.rail .me img { width: 20px; height: 20px; border-radius: 50%; }
.plot .cell { fill: var(--gridline); }
.plot .cell.l1 { fill: var(--s1); fill-opacity: .22; } .plot .cell.l2 { fill: var(--s1); fill-opacity: .4; }
.plot .cell.l3 { fill: var(--s1); fill-opacity: .6; } .plot .cell.l4 { fill: var(--s1); fill-opacity: .8; } .plot .cell.l5 { fill: var(--s1); }
.plot .cell:hover { stroke: var(--head); stroke-width: 1; }
i.sw.cell { width: 18px; height: 12px; margin: 0 2px; background: var(--s1); border-radius: 3px; }
i.sw.cell.l1 { opacity: .22; } i.sw.cell.l2 { opacity: .4; } i.sw.cell.l3 { opacity: .6; } i.sw.cell.l4 { opacity: .8; }
.legend { align-items: center; }

/* ── Окно подтверждения ── */
dialog.modal { border: 0; padding: 0; border-radius: 8px; background: var(--bg); color: var(--text); width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
dialog.modal::backdrop { background: rgba(0, 0, 0, .6); }
.modal-body { padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 6px; }
.modal-body h2 { font-size: 19px; margin-bottom: 2px; }
.modal-body .f { margin: 6px 0 0; }
.btns.end { justify-content: flex-end; margin-top: 14px; }

/* ── Предпросмотр изменений настроек ── */
ul.diff { max-height: 50vh; overflow: auto; margin: 6px 0; }
ul.diff li { padding: 8px 0; border-bottom: 1px solid var(--seam); }
ul.diff .lab { font-weight: 500; color: var(--head); font-size: 14px; }
.diff-row { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; align-items: baseline; overflow-wrap: anywhere; }
.diff-row .from { color: var(--bad); text-decoration: line-through; text-decoration-color: rgba(250, 119, 124, .5); }
.diff-row .to { color: var(--ok); }
.diff-row .arrow { color: var(--muted); }

/* ── Права модераторов, списки галочек ── */
.perm-list { display: flex; flex-direction: column; max-width: 640px; }
.perm-list .tog { border-bottom: 1px solid var(--seam); }
.perm-list.scroll { max-height: 46vh; overflow: auto; }
.plain-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.plain-set:disabled { opacity: .6; }
.lede.small { font-size: 15px; margin-bottom: 14px; }

/* ── Мелочи ── */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
a.plain-link { color: inherit; text-decoration: none; display: block; border-radius: 4px; }
a.plain-link:hover { background: var(--hover); }
a.btn { display: inline-block; text-decoration: none; }
.crown { color: var(--warn); margin-left: 4px; }
.grow-pick { flex: 1 1 260px; min-width: 0; }
td.details { font-size: 13.5px; overflow-wrap: anywhere; max-width: 420px; }
.bar input[type=date] { width: auto; }
.bar label.grow { flex: 1; }
.ext-img { display: inline-block; margin-top: 8px; padding: 8px 12px; border-radius: 4px; background: var(--deep); color: var(--muted) !important; font-size: 13px; text-decoration: none; }
.ext-img:hover { color: var(--text) !important; }
.ext-ph { display: flex; align-items: center; justify-content: center; background: var(--deep); color: var(--muted); font-size: 12.5px; border-radius: 4px; }
.ext-ph.dc-image { min-height: 80px; margin-top: 12px; }
.ext-ph.dc-thumb { width: 80px; height: 80px; }
.ext-ph.dc-ico { width: 24px; height: 24px; border-radius: 50%; }

/* ── Массовые действия ── */
.bulk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; max-width: 720px; align-items: end; }
.bulk-pv, .bulk-job { margin-top: 16px; padding: 14px 16px; background: var(--rail); border-radius: 6px; max-width: 720px; }
.bulk-job .xp-line { margin: 10px 0; max-width: none; }
ul.sample { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 12px; margin: 8px 0; }

/* ── Безопасность ── */
.totp-setup { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 6px 0; }
.totp-setup .qr { width: 220px; height: 220px; border-radius: 6px; background: #fff; image-rendering: pixelated; }
.totp-setup .key { font-size: 15px; letter-spacing: .06em; color: var(--head); user-select: all; text-align: center; overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .bulk-grid { grid-template-columns: minmax(0, 1fr); }
  .modal-body { padding: 18px 16px 14px; }
  td.details { max-width: none; }
}


/* ═════════════════════════════════════════════════════════════════
   Оформление nvy. Слой поверх компонентов выше: те же селекторы, позже по файлу.
   Главный элемент — контурный заголовок раздела (как «Stats» на карточке); всё остальное спокойное.
   ═════════════════════════════════════════════════════════════════ */

/* Фон: графит, мелкое зерно и слабое свечение снизу — как фон баннера */
/* Фон на html, чтобы зерно покрывало всё окно, даже когда страница короче экрана */
html {
  min-height: 100%;
  background:
    url('/noise.png'),
    radial-gradient(120% 60% at 55% 115%, rgba(255, 255, 255, .07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
body { background: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h2 { font-family: var(--display); font-size: 17px; letter-spacing: -.005em; }

/* ── Боковая колонка ── */
.rail { background: rgba(9, 9, 11, .72); border-right: 1px solid var(--seam); backdrop-filter: blur(8px); }
.wordmark { height: 64px; padding: 0 20px; box-shadow: none; border-bottom: 1px solid var(--seam); }
.rail nav { padding: 14px 12px 0; gap: 3px; }
.rail a { padding: 8px 14px; border-radius: 12px; font-weight: 500; color: var(--muted); }
.rail a::before { content: none; }
.rail a:hover { background: var(--hover); color: var(--text); }
.rail a[aria-current='page'] { background: var(--glass); color: var(--head); box-shadow: var(--glass-edge), inset 0 0 0 1px var(--hairline); }
.rail .n { background: var(--head); color: var(--btn-ink); border-radius: 999px; }
.rail .foot { background: none; border-top: 1px solid var(--seam); padding: 14px 16px; }
.rail button.link { border-radius: 999px; padding: 4px 12px; }
.crown { color: var(--muted); }

/* ── Заголовок раздела: контур Montserrat Bold ── */
.head { margin-bottom: 30px; }
.head h1 {
  font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1.1; letter-spacing: -.01em;
  /* Контур тенью, а не text-stroke: у шрифта перекрываются части букв, и обводка рисовала бы линии внутри «т», «а» */
  color: var(--bg);
  text-shadow:
    1px 0 #c9c9ce, -1px 0 #c9c9ce, 0 1px #c9c9ce, 0 -1px #c9c9ce,
    .7px .7px #c9c9ce, -.7px -.7px #c9c9ce, .7px -.7px #c9c9ce, -.7px .7px #c9c9ce;
}
.head p { margin-top: 10px; font-size: 15px; }
.lede { font-weight: 500; }
.lede.down { color: var(--bad); }

/* ── Кнопки: белая главная, стеклянная второстепенная, тёмно-красная опасная ── */
.btn { border-radius: 999px; padding: 9px 20px; font-weight: 600; background: var(--btn); color: var(--btn-ink); transition: background .12s, box-shadow .12s; }
.btn:hover { background: var(--accent-hover); box-shadow: 0 0 0 4px rgba(255, 255, 255, .08); }
.btn.quiet { background: var(--btn2); color: var(--btn2-ink); box-shadow: inset 0 0 0 1px var(--hairline); }
.btn.quiet:hover { background: rgba(255, 255, 255, .11); filter: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.btn.danger { background: rgba(229, 72, 77, .14); color: var(--bad); box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .45); }
.btn.danger:hover { background: rgba(229, 72, 77, .24); filter: none; box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .7); }
.btn.sm { padding: 5px 14px; font-size: 13.5px; }
.btn.discord { background: var(--btn); color: var(--btn-ink); border-radius: 999px; }
.btn.discord:hover { background: var(--accent-hover); filter: none; }

/* ── Поля ── */
input, select, textarea, .pick-box { background: var(--field); border: 1px solid var(--seam); border-radius: 12px; }
input, select { padding: 10px 14px; }
input:hover, select:hover, textarea:hover, .pick-box:hover { border-color: var(--hairline); }
input:focus-visible, select:focus-visible, textarea:focus-visible, .pick-box:focus-visible { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 1px; border-color: transparent; }
select { padding-right: 34px; }
.pick-box { min-height: 44px; padding: 5px 34px 5px 8px; }
.member-search input, .bar input[type=search] { border-radius: 999px; padding-left: 18px; }

/* Переключатель: белый, когда включён */
.switch i { background: #3a3a40; }
.switch i::after { background: #d4d4d8; }
.switch input:checked + i { background: var(--head); }
.switch input:checked + i::after { background: var(--bg); }

/* ── Стеклянные поверхности ── */
.dc, .found, .pick-pop, .dirty, .bulk-pv, .bulk-job, .item, .gate, dialog.modal, .toast, .tip {
  background: var(--glass); border: 1px solid var(--hairline); box-shadow: var(--glass-edge), 0 18px 50px rgba(0, 0, 0, .45);
}
.dc { border-radius: 18px; padding: 14px 8px; box-shadow: var(--glass-edge); }
.found, .pick-pop { border-radius: 14px; }
.dirty { border-radius: 999px; padding: 8px 8px 8px 22px; }
.bulk-pv, .bulk-job, .item { border-radius: 18px; }
.gate { border-radius: 24px; padding: 36px 34px 30px; margin-top: 16vh; }
.gate .wordmark { border-bottom: 0; height: auto; }
.found:empty { display: none; }
dialog.modal { border-radius: 22px; }
dialog.modal::backdrop { background: rgba(5, 5, 6, .7); backdrop-filter: blur(3px); }
.toast { border-radius: 999px; padding: 10px 20px 10px 18px; border-left: 1px solid var(--hairline); display: flex; align-items: center; gap: 10px; }
.toast::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.toast.bad { border-left-color: var(--hairline); }
.toast.bad::before { background: var(--danger); }
.pick-pop input { background: var(--bg); }
.pick-opt, .linkish, .tabs button, .sub-nav button { border-radius: 10px; }
.pick-opt[aria-selected='true'] .chk::after { border-color: var(--btn-ink); }

/* ── Вкладки и подменю настроек — как пункты меню ── */
.tabs { gap: 6px; }
.tabs button { padding: 6px 14px; border-radius: 999px; }
.tabs button[aria-selected='true'], .sub-nav button[aria-current='true'] { background: var(--glass); color: var(--head); box-shadow: var(--glass-edge), inset 0 0 0 1px var(--hairline); }
.sub-nav button { padding: 8px 12px; }

/* ── Подписи без заглавных букв ── */
th, .f > label, .f > .lbl, .form h3, .pv-cap { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
th { color: var(--muted); }

/* ── Метки, роли, прогресс ── */
.role, .tag { border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--seam); }
.pick-box .role, .pick-box .chan { background: rgba(255, 255, 255, .06); border-radius: 999px; }
.pick-opt .role, .row .role { box-shadow: none; background: none; }
.xpbar { background: rgba(255, 255, 255, .08); height: 8px; border-radius: 999px; }
.xpbar i { background: linear-gradient(90deg, #ffffff, #a1a1aa); border-radius: 999px; }
.stat .v { font-family: var(--display); letter-spacing: -.01em; }
.m-ava { box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.m-name { font-family: var(--display); }

/* ── Лента в стиле Discord: аватар бота и метка «БОТ» в монохроме ── */
.msg-ava, .dc-ava { background: #2a2a2e; color: var(--head); }
.dc-tag { background: var(--head); color: var(--btn-ink); }
.dc-btn { background: #f4f4f5; color: #121214; border-radius: 8px; }
.dc-btn.secondary, .dc-btn.link { background: #2f2f34; color: #f4f4f5; }
.dc-embed { border-radius: 8px; }
.msg { border-radius: 8px; }

@media (max-width: 860px) {
  .rail { backdrop-filter: none; border-right: 0; border-bottom: 1px solid var(--seam); }
  .wordmark { height: 56px; border-bottom: 0; }
  .rail nav { padding: 4px 12px 10px; }
  .rail .foot { border-top: 1px solid var(--seam); }
  .head h1 { font-size: 34px; }
  .dirty { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* Системные галочки, радиокнопки и календарь — в цвет панели */
:root { accent-color: #f4f4f5; }

/* Карточки /stats и /rank в карточке участника */
.card-img { display: block; width: 100%; max-width: 860px; margin-top: 12px; border-radius: 16px; background: var(--deep); box-shadow: inset 0 0 0 1px var(--seam); min-height: 120px; }
.card-img.loading { opacity: .35; }

/* ── Обзор ── */
.main:has(.ov-cols) { max-width: 1180px; }
.attention .alerts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.alert { display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px; border-radius: 999px; background: var(--glass); box-shadow: var(--glass-edge), inset 0 0 0 1px var(--hairline); }
.alert .mark { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.alert.bad .mark { background: var(--danger); box-shadow: 0 0 0 4px rgba(229, 72, 77, .18); }
.alert.warn .mark { background: var(--warn); box-shadow: 0 0 0 4px rgba(232, 176, 75, .16); }
.alert .grow { flex: 1; min-width: 0; color: var(--head); }
.calm { display: flex; align-items: center; gap: 10px; color: var(--muted); margin-top: 8px; }
.calm .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.attention .pending { margin-top: 12px; }
.week-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 0 6px; }
.fact { padding: 16px 20px; border-radius: 18px; background: var(--glass); box-shadow: var(--glass-edge), inset 0 0 0 1px var(--hairline); }
.fact .v { font-family: var(--display); font-size: 28px; font-weight: 700; color: var(--head); letter-spacing: -.01em; }
.fact .k { color: var(--text); margin-top: 2px; }
.fact .sub { color: var(--muted); font-size: 13px; margin-top: 6px; }
.week-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ov-cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.top { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.top-row { display: flex !important; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; }
.top-row .rank { width: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.top-row .lvl { color: var(--muted); font-size: 13px; }
@media (max-width: 960px) {
  .ov-cols, .week-charts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .week-facts { grid-template-columns: minmax(0, 1fr); }
  .alert { border-radius: 18px; flex-wrap: wrap; }
}

/* Строка состояния в обзоре */
.status-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.st-pill { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--glass); box-shadow: var(--glass-edge), inset 0 0 0 1px var(--hairline); }
.st-pill .v { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--head); letter-spacing: -.01em; }
.st-pill .k { color: var(--muted); font-size: 14px; }
.st-pill.online { align-items: center; }
.st-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(70, 196, 126, .16); align-self: center; }
.st-pill.off .dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(229, 72, 77, .18); }
.st-pill.off .v, .st-pill.warn .v { color: var(--bad); }
/* Предпросмотр своих карточек в настройках */
.cards-pv { display: grid; gap: 14px; }
.cards-pv .card-img { margin-top: 0; }