/* ===== Discord cell in the home "О сервере" strip + popup card (discord_api.php feeds it) ===== */
.rb_new .server-info-bar.rb_live_bar_wrap.rb_has_dc { grid-template-columns:1.45fr .85fr .85fr 1.6fr 1.75fr; }

.rb_new .rb_dc { align-self:stretch; display:flex; align-items:center; gap:14px; text-align:left; padding:14px 22px; cursor:pointer; position:relative; color:inherit; outline:none; transition:background .25s; background:linear-gradient(90deg,#5865f205,#5865f212); }
.rb_new .rb_dc:hover, .rb_new .rb_dc:focus-visible, .rb_new .rb_dc.is-open { background:linear-gradient(90deg,#5865f20f,#5865f22a); }
.rb_new .rb_dc:focus-visible { box-shadow:inset 0 0 0 2px #8b95ff; }
.rb_new .rb_dc::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,transparent,#5865f2,transparent); opacity:0; transition:opacity .25s; }
.rb_new .rb_dc:hover::after, .rb_new .rb_dc.is-open::after { opacity:1; }

.rb_dc_logo { flex:0 0 46px; width:46px; height:46px; border-radius:13px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#6d78ff,#4752c4); box-shadow:0 6px 18px #5865f240, inset 0 1px 0 #ffffff30; overflow:hidden; transition:transform .25s, border-radius .25s; }
.rb_dc_logo svg { width:24px; height:24px; }
.rb_dc_logo img { width:100%; height:100%; object-fit:cover; }
.rb_dc_logo.has-brand img { width:26px; height:26px; object-fit:contain; filter:brightness(0) invert(1); }   /* any colour of the logo file -> white on the purple tile */
.rb_dc_logo.has-guild { background:#2b3440; }
.rb_new .rb_dc:hover .rb_dc_logo { transform:translateY(-1px); border-radius:16px; }

.rb_dc_body { min-width:0; flex:1; }
.rb_dc_top { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12px; color:#9ba9b7; white-space:nowrap; }
.rb_new .rb_dc .rb_dc_top span { display:inline; margin:0; font-size:12px; color:#9ba9b7; }
.rb_dc_state { display:inline-flex; align-items:center; gap:7px; font:600 12px/1 var(--sans); font-style:normal; color:#fff; }
.rb_dc_state b { font-weight:600; }
.rb_dc.is-down .rb_dc_state { color:#f3a3a5; }
.rb_dc_dot { width:8px; height:8px; border-radius:50%; flex:0 0 8px; background:#23a55a; box-shadow:0 0 0 0 #23a55a88; animation:rbDcPulse 2.2s infinite; }
.rb_dc.is-down .rb_dc_dot { background:#80848e; animation:none; }
@keyframes rbDcPulse { 0%{box-shadow:0 0 0 0 #23a55a80} 70%{box-shadow:0 0 0 7px #23a55a00} 100%{box-shadow:0 0 0 0 #23a55a00} }

.rb_dc_num { display:flex; align-items:baseline; gap:7px; margin-top:4px; white-space:nowrap; }
.rb_dc_num b { font-size:22px; line-height:1.1; color:#e5e5e5; font-weight:600; font-variant-numeric:tabular-nums; }
.rb_dc_num em { font-style:normal; font-size:12px; color:#9ba9b7; }

.rb_new .rb_dc .rb_dc_faces, .rb_dc_faces { display:flex; align-items:center; align-self:center; margin:0 0 0 auto; padding-left:8px; font-size:inherit; }
.rb_dc_line { height:4px; margin-top:8px; border-radius:3px; background:#0a131c; box-shadow:inset 0 0 0 1px #9aa9b41a; overflow:hidden; }
.rb_dc_line b { display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,#4752c4,#8b95ff); transition:width .6s; }
.rb_dc_faces img, .rb_dc_faces i { width:20px; height:20px; border-radius:50%; border:2px solid #16202b; margin-left:-6px; background:#2b3440; object-fit:cover; display:block; }
.rb_dc_faces img:first-child { margin-left:0; }
.rb_dc_faces i { font:600 9px/16px var(--sans); color:#c9d0ff; text-align:center; font-style:normal; background:#3a4170; width:auto; min-width:20px; padding:0 4px; border-radius:10px; }
.rb_dc_go { flex:0 0 auto; color:#8b95ff; opacity:.55; transition:transform .25s, opacity .25s; }
.rb_dc_go svg { width:16px; height:16px; display:block; }
.rb_new .rb_dc:hover .rb_dc_go, .rb_new .rb_dc.is-open .rb_dc_go { opacity:1; transform:translateX(3px); }

/* popup card (appended to <body>, so the strip's overflow does not cut it) */
.rb_dc_pop { position:fixed; z-index:60; width:312px; max-width:calc(100vw - 24px); padding:16px; border-radius:14px; background:#121a24f7; border:1px solid #5865f240; box-shadow:0 18px 50px #000000a0, 0 0 0 1px #ffffff08 inset; color:#e5e5e5; font:14px/1.4 var(--sans, Arial, sans-serif); opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .18s, transform .18s; backdrop-filter:blur(8px); }
.rb_dc_pop.is-open { opacity:1; transform:none; pointer-events:auto; }
.rb_dc_pop_head { display:flex; align-items:center; gap:12px; }
.rb_dc_pop_head .rb_dc_logo { flex-basis:40px; width:40px; height:40px; border-radius:12px; }
.rb_dc_pop_title { font-weight:700; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rb_dc_pop_sub { font-size:12px; color:#9ba9b7; display:flex; gap:12px; margin-top:2px; }
.rb_dc_pop_sub span { display:inline-flex; align-items:center; gap:5px; }
.rb_dc_pop_sub span::before { content:""; width:7px; height:7px; border-radius:50%; background:#80848e; }
.rb_dc_pop_sub span.on::before { background:#23a55a; }
.rb_dc_bar { height:5px; border-radius:3px; background:#0a131c; margin:14px 0 4px; overflow:hidden; box-shadow:inset 0 0 0 1px #9aa9b41a; }
.rb_dc_bar b { display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,#4752c4,#8b95ff); transition:width .6s; }
.rb_dc_bar_note { font-size:11px; color:#8792a0; }
.rb_dc_list { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:2px; max-height:236px; overflow:auto; }
.rb_dc_list li { display:flex; align-items:center; gap:10px; padding:5px 6px; border-radius:8px; }
.rb_dc_list li:hover { background:#ffffff08; }
.rb_dc_ava { position:relative; flex:0 0 28px; width:28px; height:28px; }
.rb_dc_ava img { width:28px; height:28px; border-radius:50%; object-fit:cover; background:#2b3440; display:block; }
.rb_dc_ava s { position:absolute; right:-2px; bottom:-2px; width:11px; height:11px; border-radius:50%; border:2.5px solid #121a24; background:#23a55a; }
.rb_dc_ava s.idle { background:#f0b232; } .rb_dc_ava s.dnd { background:#f23f43; }
.rb_dc_who { min-width:0; }
.rb_dc_who b { display:block; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rb_dc_who small { display:block; font-size:11px; color:#8792a0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rb_dc_more { font-size:12px; color:#8792a0; padding:4px 6px 0; }
.rb_dc_join { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; height:40px; border-radius:10px; background:linear-gradient(145deg,#6d78ff,#4752c4); color:#fff !important; font-weight:700; font-size:14px; text-decoration:none; box-shadow:0 6px 18px #5865f240; transition:filter .2s, transform .2s; }
.rb_dc_join:hover { filter:brightness(1.1); transform:translateY(-1px); }
.rb_dc_join.is-disabled { pointer-events:none; opacity:.5; }

@media (max-width:1250px) {
  .rb_new .server-info-bar.rb_live_bar_wrap.rb_has_dc { grid-template-columns:1.3fr .8fr .8fr 1.5fr 1.6fr; }
  .rb_new .rb_dc { padding-inline:14px; gap:11px; }
  .rb_dc_go { display:none; }
}
@media (max-width:950px) {
  .rb_new .server-info-bar.rb_live_bar_wrap.rb_has_dc { grid-template-columns:1fr 1fr 1fr; }
  .rb_new .rb_has_dc .server-info-title { grid-column:1/-1; }
  .rb_new .rb_has_dc .rb_live { grid-column:auto; }
  .rb_new .rb_has_dc .rb_dc { grid-column:1/-1; border-left:0; border-top:1px solid var(--line); }
  .rb_dc_go { display:block; margin-left:auto; }
}
@media (max-width:760px) {
  .rb_new .server-info-bar.rb_live_bar_wrap.rb_has_dc { grid-template-columns:1fr 1fr; }
  .rb_new .rb_has_dc .rb_live { grid-column:1/-1; border-bottom:1px solid var(--line); }
  .rb_new .rb_has_dc .rb_dc { border-top:0; padding:14px 19px; }
}
@media (prefers-reduced-motion:reduce) { .rb_dc_dot { animation:none; } .rb_dc_pop, .rb_dc_logo, .rb_dc_go { transition:none; } }