@charset "UTF-8";
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
 Here we are getting some Peertube variables (see _variables.scss in Peertube source code):
 */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
.peertube-plugin-livechat-experimental,
.peertube-plugin-livechat-warning {
  color: orange;
}

.peertube-plugin-livechat-error {
  color: red;
}

.peertube-plugin-livechat-error-message {
  /* display an error block (page not found, ...) */
  display: block;
  font-size: 20px;
  padding-top: 50px;
  text-align: center;
  width: 100%;
}

.peertube-plugin-livechat-container .peertube-plugin-livechat-error-message {
  max-width: 30vw;
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
 * SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/* We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings. */
/* stylelint-disable custom-property-pattern */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
 * SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/* We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings. */
/* stylelint-disable custom-property-pattern */
/*
 * SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/* We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings. */
/* stylelint-disable custom-property-pattern */
livechat-dynamic-table-form {
  display: block;
  margin-bottom: 3rem;
}
livechat-dynamic-table-form table {
  table-layout: fixed;
  text-align: center;
}
livechat-dynamic-table-form table tr {
  border: 1px var(--bg-secondary-400, var(--greyBackgroundColor)) solid;
}
livechat-dynamic-table-form table td,
livechat-dynamic-table-form table th {
  word-wrap: break-word;
  vertical-align: top;
  padding: 5px 7px;
}
livechat-dynamic-table-form table td:last-child {
  vertical-align: middle;
  min-width: 28px;
}
livechat-dynamic-table-form table td:last-child > input:not([type=checkbox]),
livechat-dynamic-table-form table td:last-child textarea {
  min-width: 150px;
}
livechat-dynamic-table-form table tbody tr:nth-child(odd) {
  background-color: var(--bg-secondary-300, var(--greySecondaryBackgroundColor));
}
livechat-dynamic-table-form table .livechat-dynamic-table-form-description-header {
  font-size: small;
  font-weight: lighter;
}
livechat-dynamic-table-form .dynamic-table-add-row-cell {
  text-align: left;
}
livechat-dynamic-table-form .dynamic-table-add-row {
  line-height: 19px;
  padding: 4px;
  border: 0;
  font-weight: 600;
  border-radius: 3px !important;
  text-align: center;
  cursor: pointer;
  font-size: 15px;
  background-color: var(--bs-green);
}
livechat-dynamic-table-form .dynamic-table-add-row, livechat-dynamic-table-form .dynamic-table-add-row:active, livechat-dynamic-table-form .dynamic-table-add-row:focus {
  color: #fff;
  background-color: rgb(63.7604651163, 228.1953488372, 12.3046511628);
}
livechat-dynamic-table-form .dynamic-table-add-row:focus, livechat-dynamic-table-form .dynamic-table-add-row.focus-visible {
  box-shadow: 0 0 0 0.2rem rgb(113.1674418605, 245.1255813953, 71.8744186047);
}
livechat-dynamic-table-form .dynamic-table-add-row:hover {
  color: #fff;
  background-color: rgb(75.688372093, 242.5162790698, 23.4837209302);
}
livechat-dynamic-table-form .dynamic-table-add-row[disabled], livechat-dynamic-table-form .dynamic-table-add-row.disabled {
  cursor: default;
  color: #fff;
  background-color: var(--input-border-color, var(--inputBorderColor));
}
livechat-dynamic-table-form .dynamic-table-remove-row {
  line-height: 19px;
  padding: 4px;
  border: 0;
  font-weight: 600;
  border-radius: 3px !important;
  text-align: center;
  cursor: pointer;
  font-size: 15px;
  background-color: var(--bs-orange);
}
livechat-dynamic-table-form .dynamic-table-remove-row, livechat-dynamic-table-form .dynamic-table-remove-row:active, livechat-dynamic-table-form .dynamic-table-remove-row:focus {
  color: #fff;
  background-color: var(--primary, var(--mainColor));
}
livechat-dynamic-table-form .dynamic-table-remove-row:focus, livechat-dynamic-table-form .dynamic-table-remove-row.focus-visible {
  box-shadow: 0 0 0 0.2rem var(--mainHoverColor);
}
livechat-dynamic-table-form .dynamic-table-remove-row:hover {
  color: #fff;
  background-color: var(--fg-400, var(--mainHoverColor));
}
livechat-dynamic-table-form .dynamic-table-remove-row[disabled], livechat-dynamic-table-form .dynamic-table-remove-row.disabled {
  cursor: default;
  color: #fff;
  background-color: var(--input-border-color, var(--inputBorderColor));
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
livechat-error {
  color: red;
  display: block;
  padding: 50px;
  text-align: center;
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
livechat-help-button a {
  height: 18px !important;
  margin: 2px !important;
  padding: 1px !important;
  vertical-align: middle;
}
livechat-help-button svg {
  display: block;
  height: auto;
}

/*
 * SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/* stylelint-disable custom-property-pattern */
livechat-image-file-input img {
  cursor: pointer;
  max-height: 3em !important;
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
livechat-share-chat {
  display: block;
  text-align: start;
}
livechat-share-chat > * {
  margin-top: 10px;
}
livechat-share-chat .sub-menu-entry {
  cursor: pointer;
}
livechat-share-chat .livechat-shareurl-copy {
  display: flex;
  flex-wrap: wrap;
}
livechat-share-chat .livechat-shareurl-copy button {
  white-space: nowrap;
}
livechat-share-chat .livechat-shareurl-copy input {
  flex-grow: 2;
  width: auto !important;
}
livechat-share-chat .livechat-shareurl-block {
  height: 300px;
  overflow-y: scroll;
}
livechat-share-chat .livechat-shareurl-options input[type=checkbox],
livechat-share-chat .livechat-shareurl-options input[type=radio] {
  margin-right: 20px;
}
livechat-share-chat .livechat-shareurl-options label {
  display: block;
}
livechat-share-chat .livechat-shareurl-options .livechat-shareurl-suboptions {
  margin-left: 40px;
}
livechat-share-chat .livechat-shareurl-options .livechat-shareurl-suboptions > * {
  display: block;
}
livechat-share-chat .livechat-shareurl-options .livechat-shareurl-suboptions.livechat-shareurl-suboptions-disabled label {
  /* stylelint-disable-next-line custom-property-pattern */
  color: var(--fg-400, var(--greyForegroundColor));
}
livechat-share-chat .livechat-shareurl-protocol {
  display: flex;
  flex-flow: row wrap;
  column-gap: 30px;
}
livechat-share-chat .livechat-shareurl-protocol input[type=radio] {
  margin-right: 10px;
}
livechat-share-chat .livechat-shareurl-tips {
  margin-bottom: 1rem;
  margin-top: 1rem;
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
livechat-spinner,
.livechat-spinner {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
livechat-spinner div,
.livechat-spinner div {
  width: 48px;
  height: 48px;
  margin: 20px;
  /* stylelint-disable-next-line custom-property-pattern */
  border: 5px solid var(--bg-secondary-400, var(--greyBackgroundColor)) !important;
  /* stylelint-disable-next-line custom-property-pattern */
  border-bottom-color: var(--primary, var(--mainColor)) !important;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: livechatrotating 1s linear infinite;
}
@keyframes livechatrotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*
 * SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/* stylelint-disable custom-property-pattern */
livechat-tags-input {
  --tag-padding-vertical: 3px;
  --tag-padding-horizontal: 6px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 320px;
  /* stylelint-disable-next-line no-descending-specificity */
}
livechat-tags-input .livechat-tags-container {
  align-items: center;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}
livechat-tags-input input {
  flex: 1;
  border: none;
  padding: 0;
  color: inherit;
  background-color: inherit;
  width: 100%;
  /* stylelint-disable-next-line no-descending-specificity */
}
livechat-tags-input input:focus {
  outline: transparent;
}
livechat-tags-input .livechat-tags,
livechat-tags-input .livechat-tags-searched {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: var(--tag-padding-vertical) 0;
  max-height: 150px;
  overflow-y: auto;
  transition-property: height, margin;
  transition-duration: 0.3s;
}
@supports (scrollbar-width: auto) {
  livechat-tags-input .livechat-tags,
  livechat-tags-input .livechat-tags-searched {
    scrollbar-color: var(--fg-400, var(--greyForegroundColor)) transparent;
    scrollbar-width: thin;
  }
}
livechat-tags-input .livechat-tags-container,
livechat-tags-input .livechat-tags-searched {
  border-bottom: 1px dashed var(--fg-400, var(--greyForegroundColor));
}
livechat-tags-input .livechat-tags-container.livechat-empty,
livechat-tags-input .livechat-tags-searched.livechat-empty {
  height: 0;
  margin: 0;
  border: none;
}
livechat-tags-input .livechat-tags-searched::after {
  content: "🔍";
  flex-grow: 1;
  text-align: right;
}
livechat-tags-input .livechat-tags-searched.livechat-empty::after {
  display: none;
}
livechat-tags-input .livechat-tag,
livechat-tags-input .livechat-tag-searched {
  width: auto;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0 var(--tag-padding-horizontal);
  font-size: 14px;
  list-style: none;
  border-radius: 3px;
  margin: 0 3px 3px 0;
  transition: 0.3s filter;
}
livechat-tags-input .livechat-tag .livechat-tag-close,
livechat-tags-input .livechat-tag-searched .livechat-tag-close {
  display: block;
  width: 12px;
  height: 12px;
  line-height: 12px;
  text-align: center;
  font-size: 10px;
  margin-left: var(--tag-padding-horizontal);
  color: var(--primary, var(--mainColor));
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
livechat-tags-input .livechat-tag .livechat-tag-close::before,
livechat-tags-input .livechat-tag-searched .livechat-tag-close::before {
  content: "✕";
}
livechat-tags-input .livechat-tag, livechat-tags-input .livechat-tag:active, livechat-tags-input .livechat-tag:focus,
livechat-tags-input .livechat-tag-searched,
livechat-tags-input .livechat-tag-searched:active,
livechat-tags-input .livechat-tag-searched:focus {
  color: #fff;
  background-color: var(--primary, var(--mainColor));
}
livechat-tags-input .livechat-tag .livechat-tag-close, livechat-tags-input .livechat-tag:active .livechat-tag-close, livechat-tags-input .livechat-tag:focus .livechat-tag-close,
livechat-tags-input .livechat-tag-searched .livechat-tag-close,
livechat-tags-input .livechat-tag-searched:active .livechat-tag-close,
livechat-tags-input .livechat-tag-searched:focus .livechat-tag-close {
  color: var(--primary, var(--mainColor));
}
livechat-tags-input .livechat-tag:hover,
livechat-tags-input .livechat-tag-searched:hover {
  color: #fff;
  background-color: var(--fg-400, var(--mainHoverColor));
}
livechat-tags-input .livechat-tag:hover .livechat-tag-close,
livechat-tags-input .livechat-tag-searched:hover .livechat-tag-close {
  color: var(--fg-400, var(--mainHoverColor));
}
livechat-tags-input .livechat-tag[disabled], livechat-tags-input .livechat-tag.disabled,
livechat-tags-input .livechat-tag-searched[disabled],
livechat-tags-input .livechat-tag-searched.disabled {
  cursor: default;
  color: #fff;
  background-color: var(--input-border-color, var(--inputBorderColor));
}
livechat-tags-input .livechat-tag[disabled] .livechat-tag-close, livechat-tags-input .livechat-tag.disabled .livechat-tag-close,
livechat-tags-input .livechat-tag-searched[disabled] .livechat-tag-close,
livechat-tags-input .livechat-tag-searched.disabled .livechat-tag-close {
  color: var(--input-border-color, var(--inputBorderColor));
}
livechat-tags-input .livechat-tag .livechat-tag-name,
livechat-tags-input .livechat-tag-searched .livechat-tag-name {
  margin-top: 3px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 250px;
}
livechat-tags-input .livechat-tags.livechat-unfocused .livechat-tag {
  filter: opacity(50%) grayscale(80%);
}

/*
 * SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/* We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings. */
/* stylelint-disable custom-property-pattern */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
livechat-token-list table {
  width: 100%;
  table-layout: fixed;
  text-align: center;
}
livechat-token-list table tr {
  border: 1px var(--bg-secondary-400, var(--greyBackgroundColor)) solid;
}
livechat-token-list table td,
livechat-token-list table th {
  word-wrap: break-word;
  vertical-align: top;
  padding: 5px 7px;
}
livechat-token-list table td:last-child {
  vertical-align: middle;
  min-width: 28px;
}
livechat-token-list table td:last-child > input:not([type=checkbox]),
livechat-token-list table td:last-child textarea {
  min-width: 150px;
}
livechat-token-list table tbody tr:nth-child(odd) {
  background-color: var(--bg-secondary-300, var(--greySecondaryBackgroundColor));
}
livechat-token-list table tr th:first-child,
livechat-token-list table tr th:last-child {
  width: 50px;
}
livechat-token-list table label {
  font-weight: inherit;
}
livechat-token-list .livechat-create-token {
  line-height: 19px;
  padding: 4px;
  border: 0;
  font-weight: 600;
  border-radius: 3px !important;
  text-align: center;
  cursor: pointer;
  font-size: 15px;
  background-color: var(--bs-green);
}
livechat-token-list .livechat-create-token, livechat-token-list .livechat-create-token:active, livechat-token-list .livechat-create-token:focus {
  color: #fff;
  background-color: rgb(63.7604651163, 228.1953488372, 12.3046511628);
}
livechat-token-list .livechat-create-token:focus, livechat-token-list .livechat-create-token.focus-visible {
  box-shadow: 0 0 0 0.2rem rgb(113.1674418605, 245.1255813953, 71.8744186047);
}
livechat-token-list .livechat-create-token:hover {
  color: #fff;
  background-color: rgb(75.688372093, 242.5162790698, 23.4837209302);
}
livechat-token-list .livechat-create-token[disabled], livechat-token-list .livechat-create-token.disabled {
  cursor: default;
  color: #fff;
  background-color: var(--input-border-color, var(--inputBorderColor));
}
livechat-token-list .livechat-revoke-token {
  line-height: 19px;
  padding: 4px;
  border: 0;
  font-weight: 600;
  border-radius: 3px !important;
  text-align: center;
  cursor: pointer;
  font-size: 15px;
  background-color: var(--bs-orange);
}
livechat-token-list .livechat-revoke-token, livechat-token-list .livechat-revoke-token:active, livechat-token-list .livechat-revoke-token:focus {
  color: #fff;
  background-color: var(--primary, var(--mainColor));
}
livechat-token-list .livechat-revoke-token:focus, livechat-token-list .livechat-revoke-token.focus-visible {
  box-shadow: 0 0 0 0.2rem var(--mainHoverColor);
}
livechat-token-list .livechat-revoke-token:hover {
  color: #fff;
  background-color: var(--fg-400, var(--mainHoverColor));
}
livechat-token-list .livechat-revoke-token[disabled], livechat-token-list .livechat-revoke-token.disabled {
  cursor: default;
  color: #fff;
  background-color: var(--input-border-color, var(--inputBorderColor));
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
#peertube-plugin-livechat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#peertube-plugin-livechat-container .chatroom .box-flyout .chatroom-body .occupants {
  min-width: min(200px, 50%);
}

/* Note: livechat-viewer-mode-content (the form where anonymous users can
    choose nickname or log in with external account), can be something like
    ~180px height (at time of writing).
    We must ensure that the px height limit for converse-muc and converse-root is
    always higher than livechat-viewer-mode-content max size.
  Note: We also must ensure that when the user has choosen its nickname, and there is an
    ongoing poll, the user can see the chat when the poll is folded.
*/
#peertube-plugin-livechat-container converse-root {
  display: block;
  border: 1px solid black;
  min-height: max(30vh, 300px);
  height: 100%;
  min-width: min(400px, 25vw);
}
#peertube-plugin-livechat-container converse-root converse-muc {
  min-height: max(30vh, 300px);
}
@media screen and (orientation: portrait) and (width <= 767px) {
  #peertube-plugin-livechat-container converse-root {
    /* On small screen, and when portrait mode, we are giving the chat more vertical space.
        It should go under the video.
     */
    min-height: max(50vh, 300px);
  }
  #peertube-plugin-livechat-container converse-root converse-muc {
    min-height: max(50vh, 300px);
  }
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
.peertube-plugin-livechat-buttons,
.livechat-mini-muc-bar-buttons {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  padding-right: 12px !important;
}

.peertube-plugin-livechat-button {
  align-items: center;
  display: flex;
  flex-direction: row;
  height: 36px !important;
  margin: 5px !important;
  padding: 2px !important;
}
.peertube-plugin-livechat-button svg {
  height: auto;
}

.peertube-plugin-livechat-buttons-open .peertube-plugin-livechat-button,
.livechat-mini-muc-bar-buttons .peertube-plugin-livechat-button {
  height: 18px !important;
  margin: 2px !important;
  padding: 1px !important;
}

.peertube-plugin-livechat-buttons-cloned {
  display: none;
}

[peertube-plugin-livechat-state=initializing] {
  display: none;
}

[peertube-plugin-livechat-state=open] .peertube-plugin-livechat-button-open {
  display: none;
}

[peertube-plugin-livechat-state=closed] .peertube-plugin-livechat-button-promote,
[peertube-plugin-livechat-state=closed] .peertube-plugin-livechat-button-close {
  display: none;
}

[peertube-plugin-livechat-state]:not([peertube-plugin-livechat-state=open]) .peertube-plugin-livechat-multi-button-main {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-right: 0 !important;
}
[peertube-plugin-livechat-state]:not([peertube-plugin-livechat-state=open]) .peertube-plugin-livechat-multi-button-secondary {
  border-radius: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  border-left: 1px solid currentcolor;
}
[peertube-plugin-livechat-state]:not([peertube-plugin-livechat-state=open]) .peertube-plugin-livechat-multi-button-last-secondary {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  margin-left: 0 !important;
  border-left: 1px solid currentcolor;
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/* stylelint-disable custom-property-pattern */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
livechat-channel-tabs {
  display: block;
  /* See Peertube sub-menu-h1 mixin */
  margin-bottom: 30px;
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/* stylelint-disable custom-property-pattern */
livechat-configuration-section-header {
  margin-top: 3rem;
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
  These are styles to apply for the channel configuration pages.
*/
.peertube-plugin-livechat-configuration {
  /* Channel configuration page */
  /* Channel selection page */
}
.peertube-plugin-livechat-configuration h1 {
  padding-top: 40px;
  /* See Peertube sub-menu-h1 mixin */
  font-size: 1.3rem;
  border-bottom: 2px solid var(--bg-secondary-400, var(--greyBackgroundColor));
  padding-bottom: 15px;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-channel-info {
  /* stylelint-disable-next-line value-keyword-case */
  color: var(--fg, var(--mainForegroundColor));
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-channel-info span:first-child {
  /* See Peertube .video-channel-display-name */
  font-weight: 600;
  font-size: 18px;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-channel-info span:not(:first-child) {
  /* See Peertube .video-channel-name */
  margin-left: 5px;
  font-size: 14px;
  color: #777272;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel h2 {
  text-transform: uppercase;
  color: var(--primary, var(--mainColor));
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 10px;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy {
  line-height: 19px;
  padding: 4px 13px;
  border: 0;
  font-weight: 600;
  border-radius: 3px !important;
  text-align: center;
  cursor: pointer;
  font-size: 15px;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit]:active, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit]:focus,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit]:active,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit]:focus,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button:active,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button:focus,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy:active,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy:focus {
  color: #fff;
  background-color: var(--primary, var(--mainColor));
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit]:hover,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit]:hover,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button:hover,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy:hover {
  color: #fff;
  background-color: var(--fg-400, var(--mainHoverColor));
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit][disabled], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit].disabled,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit][disabled],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit].disabled,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button[disabled],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button.disabled,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy[disabled],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy.disabled {
  cursor: default;
  color: #fff;
  background-color: var(--input-border-color, var(--inputBorderColor));
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset] {
  background-color: var(--bg-secondary-400, var(--greyBackgroundColor));
  color: var(--fg-400, var(--greyForegroundColor));
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset]:hover, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset]:active, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset]:focus, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset][disabled], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset].disabled,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset]:hover,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset]:active,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset]:focus,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset][disabled],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset].disabled {
  color: var(--fg-400, var(--greyForegroundColor));
  background-color: var(--bg-secondary-300, var(--greySecondaryBackgroundColor));
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset][disabled], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset].disabled,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset][disabled],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset].disabled {
  cursor: default;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels {
  list-style-type: none;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li {
  align-items: center;
  gap: 15px;
  /* See Peertube row-blocks mixin, used in video-channel */
  display: flex;
  min-height: 130px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  /* stylelint-disable-next-line value-keyword-case */
  border-bottom: 1px solid var(--inputBorderColor);
}
@media screen and (max-width: 800px) {
  .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li {
    flex-direction: column;
    height: auto;
    align-items: center;
  }
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .avatar {
  /* See Peertube CSS, class avatar and avatar-80 */
  width: 80px;
  height: 80px;
  min-width: 80px;
  min-height: 80px;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .avatar.channel {
  border-radius: 5px;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .avatar.initial {
  /* See Peertube actor-avatar.component.scss */
  background-color: #3c2109;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--initialFontSize);
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .avatar.initial.gray {
  background-color: #939393;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info {
  flex-grow: 1;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a {
  /* See Peertube .video-channel-names */
  width: fit-content;
  display: flex;
  align-items: baseline;
  /* stylelint-disable-next-line value-keyword-case */
  color: var(--fg, var(--mainForegroundColor));
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a:hover, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a:focus, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a:active {
  text-decoration: none !important;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a:focus:not(.focus-visible) {
  outline: none !important;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a div:first-child {
  /* See Peertube .video-channel-display-name */
  font-weight: 600;
  font-size: 18px;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a div:not(:first-child) {
  /* See Peertube .video-channel-name */
  margin-left: 5px;
  font-size: 14px;
  color: #777272;
}
.peertube-plugin-livechat-configuration .peertube-livechat-emojis-col-sn {
  width: 30%;
}
.peertube-plugin-livechat-configuration .peertube-livechat-emojis-col-file {
  width: 65%;
}
.peertube-plugin-livechat-configuration .peertube-plugin-livechat-configuration-actions {
  margin-bottom: 1rem;
  text-align: right;
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
/* stylelint-disable custom-property-pattern */
.peertube-plugin-livechat-admin-firewall h1 {
  padding-top: 40px;
  /* See Peertube sub-menu-h1 mixin */
  font-size: 1.3rem;
  border-bottom: 2px solid var(--bg-secondary-400, var(--greyBackgroundColor));
  padding-bottom: 15px;
}
.peertube-plugin-livechat-admin-firewall textarea[name^=_content_] {
  min-height: 10rem;
}
.peertube-plugin-livechat-admin-firewall input[type=submit],
.peertube-plugin-livechat-admin-firewall input[type=reset],
.peertube-plugin-livechat-admin-firewall button[type=submit],
.peertube-plugin-livechat-admin-firewall button[type=reset] {
  line-height: 19px;
  padding: 4px 13px;
  border: 0;
  font-weight: 600;
  border-radius: 3px !important;
  text-align: center;
  cursor: pointer;
  font-size: 15px;
}
.peertube-plugin-livechat-admin-firewall input[type=submit], .peertube-plugin-livechat-admin-firewall input[type=submit]:active, .peertube-plugin-livechat-admin-firewall input[type=submit].active, .peertube-plugin-livechat-admin-firewall input[type=submit]:focus,
.peertube-plugin-livechat-admin-firewall button[type=submit],
.peertube-plugin-livechat-admin-firewall button[type=submit]:active,
.peertube-plugin-livechat-admin-firewall button[type=submit].active,
.peertube-plugin-livechat-admin-firewall button[type=submit]:focus {
  color: var(--on-primary, #fff);
  background-color: var(--primary, var(--mainColor));
  border: 1px solid var(--primary, var(--mainColor));
}
.peertube-plugin-livechat-admin-firewall input[type=submit]:hover,
.peertube-plugin-livechat-admin-firewall button[type=submit]:hover {
  color: var(--on-primary, #fff);
  background-color: var(--primary-400, var(--mainHoverColor));
}
.peertube-plugin-livechat-admin-firewall input[type=submit][disabled],
.peertube-plugin-livechat-admin-firewall button[type=submit][disabled] {
  pointer-events: none;
  opacity: 0.6;
}
.peertube-plugin-livechat-admin-firewall input[type=reset],
.peertube-plugin-livechat-admin-firewall button[type=reset] {
  color: var(--fg, var(--mainForegroundColor));
  background-color: transparent;
  border: 1px solid var(--bg-secondary-500, var(--inputBorderColor)) !important;
}
.peertube-plugin-livechat-admin-firewall input[type=reset]:active, .peertube-plugin-livechat-admin-firewall input[type=reset].active, .peertube-plugin-livechat-admin-firewall input[type=reset]:focus, .peertube-plugin-livechat-admin-firewall input[type=reset]:focus-visible,
.peertube-plugin-livechat-admin-firewall button[type=reset]:active,
.peertube-plugin-livechat-admin-firewall button[type=reset].active,
.peertube-plugin-livechat-admin-firewall button[type=reset]:focus,
.peertube-plugin-livechat-admin-firewall button[type=reset]:focus-visible {
  color: var(--fg, var(--mainForegroundColor));
  background-color: var(--bg-secondary-500, var(--inputBorderColor));
  border-color: var(--bg-secondary-500, var(--inputBorderColor));
}
.peertube-plugin-livechat-admin-firewall input[type=reset]:hover,
.peertube-plugin-livechat-admin-firewall button[type=reset]:hover {
  color: var(--fg, var(--mainForegroundColor));
  background-color: var(--bg-secondary-450, var(--inputBorderColor));
}
.peertube-plugin-livechat-admin-firewall input[type=reset][disabled],
.peertube-plugin-livechat-admin-firewall button[type=reset][disabled] {
  pointer-events: none;
  opacity: 0.8;
}
.peertube-plugin-livechat-admin-firewall .peertube-livechat-admin-firewall-col-name {
  width: 25%;
}
.peertube-plugin-livechat-admin-firewall .peertube-livechat-admin-firewall-col-content {
  width: 65%;
}

/*
 * SPDX-FileCopyrightText: 2024-2025 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
table.peertube-plugin-livechat-prosody-list-rooms {
  border: 1px solid black;
  margin: 5px 0;
}

table.peertube-plugin-livechat-prosody-list-rooms tr:nth-child(odd) {
  background-color: #eee;
}

table.peertube-plugin-livechat-prosody-list-rooms tr:nth-child(even) {
  background-color: #fff;
}

table.peertube-plugin-livechat-prosody-list-rooms th {
  /* stylelint-disable-next-line custom-property-pattern */
  background-color: var(--fg-400, var(--mainHoverColor));
  border: 1px solid black;
  /* stylelint-disable-next-line custom-property-pattern */
  color: var(--mainBackgroundColor);
  padding: 4px 5px;
}

table.peertube-plugin-livechat-prosody-list-rooms td {
  border: 1px solid #555;
  color: black;
  padding: 4px 5px;
}

/*# sourceMappingURL=style.css.map */
#json-categories-as-text {
  border: 1px solid #c6c6c6;
  color: var(--textareaForegroundColor);
  padding: 5px 15px;
  background-color: var(--markdownTextareaBackgroundColor);
  font-family: monospace;
  font-size: 13px;
  border-bottom: 0;
  border-radius: 3px 3px unset unset;
  width: 100%;
}

#json-categories-as-text.error {
  border-color: red;
  color: red;
  border-bottom: 1px solid;
}

#categories-table th {
  border-color: currentcolor;
  border-bottom: none;
  border: var(--submenuBackgroundColor);
  border-bottom: 1px solid var(--submenuBackgroundColor);
  padding: 5px;
  font-weight: 600;
  color: var(--mainForegroundColor);
}

#categories-table tr {
  outline: 0;
  background-color: var(--mainBackgroundColor);
}

#categories-table tbody tr:nth-child(odd) {
  background-color: var(--submenuBackgroundColor);
}

#categories-table td {
  padding: 5px;
}

#categories-table .category__deleted {
  text-decoration: line-through;
  color: red;
}

#categories-table .category__added {
  color: green;
}
.vjs-overlay a {
  color: #210cbf;
}

/* make font size for overlays little bigger and responsive */
.video-js .vjs-overlay { /* apply for screen sizes under 768px */
  font-size:1.2rem;
  z-index: 10;
}
@media screen and (min-width: 768px) { /* apply for screen sizes bigger or equal 768px */
  .video-js .vjs-overlay {
    font-size:1.4rem;
  }
}
.video-js .vjs-overlay{color:#fff;position:absolute;text-align:center}.video-js .vjs-overlay-no-background{max-width:33%}.video-js .vjs-overlay-background{background-color:#646464;background-color:hsla(0,0%,100%,.4);border-radius:3px;padding:10px;width:33%}.video-js .vjs-overlay-top-left{top:5px;left:5px}.video-js .vjs-overlay-top{left:50%;margin-left:-16.5%;top:5px}.video-js .vjs-overlay-top-right{right:5px;top:5px}.video-js .vjs-overlay-right{right:5px;top:50%;transform:translateY(-50%)}.video-js .vjs-overlay-bottom-right{bottom:3.5em;right:5px}.video-js .vjs-overlay-bottom{bottom:3.5em;left:50%;margin-left:-16.5%}.video-js .vjs-overlay-bottom-left{bottom:3.5em;left:5px}.video-js .vjs-overlay-left{left:5px;top:50%;transform:translateY(-50%)}.video-js .vjs-overlay-center{left:50%;margin-left:-16.5%;top:50%;transform:translateY(-50%)}.video-js .vjs-no-flex .vjs-overlay-left,.video-js .vjs-no-flex .vjs-overlay-center,.video-js .vjs-no-flex .vjs-overlay-right{margin-top:-15px}/*# sourceMappingURL=videojs-overlay.css.map */
:root {
  --zh-blue: #0b67c8;
  --zh-blue-dark: #063f86;
  --zh-navy: #071a35;
  --zh-sky: #eaf6ff;
  --zh-paper: #ffffff;
  --zh-text: #0a2445;
  --zh-muted: #637a94;
  --zh-header-bg: #0b4fb4;
  --zh-header-text: #ffffff;
  --zh-active-nav: #8ed8ff;
  --zh-page-bg: #f5faff;
  --zh-heading-color: #0a2445;
  --zh-body-text: #637a94;
  --zh-button-bg: #1264d8;
  --zh-button-text: #ffffff;
  --zh-hero-title: #ffffff;
  --zh-hero-text: #ffffff;
  --zh-channel-hero-bg: #0754b8;
  --zh-line: rgba(7, 55, 112, .14);
  --zh-shadow: 0 28px 80px rgba(15, 67, 126, .12);
  --zh-max: 1720px;
  --zh-ease: cubic-bezier(.18, 1, .32, 1);
}

.zh-svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

.zh-page,
.zh-account-page {
  color: var(--zh-heading-color, var(--zh-text));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.zh-page *,
.zh-account-page * { box-sizing: border-box; }

.zh-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 92% 3%, rgba(27, 143, 238, .11), transparent 28rem),
    linear-gradient(180deg, color-mix(in srgb, var(--zh-page-bg) 45%, #fff) 0, var(--zh-page-bg) 55%, #fff 100%);
}

.zh-main {
  width: min(calc(100% - 48px), var(--zh-max));
  margin: 0 auto;
  padding: 80px 0 100px;
}

.zh-site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  gap: 28px;
  min-height: 82px;
  padding: 0 clamp(22px, 4vw, 76px);
  border-bottom: 1px solid rgba(8, 55, 108, .11);
  color: var(--zh-header-text) !important;
  background: var(--zh-header-bg);
  backdrop-filter: blur(22px) saturate(1.18);
}

.zh-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  color: var(--zh-header-text) !important;
  text-decoration: none !important;
}

.zh-brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.zh-brand span { display: grid; line-height: .92; letter-spacing: .08em; }
.zh-brand b { font-size: 18px; font-weight: 850; }
.zh-brand small { margin-top: 6px; color: var(--zh-blue); font-size: 10px; font-weight: 800; }

.zh-site-header nav { display: flex; align-items: center; justify-content: center; gap: 32px; }
.zh-site-header nav a {
  position: relative;
  color: var(--zh-header-text) !important;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
}
.zh-site-header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -12px;
  height: 2px;
  background: var(--zh-active-nav);
  transition: right .35s var(--zh-ease);
}
.zh-site-header nav a:hover::after,
.zh-site-header nav a.is-active::after { right: 0; }
.zh-site-header nav a.is-active { color: var(--zh-active-nav) !important; }

.zh-header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }

.zh-button,
.zh-icon-button,
.zh-text-button {
  border: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: none !important;
}

.zh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  transition: transform .28s var(--zh-ease), box-shadow .28s var(--zh-ease), background .28s ease;
}
.zh-button:hover { transform: translateY(-2px); }
.zh-button:disabled { cursor: wait; opacity: .58; transform: none; }
.zh-button-small { min-height: 40px; padding: 0 16px; font-size: 13px; }
.zh-button-primary { color: var(--zh-button-text) !important; background: var(--zh-button-bg); box-shadow: 0 14px 30px rgba(11, 103, 200, .22); }
.zh-button-primary:hover { box-shadow: 0 20px 40px rgba(11, 103, 200, .3); }
.zh-button-secondary { color: var(--zh-text) !important; background: #fff; border-color: var(--zh-line); }
.zh-button-glass { color: var(--zh-text) !important; background: rgba(255, 255, 255, .74); border-color: rgba(255, 255, 255, .78); backdrop-filter: blur(16px); }

.zh-icon-button {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--zh-text) !important;
  background: #fff;
  border: 1px solid var(--zh-line);
  border-radius: 4px;
}

.zh-text-button { padding: 6px 0; color: #7f3343; background: transparent; font-size: 12px; font-weight: 750; }

.zh-hero {
  position: relative;
  min-height: min(var(--hero-height, 610px), calc(100vh - 82px));
  overflow: hidden;
  isolation: isolate;
  background: #dff1ff;
}
.zh-hero-media {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  object-position: var(--hero-position, center);
  will-change: transform;
}
.zh-hero-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .75) 37%, rgba(255, 255, 255, .12) 72%),
    linear-gradient(180deg, rgba(255,255,255,var(--hero-overlay,.08)), rgba(3,25,54,.08));
}
.zh-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(720px, calc(100% - 48px));
  min-height: min(var(--hero-height, 610px), calc(100vh - 82px));
  margin-left: clamp(24px, 7vw, 128px);
  padding: 70px 0;
}
.zh-eyebrow,
.zh-kicker {
  color: var(--zh-accent, var(--zh-blue));
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
}
.zh-hero h1 {
  margin: 18px 0 22px;
  max-width: 760px;
  font-size: clamp(64px, 8vw, 132px);
  font-weight: 900;
  line-height: .84;
  letter-spacing: -.065em;
}
.zh-kinetic-title span {
  display: inline-block;
  animation: zhWordIn .9s calc(.08s * var(--word-index)) both var(--zh-ease);
}
@keyframes zhWordIn {
  from { opacity: 0; transform: translateY(34px) rotate(1.5deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}
.zh-hero p { max-width: 620px; margin: 0; color: #385672; font-size: clamp(18px, 2vw, 25px); line-height: 1.5; }
.zh-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.zh-hero-index {
  position: absolute;
  z-index: 2;
  right: clamp(24px, 5vw, 80px);
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(5, 37, 73, .64);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.zh-hero-index i { width: 72px; height: 1px; background: currentColor; }

.zh-section-head,
.zh-panel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 30px;
}
.zh-section-head h2,
.zh-panel-head h2,
.zh-band h2 {
  margin: 8px 0 0;
  font-size: clamp(36px, 4vw, 62px);
  font-weight: 860;
  line-height: .98;
  letter-spacing: -.045em;
}
.zh-section-head p { margin: 10px 0 0; color: var(--zh-muted); font-size: 16px; }
.zh-section-head > a { display: inline-flex; align-items: center; gap: 8px; color: var(--zh-text) !important; font-size: 13px; font-weight: 800; text-decoration: none !important; }

.zh-video-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px 22px;
}
.zh-video-card { min-width: 0; }
.zh-video-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #dfeefa, #b7daf5);
  border: 1px solid rgba(7, 55, 112, .08);
  border-radius: 4px;
  box-shadow: 0 12px 36px rgba(17, 70, 132, .08);
}
.zh-video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--zh-ease), filter .5s ease; }
.zh-video-card:hover .zh-video-thumb img { transform: scale(1.045); filter: saturate(1.08); }
.zh-play {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #fff;
  background: rgba(5, 36, 72, .72);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  backdrop-filter: blur(12px);
  transform: translateY(8px);
  opacity: .86;
  transition: transform .3s var(--zh-ease), opacity .3s ease, background .3s ease;
}
.zh-video-card:hover .zh-play { transform: translateY(0); opacity: 1; background: var(--zh-blue); }
.zh-duration { position: absolute; right: 10px; bottom: 10px; padding: 4px 7px; color: #fff; background: rgba(4, 17, 34, .78); border-radius: 3px; font-size: 11px; font-weight: 800; }
.zh-video-copy { padding-top: 14px; }
.zh-video-title { display: -webkit-box; overflow: hidden; color: var(--zh-text) !important; font-size: 18px; font-weight: 820; line-height: 1.23; text-decoration: none !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.zh-video-channel { display: block; margin-top: 8px; color: #496680 !important; font-size: 13px; font-weight: 700; text-decoration: none !important; }
.zh-video-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; color: #8293a6; font-size: 12px; }
.zh-video-meta span + span::before { content: "•"; margin-right: 12px; }
.zh-grid-comfortable { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px 28px; }

.zh-band {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 70px;
  align-items: end;
  margin: 100px 0 36px;
  padding: 54px 0;
  border-top: 1px solid var(--zh-line);
  border-bottom: 1px solid var(--zh-line);
}
.zh-band p { margin: 0; color: var(--zh-muted); font-size: 18px; line-height: 1.65; }

.zh-channel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.zh-channel-grid-large { gap: 34px 24px; }
.zh-channel-card { min-width: 0; background: #fff; border: 1px solid var(--zh-line); border-radius: 4px; box-shadow: 0 12px 34px rgba(17, 70, 132, .06); transition: transform .38s var(--zh-ease), box-shadow .38s var(--zh-ease); }
.zh-channel-card:hover { transform: translateY(-7px); box-shadow: 0 24px 60px rgba(17, 70, 132, .14); }
.zh-channel-card-media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 7.6; background: linear-gradient(135deg, #dbeeff, #acd5f7); }
.zh-channel-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s var(--zh-ease); }
.zh-channel-card:hover .zh-channel-card-media img { transform: scale(1.045); }
.zh-channel-card-gradient { width: 100%; height: 100%; background: linear-gradient(135deg, #dbeeff, #75b9ec 58%, #0b67c8); }
.zh-channel-open { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 38px; height: 38px; color: #fff; background: rgba(7, 31, 63, .62); border: 1px solid rgba(255,255,255,.34); border-radius: 50%; backdrop-filter: blur(12px); transform: rotate(-30deg); transition: transform .35s var(--zh-ease), background .35s ease; }
.zh-channel-card:hover .zh-channel-open { transform: rotate(0); background: var(--zh-blue); }
.zh-channel-card-body { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 13px; align-items: center; padding: 17px; }
.zh-channel-avatar { width: 52px; height: 52px; object-fit: cover; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 6px 16px rgba(12, 59, 113, .14); }
.zh-avatar-placeholder { display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #0b67c8, #37a6f3); font-weight: 900; }
.zh-channel-card-body a { display: block; overflow: hidden; color: var(--zh-text) !important; font-size: 16px; font-weight: 830; white-space: nowrap; text-overflow: ellipsis; text-decoration: none !important; }
.zh-channel-card-body p { margin: 4px 0 0; color: #8293a6; font-size: 11px; }

.zh-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 100px; background: var(--zh-line); border: 1px solid var(--zh-line); }
.zh-feature-card { position: relative; min-height: 250px; padding: 36px; background: #fff; }
.zh-feature-card > span { display: grid; place-items: center; width: 48px; height: 48px; color: var(--zh-blue); background: var(--zh-sky); }
.zh-feature-card h3 { margin: 34px 0 12px; font-size: 24px; font-weight: 840; letter-spacing: -.025em; }
.zh-feature-card p { margin: 0; color: var(--zh-muted); font-size: 15px; line-height: 1.65; }
.zh-action-card { color: inherit !important; text-decoration: none !important; transition: background .25s ease; }
.zh-action-card:hover { background: #f5faff; }
.zh-action-card > i { position: absolute; right: 28px; top: 28px; color: var(--zh-blue); }

.zh-footer { display: flex; justify-content: space-between; gap: 30px; padding: 46px clamp(24px, 5vw, 80px); color: #fff; background: #061a34; }
.zh-footer > div { display: grid; gap: 6px; }
.zh-footer b { font-size: 20px; }
.zh-footer span { color: #9fb8d0; font-size: 13px; }
.zh-footer nav { display: flex; align-items: center; gap: 24px; }
.zh-footer a { color: #dbeafb !important; font-size: 13px; text-decoration: none !important; }

.zh-list-page .zh-main { padding-top: 70px; }
.zh-page-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr); gap: 40px; align-items: end; margin-bottom: 46px; }
.zh-page-intro .zh-kicker { grid-column: 1 / -1; }
.zh-page-intro h1 { margin: 0; font-size: clamp(58px, 7vw, 112px); line-height: .86; letter-spacing: -.06em; }
.zh-page-intro p { margin: 0; color: var(--zh-muted); font-size: 18px; line-height: 1.6; }
.zh-toolbar { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 36px; padding: 14px; background: #fff; border: 1px solid var(--zh-line); box-shadow: 0 12px 34px rgba(15, 67, 126, .05); }
.zh-search { display: flex; align-items: center; gap: 10px; flex: 1; min-height: 48px; padding: 0 16px; color: #6d8299; background: #f5f9fd; border: 1px solid transparent; }
.zh-search:focus-within { border-color: rgba(11, 103, 200, .35); background: #fff; }
.zh-search input { width: 100%; border: 0 !important; outline: 0 !important; background: transparent !important; color: var(--zh-text) !important; box-shadow: none !important; }
.zh-search-small { max-width: 360px; }
.zh-select,
.zh-editor-panel select,
.zh-editor-panel input[type=text],
.zh-editor-panel textarea {
  min-height: 48px;
  padding: 11px 13px;
  color: var(--zh-text);
  background: #fff;
  border: 1px solid var(--zh-line);
  border-radius: 3px;
  outline: none;
}
.zh-select { min-width: 190px; }

.zh-channel-hero { position: relative; min-height: var(--channel-height, 390px); overflow: hidden; isolation: isolate; background: linear-gradient(135deg, #dbeeff, #86c7f6 54%, #0b67c8); }
.zh-channel-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--channel-fit, contain); object-position: var(--channel-position, center); background: rgba(235, 246, 255, .92); will-change: transform; }
.zh-channel-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(2, 17, 37, .82), rgba(2, 17, 37, calc(var(--channel-overlay,.18) + .08)) 62%, rgba(2,17,37,var(--channel-overlay,.18))); }
.zh-channel-gradient { position: absolute; inset: 0; background: radial-gradient(circle at 80% 25%, #7fc7fa, transparent 32%), linear-gradient(135deg, #061e3e, #0b67c8 58%, #dff4ff); }
.zh-channel-hero-content { position: relative; z-index: 2; display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 28px; align-items: end; width: min(calc(100% - 48px), var(--zh-max)); min-height: var(--channel-height, 390px); margin: 0 auto; padding: 64px 0 50px; color: #fff; }
.zh-channel-mark { width: 112px; height: 112px; object-fit: cover; background: #fff; border: 5px solid rgba(255,255,255,.82); border-radius: 50%; box-shadow: 0 18px 40px rgba(0,0,0,.2); }
.zh-channel-mark-placeholder { display: grid; place-items: center; color: #fff; background: var(--zh-accent, var(--zh-blue)); font-size: 30px; font-weight: 900; }
.zh-channel-copy h1 { margin: 8px 0 12px; max-width: 850px; color: #fff; font-size: clamp(46px, 6vw, 88px); font-weight: 890; line-height: .9; letter-spacing: -.055em; }
.zh-channel-copy p { max-width: 760px; margin: 0; color: rgba(255,255,255,.8); font-size: 16px; line-height: 1.55; }
.zh-channel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.zh-channel-stats { display: flex; gap: 1px; align-self: end; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(14px); }
.zh-channel-stats span { display: grid; gap: 3px; min-width: 130px; padding: 18px; background: rgba(3, 21, 45, .24); font-size: 11px; }
.zh-channel-stats b { font-size: 21px; }
.zh-no-motion .zh-channel-background { transform: none !important; }

.zh-account-page { width: min(calc(100% - 40px), 1500px); margin: 0 auto; padding: 38px 0 90px; }
.zh-account-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: end; padding: 42px 0 34px; border-bottom: 1px solid var(--zh-line); }
.zh-account-header h1 { margin: 9px 0 10px; font-size: clamp(52px, 6vw, 90px); line-height: .86; letter-spacing: -.055em; }
.zh-account-header p { margin: 0; color: var(--zh-muted); font-size: 17px; }
.zh-account-header nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.zh-account-header nav a { padding: 10px 14px; color: #526c86 !important; background: #f4f9fd; border: 1px solid transparent; border-radius: 3px; font-size: 13px; font-weight: 760; text-decoration: none !important; }
.zh-account-header nav a.is-active { color: var(--zh-text) !important; background: #fff; border-color: var(--zh-line); box-shadow: 0 8px 24px rgba(15, 67, 126, .07); }
.zh-studio-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0; }
.zh-dashboard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
.zh-metric { display: flex; align-items: center; gap: 16px; min-height: 118px; padding: 24px; background: #fff; border: 1px solid var(--zh-line); }
.zh-metric > span { display: grid; place-items: center; width: 44px; height: 44px; color: var(--zh-blue); background: var(--zh-sky); }
.zh-metric div { display: grid; }
.zh-metric b { font-size: 28px; line-height: 1; }
.zh-metric small { margin-top: 7px; color: var(--zh-muted); font-size: 12px; }
.zh-panel { margin-top: 28px; padding: 28px; background: #fff; border: 1px solid var(--zh-line); box-shadow: 0 16px 48px rgba(15, 67, 126, .06); }
.zh-panel-head h2 { font-size: 38px; }
.zh-studio-list { display: grid; }
.zh-studio-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 0; border-top: 1px solid var(--zh-line); }
.zh-studio-thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: #e5f1fa; }
.zh-studio-thumb img { width: 100%; height: 100%; object-fit: cover; }
.zh-studio-thumb span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(3, 22, 45, .18); opacity: 0; transition: opacity .25s; }
.zh-studio-thumb:hover span { opacity: 1; }
.zh-studio-info > a { color: var(--zh-text) !important; font-size: 18px; font-weight: 820; text-decoration: none !important; }
.zh-studio-info p { margin: 5px 0; color: var(--zh-muted); font-size: 13px; }
.zh-studio-info div { display: flex; gap: 16px; color: #8799aa; font-size: 11px; }
.zh-studio-row-actions { display: flex; gap: 8px; }

.zh-profile-card { overflow: hidden; margin-top: 28px; background: #fff; border: 1px solid var(--zh-line); box-shadow: 0 18px 52px rgba(15, 67, 126, .08); }
.zh-profile-cover { height: 180px; background: radial-gradient(circle at 75% 30%, rgba(255,255,255,.45), transparent 26%), linear-gradient(120deg, #0a4e9f, #27a3ee 62%, #d9f4ff); }
.zh-profile-body { display: grid; grid-template-columns: 144px minmax(0, 1fr) auto; gap: 24px; align-items: end; padding: 0 32px 30px; }
.zh-profile-avatar { width: 144px; height: 144px; margin-top: -62px; object-fit: cover; border: 7px solid #fff; border-radius: 50%; box-shadow: 0 12px 34px rgba(10, 65, 125, .16); }
.zh-profile-copy h1 { margin: 7px 0 5px; font-size: 42px; letter-spacing: -.04em; }
.zh-profile-copy p { margin: 0; color: var(--zh-muted); }
.zh-feature-grid-account { margin-top: 28px; }

.zh-editor-layout { display: grid; grid-template-columns: minmax(420px, .78fr) minmax(520px, 1.22fr); gap: 24px; margin-top: 28px; align-items: start; }
.zh-editor-panel { display: grid; gap: 17px; padding: 28px; background: #fff; border: 1px solid var(--zh-line); box-shadow: 0 16px 48px rgba(15, 67, 126, .06); }
.zh-editor-panel > label,
.zh-form-grid label { display: grid; gap: 7px; color: #395572; font-size: 12px; font-weight: 800; }
.zh-editor-panel textarea { resize: vertical; min-height: 104px; }
.zh-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.zh-editor-panel input[type=color] { width: 100%; min-height: 48px; padding: 5px; background: #fff; border: 1px solid var(--zh-line); }
.zh-editor-panel input[type=range] { width: 100%; accent-color: var(--zh-blue); }
.zh-checks { display: flex; flex-wrap: wrap; gap: 12px 18px; padding: 16px; background: #f6faff; }
.zh-checks label,
.zh-checkbox-line { display: flex !important; align-items: center; gap: 8px !important; color: #3f5c79 !important; font-size: 12px !important; }
.zh-upload-grid { display: grid; gap: 10px; }
.zh-upload-control { padding: 15px; background: #f8fbfe; border: 1px dashed rgba(7, 70, 137, .25); }
.zh-upload-control > div:first-child { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 3px 10px; align-items: center; }
.zh-upload-control > div:first-child .zh-svg { grid-row: 1 / 3; width: 28px; height: 28px; color: var(--zh-blue); }
.zh-upload-control b { font-size: 13px; }
.zh-upload-control small { color: var(--zh-muted); font-size: 10px; }
.zh-upload-control input[type=file] { display: none; }
.zh-upload-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.zh-upload-control > span { display: block; min-height: 16px; margin-top: 8px; color: var(--zh-muted); font-size: 11px; }
.zh-form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.zh-form-status { min-height: 20px; color: var(--zh-muted); font-size: 12px; }
.zh-editor-preview { position: sticky; top: 98px; min-height: 420px; padding: 18px; background: #eaf4fc; border: 1px solid var(--zh-line); }
.zh-preview-channel,
.zh-preview-portal { position: relative; min-height: var(--preview-height, 390px); overflow: hidden; color: #fff; background: linear-gradient(135deg, #062652, #0b67c8 65%, #dff5ff); box-shadow: var(--zh-shadow); }
.zh-preview-channel > img,
.zh-preview-channel > video,
.zh-preview-portal > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--preview-fit, contain); object-position: var(--preview-position, center); background: #eaf6ff; }
.zh-preview-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 17, 37, .82), rgba(2,17,37,var(--preview-overlay,.18))); }
.zh-preview-copy { position: relative; z-index: 1; display: flex; gap: 20px; align-items: end; min-height: var(--preview-height, 390px); padding: 30px; }
.zh-preview-copy > img { width: 80px; height: 80px; object-fit: cover; border: 4px solid #fff; border-radius: 50%; }
.zh-preview-copy small,
.zh-preview-portal small { color: #8ed0ff; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.zh-preview-copy h2,
.zh-preview-portal h2 { margin: 6px 0 8px; color: #fff; font-size: 38px; line-height: .94; letter-spacing: -.04em; }
.zh-preview-copy p,
.zh-preview-portal p { max-width: 620px; margin: 0; color: rgba(255,255,255,.8); font-size: 12px; line-height: 1.5; }
.zh-preview-portal { min-height: 460px; }
.zh-preview-portal > div:last-child { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-height: 460px; padding: 44px; }

.zh-agent-shell { display: grid; grid-template-columns: .85fr 1.15fr; overflow: hidden; min-height: 620px; background: #fff; border: 1px solid var(--zh-line); box-shadow: var(--zh-shadow); }
.zh-agent-visual { position: relative; display: grid; place-items: end center; overflow: hidden; background: radial-gradient(circle at 50% 35%, #d9f2ff, transparent 33%), linear-gradient(155deg, #eef9ff, #8fd0f7 64%, #0b67c8); }
.zh-agent-visual img { position: relative; z-index: 2; width: min(90%, 520px); max-height: 590px; object-fit: contain; object-position: bottom; }
.zh-agent-orbit { position: absolute; width: 420px; height: 420px; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; animation: zhOrbit 12s linear infinite; }
.zh-agent-orbit::before { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; background: #fff; border-radius: 50%; box-shadow: 0 0 30px #fff; }
@keyframes zhOrbit { to { transform: rotate(360deg); } }
.zh-agent-copy { padding: clamp(38px, 6vw, 84px); }
.zh-agent-copy h1 { margin: 12px 0 18px; font-size: clamp(54px, 6vw, 92px); line-height: .88; letter-spacing: -.06em; }
.zh-agent-copy > p { max-width: 680px; color: var(--zh-muted); font-size: 18px; line-height: 1.6; }
.zh-agent-form { display: grid; gap: 12px; margin-top: 32px; }
.zh-agent-form textarea { width: 100%; min-height: 160px; padding: 18px; color: var(--zh-text); background: #f6faff; border: 1px solid var(--zh-line); resize: vertical; outline: none; }
.zh-agent-form button { justify-self: start; }
.zh-agent-answer { margin-top: 22px; padding: 24px; color: #294966; background: #f5faff; border-left: 3px solid var(--zh-blue); line-height: 1.65; }
.zh-agent-answer-label { margin-bottom: 12px; color: var(--zh-blue); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.zh-login-note { margin-top: 28px; padding: 28px; color: #496680; background: #f3f9fe; border: 1px solid var(--zh-line); }
.zh-login-note a { color: var(--zh-blue) !important; font-weight: 800; }

.zh-loading { display: grid; place-items: center; align-content: center; gap: 14px; min-height: 260px; color: var(--zh-muted); }
.zh-loading i { width: 42px; height: 42px; border: 2px solid rgba(11, 103, 200, .18); border-top-color: var(--zh-blue); border-radius: 50%; animation: zhSpin .8s linear infinite; }
@keyframes zhSpin { to { transform: rotate(360deg); } }
.zh-empty { grid-column: 1 / -1; display: grid; place-items: center; min-height: 300px; padding: 36px; text-align: center; background: #f7fbfe; border: 1px dashed rgba(7, 70, 137, .23); }
.zh-empty > span { display: grid; place-items: center; width: 56px; height: 56px; color: var(--zh-blue); background: #e7f4ff; }
.zh-empty h3 { margin: 18px 0 8px; font-size: 24px; }
.zh-empty p { max-width: 560px; margin: 0; color: var(--zh-muted); }
.zh-empty-inline { grid-column: 1 / -1; padding: 34px; color: var(--zh-muted); background: #f6faff; text-align: center; }
.zh-error > span { color: #9c2e43; background: #fff0f3; }
.zh-skeleton { overflow: hidden; background: #fff; }
.zh-skeleton i,
.zh-skeleton span { display: block; background: linear-gradient(90deg, #edf4f9 25%, #f8fbfd 50%, #edf4f9 75%); background-size: 200% 100%; animation: zhShimmer 1.2s infinite linear; }
.zh-skeleton-video i { aspect-ratio: 16 / 9; }
.zh-skeleton-channel i { aspect-ratio: 16 / 7.6; }
.zh-skeleton span { width: 80%; height: 14px; margin: 14px 0 0; }
.zh-skeleton span + span { width: 52%; height: 10px; margin-top: 8px; }
@keyframes zhShimmer { to { background-position: -200% 0; } }
.zh-thumb-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #d7eafb, #8ec8f2); }

.zh-reveal,
.zh-reveal-group > * { opacity: 1; transform: none; }
.zh-reveal.is-visible,
.zh-reveal-group > *.is-visible { opacity: 1; transform: none; }

@media (max-width: 1300px) {
  .zh-video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zh-channel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zh-channel-hero-content { grid-template-columns: 96px minmax(0,1fr); }
  .zh-channel-mark { width: 96px; height: 96px; }
  .zh-channel-stats { grid-column: 2; justify-self: start; }
  .zh-editor-layout { grid-template-columns: 1fr; }
  .zh-editor-preview { position: static; }
}

@media (max-width: 980px) {
  .zh-site-header { grid-template-columns: 1fr auto; min-height: 72px; }
  .zh-site-header nav { order: 3; grid-column: 1 / -1; justify-content: flex-start; overflow-x: auto; padding-bottom: 14px; }
  .zh-hero-content { margin-left: 32px; }
  .zh-hero h1 { font-size: clamp(58px, 12vw, 100px); }
  .zh-video-grid,
  .zh-channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zh-feature-grid { grid-template-columns: 1fr; }
  .zh-band { grid-template-columns: 1fr; gap: 24px; }
  .zh-page-intro { grid-template-columns: 1fr; }
  .zh-account-header { grid-template-columns: 1fr; }
  .zh-account-header nav { justify-content: flex-start; }
  .zh-dashboard-grid { grid-template-columns: repeat(2, 1fr); }
  .zh-profile-body { grid-template-columns: 120px minmax(0, 1fr); }
  .zh-profile-avatar { width: 120px; height: 120px; }
  .zh-profile-body > .zh-button { grid-column: 2; justify-self: start; }
  .zh-agent-shell { grid-template-columns: 1fr; }
  .zh-agent-visual { min-height: 420px; }
  .zh-channel-hero-content { grid-template-columns: 82px minmax(0, 1fr); }
  .zh-channel-mark { width: 82px; height: 82px; }
}

@media (max-width: 680px) {
  .zh-main { width: min(calc(100% - 28px), var(--zh-max)); padding: 54px 0 70px; }
  .zh-site-header { padding: 0 14px; }
  .zh-brand span { display: none; }
  .zh-header-actions .zh-button { padding: 0 12px; }
  .zh-hero { min-height: 620px; }
  .zh-hero-content { min-height: 620px; margin: 0; width: 100%; padding: 70px 20px 90px; justify-content: flex-end; }
  .zh-hero-wash { background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.94) 64%); }
  .zh-hero h1 { font-size: clamp(54px, 18vw, 82px); }
  .zh-hero p { font-size: 17px; }
  .zh-hero-index { display: none; }
  .zh-video-grid,
  .zh-channel-grid,
  .zh-grid-comfortable { grid-template-columns: 1fr; }
  .zh-toolbar { flex-direction: column; }
  .zh-select { width: 100%; }
  .zh-section-head,
  .zh-panel-head { align-items: flex-start; flex-direction: column; }
  .zh-channel-hero-content { grid-template-columns: 1fr; align-content: end; padding: 38px 0; }
  .zh-channel-mark { width: 78px; height: 78px; }
  .zh-channel-stats { grid-column: 1; flex-wrap: wrap; }
  .zh-channel-copy h1 { font-size: 48px; }
  .zh-dashboard-grid { grid-template-columns: 1fr; }
  .zh-studio-row { grid-template-columns: 116px minmax(0, 1fr); }
  .zh-studio-row-actions { grid-column: 2; }
  .zh-profile-cover { height: 130px; }
  .zh-profile-body { grid-template-columns: 1fr; align-items: start; }
  .zh-profile-avatar { width: 104px; height: 104px; }
  .zh-profile-body > .zh-button { grid-column: 1; }
  .zh-form-grid { grid-template-columns: 1fr; }
  .zh-editor-panel { padding: 18px; }
  .zh-editor-preview { padding: 8px; }
  .zh-footer { flex-direction: column; }
  .zh-footer nav { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .zh-page *,
  .zh-account-page * { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .zh-reveal,
  .zh-reveal-group > * { opacity: 1 !important; transform: none !important; }
}


/* ===== ЖУРАВЛИ ВИДЕО V5 — approved blue mountain design ===== */
.zh-home-v5,
.zh-public-channel-v5 { --zh-blue:#1264d8; --zh-deep:#071f55; --zh-ink:#0c2442; --zh-soft:#f5f9ff; --zh-line:rgba(17,75,147,.14); color:var(--zh-heading-color); background:linear-gradient(var(--zh-page-bg) 0,#fff 36%); }
.zh-home-v5 .zh-site-header { position:absolute; z-index:10; top:0; left:50%; width:min(calc(100% - 72px),1500px); transform:translateX(-50%); color:var(--zh-header-text); background:var(--zh-header-bg); border:0; box-shadow:none; }
.zh-home-v5 .zh-site-header a,
.zh-public-channel-v5 .zh-site-header a { color:inherit !important; }
.zh-home-v5 .zh-site-header nav a::after { background:var(--zh-active-nav); }
.zh-home-v5 .zh-brand img { width:46px; height:46px; object-fit:contain; filter:brightness(0) invert(1); }
.zh-home-v5 .zh-brand span { color:var(--zh-header-text); font-size:18px; font-weight:760; letter-spacing:.025em; }
.zh-home-v5 .zh-site-header .zh-icon-button { color:var(--zh-header-text); border-color:rgba(255,255,255,.42); background:rgba(5,42,106,.16); }

.zh-home-hero { position:relative; min-height:var(--hero-height,560px); overflow:hidden; isolation:isolate; color:var(--zh-hero-text); background:var(--zh-header-bg); }
.zh-home-hero-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--hero-position,center); will-change:transform; }
.zh-home-hero-overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(3,28,82,.43) 0%,rgba(4,45,114,.12) 44%,rgba(1,28,85,.05) 75%),linear-gradient(0deg,rgba(2,27,75,.48),transparent 42%),rgba(0,52,142,var(--hero-overlay,.08)); }
.zh-home-hero-copy { position:relative; z-index:3; width:min(calc(100% - 96px),1500px); margin:0 auto; padding-top:145px; }
.zh-home-title { color:var(--zh-hero-title)!important; max-width:760px; margin:0; font-size:clamp(58px,6.4vw,104px); font-weight:850; line-height:.92; letter-spacing:-.055em; text-shadow:0 8px 32px rgba(0,32,92,.18); }
.zh-home-subtitle { color:var(--zh-hero-text)!important; max-width:760px; margin:20px 0 0; font-size:clamp(20px,2vw,30px); font-weight:650; line-height:1.26; }
.zh-home-description { color:var(--zh-hero-text)!important; max-width:620px; margin:26px 0 0; font-size:16px; line-height:1.48; }
.zh-home-hero .zh-actions { margin-top:28px; }
.zh-button-light { color:var(--zh-button-text) !important; background:var(--zh-button-bg) !important; border-color:var(--zh-button-bg) !important; box-shadow:0 14px 32px rgba(1,31,92,.2); }
.zh-button-outline-light { color:var(--zh-button-text) !important; background:color-mix(in srgb,var(--zh-button-bg) 72%,transparent) !important; border:1px solid var(--zh-button-text) !important; backdrop-filter:blur(12px); }
.zh-button-outline-light:hover { background:rgba(255,255,255,.16) !important; }

.zh-home-content { position:relative; z-index:4; width:min(calc(100% - 72px),1500px); margin:-22px auto 0; padding-bottom:64px; }
.zh-featured-player-shell { display:grid; grid-template-columns:minmax(0,3fr) minmax(330px,2fr); gap:20px; padding:18px; background:rgba(255,255,255,.96); border:1px solid rgba(19,76,148,.12); border-radius:24px; box-shadow:0 26px 75px rgba(20,79,151,.16); backdrop-filter:blur(18px); }
.zh-featured-player { min-width:0; overflow:hidden; background:#fff; border:1px solid var(--zh-line); border-radius:16px; }
.zh-player-frame { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#07162b; }
.zh-player-frame iframe,.zh-player-frame img { width:100%; height:100%; border:0; object-fit:cover; }
.zh-featured-caption { padding:14px 16px 16px; }
.zh-featured-caption>a { color:var(--zh-ink)!important; font-size:18px; font-weight:820; text-decoration:none!important; }
.zh-featured-caption>div { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:7px; color:#71849b; font-size:12px; }
.zh-featured-placeholder { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:16/9; overflow:hidden; color:#fff; }
.zh-featured-placeholder>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.7); }
.zh-featured-placeholder>span { position:relative; display:grid; place-items:center; width:76px; height:76px; background:#fff; color:var(--zh-blue); border-radius:50%; }
.zh-featured-placeholder>div { position:absolute; left:20px; bottom:18px; display:grid; }
.zh-featured-queue { display:flex; flex-direction:column; min-width:0; }
.zh-queue-item { display:grid; grid-template-columns:190px minmax(0,1fr); gap:14px; align-items:center; min-height:94px; padding:0 0 12px; margin-bottom:12px; color:inherit!important; text-decoration:none!important; border-bottom:1px solid var(--zh-line); }
.zh-queue-thumb { position:relative; display:block; overflow:hidden; aspect-ratio:16/9; background:#dceafb; border-radius:10px; }
.zh-queue-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.zh-queue-item:hover img { transform:scale(1.045); }
.zh-queue-thumb i { position:absolute; right:6px; bottom:6px; padding:3px 6px; color:#fff; background:rgba(0,0,0,.72); border-radius:5px; font-size:10px; font-style:normal; }
.zh-queue-copy { display:grid; min-width:0; }
.zh-queue-copy b { overflow:hidden; color:var(--zh-ink); font-size:14px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.zh-queue-copy small { margin-top:5px; color:#527098; font-size:11px; }
.zh-queue-copy em { margin-top:3px; color:#8a9aab; font-size:10px; font-style:normal; }
.zh-queue-all { align-self:flex-end; margin-top:auto; color:var(--zh-blue)!important; font-size:12px; font-weight:760; text-decoration:none!important; }

.zh-home-section { margin-top:18px; padding:18px 18px 20px; background:rgba(255,255,255,.92); border:1px solid var(--zh-line); border-radius:18px; box-shadow:0 14px 42px rgba(21,75,137,.07); }
.zh-compact-section-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:14px; }
.zh-compact-section-head h2 { display:flex; align-items:center; gap:9px; margin:0; color:var(--zh-ink); font-size:20px; }
.zh-compact-section-head h2 .zh-svg { width:19px; height:19px; color:var(--zh-blue); }
.zh-compact-section-head>a { color:var(--zh-blue)!important; font-size:12px; font-weight:760; text-decoration:none!important; }
.zh-home-video-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.zh-home-video-card { min-width:0; }
.zh-home-video-thumb { position:relative; display:block; overflow:hidden; aspect-ratio:16/9; background:#dceafa; border-radius:12px; }
.zh-home-video-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.zh-home-video-card:hover img { transform:scale(1.045); }
.zh-home-video-thumb>span { position:absolute; right:7px; bottom:7px; padding:3px 6px; color:#fff; background:rgba(0,0,0,.75); border-radius:5px; font-size:10px; }
.zh-home-video-title { display:-webkit-box; overflow:hidden; margin-top:9px; color:var(--zh-ink)!important; font-size:13px; font-weight:780; line-height:1.28; text-decoration:none!important; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.zh-home-video-card>small,.zh-home-video-card>em { display:block; margin-top:4px; color:#71869c; font-size:10px; font-style:normal; }
.zh-home-channel-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.zh-home-channel-card { overflow:hidden; min-width:0; background:#fff; border:1px solid var(--zh-line); border-radius:14px; }
.zh-home-channel-banner { display:block; overflow:hidden; aspect-ratio:3.2/1; background:#dceafb; }
.zh-home-channel-banner img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.zh-home-channel-card:hover .zh-home-channel-banner img { transform:scale(1.04); }
.zh-home-channel-body { display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px; }
.zh-home-channel-body>img,.zh-home-channel-body>span { display:grid; place-items:center; width:48px; height:48px; object-fit:cover; color:#fff; background:var(--zh-blue); border:3px solid #fff; border-radius:50%; box-shadow:0 5px 16px rgba(17,72,142,.14); }
.zh-home-channel-body>div { display:grid; min-width:0; }
.zh-home-channel-body>div>a { overflow:hidden; color:var(--zh-ink)!important; font-size:12px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; text-decoration:none!important; }
.zh-home-channel-body small { color:#7d8fa1; font-size:9px; }
.zh-home-subscribe { padding:6px 9px; color:var(--zh-blue)!important; border:1px solid rgba(18,100,216,.3); border-radius:6px; font-size:9px; font-weight:760; text-decoration:none!important; }
.zh-topic-row { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; }
.zh-topic-card { display:flex; align-items:center; justify-content:center; gap:9px; min-height:52px; padding:10px; color:#215bb2!important; background:linear-gradient(145deg,#f7fbff,#edf4ff); border:1px solid rgba(17,83,173,.08); border-radius:10px; font-size:11px; font-weight:680; text-align:center; text-decoration:none!important; transition:transform .25s ease,box-shadow .25s ease; }
.zh-topic-card:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(18,80,153,.1); }
.zh-topic-card .zh-svg { flex:0 0 auto; width:23px; height:23px; }

.zh-public-channel-v5 .zh-site-header { position:relative; z-index:5; color:var(--zh-header-text); background:var(--zh-header-bg); border:0; box-shadow:none; }
.zh-public-channel-v5 .zh-brand img { filter:brightness(0) invert(1); }
.zh-public-channel-hero { position:relative; min-height:clamp(480px,var(--channel-height,560px),720px); overflow:hidden; isolation:isolate; color:var(--zh-hero-text); background:var(--zh-channel-hero-bg); }
.zh-public-channel-media { position:absolute; inset:0; width:100%; height:100%; object-fit:var(--channel-fit,cover); object-position:var(--channel-position,bottom); background:var(--zh-channel-hero-bg); will-change:transform; }
.zh-public-channel-overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(3,19,52,.72) 0%,rgba(3,31,74,.36) 48%,rgba(3,31,74,.08) 78%),linear-gradient(0deg,rgba(2,20,52,.58),transparent 52%),rgba(4,52,127,var(--channel-overlay,.16)); }
.zh-public-channel-gradient { position:absolute; inset:0; background:radial-gradient(circle at 72% 24%,#65baf2,transparent 32%),linear-gradient(130deg,#05245a,#1264d8 58%,#d8f1ff); }
.zh-public-channel-copy { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px; align-content:end; width:min(calc(100% - 96px),1500px); min-height:inherit; margin:0 auto; padding:70px 0 46px; }
.zh-public-channel-identity { display:grid; grid-template-columns:112px minmax(0,1fr); gap:26px; align-items:end; }
.zh-public-channel-avatar { width:112px; height:112px; object-fit:cover; border:5px solid rgba(255,255,255,.88); border-radius:50%; box-shadow:0 18px 50px rgba(0,25,72,.28); }
.zh-public-channel-identity span { display:block; margin-bottom:9px; color:rgba(255,255,255,.78); font-size:11px; font-weight:820; letter-spacing:.16em; }
.zh-public-channel-identity h1 { max-width:900px; margin:0; color:var(--zh-hero-title); font-size:clamp(48px,6vw,88px); font-weight:860; line-height:.9; letter-spacing:-.055em; text-shadow:0 12px 32px rgba(0,22,70,.22); }
.zh-public-channel-identity p { max-width:780px; margin:14px 0 0; color:var(--zh-hero-text); font-size:16px; line-height:1.48; }
.zh-public-channel-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-self:end; gap:10px; }
.zh-public-channel-stats { grid-column:1/-1; display:flex; gap:1px; justify-self:start; overflow:hidden; margin-top:8px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); border-radius:10px; backdrop-filter:blur(15px); }
.zh-public-channel-stats span { display:grid; min-width:128px; padding:12px 18px; background:rgba(2,28,70,.2); }
.zh-public-channel-stats b { color:#fff; font-size:19px; }
.zh-public-channel-stats small { color:rgba(255,255,255,.72); font-size:9px; }
.zh-channel-main { width:min(calc(100% - 72px),1500px); margin:0 auto; padding:0 0 70px; }
.zh-channel-tabs { display:flex; gap:8px; margin:0 0 26px; padding:14px 0; border-bottom:1px solid var(--zh-line); }
.zh-channel-tabs a { padding:10px 16px; color:#617891!important; border-radius:7px; font-size:12px; font-weight:760; text-decoration:none!important; }
.zh-channel-tabs a.is-active { color:#fff!important; background:var(--zh-blue); }
.zh-channel-videos-section { padding:10px 0 18px; }
.zh-channel-about-panel { margin-top:26px; padding:40px; background:#fff; border:1px solid var(--zh-line); border-radius:18px; box-shadow:0 18px 45px rgba(18,74,142,.07); }
.zh-channel-about-panel>span { color:var(--zh-blue); font-size:11px; font-weight:820; letter-spacing:.16em; }
.zh-channel-about-panel h2 { margin:12px 0; font-size:38px; }
.zh-channel-about-panel p { max-width:980px; margin:0; color:#5e748c; line-height:1.7; }

@media (max-width:1180px) {
  .zh-featured-player-shell { grid-template-columns:1fr; }
  .zh-featured-queue { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .zh-queue-item { grid-template-columns:150px minmax(0,1fr); }
  .zh-queue-all { grid-column:1/-1; }
  .zh-home-video-row,.zh-home-channel-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .zh-topic-row { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:820px) {
  .zh-home-v5 .zh-site-header { width:calc(100% - 28px); }
  .zh-home-v5 .zh-site-header nav { display:none; }
  .zh-home-hero-copy { width:calc(100% - 36px); padding-top:130px; }
  .zh-home-content,.zh-channel-main { width:calc(100% - 24px); }
  .zh-featured-player-shell { padding:10px; border-radius:16px; }
  .zh-featured-queue { grid-template-columns:1fr; }
  .zh-home-video-row,.zh-home-channel-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .zh-topic-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .zh-public-channel-copy { grid-template-columns:1fr; width:calc(100% - 36px); }
  .zh-public-channel-identity { grid-template-columns:76px minmax(0,1fr); }
  .zh-public-channel-avatar { width:76px; height:76px; }
  .zh-public-channel-actions { justify-content:flex-start; }
}
@media (max-width:540px) {
  .zh-home-title { color:var(--zh-hero-title)!important; font-size:48px; }
  .zh-home-subtitle { color:var(--zh-hero-text)!important; font-size:19px; }
  .zh-home-description { color:var(--zh-hero-text)!important; font-size:14px; }
  .zh-home-video-row,.zh-home-channel-row,.zh-topic-row { grid-template-columns:1fr; }
  .zh-queue-item { grid-template-columns:128px minmax(0,1fr); }
  .zh-home-section { padding:14px; }
  .zh-public-channel-identity { grid-template-columns:1fr; }
  .zh-public-channel-identity h1 { font-size:44px; }
}

/* V5.1 fail-safe: critical content must never remain hidden */
.zh-home-hero-copy,.zh-account-page .zh-reveal,.zh-channel-grid>*{opacity:1!important;transform:none!important;}


/* ЖУРАВЛИ V5.6 — управляемая палитра */
.zh-page, .zh-account-page { background-color:var(--zh-page-bg); color:var(--zh-heading-color); }
.zh-page h1,.zh-page h2,.zh-page h3,.zh-account-page h1,.zh-account-page h2,.zh-account-page h3 { color:var(--zh-heading-color); }
.zh-page p,.zh-page small,.zh-page em,.zh-account-page p,.zh-account-page small,.zh-account-page em { color:var(--zh-body-text); }
.zh-site-header .zh-brand,.zh-site-header .zh-brand span,.zh-site-header nav a,.zh-site-header .zh-icon-button { color:var(--zh-header-text)!important; }
.zh-site-header nav a.is-active { color:var(--zh-active-nav)!important; }
.zh-site-header nav a::after { background:var(--zh-active-nav)!important; }
.zh-button-primary,.zh-channel-tabs a.is-active { color:var(--zh-button-text)!important; background:var(--zh-button-bg)!important; }
.zh-public-channel-identity h1,.zh-home-title { color:var(--zh-hero-title)!important; }
.zh-public-channel-identity p,.zh-public-channel-identity span,.zh-home-subtitle,.zh-home-description { color:var(--zh-hero-text)!important; }
.zh-public-channel-media { background-color:var(--zh-channel-hero-bg)!important; }
.zh-color-settings { margin:20px 0; padding:18px; border:1px solid var(--zh-line); border-radius:12px; background:rgba(255,255,255,.72); }
.zh-color-settings legend { padding:0 8px; color:var(--zh-heading-color); font-size:15px; font-weight:800; }
.zh-color-grid label { min-width:0; }
.zh-color-grid input[type=color] { width:100%; min-height:44px; padding:3px; border:1px solid var(--zh-line); border-radius:8px; background:#fff; cursor:pointer; }
.zh-preview-channel,.zh-preview-portal { background:var(--zh-page-bg); }
.zh-preview-channel h2,.zh-preview-portal h2 { color:var(--zh-hero-title)!important; }
.zh-preview-channel p,.zh-preview-channel small,.zh-preview-portal p,.zh-preview-portal em,.zh-preview-portal small { color:var(--zh-hero-text)!important; }

/* =========================================================
   ЖУРАВЛИ ВИДЕО V5.7 — корректный hero канала
   Оригинал показывается целиком, обрезанный баннер PeerTube
   используется только как мягкий фон.
   ========================================================= */
.zh-public-channel-hero {
  background: var(--zh-channel-hero-bg) !important;
}

.zh-public-channel-backdrop {
  position: absolute !important;
  inset: -24px !important;
  z-index: 0 !important;
  display: block !important;
  width: calc(100% + 48px) !important;
  height: calc(100% + 48px) !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: blur(18px) saturate(.92) brightness(.72) !important;
  opacity: .72 !important;
  transform: scale(1.04) !important;
  pointer-events: none !important;
}

.zh-public-channel-backdrop.zh-native-banner {
  opacity: .5 !important;
  filter: blur(22px) saturate(.78) brightness(.62) !important;
}

.zh-public-channel-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: var(--channel-fit, contain) !important;
  object-position: var(--channel-position, center) !important;
  background: transparent !important;
  transform: none !important;
  scale: 1 !important;
}

.zh-public-channel-gradient-soft {
  z-index: 0 !important;
  opacity: .46 !important;
  background: linear-gradient(135deg, rgba(4,39,96,.8), rgba(13,101,216,.34)) !important;
}

.zh-public-channel-overlay { z-index: 1 !important; }
.zh-public-channel-copy { z-index: 2 !important; }

/* =========================================================
   ЖУРАВЛИ ВИДЕО V5.8 EDITORIAL
   Серьёзная полноширинная композиция без дублирования меню.
   ========================================================= */

/* На авторских страницах используем собственную шапку и убираем
   левую панель PeerTube, которая дублировала навигацию. */
body.zh-custom-page my-menu,
body.zh-custom-page my-left-menu,
body.zh-custom-page .menu-wrapper,
body.zh-custom-page .left-menu,
body.zh-custom-page .sidebar-menu {
  display: none !important;
}

body.zh-custom-page #content,
body.zh-custom-page main#content,
body.zh-custom-page .main-row,
body.zh-custom-page .main-content,
body.zh-custom-page my-custom-page {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

body.zh-custom-page {
  overflow-x: hidden !important;
}

/* Шапка занимает всю ширину, а не плавает узкой карточкой. */
.zh-home-v5 .zh-site-header,
.zh-public-channel-v5 .zh-site-header,
.zh-list-page .zh-site-header {
  left: 0 !important;
  width: 100% !important;
  max-width: none !important;
  padding-left: clamp(22px, 4vw, 64px) !important;
  padding-right: clamp(22px, 4vw, 64px) !important;
  transform: none !important;
  border-radius: 0 !important;
}

/* Главный экран — полноценный экран серьёзного портала. */
.zh-editorial-home .zh-home-hero {
  min-height: clamp(620px, 72vh, 820px) !important;
}

.zh-editorial-home .zh-home-hero-media {
  transform: none !important;
  object-fit: cover !important;
}

.zh-editorial-home .zh-home-hero-copy {
  width: 100% !important;
  max-width: none !important;
  padding-left: clamp(28px, 5vw, 84px) !important;
  padding-right: clamp(28px, 5vw, 84px) !important;
  padding-top: clamp(160px, 20vh, 230px) !important;
}

.zh-editorial-home .zh-home-title {
  max-width: 1000px !important;
  font-size: clamp(64px, 7vw, 118px) !important;
  line-height: .9 !important;
}

/* Контент использует всю доступную ширину. */
.zh-editorial-home .zh-home-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 clamp(14px, 2vw, 30px) 64px !important;
}

.zh-editorial-home .zh-home-section {
  margin-top: 0 !important;
  padding: 24px 0 30px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--zh-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.zh-editorial-home .zh-home-section-first {
  padding-top: 28px !important;
}

/* Ровно четыре компактные карточки на обычном desktop. */
.zh-editorial-home .zh-home-video-row,
.zh-editorial-home .zh-home-channel-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.5vw, 24px) !important;
  width: 100% !important;
}

.zh-editorial-home .zh-home-video-card,
.zh-editorial-home .zh-home-channel-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

.zh-editorial-home .zh-home-video-thumb,
.zh-editorial-home .zh-home-channel-banner,
.zh-editorial-home .zh-topic-card,
.zh-editorial-home .zh-button {
  border-radius: 3px !important;
}

.zh-editorial-home .zh-home-video-title {
  font-size: 15px !important;
  line-height: 1.3 !important;
}

/* Канал: одно простое изображение. Никаких backdrop, blur и parallax. */
.zh-public-channel-v5 .zh-public-channel-hero {
  min-height: clamp(560px, 68vh, 760px) !important;
  background: var(--zh-channel-hero-bg) !important;
}

.zh-public-channel-v5 .zh-public-channel-backdrop,
.zh-public-channel-v5 .zh-public-channel-gradient-soft {
  display: none !important;
}

.zh-public-channel-v5 .zh-public-channel-media {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: var(--zh-channel-hero-bg) !important;
  transform: none !important;
  scale: 1 !important;
  filter: none !important;
  opacity: 1 !important;
}

.zh-public-channel-v5 .zh-public-channel-overlay {
  background:
    linear-gradient(90deg, rgba(2,18,52,.66) 0%, rgba(2,28,68,.25) 48%, rgba(2,28,68,.05) 80%),
    linear-gradient(0deg, rgba(2,18,52,.76) 0%, rgba(2,18,52,.12) 52%, transparent 72%) !important;
}

.zh-public-channel-v5 .zh-public-channel-copy {
  width: 100% !important;
  max-width: none !important;
  padding-left: clamp(28px, 4vw, 68px) !important;
  padding-right: clamp(28px, 4vw, 68px) !important;
}

.zh-public-channel-v5 .zh-public-channel-identity h1 {
  font-size: clamp(52px, 6vw, 96px) !important;
  line-height: .94 !important;
}

/* Меньше декоративных скруглений. */
.zh-public-channel-v5 .zh-button,
.zh-public-channel-v5 .zh-public-channel-stats,
.zh-channel-main .zh-channel-tabs a,
.zh-channel-main .zh-channel-about-panel,
.zh-video-card,
.zh-channel-card {
  border-radius: 3px !important;
}

@media (min-width: 1680px) {
  .zh-editorial-home .zh-home-video-row,
  .zh-editorial-home .zh-home-channel-row {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1024px) {
  .zh-editorial-home .zh-home-video-row,
  .zh-editorial-home .zh-home-channel-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .zh-public-channel-v5 .zh-public-channel-hero {
    min-height: 620px !important;
  }

  .zh-public-channel-v5 .zh-public-channel-copy {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .zh-editorial-home .zh-home-video-row,
  .zh-editorial-home .zh-home-channel-row,
  .zh-editorial-home .zh-topic-row {
    grid-template-columns: 1fr !important;
  }

  .zh-editorial-home .zh-home-hero {
    min-height: 640px !important;
  }

  .zh-editorial-home .zh-home-title {
    font-size: 52px !important;
  }

  .zh-public-channel-v5 .zh-public-channel-hero {
    min-height: 660px !important;
  }

  .zh-public-channel-v5 .zh-public-channel-identity {
    grid-template-columns: 1fr !important;
  }

  .zh-public-channel-v5 .zh-public-channel-identity h1 {
    font-size: 44px !important;
  }
}


/* =========================================================
   ЖУРАВЛИ V5.9 — ЮРИДИЧЕСКИЕ СТРАНИЦЫ И СОГЛАСИЯ
   ========================================================= */
.zh-legal-page { min-height: 100vh; background: var(--zh-page-bg, #f5faff); color: var(--zh-heading-color, #0a2445); }
.zh-legal-main { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 64px 0 90px; }
.zh-legal-hero { padding: 56px 0 34px; border-bottom: 1px solid rgba(12, 72, 140, .18); }
.zh-legal-hero h1 { margin: 10px 0 16px; max-width: 980px; font: 700 clamp(42px, 6vw, 82px)/.98 Georgia, 'Times New Roman', serif; letter-spacing: -.04em; color: var(--zh-heading-color, #0a2445); }
.zh-legal-hero p { max-width: 820px; margin: 0; font-size: 19px; line-height: 1.65; color: var(--zh-body-text, #637a94); }
.zh-legal-version { margin-top: 24px; display: inline-flex; padding: 9px 13px; border: 1px solid rgba(18, 100, 216, .22); background: #fff; font-size: 13px; font-weight: 700; color: #315b88; }
.zh-legal-document { margin-top: 36px; background: #fff; border: 1px solid rgba(17, 80, 151, .12); box-shadow: 0 24px 70px rgba(8, 48, 98, .08); }
.zh-legal-document section { padding: 30px 38px; border-bottom: 1px solid rgba(17, 80, 151, .1); }
.zh-legal-document section:last-child { border-bottom: 0; }
.zh-legal-document h2 { margin: 0 0 15px; font-size: clamp(23px, 2.4vw, 34px); line-height: 1.15; color: var(--zh-heading-color, #0a2445); }
.zh-legal-document p, .zh-legal-document li { font-size: 16px; line-height: 1.72; color: #334d69; }
.zh-legal-document p { margin: 0 0 13px; }
.zh-legal-document p:last-child { margin-bottom: 0; }
.zh-legal-document ul { margin: 0; padding-left: 22px; }
.zh-legal-document li + li { margin-top: 8px; }
.zh-legal-document a { color: #075dcc; text-decoration: underline; text-underline-offset: 3px; }
.zh-legal-table-wrap { overflow-x: auto; margin-top: 12px; }
.zh-legal-table { width: 100%; min-width: 840px; border-collapse: collapse; }
.zh-legal-table th, .zh-legal-table td { padding: 14px 16px; border: 1px solid rgba(15, 76, 145, .14); text-align: left; vertical-align: top; font-size: 14px; line-height: 1.5; }
.zh-legal-table th { background: #0b4fb4; color: #fff; }
.zh-legal-table tr:nth-child(even) td { background: #f6faff; }
.zh-legal-note { margin-top: 18px !important; padding: 17px 19px; border-left: 4px solid #e2a11c; background: #fff8e8; color: #6d5219 !important; }

.zh-native-legal-consents { margin: 22px 0; padding: 20px 22px; border: 1px solid rgba(14, 91, 180, .22); background: #f5faff; color: #173552; }
.zh-native-legal-consents h3 { margin: 0 0 15px; font-size: 20px; line-height: 1.2; color: #0a2445; }
.zh-native-legal-consents label { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 11px; align-items: start; margin: 12px 0; font-size: 14px; line-height: 1.48; cursor: pointer; }
.zh-native-legal-consents input[type='checkbox'] { width: 18px; height: 18px; margin-top: 1px; accent-color: #1264d8; }
.zh-native-legal-consents a { color: #075dcc !important; text-decoration: underline !important; text-underline-offset: 2px; }
.zh-native-legal-consents .zh-optional-consent { padding-top: 11px; border-top: 1px solid rgba(14, 91, 180, .15); }
.zh-consent-error { margin: 12px 0 0 !important; padding: 10px 12px; background: #fff0f0; border: 1px solid #e5a0a0; color: #9a1f1f !important; font-size: 13px !important; }

@media (max-width: 760px) {
  .zh-legal-main { width: min(100% - 28px, 1180px); padding: 34px 0 60px; }
  .zh-legal-hero { padding: 34px 0 24px; }
  .zh-legal-hero h1 { font-size: 42px; }
  .zh-legal-document section { padding: 23px 20px; }
  .zh-native-legal-consents { padding: 17px 16px; }
}

/* =========================================================
   ЖУРАВЛИ V6.0 — РАБОЧИЙ КОНСТРУКТОР
   Независимые каналы, изображения/видео, цвета и contain
   ========================================================= */

/* Главный hero поддерживает image / video / gradient и реальный fit. */
.zh-home-hero-media {
  object-fit: var(--hero-fit, cover) !important;
  object-position: var(--hero-position, center) !important;
  transform: none !important;
}
.zh-home-hero-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 24%, color-mix(in srgb, var(--zh-accent) 58%, #ffffff), transparent 34%),
    linear-gradient(135deg, var(--zh-header-bg), var(--zh-accent) 62%, #dff5ff);
}

/* Картинка каждого канала отображается согласно настройкам конкретного канала. */
.zh-public-channel-v5 .zh-public-channel-media {
  object-fit: var(--channel-fit, contain) !important;
  object-position: var(--channel-position, center) !important;
  transform: none !important;
  filter: none !important;
}

/* Превью конструктора: раньше правило не охватывало все img/video. */
.zh-preview-channel > img,
.zh-preview-channel > video,
.zh-preview-portal > img,
.zh-preview-portal > video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: var(--preview-fit, contain) !important;
  object-position: var(--preview-position, center) !important;
  background: var(--zh-channel-hero-bg, #0754b8) !important;
  transform: none !important;
}

/* Цвета конструктора применяются ко всей публичной странице канала. */
.zh-public-channel-v5,
.zh-public-channel-v5 .zh-channel-main {
  background-color: var(--zh-page-bg) !important;
  color: var(--zh-heading-color) !important;
}
.zh-public-channel-v5 .zh-section-head h2,
.zh-public-channel-v5 .zh-channel-about-panel h2,
.zh-public-channel-v5 .zh-video-card h3,
.zh-public-channel-v5 .zh-video-card a {
  color: var(--zh-heading-color) !important;
}
.zh-public-channel-v5 .zh-section-head p,
.zh-public-channel-v5 .zh-channel-about-panel p,
.zh-public-channel-v5 .zh-video-card p,
.zh-public-channel-v5 .zh-video-meta,
.zh-public-channel-v5 .zh-channel-tabs a:not(.is-active) {
  color: var(--zh-body-text) !important;
}
.zh-public-channel-v5 .zh-channel-about-panel,
.zh-public-channel-v5 .zh-video-card,
.zh-public-channel-v5 .zh-channel-tabs {
  border-color: color-mix(in srgb, var(--zh-accent) 18%, transparent) !important;
}
.zh-public-channel-v5 .zh-channel-about-panel {
  background: color-mix(in srgb, var(--zh-page-bg) 18%, #ffffff) !important;
}
.zh-public-channel-v5 .zh-channel-about-panel > span,
.zh-public-channel-v5 .zh-section-head .zh-kicker {
  color: var(--zh-accent) !important;
}
.zh-public-channel-v5 .zh-channel-tabs a.is-active,
.zh-public-channel-v5 .zh-button-primary,
.zh-public-channel-v5 .zh-button-light {
  color: var(--zh-button-text) !important;
  background: var(--zh-button-bg) !important;
  border-color: var(--zh-button-bg) !important;
}
.zh-public-channel-v5 .zh-button-outline-light {
  color: var(--zh-button-text) !important;
  border-color: var(--zh-button-text) !important;
  background: color-mix(in srgb, var(--zh-button-bg) 72%, transparent) !important;
}

/* Загрузка: понятное состояние и прогресс. */
.zh-upload-control[data-busy="true"] {
  opacity: .72;
  pointer-events: none;
}
.zh-upload-control [data-upload-note] {
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}
.zh-upload-control input[type=file] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

@media (max-width: 820px) {
  .zh-public-channel-v5 .zh-public-channel-media {
    object-position: var(--channel-position, center) !important;
  }
}

/* BEGIN GARMONDRIVE VIDEO V1.1 */
/* GARMONDRIVE VIDEO V1.1 — light blue visitor skin */
:root,
body#custom-css,
#custom-css {
  --gdrive-blue:#0b63ce;
  --gdrive-blue-2:#2489e8;
  --gdrive-sky:#56b7ff;
  --gdrive-ink:#061a3a;
  --gdrive-muted:#5c718b;
  --gdrive-ice:#f4f9ff;
  --gdrive-line:#d7e8f8;
  --gdrive-white:#ffffff;
  --is-dark:0;
  --primary:#0b63ce;
  --on-primary:#ffffff;
  --border-primary:#0756b6;
  --fg:#061a3a;
  --bg:#ffffff;
  --bg-secondary:#f4f9ff;
}
html,body,#custom-css,my-app,.page-root,.root{background:#fff!important;color:var(--gdrive-ink)!important}
#custom-css .header,#custom-css .top-menu,#custom-css .menu-wrapper,#custom-css .sidebar,#custom-css .menu,
#custom-css .videos-header,#custom-css .video-info,#custom-css .video-actions{border-color:var(--gdrive-line)!important}
#custom-css a:not(.vjs-control):not(.vjs-button){color:var(--gdrive-ink)}
#custom-css a:not(.vjs-control):not(.vjs-button):hover{color:var(--gdrive-blue)!important}
#custom-css button:not(.vjs-control):not(.vjs-button),#custom-css .button-link:not(.vjs-control){border-color:var(--gdrive-line)!important}
#custom-css input,#custom-css textarea,#custom-css select{background:#fff!important;color:var(--gdrive-ink)!important;border-color:var(--gdrive-line)!important}
#custom-css .video-miniature,#custom-css .video-thumbnail,#custom-css .channel,#custom-css .account,#custom-css .card{
  border-color:var(--gdrive-line)!important;
  box-shadow:0 14px 42px rgba(28,89,147,.08)!important;
}
#custom-css .video-miniature:hover,#custom-css .video-thumbnail:hover{box-shadow:0 22px 56px rgba(28,89,147,.15)!important}
#custom-css .video-thumbnail img,#custom-css .video-miniature img{object-fit:cover}
/* Public video service is watch-only. Admin can still use direct URLs. */
#custom-css a[href$="/login"],#custom-css a[href*="/login?"],#custom-css a[href*="/signup"],#custom-css a[href*="/register"],
#custom-css a[href*="/publish"],#custom-css a[href*="/studio"],#custom-css a[href*="/my-library"]{display:none!important}
/* Remove old AI surfaces from visitor UI only. */
#custom-css a[href*="/ai" i],#custom-css a[href*="assistant" i],#custom-css [class*="assistant" i],#custom-css [id*="assistant" i],
#custom-css [class*="ai-tool" i],#custom-css [id*="ai-tool" i]{display:none!important}
.gdrive-video-home-link{
  position:fixed;z-index:9998;right:18px;bottom:18px;padding:12px 16px;
  background:linear-gradient(135deg,var(--gdrive-blue),var(--gdrive-blue-2));color:#fff!important;
  font:900 11px/1 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 12px 30px rgba(11,99,206,.24);border:1px solid rgba(255,255,255,.45)
}
@media(max-width:760px){.gdrive-video-home-link{right:10px;bottom:10px;padding:10px 12px}}

/* END GARMONDRIVE VIDEO V1.1 */