:root {
  --bg: #0d0e12;
  --panel: #15171d;
  --panel-2: #1b1d24;
  --panel-3: #24272f;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.14);
  --text: #f5f4f0;
  --muted: #9699a2;
  --soft: #d0d1d0;
  --gold: #e8b858;
  --green: #59d093;
  --blue: #4eabed;
  --red: #ec625d;
  --shadow: 0 24px 70px rgba(0,0,0,.32);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; min-width:320px; color:var(--text); background:radial-gradient(circle at 90% -10%,rgba(214,161,53,.13),transparent 30rem),var(--bg); font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input { font:inherit; }
button { color:inherit; cursor:pointer; }
a { color:inherit; text-decoration:none; }
.container { width:min(1140px,calc(100% - 48px)); margin:0 auto; }
.site-header { position:sticky; top:0; z-index:20; background:rgba(13,14,18,.86); border-bottom:1px solid var(--line); backdrop-filter:blur(18px); }
.site-header-inner { height:74px; display:flex; align-items:center; gap:26px; }
.brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(232,184,88,.45); border-radius:11px; background:linear-gradient(145deg,#ffdb73,#b3741f); color:#261904; font-size:18px; font-style:italic; font-weight:950; box-shadow:0 8px 24px rgba(211,148,43,.15); }
.brand-text { font-size:17px; font-weight:900; letter-spacing:-.05em; }
.brand-text span { color:var(--gold); }
.brand-sub { display:block; margin-top:-3px; color:var(--muted); font-size:9px; font-weight:750; letter-spacing:.15em; text-transform:uppercase; }
.site-nav { display:flex; gap:3px; align-items:center; }
.site-nav a { position:relative; padding:9px 11px; border-radius:8px; color:var(--muted); font-size:12px; font-weight:750; transition:.2s; }
.site-nav a:hover,.site-nav a.active { color:var(--text); background:rgba(255,255,255,.06); }
.site-nav a.active::after { content:""; position:absolute; left:12px; right:12px; bottom:-18px; height:2px; background:var(--gold); box-shadow:0 0 10px var(--gold); }
.header-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.header-button { display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:0 12px; border:1px solid var(--line-strong); border-radius:10px; color:var(--soft); background:rgba(255,255,255,.03); font-size:11px; font-weight:800; transition:.2s; }
.header-button:hover { color:var(--gold); border-color:rgba(232,184,88,.4); background:rgba(232,184,88,.1); }
.header-button.primary { border-color:transparent; color:#281b08; background:linear-gradient(135deg,#f6ce73,#c3892c); }
.menu-toggle { display:none; width:36px; height:36px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.03); }
.page-main { padding:54px 0 88px; }
.page-kicker { display:flex; align-items:center; gap:8px; margin-bottom:12px; color:var(--gold); font-size:10px; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.page-kicker::before { content:""; width:25px; height:1px; background:var(--gold); }
.page-title { margin:0; font-size:clamp(32px,5vw,52px); line-height:1; letter-spacing:-.065em; }
.page-description { max-width:650px; margin:14px 0 26px; color:var(--muted); font-size:14px; line-height:1.7; }
.page-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:34px 0 14px; }
.page-bar h2 { margin:0; font-size:19px; letter-spacing:-.04em; }
.page-bar p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.card { border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.025); box-shadow:var(--shadow); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 15px; border:1px solid var(--line-strong); border-radius:10px; color:var(--soft); background:rgba(255,255,255,.04); font-size:11px; font-weight:800; transition:.2s; }
.btn:hover { border-color:rgba(232,184,88,.4); color:var(--gold); background:rgba(232,184,88,.1); transform:translateY(-1px); }
.btn-primary { border:0; color:#281b08; background:linear-gradient(135deg,#f6ce73,#c3892c); }
.btn-primary:hover { color:#281b08; background:linear-gradient(135deg,#ffe096,#d79a35); }
.search { position:relative; }
.search svg { position:absolute; left:11px; top:10px; width:15px; color:var(--muted); }
.search input { width:245px; height:38px; padding:0 11px 0 34px; border:1px solid var(--line); border-radius:10px; outline:0; color:var(--text); background:rgba(255,255,255,.035); font-size:11px; }
.search input:focus { border-color:rgba(232,184,88,.45); box-shadow:0 0 0 3px rgba(232,184,88,.07); }
.search input::placeholder { color:#70737b; }
.empty { padding:35px; color:var(--muted); text-align:center; }
.site-footer { padding:25px 0 32px; border-top:1px solid var(--line); color:var(--muted); }
.site-footer-inner { display:flex; align-items:center; justify-content:space-between; gap:25px; }
.footer-links { display:flex; flex-wrap:wrap; gap:16px; font-size:11px; }
.footer-links a:hover { color:var(--gold); }
.footer-copy { font-size:10px; }
/* role manager */
.role-manager { overflow:hidden; border:1px solid var(--line); border-radius:17px; background:#202229; box-shadow:var(--shadow); }
.role-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 18px; border-bottom:1px solid var(--line); background:#1b1d23; }
.role-toolbar-left { display:flex; align-items:center; gap:12px; }
.role-count { color:var(--muted); font-size:11px; }
.role-table-head { display:grid; grid-template-columns:20px minmax(0,1fr) 92px 96px; gap:12px; align-items:center; padding:0 18px; min-height:38px; color:#72757e; border-bottom:1px solid var(--line); font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.role-list { background:#202229; }
.role-row { display:grid; grid-template-columns:20px minmax(0,1fr) 92px 96px; gap:12px; align-items:center; min-height:61px; padding:0 18px; border-bottom:1px solid rgba(255,255,255,.065); transition:.18s; }
.role-row:hover { background:rgba(255,255,255,.035); }
.role-row.selected { background:rgba(255,255,255,.09); }
.drag-handle { color:#71747d; font-size:16px; letter-spacing:-4px; opacity:0; }
.role-row:hover .drag-handle,.role-row.selected .drag-handle { opacity:1; }
.role-name-wrap { display:flex; min-width:0; align-items:center; gap:11px; }
.role-icon { width:21px; height:21px; flex-shrink:0; color:var(--role-color); filter:drop-shadow(0 0 5px color-mix(in srgb,var(--role-color),transparent 55%)); }
.role-name { overflow:hidden; color:#f0f0ee; font-size:13px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.role-member-count { display:flex; justify-content:flex-start; align-items:center; gap:7px; color:#c6c8cc; font-size:12px; }
.role-member-count svg { width:16px; height:16px; color:#cfd1d5; }
.role-actions { display:flex; justify-content:flex-end; gap:7px; }
.role-action { width:39px; height:38px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.055); border-radius:9px; color:#f0f0ee; background:rgba(255,255,255,.07); transition:.18s; }
.role-action:hover { color:var(--gold); border-color:rgba(232,184,88,.32); background:rgba(232,184,88,.12); }
.role-action svg { width:17px; height:17px; }
.role-more { position:relative; }
.role-popover { position:absolute; right:0; top:43px; z-index:5; display:none; width:150px; padding:5px; border:1px solid var(--line-strong); border-radius:10px; background:#191b21; box-shadow:var(--shadow); }
.role-popover.open { display:block; }
.role-popover button { display:block; width:100%; padding:8px 9px; border:0; border-radius:7px; color:var(--soft); background:transparent; text-align:left; font-size:11px; }
.role-popover button:hover { color:var(--gold); background:rgba(255,255,255,.07); }
.role-editor { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.67); backdrop-filter:blur(8px); opacity:0; visibility:hidden; transition:.2s; }
.role-editor.open { opacity:1; visibility:visible; }
.editor-card { width:min(420px,100%); padding:22px; border:1px solid var(--line-strong); border-radius:16px; background:#191b21; box-shadow:var(--shadow); transform:translateY(10px); transition:.2s; }
.role-editor.open .editor-card { transform:translateY(0); }
.editor-head { display:flex; justify-content:space-between; gap:12px; align-items:start; }
.editor-head h2 { margin:0; font-size:19px; letter-spacing:-.04em; }
.editor-head p { margin:6px 0 18px; color:var(--muted); font-size:11px; }
.editor-close { width:30px; height:30px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:transparent; }
.editor-close:hover { color:var(--text); background:rgba(255,255,255,.06); }
.editor-label { display:block; margin:13px 0 6px; color:var(--soft); font-size:11px; font-weight:750; }
.editor-input,.editor-select { width:100%; height:40px; padding:0 11px; border:1px solid var(--line); border-radius:9px; outline:0; color:var(--text); background:#24272f; font-size:12px; }
.editor-input:focus,.editor-select:focus { border-color:rgba(232,184,88,.5); }
.editor-actions { display:flex; gap:8px; margin-top:18px; }
.editor-actions .btn { flex:1; }
/* content pages */
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.feature-card { padding:18px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.025); transition:.2s; }
.feature-card:hover { transform:translateY(-3px); border-color:rgba(232,184,88,.32); background:rgba(232,184,88,.07); }
.feature-icon { width:35px; height:35px; display:grid; place-items:center; margin-bottom:14px; border-radius:10px; color:var(--gold); background:rgba(232,184,88,.12); }
.feature-icon svg { width:18px; }
.feature-card h3 { margin:0 0 5px; font-size:13px; }
.feature-card p { margin:0; color:var(--muted); font-size:11px; line-height:1.55; }
.feature-card .feature-link { display:inline-block; margin-top:13px; color:var(--gold); font-size:11px; font-weight:800; }
.event-grid-page { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.event-page-card { display:flex; gap:13px; align-items:start; min-height:115px; padding:17px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.025); }
.date-box { width:39px; height:39px; display:grid; place-content:center; flex-shrink:0; border:1px solid rgba(232,184,88,.24); border-radius:9px; background:rgba(232,184,88,.1); }
.date-box strong { color:var(--gold); font-size:13px; line-height:1; }
.date-box small { color:var(--muted); font-size:8px; text-transform:uppercase; }
.event-page-card h3 { margin:1px 0 5px; font-size:12px; }
.event-page-card p { margin:0; color:var(--muted); font-size:10px; }
.rule-list { display:grid; gap:10px; max-width:820px; }
.rule-item { display:flex; gap:13px; padding:17px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.025); }
.rule-number { color:var(--gold); font-size:12px; font-weight:900; }
.rule-item h3 { margin:0 0 4px; font-size:12px; }
.rule-item p { margin:0; color:var(--muted); font-size:11px; line-height:1.55; }
@media (max-width:850px) { .site-header-inner { gap:12px; } .site-nav { gap:0; } .site-nav a { padding:8px; } .role-table-head,.role-row { grid-template-columns:18px minmax(0,1fr) 64px 90px; gap:8px; padding-left:12px; padding-right:12px; } .feature-grid,.event-grid-page { grid-template-columns:repeat(2,1fr); } }
@media (max-width:650px) { .container { width:min(100% - 28px,560px); } .site-header-inner { height:66px; } .site-nav { position:absolute; top:66px; left:14px; right:14px; display:none; flex-direction:column; align-items:stretch; padding:6px; border:1px solid var(--line-strong); border-radius:12px; background:#191b21; box-shadow:var(--shadow); } .site-nav.open { display:flex; } .site-nav a.active::after { display:none; } .menu-toggle { display:grid; place-items:center; margin-left:0; } .header-button { display:none; } .page-main { padding-top:39px; } .page-bar { align-items:stretch; flex-direction:column; } .search input { width:100%; } .role-table-head { display:none; } .role-row { grid-template-columns:14px minmax(0,1fr) 42px 89px; min-height:57px; padding-left:10px; padding-right:10px; } .role-name { font-size:11px; } .role-member-count { font-size:10px; gap:4px; } .role-member-count span { display:none; } .role-actions { gap:5px; } .role-action { width:39px; height:35px; } .role-toolbar { align-items:stretch; flex-direction:column; } .feature-grid,.event-grid-page { grid-template-columns:1fr; } .site-footer-inner { align-items:flex-start; flex-direction:column; } }
/* role permissions */
.permission-strip { display:flex; align-items:center; gap:11px; margin:20px 0 8px; padding:13px 15px; border:1px solid rgba(236,98,93,.22); border-radius:13px; background:rgba(236,98,93,.08); }
.permission-strip.allowed { border-color:rgba(89,208,147,.28); background:rgba(89,208,147,.08); }
.permission-symbol { width:28px; height:28px; display:grid; place-items:center; flex-shrink:0; border-radius:9px; color:var(--red); background:rgba(236,98,93,.14); font-size:13px; }
.permission-strip.allowed .permission-symbol { color:var(--green); background:rgba(89,208,147,.15); }
.permission-copy { display:flex; flex-direction:column; gap:1px; min-width:0; }
.permission-copy strong { font-size:11px; }
.permission-copy span { color:var(--muted); font-size:10px; }
.permission-role { margin-left:auto; padding-left:15px; border-left:1px solid var(--line); text-align:right; }
.permission-role small { display:block; color:var(--muted); font-size:9px; }
.permission-role b { color:var(--soft); font-size:11px; }
.grantors-line { margin:0 0 20px; color:var(--muted); font-size:10px; line-height:1.6; }
.grantors-line span { color:var(--soft); font-weight:800; }
.role-action:disabled, .btn:disabled { cursor:not-allowed; opacity:.38; filter:grayscale(.35); transform:none; }
.grant-message { min-height:18px; margin-top:12px; color:var(--green); font-size:10px; }
@media (max-width:650px) { .permission-strip { align-items:flex-start; } .permission-role { margin-left:auto; } .grantors-line { font-size:9px; } }
/* profile and settings */
.profile-layout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:14px; align-items:start; }
.profile-card { padding:22px; text-align:center; }
.profile-avatar-large { width:78px; height:78px; display:grid; place-items:center; margin:0 auto 14px; border:2px solid rgba(232,184,88,.35); border-radius:23px; color:#2b1b08; background:linear-gradient(145deg,#f5cf73,#ba7922); font-size:24px; font-weight:900; }
.profile-card h2 { margin:0; font-size:19px; letter-spacing:-.04em; }
.profile-card .role-badge { display:inline-flex; margin-top:8px; padding:5px 9px; border:1px solid rgba(232,184,88,.25); border-radius:7px; color:var(--gold); background:rgba(232,184,88,.1); font-size:10px; font-weight:800; }
.profile-card p { margin:12px 0 0; color:var(--muted); font-size:11px; }
.profile-card .btn { width:100%; margin-top:18px; }
.profile-details { padding:22px; }
.profile-details h2 { margin:0 0 15px; font-size:16px; letter-spacing:-.03em; }
.profile-stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.profile-stat { padding:14px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.025); }
.profile-stat small { display:block; color:var(--muted); font-size:10px; }
.profile-stat strong { display:block; margin-top:3px; color:var(--soft); font-size:12px; }
.settings-card { max-width:720px; padding:23px; }
.settings-card h2 { margin:0; font-size:18px; letter-spacing:-.04em; }
.settings-card > p { margin:6px 0 21px; color:var(--muted); font-size:11px; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.settings-field { margin-bottom:14px; }
.settings-field.full { grid-column:1 / -1; }
.settings-field label { display:block; margin:0 0 6px; color:var(--soft); font-size:11px; font-weight:750; }
.settings-field input { width:100%; height:40px; padding:0 11px; border:1px solid var(--line); border-radius:9px; outline:0; color:var(--text); background:#24272f; font-size:12px; }
.settings-field input:focus { border-color:rgba(232,184,88,.48); }
.settings-field input:disabled { color:var(--muted); cursor:not-allowed; opacity:.75; }
.settings-actions { display:flex; gap:8px; align-items:center; margin-top:5px; }
.settings-message { min-height:18px; margin-right:auto; color:var(--green); font-size:11px; }
.settings-message.error { color:var(--red); }
.logged-out { max-width:550px; padding:26px; text-align:center; }
.logged-out h2 { margin:0 0 8px; font-size:19px; }
.logged-out p { margin:0 0 18px; color:var(--muted); font-size:12px; }
@media (max-width:700px) { .profile-layout { grid-template-columns:1fr; } .profile-card { text-align:left; } .profile-avatar-large { margin:0 0 14px; } .profile-card .btn { width:auto; } .settings-grid { grid-template-columns:1fr; } .settings-field.full { grid-column:auto; } .settings-actions { align-items:flex-start; flex-wrap:wrap; } .settings-message { width:100%; order:-1; } }
.access-denied { max-width:560px; margin:25px auto 0; padding:30px; text-align:center; }
.access-lock { width:45px; height:45px; display:grid; place-items:center; margin:0 auto 13px; border:1px solid rgba(236,98,93,.3); border-radius:14px; color:var(--red); background:rgba(236,98,93,.1); font-size:22px; }
.access-denied h2 { margin:0 0 8px; font-size:18px; letter-spacing:-.04em; }
.access-denied p { max-width:410px; margin:0 auto 18px; color:var(--muted); font-size:11px; line-height:1.6; }
.avatar-photo { overflow:hidden; padding:0; }
.avatar-photo img { width:100%; height:100%; display:block; object-fit:cover; }
.profile-avatar-large.photo { overflow:hidden; padding:0; }
.profile-avatar-large.photo img { width:100%; height:100%; display:block; object-fit:cover; }
.avatar-upload { display:flex; align-items:center; gap:12px; margin:0 0 16px; padding:12px; border:1px dashed rgba(232,184,88,.3); border-radius:11px; background:rgba(232,184,88,.05); }
.avatar-upload-preview { width:46px; height:46px; display:grid; place-items:center; flex-shrink:0; overflow:hidden; border-radius:13px; color:#2b1b08; background:linear-gradient(145deg,#f5cf73,#ba7922); font-size:15px; font-weight:900; }
.avatar-upload-preview img { width:100%; height:100%; object-fit:cover; }
.avatar-upload-info { min-width:0; }
.avatar-upload-info strong { display:block; font-size:11px; }
.avatar-upload-info small { display:block; margin-top:2px; color:var(--muted); font-size:9px; }
.avatar-upload input { display:block; width:100%; margin-top:7px; color:var(--muted); font-size:10px; }
.back-link { display:inline-flex; margin-bottom:22px; color:var(--gold); font-size:11px; font-weight:800; }
.back-link:hover { color:#f6d48f; }
.section-detail-toolbar { display:flex; align-items:end; justify-content:space-between; gap:14px; margin:38px 0 13px; }
.section-detail-toolbar h2 { margin:0; font-size:18px; letter-spacing:-.04em; }
.section-detail-toolbar p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.topic-detail-list { overflow:hidden; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.02); }
.topic-detail-row { display:grid; grid-template-columns:32px minmax(0,1fr) 70px 22px; gap:12px; align-items:center; min-height:72px; padding:0 16px; border-bottom:1px solid var(--line); transition:.18s; }
.topic-detail-row:last-child { border-bottom:0; }
.topic-detail-row:hover { background:rgba(255,255,255,.045); }
.topic-detail-icon { width:29px; height:29px; display:grid; place-items:center; border-radius:8px; color:var(--gold); background:var(--gold-soft); font-size:12px; }
.topic-detail-main { min-width:0; }
.topic-detail-main h3 { overflow:hidden; margin:0; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.topic-detail-main p { margin:3px 0 0; color:var(--muted); font-size:10px; }
.topic-detail-replies { color:var(--muted); text-align:center; }
.topic-detail-replies strong { display:block; color:var(--soft); font-size:12px; }
.topic-detail-replies small { font-size:9px; }
.topic-detail-arrow { color:var(--gold); font-size:16px; }
@media (max-width:650px) { .section-detail-toolbar { align-items:stretch; flex-direction:column; } .topic-detail-row { grid-template-columns:29px minmax(0,1fr) 50px; gap:9px; padding:0 11px; } .topic-detail-arrow { display:none; } }
.topic-detail-row { color:inherit; text-decoration:none; }
.punishment-section { max-width:920px; margin-top:27px; }
.punishment-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:13px; }
.punishment-head h2 { margin:0; font-size:18px; letter-spacing:-.04em; }
.punishment-head p { margin:5px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.punishment-note { flex-shrink:0; color:var(--gold); font-size:10px; font-weight:800; }
.punishment-card { overflow:hidden; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.02); }
.punishment-table-wrap { overflow-x:auto; }
.punishment-table { width:100%; min-width:720px; border-collapse:collapse; }
.punishment-table th { padding:12px 14px; color:#7f828a; border-bottom:1px solid var(--line); background:rgba(255,255,255,.025); font-size:9px; font-weight:850; letter-spacing:.1em; text-align:left; text-transform:uppercase; }
.punishment-table td { padding:12px 14px; border-bottom:1px solid var(--line); color:var(--muted); font-size:10px; line-height:1.45; vertical-align:top; }
.punishment-table tr:last-child td { border-bottom:0; }
.punishment-table tr:hover td { background:rgba(232,184,88,.045); }
.punishment-table td:first-child { width:145px; color:var(--soft); }
.punishment-table td:last-child { width:175px; color:var(--gold); }
.punishment-table strong { display:block; color:var(--soft); font-size:11px; }
.punishment-table small { display:block; margin-top:2px; color:#777b84; font-size:9px; }
.punishment-table b { font-size:10px; font-weight:800; }
.punishment-footnote { margin:10px 2px 0; color:#747780; font-size:10px; line-height:1.55; }
@media (max-width:650px) { .punishment-head { align-items:flex-start; flex-direction:column; gap:6px; } }
.page-main { animation: pageIn .42s ease both; }
@keyframes pageIn { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
/* reference-style online widgets */
.online-section { padding:0 0 76px; }
.online-reference { display:grid; grid-template-columns:minmax(250px,.66fr) minmax(0,1.34fr); gap:22px; padding:4px; border-radius:8px; background:#f0f1f3; }
.online-widget { overflow:hidden; border:1px solid #e2e5e8; border-radius:4px; color:#343a40; background:#fff; box-shadow:0 7px 22px rgba(20,24,28,.07); }
.online-widget-title { display:flex; align-items:center; justify-content:space-between; min-height:64px; padding:0 19px; border-bottom:1px solid #edf0f2; font-size:17px; font-weight:500; letter-spacing:-.02em; }
.online-widget-title .online-total { color:#4e5964; font-size:11px; }
.online-widget-title .online-total .pulse { display:inline-block; width:6px; height:6px; background:#2dbd73; box-shadow:0 0 7px #2dbd73; }
.online-widget-body { padding:19px; }
.online-team-member { display:flex; align-items:center; gap:12px; }
.online-team-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:#fff; font-size:11px; font-weight:900; box-shadow:inset 0 0 0 4px rgba(255,255,255,.7); }
.online-team-member strong { display:block; color:#ed161f; font-size:14px; line-height:1.25; }
.online-team-member span:not(.online-team-avatar) { display:block; margin-top:2px; color:#43484f; font-size:12px; }
.online-users-text { min-height:88px; color:#3f464d; font-size:12px; line-height:1.48; }
.online-user-name { display:inline; }
.online-user-name.accent-blue { color:#164be7; font-weight:700; }
.online-user-name.accent-red { color:#d6242d; font-weight:700; }
@media (max-width:700px) { .online-reference { grid-template-columns:1fr; gap:20px; padding:0; background:transparent; } .online-widget-title { min-height:62px; } }