/*
 * ============================================================
 * TGSTOCK MODERATOR UI V3
 * ============================================================
 */


/* ------------------------------------------------------------
   ГЛАВНОЕ:
   ВНЕ ВКЛАДКИ ЗАЩИТА SMART SHIELD ВООБЩЕ НЕ ПОКАЗЫВАЕМ.
   ------------------------------------------------------------ */

body.moderator-ui-v3
#moderatorShieldRoot {
  display:
    none
    !important;
}


body.moderator-ui-v3
.moderator-v3-shield-host
>
#moderatorShieldRoot {
  display:
    block
    !important;

  width:
    100%;

  margin:
    0
    !important;

  padding:
    0
    !important;
}


/*
 * Убираем внешние отступы старого Shield,
 * когда он встроен внутрь вкладки.
 */
body.moderator-ui-v3
.moderator-v3-shield-host
#moderatorShieldRoot
>
* {
  width:
    100%
    !important;

  max-width:
    none
    !important;

  margin-left:
    0
    !important;

  margin-right:
    0
    !important;
}


/* ------------------------------------------------------------
   ОБЩАЯ КОМПАКТНОСТЬ
   ------------------------------------------------------------ */

body.moderator-ui-v3
.moderator-page {
  gap:
    14px
    !important;
}


body.moderator-ui-v3
.moderator-panel {
  padding:
    22px
    !important;
}


body.moderator-ui-v3
.moderator-panel-head {
  margin-bottom:
    15px
    !important;
}


body.moderator-ui-v3
.moderator-panel-head p {
  margin-top:
    4px
    !important;

  font-size:
    11px
    !important;
}


/* ------------------------------------------------------------
   CARD
   ------------------------------------------------------------ */

.moderator-v3-ready {
  overflow:
    hidden;

  padding:
    18px
    !important;

  border-radius:
    16px
    !important;
}


.moderator-v3-ready
>
.moderator-group-header {
  margin:
    0
    !important;

  padding:
    0
    0
    13px
    !important;
}


.moderator-v3-ready
.moderator-group-title {
  font-size:
    16px
    !important;
}


.moderator-v3-ready
.moderator-group-meta {
  margin-top:
    4px
    !important;

  font-size:
    9px
    !important;
}


/* ------------------------------------------------------------
   ТАРИФ — НЕ ВКЛАДКА, А ПОСТОЯННАЯ СТРОКА
   ------------------------------------------------------------ */

.moderator-v3-ready
>
.moderator-v3-plan-bar {
  display:
    flex
    !important;

  align-items:
    center
    !important;

  justify-content:
    space-between
    !important;

  gap:
    14px;

  width:
    100%;

  margin:
    0
    0
    10px
    !important;

  padding:
    11px
    13px
    !important;

  border:
    1px solid
    rgba(126,94,248,.12)
    !important;

  border-radius:
    12px
    !important;

  background:
    linear-gradient(
      135deg,
      rgba(108,75,231,.05),
      rgba(255,255,255,.01)
    )
    !important;

  box-shadow:
    none
    !important;
}


.moderator-v3-ready
.moderator-plan-name {
  font-size:
    11px
    !important;
}


.moderator-v3-ready
.moderator-plan-meta {
  font-size:
    8px
    !important;
}


.moderator-v3-ready
.moderator-plan-change {
  min-height:
    32px
    !important;

  padding:
    0
    12px
    !important;

  border-radius:
    8px
    !important;

  font-size:
    8px
    !important;

  white-space:
    nowrap;
}


/* ------------------------------------------------------------
   TABS
   ------------------------------------------------------------ */

.moderator-v3-tabs {
  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0,1fr));

  gap:
    4px;

  margin:
    0
    0
    12px;

  padding:
    4px;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius:
    12px;

  background:
    rgba(255,255,255,.015);
}


.moderator-v3-tab {
  width:
    100%;

  min-height:
    36px;

  padding:
    0
    10px;

  border:
    0;

  border-radius:
    8px;

  background:
    transparent;

  color:
    rgba(216,216,230,.43);

  font:
    inherit;

  font-size:
    9px;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    .15s ease;
}


.moderator-v3-tab:hover {
  color:
    rgba(245,245,250,.78);

  background:
    rgba(255,255,255,.02);
}


