/* =====================================================================
   Module: Rules (Правила проекта)
   Public view  -> .rl-*
   Admin editor -> .red-*
   Rich-text    -> .kb-editor-*  (shared WYSIWYG)
   ===================================================================== */

/* ============ PUBLIC VIEW ============ */
.rl-wrap {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.rl-side {
  width: 280px;
  min-width: 240px;
  flex-shrink: 0;
  position: sticky;
  top: .6rem;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rl-side-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family-1);
  font-weight: var(--font-weight-7);
  font-size: var(--font-size-l);
  color: var(--text-default);
  margin-bottom: 8px;
}

.rl-side-title svg { width: 16px; height: 16px; fill: var(--span); flex-shrink: 0; }

.rl-cat {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: var(--br-8);
  cursor: pointer;
  color: var(--text-custom);
  border: 1px solid transparent;
  transition: var(--transition-duration);
}

.rl-cat svg { width: 15px; height: 15px; fill: var(--text-custom); flex-shrink: 0; }

.rl-cat-name {
  flex: 1;
  font-size: var(--font-size-m);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rl-cat-count {
  font-style: normal;
  font-size: var(--font-size-s);
  color: var(--text-custom);
  opacity: .6;
  background: var(--transparent-5-w);
  padding: 1px 8px;
  border-radius: 20px;
}

.rl-cat:hover { background: var(--transparent-2-w); color: var(--text-default); }
.rl-cat:hover svg { fill: var(--span); }

.rl-cat.active { background: var(--button); color: var(--text-default); border-color: var(--transparent-5-w); }
.rl-cat.active svg { fill: var(--span); }

.rl-empty-side {
  opacity: .5;
  text-align: center;
  padding: 10px 0;
  font-size: var(--font-size-m);
  color: var(--text-custom);
}

.rl-content { flex: 1; min-width: 0; }

.rl-pane { display: none; flex-direction: column; gap: 12px; }
.rl-pane.active { display: flex; }

.rl-pane-title {
  font-family: var(--font-family-1);
  font-weight: var(--font-weight-7);
  font-size: var(--font-size-xxl);
  color: var(--text-default);
  margin: 0 0 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--transparent-5-w);
}

.rl-row {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--transparent-3-w);
  border-radius: var(--br-12);
}

.rl-num {
  flex-shrink: 0;
  min-width: 40px;
  height: fit-content;
  padding: 5px 9px;
  text-align: center;
  font-family: var(--font-family-1);
  font-weight: var(--font-weight-7);
  font-size: var(--font-size-m);
  color: var(--span);
  background: var(--span-10);
  border: 1px solid var(--span-middle);
  border-radius: var(--br-8);
}

.rl-body { flex: 1; min-width: 0; }

.rl-text {
  color: var(--text-custom);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-4);
  line-height: 1.6;
  word-break: break-word;
}

.rl-text > *:first-child { margin-top: 0; }
.rl-text > *:last-child { margin-bottom: 0; }

.rl-text h2 {
  font-family: var(--font-family-1);
  font-weight: var(--font-weight-7);
  font-size: var(--font-size-xl);
  color: var(--text-default);
  margin: 16px 0 8px;
}
.rl-text h3 {
  font-weight: var(--font-weight-6);
  font-size: var(--font-size-l);
  color: var(--text-default);
  margin: 14px 0 6px;
}
.rl-text p { margin: 0 0 8px; }
.rl-text ul, .rl-text ol { margin: 0 0 8px; padding-left: 22px; }
.rl-text li { margin: 2px 0; }
.rl-text a { color: var(--span); text-decoration: underline; }
.rl-text strong, .rl-text b { font-weight: var(--font-weight-7); color: var(--text-default); }
.rl-text em, .rl-text i { font-style: italic; }
.rl-text blockquote {
  margin: 8px 0;
  padding: 6px 14px;
  border-left: 3px solid var(--span);
  background: var(--transparent-2-w);
  border-radius: var(--br-6);
}

.rl-pun {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  padding: 6px 12px;
  background: var(--red-10);
  border: 1px solid var(--red-20);
  border-radius: var(--br-8);
  color: var(--red);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-6);
}

.rl-pun svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }

.rl-empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 60px 20px;
  color: var(--text-custom);
  opacity: .4;
  background: var(--card);
  border-radius: var(--br-16);
  text-align: center;
}

.rl-empty-content svg { fill: var(--text-custom); }
.rl-empty-content p { font-size: var(--font-size-m); font-weight: var(--font-weight-5); }

/* ============ ADMIN EDITOR ============ */
.red-app { display: flex; flex-direction: column; gap: 16px; }

.red-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.red-eyebrow {
  font-size: var(--font-size-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-custom);
  opacity: .55;
}

.red-title {
  font-family: var(--font-family-1);
  font-weight: var(--font-weight-7);
  font-size: var(--font-size-xxl);
  color: var(--text-default);
  margin: 4px 0 6px;
}

.red-stats { font-size: var(--font-size-s); color: var(--text-custom); }
.red-stats span { color: var(--span); font-weight: var(--font-weight-7); }
.red-stats i { opacity: .4; margin: 0 5px; font-style: normal; }

.red-head-actions { display: flex; gap: 10px; flex-shrink: 0; }

.red-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--br-8);
  background: var(--button);
  color: var(--text-default);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-6);
  cursor: pointer;
  border: 1px solid var(--transparent-10-w);
  transition: var(--transition-duration);
}

.red-btn:hover { background: var(--button-hover); }
.red-btn svg { width: 15px; height: 15px; fill: currentColor; }

.red-btn-primary { background: var(--span); color: #fff; border-color: transparent; }
.red-btn-primary:hover { background: var(--span); filter: brightness(1.12); }

.red-hint {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  background: var(--span-low);
  border: 1px solid var(--span-middle);
  border-radius: var(--br-8);
  color: var(--text-custom);
  font-size: var(--font-size-s);
}

.red-hint svg { width: 15px; height: 15px; fill: var(--span); flex-shrink: 0; }

.red-sections { display: flex; flex-direction: column; gap: 14px; }

.red-section {
  background: var(--card);
  border: 1px solid var(--transparent-5-w);
  border-radius: var(--br-12);
  overflow: visible;
}

.red-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--transparent-2-w);
  border-bottom: 1px solid var(--transparent-5-w);
  border-radius: var(--br-12) var(--br-12) 0 0;
}