.moderator-v3-tab.is-active {
  color:
    #fff;

  background:
    linear-gradient(
      135deg,
      rgba(109,76,235,.20),
      rgba(100,68,214,.10)
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(132,104,255,.13);
}


/* ------------------------------------------------------------
   PANE — ВСЕГДА ТОЛЬКО ПОД TABS
   ------------------------------------------------------------ */

.moderator-v3-body {
  width:
    100%;
}


.moderator-v3-pane {
  display:
    none;

  width:
    100%;

  animation:
    moderatorV3In .14s
    ease;
}


.moderator-v3-pane.is-active {
  display:
    block;
}


@keyframes moderatorV3In {
  from {
    opacity:
      0;

    transform:
      translateY(3px);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0);
  }
}


/* ------------------------------------------------------------
   HEADINGS
   ------------------------------------------------------------ */

.moderator-v3-section-head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-bottom:
    10px;

  padding:
    2px;
}


.moderator-v3-section-head
>
div {
  display:
    flex;

  flex-direction:
    column;
}


.moderator-v3-section-head span,
.moderator-v3-copy span {
  margin-bottom:
    4px;

  color:
    rgba(157,134,255,.66);

  font-size:
    7px;

  font-weight:
    900;

  letter-spacing:
    .12em;
}


.moderator-v3-section-head strong,
.moderator-v3-copy strong {
  color:
    rgba(250,250,253,.92);

  font-size:
    14px;

  font-weight:
    850;
}


.moderator-v3-section-head small,
.moderator-v3-copy small {
  margin-top:
    4px;

  color:
    rgba(214,214,228,.34);

  font-size:
    8px;

  line-height:
    1.45;
}


/* ------------------------------------------------------------
   OVERVIEW
   ------------------------------------------------------------ */

.moderator-v3-overview-head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  padding:
    13px
    14px;

  border:
    1px solid
    rgba(255,255,255,.04);

  border-radius:
    12px;

  background:
    rgba(255,255,255,.008);
}


.moderator-v3-copy {
  display:
    flex;

  flex-direction:
    column;
}


.moderator-v3-health {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  min-width:
    max-content;

  padding:
    6px
    9px;

  border-radius:
    999px;

  background:
    rgba(55,190,121,.05);

  color:
    rgba(132,227,179,.80);

  font-size:
    8px;

  font-weight:
    800;
}


.moderator-v3-health i {
  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    #56d895;

  box-shadow:
    0 0 8px
    rgba(86,216,149,.42);
}


.moderator-v3-overview-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap:
    8px;

  margin-top:
    8px;
}


.moderator-v3-summary-card {
  display:
    grid;

  grid-template-columns:
    31px
    minmax(0,1fr)
    auto;

  align-items:
    center;

  gap:
    9px;

  min-width:
    0;

  padding:
    11px;

  border:
    1px solid
    rgba(255,255,255,.04);

  border-radius:
    11px;

  background:
    rgba(255,255,255,.008);

  color:
    inherit;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    .15s ease;
}


.moderator-v3-summary-card:hover {
  border-color:
    rgba(123,91,251,.18);

  background:
    rgba(105,72,225,.025);
}


.moderator-v3-summary-icon {
  display:
    grid;

  place-items:
    center;

  width:
    31px;

  height:
    31px;

  border-radius:
    9px;

  background:
    rgba(110,77,239,.06);

  color:
    rgba(167,146,255,.84);
}


.moderator-v3-summary-card
>
div {
  display:
    flex;

  min-width:
    0;

  flex-direction:
    column;
}


.moderator-v3-summary-card small {
  color:
    rgba(205,205,221,.29);

  font-size:
    6px;

  font-weight:
    850;

  letter-spacing:
    .08em;
}


.moderator-v3-summary-card strong {
  margin-top:
    2px;

  color:
    rgba(246,246,251,.82);

  font-size:
    9px;
}


.moderator-v3-summary-card p {
  overflow:
    hidden;

  margin:
    2px
    0
    0;

  color:
    rgba(205,205,220,.29);

  font-size:
    7px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.moderator-v3-summary-card b {
  color:
    rgba(205,205,220,.22);

  font-size:
    10px;
}


/* ------------------------------------------------------------
   QUICK PROTECTION
   ------------------------------------------------------------ */

.moderator-v3-quick-protection {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  margin-bottom:
    10px;

  padding:
    11px
    12px;

  border:
    1px solid
    rgba(255,255,255,.04);

  border-radius:
    11px;

  background:
    rgba(255,255,255,.008);
}


.moderator-v3-quick-copy {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.moderator-v3-quick-icon {
  display:
    grid;

  place-items:
    center;

  width:
    30px;

  height:
    30px;

  border-radius:
    9px;

  background:
    rgba(110,76,237,.07);
}


.moderator-v3-quick-copy
>
div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.moderator-v3-quick-copy strong {
  color:
    rgba(245,245,250,.84);

  font-size:
    9px;
}


.moderator-v3-quick-copy small {
  color:
    rgba(210,210,223,.31);

  font-size:
    7px;
}


.moderator-v3-quick-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


/* switch */

.moderator-v3-switch {
  position:
    relative;

  width:
    36px;

  height:
    21px;

  cursor:
    pointer;
}


.moderator-v3-switch input {
  position:
    absolute;

  opacity:
    0;
}


.moderator-v3-switch-ui {
  position:
    absolute;

  inset:
    0;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.04);

  transition:
    .15s ease;
}


.moderator-v3-switch-ui::after {
  content:
    "";

  position:
    absolute;

  top:
    3px;

  left:
    3px;

  width:
    13px;

  height:
    13px;

  border-radius:
    50%;

  background:
    rgba(222,222,232,.48);

  transition:
    .15s ease;
}


.moderator-v3-switch
input:checked
+
.moderator-v3-switch-ui {
  border-color:
    rgba(119,84,250,.36);

  background:
    rgba(111,76,239,.24);
}


.moderator-v3-switch
input:checked
+
.moderator-v3-switch-ui::after {
  left:
    18px;

  background:
    #aa98ff;
}


.moderator-v3-small-btn {
  min-height:
    29px;

  padding:
    0
    10px;

  border:
    1px solid
    rgba(127,96,248,.13);

  border-radius:
    7px;

  background:
    rgba(108,74,232,.035);

  color:
    rgba(184,168,255,.76);

  font:
    inherit;

  font-size:
    7px;

  font-weight:
    800;

  cursor:
    pointer;
}


/* ------------------------------------------------------------
   EMBEDDED SMART SHIELD
   ------------------------------------------------------------ */

.moderator-v3-shield-host {
  width:
    100%;

  margin-top:
    6px;
}


/*
 * Главное визуальное исправление:
 * старый Smart Shield больше не имеет внешнего standalone-gap.
 */
.moderator-v3-shield-host
#moderatorShieldRoot {
  position:
    static
    !important;

  inset:
    auto
    !important;
}


/* ------------------------------------------------------------
   JOURNAL
   ------------------------------------------------------------ */

.moderator-v3-ready
[data-v3-pane="journal"]
.moderator-log-section {
  margin:
    0
    !important;
}


/* ------------------------------------------------------------
   ADVANCED
   ------------------------------------------------------------ */

.moderator-v3-advanced-info {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  margin-bottom:
    10px;

  padding:
    10px
    12px;

  border:
    1px solid
    rgba(255,255,255,.035);

  border-radius:
    10px;

  background:
    rgba(255,255,255,.006);
}


.moderator-v3-advanced-info
>
span {
  display:
    grid;

  place-items:
    center;

  width:
    28px;

  height:
    28px;

  border-radius:
    8px;

  background:
    rgba(255,255,255,.025);
}


.moderator-v3-advanced-info
>
div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.moderator-v3-advanced-info strong {
  color:
    rgba(239,239,246,.70);

  font-size:
    8px;
}


.moderator-v3-advanced-info small {
  color:
    rgba(205,205,220,.28);

  font-size:
    7px;
}


.moderator-v3-ready
[data-v3-pane="advanced"]
.moderator-settings {
  margin:
    0
    !important;
}


.moderator-v3-ready
[data-v3-pane="advanced"]
.moderator-max-dashboard {
  margin-top:
    10px
    !important;
}


/* ------------------------------------------------------------
   EMPTY
   ------------------------------------------------------------ */

.moderator-v3-empty {
  padding:
    18px;

  border:
    1px dashed
    rgba(255,255,255,.04);

  border-radius:
    10px;

  color:
    rgba(210,210,223,.30);

  font-size:
    8px;

  text-align:
    center;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (
  max-width:
  760px
) {

  body.moderator-ui-v3
  .moderator-panel {
    padding:
      14px
      !important;
  }


  .moderator-v3-ready {
    padding:
      13px
      !important;
  }


  .moderator-v3-tabs {
    grid-template-columns:
      repeat(4, max-content);

    overflow-x:
      auto;

    justify-content:
      start;
  }


  .moderator-v3-tab {
    min-width:
      90px;
  }


  .moderator-v3-overview-grid {
    grid-template-columns:
      1fr;
  }


  .moderator-v3-overview-head,
  .moderator-v3-quick-protection {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .moderator-v3-quick-actions {
    width:
      100%;

    justify-content:
      space-between;
  }

}