.red-section-name {
  flex: 1;
  min-width: 0;
  height: 38px;
  background: var(--input-form);
  border: 1px solid var(--transparent-10-w);
  border-radius: var(--br-8);
  padding: 0 12px;
  color: var(--text-default);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-6);
  outline: none;
}

.red-section-name:focus { border-color: var(--span-half); }

.red-section-count {
  font-size: var(--font-size-s);
  color: var(--text-custom);
  opacity: .7;
  white-space: nowrap;
}

.red-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: var(--button);
  border: 1px solid var(--transparent-10-w);
  border-radius: var(--br-8);
  cursor: pointer;
  transition: var(--transition-duration);
}

.red-icon-btn svg { width: 13px; height: 13px; fill: var(--red); pointer-events: none; }
.red-icon-btn:hover { background: var(--button-hover); }

/* icon picker */
.red-iconpick { position: relative; flex-shrink: 0; }

.red-iconpick-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 10px;
  background: var(--input-form);
  border: 1px solid var(--transparent-10-w);
  border-radius: var(--br-8);
  cursor: pointer;
  transition: var(--transition-duration);
}

.red-iconpick-btn:hover { border-color: var(--span-half); }
.red-iconpick-btn .ic { width: 16px; height: 16px; fill: var(--span); }
.red-iconpick-btn .chev { width: 10px; height: 10px; fill: var(--text-custom); }

.red-iconpick-menu {
  display: none;
  position: absolute;
  top: 44px;
  left: 0;
  z-index: 40;
  width: 232px;
  max-height: 220px;
  overflow-y: auto;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--transparent-10-w);
  border-radius: var(--br-8);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}

.red-iconpick.open .red-iconpick-menu { display: grid; }

.red-iconpick-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--br-6);
  cursor: pointer;
  transition: var(--transition-duration);
}

.red-iconpick-opt svg { width: 16px; height: 16px; fill: var(--text-custom); pointer-events: none; }
.red-iconpick-opt:hover { background: var(--button); }
.red-iconpick-opt:hover svg { fill: var(--span); }
.red-iconpick-opt.sel { background: var(--button); }
.red-iconpick-opt.sel svg { fill: var(--span); }

.red-rules { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }

.red-rule {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  background: var(--transparent-2-w);
  border: 1px solid var(--transparent-5-w);
  border-radius: var(--br-8);
}

.red-rule-num {
  flex-shrink: 0;
  min-width: 44px;
  padding: 6px 8px;
  text-align: center;
  font-family: var(--font-family-1);
  font-weight: var(--font-weight-7);
  font-size: var(--font-size-m);
  color: var(--span);
  background: var(--span-10);
  border: 1px solid var(--span-middle);
  border-radius: var(--br-6);
}

.red-rule-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.red-field-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-custom);
  opacity: .55;
}

.red-pun-row { display: flex; align-items: center; gap: 8px; }

.red-rule-pun {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  height: 36px;
  background: var(--input-form);
  border: 1px solid var(--transparent-10-w);
  border-radius: var(--br-8);
  padding: 0 12px;
  color: var(--text-default);
  font-size: var(--font-size-m);
  outline: none;
}

.red-rule-pun:focus { border-color: var(--span-half); }

.red-pun-color, .red-note-color {
  width: 40px;
  height: 36px;
  flex-shrink: 0;
  padding: 3px;
  background: var(--input-form);
  border: 1px solid var(--transparent-10-w);
  border-radius: var(--br-8);
  cursor: pointer;
}

.red-pun-color::-webkit-color-swatch-wrapper, .red-note-color::-webkit-color-swatch-wrapper { padding: 0; }
.red-pun-color::-webkit-color-swatch, .red-note-color::-webkit-color-swatch { border: none; border-radius: var(--br-6); }
.red-pun-color::-moz-color-swatch, .red-note-color::-moz-color-swatch { border: none; border-radius: var(--br-6); }

.red-add-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: var(--br-8);
  background: transparent;
  color: var(--text-custom);
  font-size: var(--font-size-s);
  cursor: pointer;
  opacity: .6;
  border: 1px dashed var(--transparent-10-w);
  transition: var(--transition-duration);
}

.red-add-rule:hover { opacity: 1; background: var(--transparent-2-w); color: var(--text-default); }

.red-empty {
  opacity: .5;
  text-align: center;
  padding: 16px;
  font-size: var(--font-size-m);
  color: var(--text-custom);
}

/* ============ WYSIWYG editor (shared) ============ */
.kb-editor {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--transparent-10-w);
  border-radius: var(--br-8);
  overflow: hidden;
  background: var(--input-form);
}

.kb-editor:focus-within { border-color: var(--span-half); }

.kb-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  padding: 6px;
  background: var(--button);
  border-bottom: 1px solid var(--transparent-10-w);
}

.kb-editor-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--br-6);
  background: transparent;
  color: var(--text-custom);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-6);
  line-height: 1;
  cursor: pointer;
  transition: var(--transition-duration);
  user-select: none;
}

.kb-editor-btn:hover { background: var(--button-hover); color: var(--text-default); }
.kb-editor-btn.active { background: var(--button-hover); color: var(--span); border-color: var(--transparent-10-w); }

.kb-editor-btn svg { width: 14px; height: 14px; fill: currentColor; pointer-events: none; }
.kb-editor-btn b { font-weight: var(--font-weight-7); }
.kb-editor-btn i { font-style: italic; }
.kb-editor-btn u { text-decoration: underline; }
.kb-editor-btn s { text-decoration: line-through; }

.kb-editor-sep { width: 1px; height: 18px; margin: 0 2px; background: var(--transparent-10-w); flex-shrink: 0; }

.kb-color {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  border-radius: var(--br-6);
  cursor: pointer;
  overflow: hidden;
  color: var(--text-custom);
  font-weight: var(--font-weight-7);
  font-size: var(--font-size-s);
  transition: var(--transition-duration);
}

.kb-color:hover { background: var(--button-hover); color: var(--text-default); }
.kb-color span { border-bottom: 3px solid var(--span); line-height: 1; padding-bottom: 1px; }
.kb-color .kb-color-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  padding: 0;
  border: none;
  cursor: pointer;
}

.kb-editor-area {
  min-height: 110px;
  max-height: 320px;
  overflow-y: auto;
  padding: 11px 13px;
  color: var(--text-default);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-4);
  line-height: 1.6;
  word-break: break-word;
  outline: none;
}

.kb-editor-area:empty:before {
  content: attr(data-placeholder);
  color: var(--text-custom);
  opacity: .4;
  pointer-events: none;
}

.kb-editor-area h2 { font-family: var(--font-family-1); font-weight: var(--font-weight-7); font-size: var(--font-size-xl); color: var(--text-default); margin: 12px 0 6px; }
.kb-editor-area h3 { font-weight: var(--font-weight-6); font-size: var(--font-size-l); color: var(--text-default); margin: 10px 0 5px; }
.kb-editor-area p { margin: 0 0 7px; }
.kb-editor-area ul, .kb-editor-area ol { margin: 0 0 7px; padding-left: 22px; }
.kb-editor-area li { margin: 2px 0; }
.kb-editor-area a { color: var(--span); text-decoration: underline; }
.kb-editor-area blockquote { margin: 7px 0; padding: 6px 14px; border-left: 3px solid var(--span); background: var(--transparent-2-w); border-radius: var(--br-6); }

/* ============ responsive ============ */
@media (max-width: 768px) {
  .rl-wrap { flex-direction: column; }
  .rl-side { width: 100%; position: static; }
  .red-head { flex-direction: column; }
  .red-head-actions { width: 100%; }
  .red-btn { flex: 1; justify-content: center; }
  .red-rule { flex-wrap: wrap; }
}

/* ════════════════ Spotlight restyle (страница правил) ════════════════ */
.rl-side-title, .rl-pane-title{
  font-family: var(--font-family-1,"Unbounded"),sans-serif !important;
  font-weight: 800 !important; letter-spacing: -.01em;
  background: linear-gradient(120deg,#5fe3ff,#2b7fff);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.rl-side-title svg{ fill:#5fe3ff !important; }
.rl-cat{ border-radius: 12px !important; }
.rl-cat:hover{ background: rgba(255,255,255,.04) !important; border-color: rgba(41,163,171,.3) !important; }
.rl-cat.active{
  background: linear-gradient(120deg,#29a3ab,#2b7fff) !important;
  border-color: transparent !important; color:#fff !important;
  box-shadow: 0 6px 20px rgba(43,127,255,.28) !important;
}
.rl-cat.active svg{ fill:#fff !important; }
.rl-cat.active .rl-cat-count{ background: rgba(255,255,255,.2) !important; color:#fff !important; opacity:1 !important; }
.rl-cat-count{ border-radius: 999px !important; }
.rl-row{
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 16px !important;
  transition: border-color .2s, transform .2s, box-shadow .2s !important;
}
.rl-row:hover{ border-color: rgba(41,163,171,.35) !important; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.3) !important; }
.rl-num{
  background: linear-gradient(120deg,#29a3ab,#2b7fff) !important;
  border: none !important; color:#fff !important; border-radius: 11px !important;
  box-shadow: 0 6px 16px rgba(43,127,255,.28) !important;
}
.rl-pun{ border-radius: 10px !important; }
.rl-edit-btn{
  background: rgba(41,163,171,.12) !important;
  border: 1px solid rgba(41,163,171,.3) !important;
  color:#5fe3ff !important; border-radius: 12px !important;
}
.rl-edit-btn:hover{ background: rgba(41,163,171,.22) !important; }
.rl-empty-content{
  background: rgba(255,255,255,.035) !important; border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 20px !important;
}
.red-eyebrow{
  font-family: var(--font-family-1,"Unbounded"),sans-serif !important; text-transform: uppercase;
  letter-spacing: .18em; font-weight: 800 !important;
  background: linear-gradient(120deg,#5fe3ff,#2b7fff);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.red-title{
  font-family: var(--font-family-1,"Unbounded"),sans-serif !important; font-weight: 800 !important; letter-spacing: -.01em;
  background: linear-gradient(120deg,#5fe3ff,#2b7fff);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.red-btn{
  background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important;
  color:#e7edf2 !important; border-radius: 12px !important;
}
.red-btn:hover{ background: rgba(255,255,255,.08) !important; border-color: rgba(41,163,171,.35) !important; }
.red-btn-primary{
  background: linear-gradient(120deg,#29a3ab,#2b7fff) !important; border: none !important; color:#fff !important;
  box-shadow: 0 6px 20px rgba(43,127,255,.28) !important;
}
.red-btn-primary:hover{ filter: brightness(1.08); transform: translateY(-2px); }
.red-section{
  background: rgba(255,255,255,.035) !important; border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 16px !important;
}
.red-rule{
  background: rgba(0,0,0,.18) !important; border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 14px !important;
}
.red-rule-num{
  background: linear-gradient(120deg,#29a3ab,#2b7fff) !important; border: none !important; color:#fff !important;
  border-radius: 11px !important;
}
.kb-editor{
  background: rgba(0,0,0,.2) !important; border: 1px solid rgba(255,255,255,.07) !important; border-radius: 12px !important;
}
.kb-editor-toolbar{ background: rgba(255,255,255,.03) !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; }
.kb-editor-btn{ border-radius: 8px !important; }
.kb-editor-btn.active{ background: rgba(41,163,171,.2) !important; color:#5fe3ff !important; }
.red-add-rule{ border-radius: 12px !important; }
.red-section-name, .red-rule-pun{
  background: rgba(0,0,0,.2) !important; border: 1px solid rgba(255,255,255,.07) !important; border-radius: 10px !important;
}

/* ===== Блок «Команда проекта» на странице правил ===== */
.rl-team{ margin-top:20px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06); border-radius:20px; padding:24px 26px; box-shadow:0 18px 50px rgba(0,0,0,.3); }
.rl-team-head{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.rl-team-head > svg{ width:30px; height:30px; fill:#5fe3ff; flex-shrink:0; filter:drop-shadow(0 0 8px rgba(41,163,171,.6)); }
.rl-team-eyebrow{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; background:linear-gradient(120deg,#5fe3ff,#2b7fff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.rl-team-title{ margin:2px 0 0; font-family:var(--font-family-1,"Unbounded"),sans-serif; font-size:22px; font-weight:800; color:#eafcff; letter-spacing:-.01em; }
.rl-team-title span{ background:linear-gradient(120deg,#5fe3ff,#2b7fff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.rl-team-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.rl-team-card{ display:flex; align-items:center; gap:13px; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); transition:transform .2s, border-color .2s, box-shadow .2s; }
.rl-team-card:hover{ transform:translateY(-3px); border-color:rgba(41,163,171,.4); box-shadow:0 12px 30px rgba(0,0,0,.3); }
.rl-team-av{ width:46px; height:46px; flex-shrink:0; border-radius:13px; display:flex; align-items:center; justify-content:center; font-family:var(--font-family-1,"Unbounded"),sans-serif; font-weight:800; font-size:19px; color:#fff; background:linear-gradient(135deg,#1f8a91,#2b6fff); box-shadow:0 8px 20px rgba(43,127,255,.3); }
.rl-team-nick{ font-weight:700; color:#eafcff; font-size:15px; }
.rl-team-role{ display:inline-block; margin-top:4px; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px; }
/* роли */
.rl-tm-owner .rl-team-av{ background:linear-gradient(135deg,#ffe08a,#f4ca80); color:#1a1206; }
.rl-tm-owner .rl-team-role{ background:rgba(244,202,128,.14); color:#f4ca80; }
.rl-tm-owner{ border-color:rgba(244,202,128,.4); }
.rl-tm-admin .rl-team-role{ background:rgba(41,163,171,.14); color:#5fe3ff; }
.rl-tm-mod .rl-team-av{ background:linear-gradient(135deg,#2b7fff,#1f5fd0); }
.rl-tm-mod .rl-team-role{ background:rgba(43,127,255,.14); color:#6aa6ff; }
.rl-tm-helper .rl-team-av{ background:linear-gradient(135deg,#5a6a78,#3a4a58); }
.rl-tm-helper .rl-team-role{ background:rgba(255,255,255,.06); color:#9fb2c0; }

/* ===== Редактор правил: новые контролы + интервалы/отступы ===== */
.kb-sel{
  width:auto !important; flex:0 0 auto;
  height:28px; border-radius:8px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.12);
  color:#e7edf2; font-size:12px;
  padding:0 26px 0 10px; cursor:pointer; outline:none;
  font-family:Inter,sans-serif;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239fb2c0'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat; background-position:right 7px center; background-size:13px;
}
.kb-font{ min-width:92px; }
.kb-lh{ min-width:96px; }
.kb-sel:hover{ border-color:rgba(41,163,171,.45); }
.kb-sel option{ background:#12182a; color:#e7edf2; }

/* ════════════════ Доработки редактора (фидбэк 2) ════════════════ */
/* 2) Скругление всех блоков */
.kb-editor{ border-radius:12px !important; overflow:hidden; }
.red-icon-btn{ border-radius:10px !important; }
.red-iconpick-btn{ border-radius:10px !important; align-items:center; justify-content:center; }
.red-iconpick-menu{ border-radius:12px !important; }
.red-pun-color, .red-note-color{ border-radius:8px !important; overflow:hidden; }
.red-note-block{ border-radius:12px; }
/* 3) Иконки кнопок удаления — через background-image (рисуется всегда) */
.red-icon-btn svg{ display:none !important; }
.red-icon-btn{ background-color:var(--button) !important; background-repeat:no-repeat; background-position:center; background-size:15px 15px; }
.red-icon-btn:hover{ background-color:var(--button-hover) !important; }
.red-del-section{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff5b6e'%3E%3Cpath d='M9 3a1 1 0 0 0-1 1v1H4v2h16V5h-4V4a1 1 0 0 0-1-1H9zM6 8l1.1 12.1A2 2 0 0 0 9.1 22h5.8a2 2 0 0 0 2-1.9L18 8H6zm4 2.5h1.2v8H10v-8zm2.8 0H14v8h-1.2v-8z'/%3E%3C/svg%3E"); }
.red-del-rule{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff5b6e'%3E%3Cpath d='M6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12 19 6.4 17.6 5 12 10.6z'/%3E%3C/svg%3E"); }
.red-del-note{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235fe3ff'%3E%3Cpath d='M6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12 19 6.4 17.6 5 12 10.6z'/%3E%3C/svg%3E"); }
/* 4) Значки по центру (пилюли наказание/примечание + пикеры) */
.rl-pun, .rl-note{ align-items:center !important; }
.rl-pun svg, .rl-note svg{ margin-top:0 !important; }
.red-iconpick-btn .ic{ display:block; }
.kb-hilite span{ border-bottom:none !important; background:#fff36b; color:#1a1206; border-radius:3px; padding:0 4px; font-weight:700; }
/* область ввода */
.kb-editor-area{ line-height:1.6; }
.kb-editor-area p{ margin:0 0 6px; }
.kb-editor-area p:empty{ min-height:1.25em; }
.kb-editor-area font[face]{ }
/* отступ через indent (blockquote с inline-margin) — без полосы-цитаты */
.kb-editor-area blockquote[style*="margin-left"], .rl-text blockquote[style*="margin-left"],
.kb-editor-area blockquote[style*="margin: 0px 0px 0px"], .rl-text blockquote[style*="margin: 0px 0px 0px"]{
  background:none !important; border:none !important; padding:0 !important; border-radius:0 !important;
}
/* ===== Отображение правил: интервалы, выделение, выравнивание ===== */
.rl-text{ line-height:1.6; }
.rl-text p{ margin:0 0 6px; }
.rl-text p:empty{ display:none; }
.rl-text [style*="background"]{ border-radius:3px; padding:0 3px; }
.rl-text [align="justify"], .rl-text [style*="justify"]{ text-align:justify; }

/* ===== Кнопка «наверх» ===== */
.rl-totop{
  position:fixed; right:22px; bottom:22px; z-index:120;
  width:48px; height:48px; padding:0; border:none; border-radius:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(120deg,#29a3ab,#2b7fff); color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.9);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.rl-totop svg{ fill:#fff; }
.rl-totop:hover{ filter:brightness(1.08); transform:translateY(0) scale(1.06); }
.rl-totop.show{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }

/* ════════════════ Правки редактора правил (фидбэк) ════════════════ */
/* 1) Подсветка/заливка текста — плотно по тексту, выровнена по высоте */
.rl-text [style*="background"], .kb-editor-area [style*="background"]{
  padding:.05em .35em !important;
  border-radius:4px !important;
  line-height:1.15;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
/* 2) Шапка редактора с кнопкой «Сохранить» — липкая к верху экрана */
.red-head{
  position:sticky; top:0; z-index:60;
  background:rgba(10,14,22,.92);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  padding:12px 14px !important;
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.4);
}
/* 4) Маркированные списки — видимые маркеры, цвет как у текста */
.rl-text ul, .kb-editor-area ul{ list-style:disc outside !important; }
.rl-text ol, .kb-editor-area ol{ list-style:decimal outside !important; }
.rl-text ul ul, .kb-editor-area ul ul{ list-style:circle outside !important; }
.rl-text li, .kb-editor-area li{ color:inherit !important; }
.rl-text li::marker, .kb-editor-area li::marker{ color:currentColor; }
/* 5) «Наказание» как rich-редактор + корректный вывод HTML в пилюле */
.red-pun-row{ align-items:flex-start !important; }
.red-pun-row .kb-editor{ flex:1; min-width:0; }
.red-pun-row .kb-editor-area{ min-height:50px; max-height:200px; }
.rl-pun{ align-items:flex-start; }
.rl-pun span p{ margin:0; display:inline; }
.rl-pun span p ~ p{ display:block; }
.rl-pun span ul, .rl-pun span ol{ margin:4px 0 0; padding-left:18px; }

/* ===== Поле «Примечание» (необязательное) ===== */
/* пилюли наказания и примечания — каждая на своей строке, по содержимому */
.rl-pun, .rl-note{ display:flex !important; width:-moz-fit-content; width:fit-content; max-width:100%; }
.rl-note{
  align-items:flex-start; gap:7px; margin-top:9px; padding:6px 12px;
  background:rgba(41,163,171,.1); border:1px solid rgba(41,163,171,.28);
  border-radius:10px; color:#5fe3ff; font-size:13px; font-weight:600;
}
.rl-note svg{ width:13px; height:13px; fill:currentColor; flex-shrink:0; margin-top:2px; }
.rl-note span p{ margin:0; display:inline; }
.rl-note span p ~ p{ display:block; }
.rl-note span ul, .rl-note span ol{ margin:4px 0 0; padding-left:18px; }
/* редактор примечания */
.red-note-area{ margin-top:2px; }
.red-add-note{
  background:rgba(41,163,171,.1); border:1px dashed rgba(41,163,171,.4);
  color:#5fe3ff; border-radius:10px; padding:8px 14px; cursor:pointer;
  font-size:13px; font-weight:600; transition:var(--transition-duration);
}
.red-add-note:hover{ background:rgba(41,163,171,.2); border-color:rgba(41,163,171,.6); }
.red-del-note svg{ fill:#5fe3ff; }
@media (max-width:640px){ .rl-totop{ right:14px; bottom:14px; width:44px; height:44px; } }

/* ── Ширина контента правил: симметричные отступы, не слишком растянуто ── */
.container-fluid{ max-width:min(1500px, 94vw) !important; }

/* ════════════════ Правки из Discord (Mat1kss) ════════════════ */

/* №3 — кастомный скроллбар как в Discord (только внутренние области, без лишней полосы) */
.kb-editor-area::-webkit-scrollbar, .red-iconpick-menu::-webkit-scrollbar { width:10px; height:10px; }
.kb-editor-area::-webkit-scrollbar-track, .red-iconpick-menu::-webkit-scrollbar-track { background:rgba(255,255,255,.03); border-radius:10px; }
.kb-editor-area::-webkit-scrollbar-thumb, .red-iconpick-menu::-webkit-scrollbar-thumb { background:rgba(41,163,171,.55); border-radius:10px; border:2px solid transparent; background-clip:padding-box; min-height:34px; }
.kb-editor-area::-webkit-scrollbar-thumb:hover, .red-iconpick-menu::-webkit-scrollbar-thumb:hover { background:rgba(41,163,171,.85); background-clip:padding-box; }
.kb-editor-area, .red-iconpick-menu { scrollbar-width:thin; scrollbar-color:rgba(41,163,171,.6) rgba(255,255,255,.04); }

/* №2 — заливка (маркер): больше отступа сверху, чтобы заглавные не сливались с краем */
.rl-text [style*="background"], .kb-editor-area [style*="background"] {
  padding:.16em .4em .1em !important;
  border-radius:5px !important;
  line-height:1.9;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* №1 — маркеры списков видимы (точки/цифры) */
.rl-text ul, .kb-editor-area ul { list-style:disc outside !important; padding-left:26px !important; }
.rl-text ol, .kb-editor-area ol { list-style:decimal outside !important; padding-left:26px !important; }
.rl-text ul ul, .kb-editor-area ul ul { list-style:circle outside !important; }
.rl-text li, .kb-editor-area li { color:inherit !important; display:list-item !important; }
.rl-text li::marker, .kb-editor-area li::marker { color:currentColor; }

/* №5 — выравнивание по ширине применяется везде */
.rl-text [style*="justify"], .rl-text [align="justify"],
.kb-editor-area [style*="justify"], .kb-editor-area [align="justify"] { text-align:justify !important; }

/* №7 — сворачивание разделов и правил */
.rl-pane-title { display:flex !important; align-items:center; justify-content:space-between; gap:12px; }
.rl-pane-title-t { min-width:0; }
.rl-sec-toggle, .rl-row-toggle {
  flex-shrink:0; width:30px; height:30px; border-radius:9px; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  color:#9fb2c0; display:flex; align-items:center; justify-content:center; transition:.2s;
  -webkit-text-fill-color:#9fb2c0;
}
.rl-sec-toggle:hover, .rl-row-toggle:hover { background:rgba(41,163,171,.16); color:#5fe3ff; -webkit-text-fill-color:#5fe3ff; }
.rl-sec-toggle svg, .rl-row-toggle svg { width:16px; height:16px; fill:currentColor; transition:transform .2s; }
.rl-row { align-items:flex-start; }
.rl-preview { display:none; color:#7d8b99; font-size:14px; line-height:1.5; }
.rl-row.rl-collapsed .rl-text, .rl-row.rl-collapsed .rl-pun, .rl-row.rl-collapsed .rl-note { display:none !important; }
.rl-row.rl-collapsed .rl-preview { display:block; }
.rl-row.rl-collapsed .rl-row-toggle svg { transform:rotate(-90deg); }
.rl-pane.rl-sec-collapsed .rl-row { display:none !important; }
.rl-pane.rl-sec-collapsed .rl-sec-toggle svg { transform:rotate(-90deg); }

/* №9 (часть) — длинные названия категорий переносятся на 2 строки */
.rl-cat-name { white-space:normal !important; overflow:visible !important; text-overflow:clip !important; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.rl-cat { align-items:center; }

/* №9 — дерево разделов в сайдбаре (корень «Правила проекта» → ветки) */
.rl-root-title { cursor:pointer; }
.rl-root-chev { width:15px; height:15px; fill:var(--text-custom); margin-left:auto; transition:transform .2s; flex-shrink:0; -webkit-text-fill-color:var(--text-custom); }
.rl-side.rl-tree-collapsed .rl-cat-list { display:none; }
.rl-side.rl-tree-collapsed .rl-root-chev { transform:rotate(-90deg); }
.rl-cat-list {
  position:relative; display:flex; flex-direction:column; gap:4px;
  padding-left:16px; margin-left:8px;
  border-left:1px solid rgba(255,255,255,.1);
}
.rl-cat-list .rl-cat { position:relative; }
.rl-cat-list .rl-cat::before {
  content:''; position:absolute; left:-16px; top:22px;
  width:12px; height:1px; background:rgba(255,255,255,.16);
}
.rl-cat-list .rl-cat.active::before { background:rgba(41,163,171,.6); }

/* №9 (полноценно) — вложенные подразделы (ветки внутри разделов) */
.rl-cat-list > .rl-cat::before { content:''; position:absolute; left:-16px; top:22px; width:12px; height:1px; background:rgba(255,255,255,.16); }
.rl-subcat-list {
  position:relative; display:flex; flex-direction:column; gap:4px;
  padding-left:16px; margin:4px 0 4px 8px;
  border-left:1px solid rgba(255,255,255,.09);
}
.rl-subcat-list .rl-cat::before {
  content:''; position:absolute; left:-16px; top:20px;
  width:12px; height:1px; background:rgba(255,255,255,.13);
}
.rl-cat-child { padding:7px 10px; }
.rl-cat-child .rl-cat-name { font-size:13.5px; }
.rl-cat-child svg { width:13px; height:13px; }
.rl-cat-list > .rl-cat.active::before { background:rgba(41,163,171,.6); }
.rl-subcat-list .rl-cat.active::before { background:rgba(41,163,171,.6); }

/* редактор: селект «вложить в раздел» */
.red-section-parent { max-width:190px; flex-shrink:0; }

/* Сворачивание в РЕДАКТОРЕ (для удобства работы; на публичной странице убрано) */
.red-fold { flex-shrink:0; width:30px; height:30px; border-radius:9px; cursor:pointer; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:#9fb2c0; display:flex; align-items:center; justify-content:center; transition:.2s; }
.red-fold:hover { background:rgba(41,163,171,.16); color:#5fe3ff; }
.red-fold svg { width:16px; height:16px; fill:currentColor; transition:transform .2s; }
.red-section.red-folded .red-rules { display:none; }
.red-section.red-folded .red-sec-fold svg { transform:rotate(-90deg); }
.red-rule-preview { display:none; flex:1; min-width:0; color:#8b98a5; font-size:13.5px; line-height:1.4; padding-right:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; align-self:center; }
.red-rule.red-folded .red-rule-fields { display:none; }
.red-rule.red-folded .red-rule-preview { display:block; }
.red-rule.red-folded .red-rule-fold svg { transform:rotate(-90deg); }
.red-rule.red-folded { align-items:center; }

/* ════════════════ Правки Mat1kss (2-я порция) ════════════════ */

/* №2 — «Примечание» не всегда жирным (жирный только там, где выделил пользователь) */
.rl-note{ font-weight:var(--font-weight-4) !important; }
.rl-note b, .rl-note strong{ font-weight:var(--font-weight-7); }

/* №4 — длинные названия веток: кнопка растёт под 2–3 строки, не вылезает за GUI */
.rl-cat{ align-items:flex-start !important; }
.rl-cat > svg{ margin-top:2px; }
.rl-cat-name{
  white-space:normal !important; overflow:visible !important; text-overflow:clip !important;
  display:block !important; -webkit-line-clamp:unset !important; line-height:1.3;
  word-break:break-word; overflow-wrap:anywhere;
}
.rl-cat-count{ align-self:flex-start; margin-top:1px; }

/* №5 — иконки на кнопках свернуть/развернуть и ↑/↓ видны всегда */
.red-fold svg, .rl-root-chev,
.rl-sec-toggle svg, .rl-row-toggle svg,
.red-move-up svg, .red-move-down svg{
  fill:#9fb2c0 !important; -webkit-text-fill-color:#9fb2c0 !important; opacity:1 !important; display:block !important;
}
.red-fold:hover svg{ fill:#5fe3ff !important; -webkit-text-fill-color:#5fe3ff !important; }

/* №6 — удобный (не тонкий) скроллбар во внутренних областях */
.kb-editor-area::-webkit-scrollbar, .red-iconpick-menu::-webkit-scrollbar{ width:14px; height:14px; }
.kb-editor-area::-webkit-scrollbar-track, .red-iconpick-menu::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); border-radius:12px; }
.kb-editor-area::-webkit-scrollbar-thumb, .red-iconpick-menu::-webkit-scrollbar-thumb{
  background:rgba(41,163,171,.7); border-radius:12px; border:3px solid transparent; background-clip:padding-box; min-height:56px;
}
.kb-editor-area::-webkit-scrollbar-thumb:hover, .red-iconpick-menu::-webkit-scrollbar-thumb:hover{ background:rgba(41,163,171,.95); background-clip:padding-box; }
.kb-editor-area, .red-iconpick-menu{ scrollbar-width:auto; scrollbar-color:rgba(41,163,171,.75) rgba(255,255,255,.05); }

/* №8 — списки: маркеры слева, цвет как у текста (не по центру, не другого цвета) */
.rl-text ul, .rl-text ol, .kb-editor-area ul, .kb-editor-area ol{
  text-align:left !important; list-style-position:outside !important;
  padding-left:28px !important; margin-left:0 !important; color:inherit !important;
}
.rl-text li, .kb-editor-area li{ text-align:left !important; color:inherit !important; }
.rl-text li::marker, .kb-editor-area li::marker{ color:inherit !important; }

/* №10 — цитата: заметный вид на сайте (не просто отступ) */
.rl-text blockquote, .kb-editor-area blockquote{
  margin:10px 0 !important; padding:9px 15px !important;
  border-left:4px solid #29a3ab !important; background:rgba(41,163,171,.1) !important;
  border-radius:8px !important; color:inherit; font-style:italic;
}
/* старый «отступ» (indent через margin-left) остаётся простым отступом, без вида цитаты */
.rl-text blockquote[style*="margin-left"], .kb-editor-area blockquote[style*="margin-left"],
.rl-text blockquote[style*="margin: 0px 0px 0px"], .kb-editor-area blockquote[style*="margin: 0px 0px 0px"]{
  border-left:none !important; background:none !important; padding:0 !important; border-radius:0 !important; font-style:normal;
}

/* №9 — кнопки перемещения ↑/↓ (только в редакторе) */
.red-move{ display:flex; flex-direction:column; gap:2px; flex-shrink:0; }
.red-move-up, .red-move-down{
  width:26px; height:16px; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  color:#9fb2c0; border-radius:7px; transition:.15s;
}
.red-move-up:hover, .red-move-down:hover{ background:rgba(41,163,171,.16); color:#5fe3ff; }
.red-move-up svg, .red-move-down svg{ width:14px; height:14px; fill:currentColor; pointer-events:none; }
.red-sec-move{ flex-direction:row; gap:4px; }
.red-sec-move .red-move-up, .red-sec-move .red-move-down{ width:30px; height:30px; border-radius:9px; }

/* №3 — «контейнерный» раздел: карточки подразделов */
.rl-subhint{ margin:2px 0 12px; color:#9fb2c0; font-size:14px; }
.rl-subgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.rl-subcard{
  display:flex; align-items:center; gap:12px; padding:15px 16px; cursor:pointer;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06); border-radius:14px;
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.rl-subcard:hover{ transform:translateY(-2px); border-color:rgba(41,163,171,.4); box-shadow:0 12px 30px rgba(0,0,0,.3); }
.rl-subcard-ic{ width:42px; height:42px; flex-shrink:0; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1f8a91,#2b6fff); box-shadow:0 8px 20px rgba(43,127,255,.28); }
.rl-subcard-ic svg{ width:20px; height:20px; fill:#fff; }
.rl-subcard-tx{ min-width:0; display:flex; flex-direction:column; }
.rl-subcard-name{ font-weight:700; color:#eafcff; font-size:15px; word-break:break-word; }
.rl-subcard-cnt{ margin-top:2px; font-size:12.5px; color:#9fb2c0; }

/* Сворачивание подветок на уровне раздела (по умолчанию свёрнуто) */
.rl-subcat-list.rl-subcat-collapsed{ display:none !important; }
.rl-sub-chev{
  width:15px; height:15px; flex-shrink:0; align-self:center; margin-left:4px;
  fill:#9fb2c0 !important; -webkit-text-fill-color:#9fb2c0 !important;
  transform:rotate(-90deg); transition:transform .2s;
}
.rl-cat.rl-sub-open .rl-sub-chev{ transform:rotate(0deg); }
.rl-cat.rl-has-sub.active .rl-sub-chev{ fill:#fff !important; -webkit-text-fill-color:#fff !important; }

/* ════════════════ Правки Mat1kss (3-я порция) ════════════════ */

/* №5 — иконки сворачивания рисуем фоном (видно всегда, как у кнопок удаления) */
.red-fold svg{ display:none !important; }
.red-fold{ background-repeat:no-repeat; background-position:center; background-size:16px 16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239fb2c0'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); }
.red-fold:hover{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235fe3ff'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); }
.red-section.red-folded .red-sec-fold, .red-rule.red-folded .red-rule-fold{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239fb2c0'%3E%3Cpath d='M10 17l5-5-5-5z'/%3E%3C/svg%3E"); }

/* №6 — крупный сплошной скроллбар (без «худеющей» прозрачной рамки) */
.kb-editor-area{ max-height:440px !important; }
.kb-editor-area::-webkit-scrollbar, .red-iconpick-menu::-webkit-scrollbar{ width:12px !important; height:12px !important; }
.kb-editor-area::-webkit-scrollbar-track, .red-iconpick-menu::-webkit-scrollbar-track{ background:rgba(255,255,255,.05) !important; border-radius:8px !important; }
.kb-editor-area::-webkit-scrollbar-thumb, .red-iconpick-menu::-webkit-scrollbar-thumb{ background:#29a3ab !important; border:none !important; border-radius:8px !important; min-height:44px !important; }
.kb-editor-area::-webkit-scrollbar-thumb:hover, .red-iconpick-menu::-webkit-scrollbar-thumb:hover{ background:#37c2cb !important; }
.kb-editor-area, .red-iconpick-menu{ scrollbar-width:auto !important; scrollbar-color:#29a3ab rgba(255,255,255,.06) !important; }

/* №7 — одинаковые боковые отступы: контент правил строго по центру */
.container-fluid{ max-width:min(1500px,94vw) !important; margin-left:auto !important; margin-right:auto !important; padding-left:18px !important; padding-right:18px !important; }

/* №8 — списки: маркеры слева, тот же цвет что и текст (редактор + сайт) */
.rl-text ul, .rl-text ol, .kb-editor-area ul, .kb-editor-area ol{
  text-align:left !important; list-style-position:outside !important; padding-left:30px !important; margin-left:0 !important;
}
.rl-text ul, .kb-editor-area ul{ list-style-type:disc !important; }
.rl-text ol, .kb-editor-area ol{ list-style-type:decimal !important; }
.rl-text li, .kb-editor-area li{ text-align:left !important; color:inherit !important; display:list-item !important; }
.rl-text li::marker, .kb-editor-area li::marker{ color:inherit !important; }

/* №10 — цитата на сайте всегда оформлена (перекрываем старый подавитель отступа) */
.rl-text blockquote, .kb-editor-area blockquote,
.rl-text blockquote[style*="margin-left"], .kb-editor-area blockquote[style*="margin-left"],
.rl-text blockquote[style*="margin: 0px 0px 0px"], .kb-editor-area blockquote[style*="margin: 0px 0px 0px"]{
  border-left:4px solid var(--pr-accent, #29a3ab) !important; background:rgba(41,163,171,.12) !important;
  padding:9px 15px !important; border-radius:8px !important; margin:10px 0 !important; font-style:italic; color:inherit;
}

/* №5 — плашки «Примечание»/«Наказание» на всю ширину: выравнивание текста внутри работает */
.rl-pun, .rl-note{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; align-items:flex-start !important; }
.rl-pun > span, .rl-note > span{ flex:1 1 auto !important; min-width:0 !important; display:block !important; }
.rl-pun > span p, .rl-note > span p{ display:block !important; margin:0 0 4px !important; }
.rl-pun > span p:last-child, .rl-note > span p:last-child{ margin-bottom:0 !important; }

/* ── Пикер цвета/заливки с вводом HEX (заливка: правка Mat1kss) ── */
.kb-cpick{ position:relative; display:inline-flex; }
.kb-cpick-btn{ display:inline-flex; align-items:center; gap:3px; min-width:30px; height:28px; padding:0 6px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--text-custom); cursor:pointer; font-weight:700; font-size:13px; }
.kb-cpick-btn:hover{ background:var(--button-hover); color:var(--text-default); }
.kb-cpick-a{ line-height:1; padding-bottom:1px; border-bottom:3px solid #29a3ab; }
.kb-cpick[data-kind="hi"] .kb-cpick-a{ border-bottom:none; background:#fff36b; color:#1a1206; border-radius:3px; padding:0 4px; }
.kb-cpick-car{ width:0; height:0; border-left:3px solid transparent; border-right:3px solid transparent; border-top:4px solid currentColor; opacity:.55; }
.kb-cpick-pop{ display:none; position:absolute; top:32px; left:0; z-index:70; width:214px; padding:10px; background:#12182a; border:1px solid rgba(255,255,255,.12); border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,.5); }
.kb-cpick.open .kb-cpick-pop{ display:block; }
.kb-cpick-row{ display:flex; align-items:center; gap:6px; }
.kb-cpick-native{ width:34px; height:30px; padding:2px; border:1px solid rgba(255,255,255,.14); border-radius:7px; background:transparent; cursor:pointer; flex-shrink:0; }
.kb-cpick-native::-webkit-color-swatch-wrapper{ padding:0; } .kb-cpick-native::-webkit-color-swatch{ border:none; border-radius:5px; }
.kb-cpick-hex{ flex:1; min-width:0; height:30px; border:1px solid rgba(255,255,255,.14); border-radius:7px; background:rgba(0,0,0,.28); color:#e7edf2; padding:0 8px; font-family:monospace; font-size:13px; outline:none; }
.kb-cpick-hex:focus{ border-color:rgba(41,163,171,.6); }
.kb-cpick-hex.err{ border-color:#ff5b6e; background:rgba(255,91,110,.12); }
.kb-cpick-ok{ height:30px; padding:0 12px; border:none; border-radius:7px; background:linear-gradient(120deg,#29a3ab,#2b7fff); color:#fff; font-weight:700; font-size:13px; cursor:pointer; flex-shrink:0; }
.kb-cpick-ok:hover{ filter:brightness(1.1); }
.kb-cpick-sw{ display:grid; grid-template-columns:repeat(10,1fr); gap:4px; margin-top:9px; }
.kb-cpick-swatch{ width:100%; aspect-ratio:1; padding:0; border:1px solid rgba(255,255,255,.18); border-radius:5px; cursor:pointer; transition:transform .1s; }
.kb-cpick-swatch:hover{ transform:scale(1.15); border-color:#fff; }

/* ════════════════ Правки Mat1kss (4-я порция) ════════════════ */

/* #1 — кнопка «Редактор» больше не отдельная колонка слева, а справа над контентом */
.rl-admin-bar{ display:flex !important; justify-content:flex-end !important; width:100%; margin:0 0 14px !important; padding:0 !important; }

/* #2 — глобальный скроллбар 2px слишком мелкий: на странице правил делаем удобный */
::-webkit-scrollbar{ width:12px !important; height:12px !important; background-color:rgba(255,255,255,.04) !important; }
::-webkit-scrollbar-track{ background:rgba(255,255,255,.04) !important; border-radius:8px !important; }
::-webkit-scrollbar-thumb{ background-color:#29a3ab !important; border:2px solid transparent !important; background-clip:padding-box !important; border-radius:8px !important; min-height:40px !important; }
::-webkit-scrollbar-thumb:hover{ background-color:#37c2cb !important; background-clip:padding-box !important; }
* { scrollbar-width:auto; scrollbar-color:#29a3ab rgba(255,255,255,.06); }

/* #3 — глобальный li{list-style-type:none} убирает маркеры: возвращаем точки/цифры прямо на li */
.rl-text ul > li, .kb-editor-area ul > li{ list-style-type:disc !important; }
.rl-text ol > li, .kb-editor-area ol > li{ list-style-type:decimal !important; }
.rl-text ul ul > li, .kb-editor-area ul ul > li{ list-style-type:circle !important; }
.rl-text li, .kb-editor-area li{ list-style-position:outside !important; display:list-item !important; }

/* #4 — иконка в плашке «Примечание»/«Наказание» выровнена по первой строке (была задрана вверх) */
.rl-pun svg, .rl-note svg{ margin-top:4px !important; align-self:flex-start !important; }

/* ════════════════ Правки Mat1kss (5-я порция) ════════════════ */

/* иконки в плашках — строго по вертикальному центру */
.rl-pun, .rl-note{ align-items:center !important; }
.rl-pun svg, .rl-note svg{ margin-top:0 !important; align-self:center !important; }

/* выделение (заливка) — закруглено ВЕЗДЕ, в т.ч. внутри «Примечание/Наказание» */
.rl-text [style*="background"], .kb-editor-area [style*="background"],
.rl-pun [style*="background"], .rl-note [style*="background"]{
  border-radius:5px !important;
  padding:.12em .35em !important;
  -webkit-box-decoration-break:clone !important; box-decoration-break:clone !important;
}

/* ════════════════ Редактор: разделы / подразделы / правила ════════════════ */
/* кнопка «+ Подраздел» */
.red-rules{ display:flex; flex-direction:column; gap:10px; }
.red-add-sub{
  display:flex; align-items:center; justify-content:center; height:34px; border-radius:10px;
  background:rgba(41,163,171,.1); color:#5fe3ff; font-size:13px; font-weight:600; cursor:pointer;
  border:1px dashed rgba(41,163,171,.45); transition:var(--transition-duration);
}
.red-add-sub:hover{ background:rgba(41,163,171,.2); border-color:rgba(41,163,171,.7); }
/* подраздел в редакторе: отступ + акцентная линия слева + метка */
.red-section[data-parent]:not([data-parent=""]){
  margin-left:36px; border-left:3px solid rgba(41,163,171,.55);
  border-top-left-radius:0 !important; border-bottom-left-radius:0 !important;
}
.red-section[data-parent]:not([data-parent=""]) > .red-section-head::before{
  content:"↳ подраздел"; flex-shrink:0; font-size:11px; font-weight:700; letter-spacing:.02em;
  color:#5fe3ff; background:rgba(41,163,171,.14); border:1px solid rgba(41,163,171,.3);
  padding:3px 8px; border-radius:8px; margin-right:2px; white-space:nowrap;
}
/* у подраздела нельзя создать под-подраздел (2 уровня) */
.red-section[data-parent]:not([data-parent=""]) .red-add-sub{ display:none; }