@charset "UTF-8";
/**
 * Clay 3.84.0
 *
 * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
 * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
 *
 * SPDX-License-Identifier: BSD-3-Clause
 */
/**
 * Bootstrap v4.4.1
 *
 * SPDX-FileCopyrightText: © 2019 Twitter, Inc. <https://twitter.com>
 * SPDX-FileCopyrightText: © 2019 The Bootstrap Authors <https://getbootstrap.com/>
 *
 * SPDX-License-Identifier: LicenseRef-MIT-Bootstrap
 */
/**
 * Clay 3.84.0
 *
 * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
 * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
 *
 * SPDX-License-Identifier: BSD-3-Clause
 */
/**
 * Bootstrap v4.4.1
 *
 * SPDX-FileCopyrightText: © 2019 Twitter, Inc. <https://twitter.com>
 * SPDX-FileCopyrightText: © 2019 The Bootstrap Authors <https://getbootstrap.com/>
 *
 * SPDX-License-Identifier: LicenseRef-MIT-Bootstrap
 */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap");
.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  clip: auto;
  height: auto;
  overflow: visible;
  position: static;
  white-space: normal;
  width: auto;
}

.lfr-asset-column-details .lfr-asset-categories {
  color: #7d7d7d;
}
.lfr-asset-column-details .lfr-asset-categories .lfr-asset-category {
  color: #555;
}
.lfr-asset-column-details .lfr-asset-description {
  color: #444;
  font-style: italic;
  margin: 0.5em auto 2em;
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
}
.lfr-asset-column-details .lfr-asset-icon {
  border-right: 1px solid transparent;
  color: #999;
  float: left;
  line-height: 1em;
  margin-right: 10px;
  padding-right: 10px;
}
.lfr-asset-column-details .lfr-asset-icon.last {
  border-width: 0;
}
.lfr-asset-column-details .lfr-asset-tags {
  color: #7d7d7d;
}
.lfr-asset-column-details .lfr-asset-tags .tag {
  color: #555;
}
.lfr-asset-column-details .lfr-asset-metadata {
  clear: both;
  margin-bottom: 1.5em;
  padding-bottom: 1.5em;
}
.lfr-asset-column-details .lfr-panel {
  clear: both;
  margin-bottom: 0.2em;
}
.lfr-asset-column-details .lfr-panel.lfr-extended {
  border: 1px solid #ccc;
  margin-bottom: 0;
}
.lfr-asset-column-details .taglib-custom-attributes-list label,
.lfr-asset-column-details .lfr-asset-field label {
  display: block;
}
.lfr-asset-column-details .taglib-custom-attributes-list {
  margin-bottom: 1em;
}

.overlay {
  position: absolute;
}

.overlay-hidden,
.overlaymask-hidden {
  display: none;
}

.lfr-form-row {
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 1px 5px 25px;
  position: relative;
}
.lfr-form-row:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
}
.lfr-form-row:hover {
  border: solid #ccc;
  border-width: 1px 0;
  padding-top: 0;
}
.lfr-form-row.lfr-form-row-inline .form-group {
  margin-right: 5px;
}
.lfr-form-row legend .field-label {
  float: left;
  margin-right: 10px;
}
.lfr-form-row .handle-sort-vertical {
  background: url(../images/application/handle_sort_vertical.png) no-repeat 0 50%;
  cursor: move;
  padding-left: 20px;
}
.lfr-form-row fieldset {
  border-width: 0;
  margin: 0;
  padding: 0;
}

.lfr-autorow-controls {
  bottom: 5px;
  position: absolute;
  right: 5px;
}

.datepicker-popover-content .popover-content {
  padding: 0.75rem 1rem;
}

.dropdown.open > .dropdown-menu, .overlay-content .open > .dropdown-menu {
  display: block;
}

.form-control-inline {
  background-color: transparent;
  font-size: 1.125rem;
  font-weight: 700;
}
.form-control-inline:not(:hover) {
  border-color: transparent;
}
.form-control-inline::placeholder {
  color: #a7a9bc;
  font-style: italic;
}

.form-search .input-group {
  position: relative;
}
.form-search .input-group.advanced-search .search-query {
  padding-left: 40px;
  z-index: 0;
}
.form-search .input-group.advanced-search .toggle-advanced {
  cursor: pointer;
  left: 0;
  line-height: 1;
  padding: 8px 10px;
  position: absolute;
  top: 0;
}
.form-search .input-group.advanced-search .toggle-advanced .caret {
  margin-top: 7px;
}
.form-search .input-group.advanced-search .toggle-advanced .icon-search {
  font-size: 14px;
}
@media (max-width: 991.98px) {
  .form-search .input-group {
    width: 100%;
  }
  .form-search .input-group .btn {
    clip: rect(0, 0, 0, 0);
    left: -9999px;
    position: absolute;
  }
  .form-search .input-group input.search-query {
    width: 100%;
  }
}

.lfr-table {
  border-collapse: collapse;
  clear: both;
}
.lfr-table > tbody > tr > td,
.lfr-table > tbody > tr > th,
.lfr-table > thead > tr > td,
.lfr-table > thead > tr > th,
.lfr-table > tfoot > tr > td,
.lfr-table > tfoot > tr > th {
  padding: 0 5px;
  overflow-wrap: break-all;
  word-wrap: break-all;
}
.lfr-table > tbody > tr > td:first-child, .lfr-table > tbody > tr > td.first-child,
.lfr-table > tbody > tr > th:first-child,
.lfr-table > tbody > tr > th.first-child,
.lfr-table > thead > tr > td:first-child,
.lfr-table > thead > tr > td.first-child,
.lfr-table > thead > tr > th:first-child,
.lfr-table > thead > tr > th.first-child,
.lfr-table > tfoot > tr > td:first-child,
.lfr-table > tfoot > tr > td.first-child,
.lfr-table > tfoot > tr > th:first-child,
.lfr-table > tfoot > tr > th.first-child {
  padding-left: 0;
}
.lfr-table > tbody > tr > td:last-child, .lfr-table > tbody > tr > td.last-child,
.lfr-table > tbody > tr > th:last-child,
.lfr-table > tbody > tr > th.last-child,
.lfr-table > thead > tr > td:last-child,
.lfr-table > thead > tr > td.last-child,
.lfr-table > thead > tr > th:last-child,
.lfr-table > thead > tr > th.last-child,
.lfr-table > tfoot > tr > td:last-child,
.lfr-table > tfoot > tr > td.last-child,
.lfr-table > tfoot > tr > th:last-child,
.lfr-table > tfoot > tr > th.last-child {
  padding-right: 0;
}
.lfr-table > tbody > tr > th,
.lfr-table > thead > tr > th,
.lfr-table > tfoot > tr > th {
  font-weight: bold;
}

.lfr-pagination:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
}
.lfr-pagination .dropdown-menu {
  display: none;
}
.lfr-pagination .dropdown-toggle .icon-caret-down {
  margin-left: 5px;
}
.lfr-pagination .lfr-pagination-controls {
  float: left;
}
.lfr-pagination .lfr-pagination-controls .search-results {
  display: inline-block;
  margin-left: 10px;
  margin-top: 5px;
  top: 10px;
}
.lfr-pagination .lfr-pagination-controls li .lfr-pagination-link {
  border-width: 0;
  clear: both;
  color: #333;
  display: block;
  font-weight: normal;
  line-height: 20px;
  padding: 3px 20px;
  text-align: left;
  white-space: nowrap;
  width: 100%;
}
.lfr-pagination .lfr-pagination-delta-selector {
  float: left;
}
@media (max-width: 991.98px) {
  .lfr-pagination .lfr-pagination-delta-selector .lfr-icon-menu-text {
    display: none;
  }
}
.lfr-pagination .pagination-content {
  float: right;
}

.lfr-panel.lfr-extended {
  border: 1px solid transparent;
  border-color: #dedede #bfbfbf #bfbfbf #dedede;
}
.lfr-panel.lfr-extended.lfr-collapsible .lfr-panel-button {
  display: block;
}
.lfr-panel.lfr-extended.lfr-collapsed .lfr-panel-titlebar {
  border-bottom-width: 0;
}
.lfr-panel.panel-default .panel-heading {
  border-bottom-width: 0;
}
.lfr-panel .toggler-header {
  cursor: pointer;
}

.sidebar-sm {
  font-size: 0.875rem;
}
.sidebar-sm .sheet-subtitle {
  font-size: 0.75rem;
  margin-bottom: 1rem;
}
.sidebar-sm .form-group {
  margin-bottom: 1rem;
}
.sidebar-sm .form-control {
  border-radius: 0.1875rem;
  font-size: 0.875rem;
  height: 2rem;
  line-height: 1.5;
  min-height: auto;
  padding: 0.25rem 0.75rem;
}
.sidebar-sm .form-control.form-control-tag-group {
  height: auto;
}
.sidebar-sm .form-control.form-control-tag-group .form-control-inset {
  margin-bottom: 0;
  margin-top: 0;
}
.sidebar-sm .form-control.form-control-tag-group .label {
  margin-bottom: 0;
  margin-top: 0;
  padding: 0 0.25rem;
}
.sidebar-sm .form-control[type=file] {
  padding: 0;
}
.sidebar-sm select.form-control {
  padding-right: 1.6rem;
}
.sidebar-sm select.form-control:not([size]) {
  height: 2rem;
}
.sidebar-sm .article-content-description .input-localized.input-localized-editor .input-group-item .wrapper .form-control {
  min-height: auto;
  padding: 0.285rem 0.75rem;
}
.sidebar-sm .btn:not(.btn-unstyled) {
  border-radius: 0.1875rem;
  font-size: 0.875rem;
  line-height: 1.15;
  padding: 0.4375rem 0.75rem;
}
.sidebar-sm .btn:not(.btn-unstyled).close {
  padding: 0.4375rem;
}
.sidebar-sm .btn.btn-monospaced, .sidebar-sm .btn.btn-monospaced.btn-sm {
  height: 2rem;
  padding: 0.1875rem 0;
  width: 2rem;
}
.sidebar-sm .btn.btn-monospaced.input-localized-trigger, .sidebar-sm .btn.btn-monospaced.btn-sm.input-localized-trigger {
  padding: 0;
}
.sidebar-sm .input-group-item .input-group-text {
  font-size: 0.875rem;
  height: 2rem;
  min-width: 2rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.sidebar-sm .input-group-item .btn .btn-section {
  font-size: 0.5625rem;
}
.sidebar-sm .list-group-item-flex {
  padding: 0.5rem 0.25rem;
}
.sidebar-sm .list-group-item-flex .autofit-col {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.lfr-translation-manager {
  border-radius: 4px;
  display: inline-block;
  margin-top: 0.5em;
  min-height: 1.8em;
}
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-default-locale {
  display: inline-block;
  width: auto;
}
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-icon-menu {
  float: none;
  padding: 0.4em 0;
}
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-icon-menu li,
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-icon-menu li strong {
  display: inline;
}
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-translations-message {
  margin: 10px 0;
}
.lfr-translation-manager .lfr-translation-manager-available-translations {
  white-space: normal;
}
.lfr-translation-manager .lfr-translation-manager-available-translations .lfr-translation-manager-available-translations-links {
  line-height: 1;
}
.lfr-translation-manager .lfr-translation-manager-translation {
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  margin: 0.2em;
  padding: 0.4em 0.3em 0.4em 0.5em;
  text-decoration: none;
}
.lfr-translation-manager .lfr-translation-manager-translation * {
  vertical-align: middle;
}
.lfr-translation-manager .lfr-translation-manager-translation img {
  margin-right: 0.3em;
}
.lfr-translation-manager .lfr-translation-manager-translation:hover {
  background-color: #d1e5ef;
}
.lfr-translation-manager .lfr-translation-manager-translation.lfr-translation-manager-translation-editing {
  background-color: #598bec;
  border-color: #224fa8;
  color: #fff;
}
.lfr-translation-manager .lfr-translation-manager-change-default-locale {
  margin: 0 0.4em;
}
.lfr-translation-manager .lfr-translation-manager-delete-translation {
  display: inline-block;
  padding: 0 2px;
}
.lfr-translation-manager .lfr-translation-manager-delete-translation svg {
  pointer-events: none;
}

.lfr-tree a {
  text-decoration: none;
}
.lfr-tree li {
  margin-bottom: 2px;
  padding-left: 0;
}
.lfr-tree li ul li, .lfr-tree li.tree-item {
  padding-left: 0;
}
.lfr-tree li.tree-item {
  padding-left: 5px;
}
.lfr-tree li.tree-item li {
  padding-left: 20px;
}
.lfr-tree li.tree-item ul {
  margin-left: 0;
  margin-top: 5px;
}

.lfr-upload-container {
  margin-bottom: 1rem;
}
.lfr-upload-container .upload-target {
  border: 3px dashed #e7e7ed;
  margin-bottom: 1rem;
  min-height: 2rem;
  padding: 2rem 0;
  position: relative;
  text-align: center;
}
.upload-drop-intent .lfr-upload-container .upload-target {
  z-index: 100;
}
.upload-drop-active .lfr-upload-container .upload-target {
  background-color: #edf9f0;
  border-color: #5aca75;
}
.lfr-upload-container .upload-target .drop-file-text {
  font-weight: normal;
}
.mobile .lfr-upload-container .upload-target .drop-file-text {
  display: none;
}
.lfr-upload-container .upload-target .small {
  display: block;
  margin: 5px 0;
  text-transform: lowercase;
}
.lfr-upload-container .manage-upload-target {
  padding-top: 5px;
  position: relative;
}
.lfr-upload-container .manage-upload-target .select-files {
  float: left;
  line-height: 0;
  margin: 0 1.125rem 1.125rem;
  padding: 0 0 0 5px;
}
.lfr-upload-container .cancel-uploads,
.lfr-upload-container .clear-uploads {
  background-repeat: no-repeat;
  float: right;
}
.lfr-upload-container .cancel-uploads {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAnFBMVEX////4YWP/dXjyS07/dXj9bXD6a234YWP4XWD2WVv2VFfsOTzoLzHmKSvkISP2VFf0TE/vREftPT/iHB72WVvvREf0TE//hon/gYX/fYD/e33/dXj/cXP9bXD/a236a23/Zmb4YWP4XWD/Wl32WVv/VVj2VFf3VFb0TE/yS072SUvvREfuQELtPT/sOTzrMzXoLzHnLC/mKSvkISPh2jkWAAAAF3RSTlMAESIiMzMzMzMzMzMzMzNERERERHd3qtw8lzkAAACOSURBVHjaZcjZDsIgEIXhcd+tu5YBKUixttS6vP+7OQKJTfxvTr4D7Tpxu/2w410SjDjwVvLQ805TPiRryfQeKM6OTI68K/BJPHGlJZJjSqSMofEOGXbJecsTgzkds58V5+J8refBU7Jx9yIrmkW0sA6gqbLyuaRjZZWtgXq58rEFan0jf3uTfRuIkf/7AO8DDcVPSSG3AAAAAElFTkSuQmCC);
  margin-right: 0;
}
.lfr-upload-container .clear-uploads {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAdVBMVEX///+6QwTEVx65RQPEVx3EWB64RQPDVxq5RAO5RAO5RQPATQ65RQO5RQO5RQPRczjJZCW9TQTLay28QgTdZAHhaAPmdyHqeQXrikDudgDvfxj0nWP1qHL2tY33tY34dgD+za7+1rj/dxH/fxj/hiH/kk3///9TM3sUAAAAFHRSTlMAbXd4eHh6gN3e3+Hi4+T5+/z8/mIsq5IAAABHSURBVBjTY2CgGWDlFuZhRuIz8cspyggxIgQ4ZFWVVCQ4EQLCCmpqalLCCAFeaWV5SVE+hAC7gJi4iCAbkqksXMK8bNRzNADCOQN++eLhCQAAAABJRU5ErkJggg==);
  padding-left: 16px;
}
.lfr-upload-container .upload-file.upload-complete.file-saved {
  padding-left: 25px;
}
.lfr-upload-container .upload-file .file-title {
  display: inline-block;
  max-width: 95%;
  overflow: hidden;
  padding-right: 16px;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}
.lfr-upload-container .upload-file .icon-file {
  font-size: 40px;
}
.lfr-upload-container .upload-list-info {
  margin: 1em 0 0.5em;
}
.lfr-upload-container .upload-list-info h4 {
  font-size: 1.3em;
}
.lfr-upload-container .cancel-button {
  color: #6b6c7e;
  margin-top: 1px;
  position: absolute;
  right: 5px;
  top: 50%;
  white-space: nowrap;
}
.lfr-upload-container .cancel-button .cancel-button-text {
  display: none;
  margin-left: 5px;
}
.lfr-upload-container .cancel-button:hover .cancel-button-text {
  display: inline;
}
.lfr-upload-container .cancel-button .lexicon-icon {
  height: 12px;
}
.lfr-upload-container .delete-button {
  color: #6b6c7e;
}
.lfr-upload-container .delete-button-col {
  padding-right: 10px;
}
.lfr-upload-container .file-added .success-message {
  float: right;
  font-weight: normal;
}
.lfr-upload-container .upload-error {
  opacity: 1;
  padding-left: 25px;
}
.lfr-upload-container .upload-complete .cancel-button,
.lfr-upload-container .delete-button,
.lfr-upload-container .upload-complete.file-saved .delete-button,
.lfr-upload-container .upload-complete.upload-error .delete-button {
  display: none;
}
.lfr-upload-container .multiple-files .upload-error {
  background: #feefef url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJPSURBVDjLpZPLS5RhFMYfv9QJlelTQZwRb2OKlKuINuHGLlBEBEOLxAu46oL0F0QQFdWizUCrWnjBaDHgThCMoiKkhUONTqmjmDp2GZ0UnWbmfc/ztrC+GbM2dXbv4ZzfeQ7vefKMMfifyP89IbevNNCYdkN2kawkCZKfSPZTOGTf6Y/m1uflKlC3LvsNTWArr9BT2LAf+W73dn5jHclIBFZyfYWU3or7T4K7AJmbl/yG7EtX1BQXNTVCYgtgbAEAYHlqYHlrsTEVQWr63RZFuqsfDAcdQPrGRR/JF5nKGm9xUxMyr0YBAEXXHgIANq/3ADQobD2J9fAkNiMTMSFb9z8ambMAQER3JC1XttkYGGZXoyZEGyTHRuBuPgBTUu7VSnUAgAUAWutOV2MjZGkehgYUA6O5A0AlkAyRnotiX3MLlFKduYCqAtuGXpyH0XQmOj+TIURt51OzURTYZdBKV2UBSsOIcRp/TVTT4ewK6idECAihtUKOArWcjq/B8tQ6UkUR31+OYXP4sTOdisivrkMyHodWejlXwcC38Fvs8dY5xaIId89VlJy7ACpCNCFCuOp8+BJ6A631gANQSg1mVmOxxGQYRW2nHMha4B5WA3chsv22T5/B13AIicWZmNZ6cMchTXUe81Okzz54pLi0uQWp+TmkZqMwxsBV74Or3od4OISPr0e3SHa3PX0f3HXKofNH/UIG9pZ5PeUth+CyS2EMkEqs4fPEOBJLsyske48/+xD8oxcAYPzs4QaS7RR2kbLTTOTQieczfzfTv8QPldGvTGoF6/8AAAAASUVORK5CYII=) no-repeat 5px 5px;
  border-color: #ab1010;
  color: #ab1010;
  font-weight: normal;
  margin-bottom: 16px;
  padding: 8px 8px 8px 24px;
}
.lfr-upload-container .multiple-files .upload-error .error-message {
  display: block;
}
.lfr-upload-container .multiple-files .upload-complete.file-saved .form-check-middle-left .card-body,
.lfr-upload-container .multiple-files .upload-complete.upload-error .form-check-middle-left .card-body {
  padding-left: 1rem;
}
.lfr-upload-container .multiple-files .upload-complete.file-saved .form-check-middle-left .custom-control-label,
.lfr-upload-container .multiple-files .upload-complete.upload-error .form-check-middle-left .custom-control-label {
  display: none;
}
.lfr-upload-container .single-file .upload-error {
  list-style: none;
  margin-top: 1em;
}
.lfr-upload-container .single-file .upload-error .upload-error-message {
  margin-bottom: 0.5em;
}
.lfr-upload-container .upload-complete {
  padding-left: 5px;
}
.lfr-upload-container .upload-complete .error-message,
.lfr-upload-container .upload-complete .success-message {
  font-weight: bold;
  margin-left: 1em;
}
.lfr-upload-container .upload-complete .delete-button {
  display: inline-block;
}
.lfr-upload-container .upload-complete .select-file:disabled + .custom-control-label {
  display: none;
}
.lfr-upload-container .progress {
  display: none;
  margin-top: 0.5rem;
}
.lfr-upload-container .file-uploading .progress {
  display: flex;
}

.lfr-alert-container {
  left: 0;
  position: absolute;
  right: auto;
  top: auto;
  width: 100%;
  z-index: 430;
}
.lfr-alert-container.inline-alert-container {
  position: relative;
}
.lfr-alert-container.inline-alert-container .lfr-alert-wrapper {
  padding: 0;
}
.lfr-alert-container .lfr-alert-wrapper {
  margin-bottom: 5px;
  overflow: hidden;
}

.lfr-search-container td .overlay.entry-action {
  position: static;
}
.lfr-search-container td .overlay.entry-action .btn a {
  display: block;
  padding: 4px 12px;
}

.contextual-sidebar {
  height: calc(100vh - 49px);
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 49px;
  transform: translateX(100%);
  transition: transform ease 0.5s;
  width: 320px;
  will-change: transform;
}
.contextual-sidebar.contextual-sidebar-visible {
  pointer-events: auto;
  transform: translateX(0);
}
body.has-control-menu .contextual-sidebar {
  height: calc(100vh - 98px);
  top: 98px;
}

@media (min-width: 576px) {
  .contextual-sidebar {
    height: calc(100vh - 64px);
    top: 64px;
  }
  body.has-control-menu .contextual-sidebar {
    height: calc(
				100vh - 120px
			);
    top: 120px;
  }
  .contextual-sidebar-content {
    transition: padding ease 0.5s;
    will-change: padding;
  }
  .contextual-sidebar-visible .contextual-sidebar-content,
  .contextual-sidebar-visible + .contextual-sidebar-content {
    padding-right: 320px;
  }
}
.taglib-diff-html div.diff-removed-image {
  background: #fdc6c6 url(../images/diff/minus.png);
}
.taglib-diff-html div.diff-added-image {
  background: #cfc url(../images/diff/plus.png) no-repeat;
}
.taglib-diff-html div.diff-removed-image, .taglib-diff-html div.diff-added-image {
  height: 300px;
  margin: 2px;
  opacity: 0.55;
  position: absolute;
  width: 200px;
}
.taglib-diff-html span.diff-html-added {
  background-color: #cfc;
  font-size: 1em;
}
.taglib-diff-html span.diff-html-added img {
  border: 2px solid #cfc;
}
.taglib-diff-html span.diff-html-changed {
  background: url(../images/diff/underline.png) bottom repeat-x;
}
.taglib-diff-html span.diff-html-changed img {
  border: 2px dotted #009;
}
.taglib-diff-html span.diff-html-removed {
  background-color: #fdc6c6;
  font-size: 1em;
  text-decoration: line-through;
}
.taglib-diff-html span.diff-html-removed img {
  border: 2px solid #fdc6c6;
}

.taglib-discussion {
  font-size: 0.875rem;
  margin-top: 1rem;
}
.taglib-discussion .actions-menu .component-action {
  display: inline-flex;
}
.taglib-discussion .button-holder {
  margin: 1rem 0;
}
.taglib-discussion .comment-container {
  margin-bottom: 1.5rem;
}
.taglib-discussion .lfr-discussion .lfr-discussion-form-edit .alloy-editor-placeholder {
  border-left-color: #dbdde1;
}
.taglib-discussion .lfr-discussion-body {
  font-size: 1rem;
}
@media (min-width: 576px) {
  .taglib-discussion .lfr-discussion-body {
    padding-left: 3.5rem;
  }
}
@media (min-width: 576px) {
  .taglib-discussion .lfr-discussion-details .taglib-user-display {
    word-wrap: break-word;
  }
}
.taglib-discussion .lfr-discussion-details .taglib-user-display .user-details .user-name {
  font-weight: bold;
  text-decoration: none;
}
.taglib-discussion .lfr-discussion-details .taglib-user-display .user-details .user-name:hover {
  text-decoration: underline;
}
.taglib-discussion .lfr-discussion-details .taglib-user-display .user-profile-image .avatar {
  background-size: 50px;
}
.taglib-discussion .lfr-discussion-container {
  border-bottom: 1px solid #e7e7ed;
  margin-bottom: 1.5rem;
}
.taglib-discussion .lfr-discussion-container:first-of-type {
  border-top: 1px solid #e7e7ed;
  padding-top: 1.5rem;
}
.taglib-discussion .lfr-discussion-container:last-of-type {
  border-bottom: 0;
}
.taglib-discussion .lfr-discussion-container .lfr-discussion {
  padding-left: 1rem;
}
.taglib-discussion .lfr-discussion-container .lfr-discussion .lfr-discussion .lfr-discussion .lfr-discussion {
  padding-left: 0;
}
@media (min-width: 576px) {
  .taglib-discussion .lfr-discussion-container .lfr-discussion {
    padding-left: 3.5rem;
  }
}
.taglib-discussion .lfr-discussion-parent-link {
  color: #67678c;
  font-weight: 600;
  margin-left: 1em;
}
@media (max-width: 767.98px) {
  .taglib-discussion .lfr-discussion-parent-link {
    display: block;
    margin-left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.taglib-discussion .lfr-discussion-controls .autofit-col:first-of-type > .btn-outline-borderless {
  margin-left: -0.75rem;
}
.taglib-discussion .lfr-discussion-more-comments {
  border-top: 1px solid #e7e7ed;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  text-align: center;
}
.taglib-discussion .username {
  color: #272833;
  font-weight: 600;
}
.taglib-discussion .taglib-workflow-status {
  margin-left: 0.5rem;
}
.taglib-discussion .workflow-value {
  text-transform: uppercase;
}
@media (min-width: 576px) {
  .taglib-discussion .actions-menu {
    display: none;
  }
  .taglib-discussion .comment-container:hover .actions-menu,
  .taglib-discussion .actions-menu:focus,
  .taglib-discussion .actions-menu.open {
    display: inline-block;
  }
}

.drop-zone {
  min-height: 80px;
  padding: 20px;
  text-align: center;
}
.drop-zone.drop-enabled {
  outline: 2px dashed transparent;
}
.drop-zone.drop-enabled:not(.no-border) {
  outline-color: rgba(176, 180, 187, 0.5);
}
.drop-zone p {
  margin: 10px auto 0;
  max-width: 75%;
}

.drop-here-info {
  font-size: 25px;
  height: 100%;
  left: 0;
  min-height: 100px;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 0;
  visibility: hidden;
  width: 100%;
  transition: all 0.2s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .drop-here-info {
    transition: none;
  }
}
.drop-here-info .drop-here-indicator {
  height: 115px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
}
.drop-here-info .drop-icons {
  display: inline-block;
  position: relative;
  width: 160px;
  transition: all 0.2s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .drop-here-info .drop-icons {
    transition: none;
  }
}
.drop-here-info .drop-icons span {
  border-radius: 3px;
  position: absolute;
  text-align: center;
  transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .drop-here-info .drop-icons span {
    transition: none;
  }
}
.drop-here-info .drop-icons span:nth-of-type(1) {
  box-shadow: 5px 4px 0 0 rgba(0, 0, 0, 0.08);
  height: 60px;
  left: 0;
  line-height: 60px;
  opacity: 0;
  top: 10px;
  transform: rotate(25deg);
  width: 60px;
}
.drop-here-info .drop-icons span:nth-of-type(2) {
  background: #00c2ff;
  color: #fff;
  height: 80px;
  left: 40px;
  line-height: 80px;
  width: 80px;
  z-index: 2;
}
.drop-here-info .drop-icons span:nth-of-type(3) {
  box-shadow: -5px 4px 0 0 rgba(0, 0, 0, 0.08);
  display: block;
  font-size: 45px;
  height: 70px;
  left: 90px;
  line-height: 70px;
  opacity: 0;
  position: relative;
  top: 8px;
  transform: rotate(-25deg);
  width: 70px;
  z-index: 1;
}
.drop-here-info .drop-icons span:nth-of-type(1), .drop-here-info .drop-icons span:nth-of-type(3) {
  background: #e8e6e8;
  color: #a5a6ac;
}
.drop-here-info .drop-text {
  color: #fff;
  display: block;
  font-size: 20px;
  margin-left: 0;
  margin-top: 20px;
}
.drop-active .drop-here-info {
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 1;
  visibility: visible;
  z-index: 100;
}
.drop-active .drop-here-info .drop-icons span:nth-of-type(1), .drop-active .drop-here-info .drop-icons span:nth-of-type(3) {
  opacity: 1;
}
.drop-active .drop-here-info span:nth-of-type(1) {
  transform: rotate(-20deg);
}
.drop-active .drop-here-info span:nth-of-type(2) {
  transform: scale(1);
}
.drop-active .drop-here-info span:nth-of-type(3) {
  transform: rotate(15deg);
}

.taglib-empty-result-message.sheet {
  margin-bottom: 24px;
}
.taglib-empty-result-message .taglib-empty-result-message-description {
  color: #6b6c7e;
  margin-top: 8px;
}
.taglib-empty-result-message .taglib-empty-result-message-header,
.taglib-empty-result-message .taglib-empty-result-message-header-has-plus-btn,
.taglib-empty-result-message .taglib-empty-search-result-message-header {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-left: auto;
  margin-right: auto;
}
.taglib-empty-result-message .taglib-empty-result-message-header,
.taglib-empty-result-message .taglib-empty-result-message-header-has-plus-btn {
  max-width: 200px;
  padding-top: 250px;
}
.taglib-empty-result-message .taglib-empty-result-message-header,
.taglib-empty-result-message .taglib-empty-result-message-header-has-plus-btn {
  background-image: url(/o/tea-v2-theme/images/states/empty_state.gif);
}
.taglib-empty-result-message .taglib-empty-search-result-message-header {
  background-image: url(/o/tea-v2-theme/images/states/search_state.gif);
  max-width: 210px;
  padding-top: 232px;
}
.taglib-empty-result-message .taglib-empty-state {
  background-image: url(/o/tea-v2-theme/images/states/empty_state.gif);
  margin: auto;
  max-width: 250px;
  padding-top: 250px;
}
.taglib-empty-result-message .taglib-success-state {
  background-image: url(/o/tea-v2-theme/images/states/success_state.gif);
  margin: auto;
  max-width: 250px;
  padding-top: 250px;
}
.taglib-empty-result-message .taglib-search-state {
  background-image: url(/o/tea-v2-theme/images/states/search_state.gif);
  margin: auto;
  max-width: 250px;
  padding-top: 250px;
}
.taglib-empty-result-message .taglib-empty-result-message-title {
  font-size: 1rem;
  margin-top: 48px;
}
.taglib-empty-result-message .taglib-empty-result-message-description {
  font-size: 0.875rem;
}
.taglib-empty-result-message .taglib-empty-result-message-header + .taglib-empty-result-message-title,
.taglib-empty-result-message .taglib-empty-search-result-message-header + .taglib-empty-result-message-title,
.taglib-empty-result-message .taglib-empty-state + .taglib-empty-result-message-title,
.taglib-empty-result-message .taglib-success-state + .taglib-empty-result-message-title,
.taglib-empty-result-message .taglib-search-state + .taglib-empty-result-message-title {
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
}
.taglib-empty-result-message .taglib-empty-result-message-header ~ .taglib-empty-result-message-description, .taglib-empty-result-message .taglib-empty-result-message-header ~ .taglib-empty-result-message-actions,
.taglib-empty-result-message .taglib-empty-search-result-message-header ~ .taglib-empty-result-message-description,
.taglib-empty-result-message .taglib-empty-search-result-message-header ~ .taglib-empty-result-message-actions,
.taglib-empty-result-message .taglib-empty-state ~ .taglib-empty-result-message-description,
.taglib-empty-result-message .taglib-empty-state ~ .taglib-empty-result-message-actions,
.taglib-empty-result-message .taglib-success-state ~ .taglib-empty-result-message-description,
.taglib-empty-result-message .taglib-success-state ~ .taglib-empty-result-message-actions,
.taglib-empty-result-message .taglib-search-state ~ .taglib-empty-result-message-description,
.taglib-empty-result-message .taglib-search-state ~ .taglib-empty-result-message-actions {
  font-size: 1rem;
  text-align: center;
}

.field-wrapper.form-inline .control-label {
  display: inline-block;
}

.field-wrapper-html .input-localized .input-group-item {
  flex-wrap: nowrap;
}

.taglib-header {
  border-bottom: 1px solid #c8c9ca;
  color: #555;
  margin-bottom: 1em;
  padding-bottom: 10px;
}
.taglib-header .header-title {
  display: inline-block;
  margin: 0.1em;
  max-width: 100%;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: normal;
}
.taglib-header .header-back-to {
  display: inline-block;
  vertical-align: middle;
}
.taglib-header .header-back-to a {
  display: block;
  font-weight: bold;
  padding: 0 0.3em 0 0;
  text-decoration: none;
}

.taglib-icon {
  text-decoration: none;
}
.taglib-icon:not(.btn):hover .taglib-text, .taglib-icon:not(.btn):focus .taglib-text {
  text-decoration: underline;
}
.taglib-icon[lang] > img {
  vertical-align: baseline;
  width: 16px;
}

.icon-monospaced {
  color: inherit;
  display: inline-block;
  height: 2rem;
  line-height: 34px;
  text-align: center;
  width: 2rem;
}
.icon-monospaced.lexicon-icon {
  padding: 8px;
}

.taglib-icon-list li {
  float: left;
  margin-right: 1em;
}
.taglib-icon-list:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
}

.lfr-icon-menu .lfr-icon-menu-icon {
  max-width: none;
}
@media (max-width: 767.98px) {
  .table-cell.last .lfr-icon-menu .dropdown-toggle {
    text-align: center;
  }
  .table-cell.last .lfr-icon-menu .dropdown-toggle > img,
  .table-cell.last .lfr-icon-menu .dropdown-toggle .lfr-icon-menu-text {
    display: none;
  }
}

.lfr-menu-list {
  float: none;
  overflow-y: auto;
  position: relative;
}
.lfr-menu-list.direction-right {
  margin: 0 2px;
}
.lfr-menu-list.dropdown-menu {
  float: none;
  position: relative;
}
@media (max-width: 991.98px) {
  .lfr-menu-list.dropdown-menu > li > a {
    font-size: 22px;
    line-height: 40px;
    white-space: normal;
  }
  .lfr-menu-list.dropdown-menu > li > a img {
    margin-bottom: 3px;
  }
}
.lfr-menu-list.dropdown-menu .search-panel {
  margin-bottom: 0;
}
.lfr-menu-list.dropdown-menu .search-panel .form-group {
  margin: 0 16px;
}
.lfr-menu-list.dropdown-menu .search-panel .menu-item-filter {
  width: auto;
}
body > .lfr-menu-list ul {
  border-radius: 4px;
}

.lfr-icon-menu-open:after {
  clear: both;
  content: "";
  display: table;
}
.lfr-icon-menu-open .dropdown-menu {
  position: static;
}

.input-localized.input-localized-editor .form-control {
  border-width: 0;
  height: 100%;
  padding: 0;
}
.input-localized .input-group-item {
  flex-direction: column;
}
.input-localized .input-localized-content {
  margin-left: 6px;
}
.input-group .input-localized .input-localized-content {
  margin-top: 3px;
}
.input-localized .lfr-input-localized .lfr-input-localized-state {
  background-color: #ddd;
}
.input-localized .lfr-input-localized .lfr-input-localized-state.lfr-input-localized-state-error {
  background-color: #ff0047;
}
.input-localized .lfr-input-localized-default a {
  margin-right: 14px;
}
.input-localized .lfr-input-localized-state {
  height: 4px;
  margin: 3px 5px;
  width: 4px;
}
.input-localized .palette-item-inner .lfr-input-localized-flag {
  font-size: 16px;
  opacity: 0.5;
}
.input-localized .palette-item,
.input-localized .palette-item-hover,
.input-localized .palette-item-hover .palette-item-inner {
  border-color: transparent;
}
.input-localized .palette-item-inner {
  border-color: #666;
  display: block;
  height: 16px;
  width: 16px;
}
.input-localized .palette-item-selected .lfr-input-localized-state {
  background: #27c1f2;
}

.input-localized-palette-container .palette-items-container {
  font-size: 0;
  margin: 0;
  white-space: normal;
}
.input-localized-palette-container .palette-item {
  border-width: 0;
  padding: 0.5rem 1.25rem;
}
.input-localized-palette-container .palette-item-inner {
  border: 1px solid;
  margin-right: 4px;
  width: 16px;
}
.input-localized-palette-container .palette-item-inner img {
  display: block;
}

.taglib-move-boxes {
  margin-bottom: 1em;
}
.taglib-move-boxes label {
  border-bottom: 1px solid transparent;
  display: block;
  margin-bottom: 5px;
  padding: 5px;
}
.taglib-move-boxes .toolbar {
  text-align: center;
}
.taglib-move-boxes .arrow-button img {
  border-width: 0;
  height: 16px;
  width: 16px;
}
.taglib-move-boxes .choice-selector {
  width: 100%;
}
.taglib-move-boxes .choice-selector label {
  background: #ebf1f9;
  border-bottom-color: #8db2f3;
}
.taglib-move-boxes .field-content {
  margin-bottom: 0;
}
.taglib-move-boxes .move-arrow-buttons {
  margin-top: 5em;
}
.taglib-move-boxes .move-arrow-buttons .arrow-button {
  display: block;
}
.taglib-move-boxes .sortable-container {
  margin-top: 10px;
}
.taglib-move-boxes .sortable-container .btn.edit-selection {
  margin-bottom: 10px;
}
.taglib-move-boxes .sortable-container .move-option {
  background-color: transparent;
  border-top: 1px solid #ddd;
  display: none;
  margin: 2px 0;
  padding: 2px;
  position: relative;
}
.taglib-move-boxes .sortable-container .move-option.selected {
  display: block;
}
.taglib-move-boxes .sortable-container .move-option.move-option-dragging {
  background-color: #fafafa;
}
.taglib-move-boxes .sortable-container .move-option .checkbox,
.taglib-move-boxes .sortable-container .move-option .handle {
  position: absolute;
}
.taglib-move-boxes .sortable-container .move-option .checkbox {
  display: none;
  margin: 7px 0 0 5px;
}
.taglib-move-boxes .sortable-container .move-option .handle {
  color: #999;
  cursor: pointer;
  font-size: 1.5em;
  padding: 6px;
}
.taglib-move-boxes .sortable-container .move-option .title {
  font-size: 1.2em;
  margin: 1px 0 1px 30px;
}
.taglib-move-boxes .sortable-container.edit-list-active .move-option {
  display: block;
}
.taglib-move-boxes .sortable-container.edit-list-active .move-option .checkbox {
  display: inline-block;
}
.taglib-move-boxes .sortable-container.edit-list-active .move-option .handle {
  display: none;
}
.mobile .taglib-move-boxes .selector-container {
  display: none;
}

.item-selector .card-row > .autofit-col-expand {
  padding-top: 4px;
}
.item-selector .drop-zone {
  background-color: #f1f2f5;
  margin-top: 1rem;
}
.item-selector .input-file {
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 0.1px;
  z-index: -1;
}
.item-selector .input-file + label {
  position: relative;
}
.item-selector .input-file + label::before {
  border-radius: 4px;
  bottom: -2px;
  content: "";
  display: block;
  left: -2px;
  position: absolute;
  right: -2px;
  top: -2px;
  transition: box-shadow 0.15s ease-in-out;
}
.item-selector .input-file:focus + label::before {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #baabea;
}
.item-selector .item-selector-list-row:hover {
  background-color: white;
  cursor: pointer;
}

.lfr-map {
  border: 1px solid #ccc;
  min-height: 400px;
  width: 100%;
}
.lfr-map .home-button {
  margin: 5px;
}
@media (max-width: 575.98px) {
  .lfr-map .home-button {
    height: 35px;
    width: 45px;
  }
}
.lfr-map .search-controls {
  font-size: 15px;
  margin-top: 5px;
  width: 100%;
}
@media (min-width: 576px) {
  .lfr-map .search-controls {
    width: 50%;
  }
}
.lfr-map .search-controls .search-input {
  width: 100%;
}

.navbar .navbar-collapse {
  max-height: none;
}
.navbar .navbar-collapse:after, .navbar .navbar-collapse:before {
  display: inline;
}
@media (max-width: 767.98px) {
  .navbar .navbar-search {
    background-color: #f3f3f3;
    border-top-width: 0;
    width: 100%;
  }
}
.navbar .navbar-search .form-search {
  margin: 8px 0;
}
@media (min-width: 768px) {
  .navbar .navbar-search .form-search {
    float: right;
    max-width: 275px;
  }
}
@media (max-width: 767.98px) {
  .navbar .navbar-search .form-search .input-group {
    width: 100%;
  }
}
@media (max-width: 991.98px) {
  .navbar .container .navbar-btn,
  .navbar .container-fluid .navbar-btn {
    margin-bottom: 5px;
    width: 45px;
  }
  .navbar .container .navbar-collapse.open,
  .navbar .container-fluid .navbar-collapse.open {
    border-width: 0;
    display: block;
    height: auto;
    overflow: visible;
  }
}

.taglib-portlet-preview.show-borders {
  border: 1px solid #828f95;
  margin-bottom: 1em;
  padding: 3px 3px 1em;
}
.taglib-portlet-preview.show-borders .title {
  background-color: #d3dadd;
  font-size: 1.4em;
  font-weight: bold;
  padding: 0.5em;
}
.taglib-portlet-preview .preview {
  margin: 1em;
  min-height: 90px;
}

.lfr-search-container .entry-action {
  width: 1px;
}
.lfr-search-container .entry-action .taglib-icon {
  white-space: nowrap;
}

.lfr-search-container-wrapper.lfr-search-container-fixed-first-column {
  position: relative;
}
@media (min-width: 576px) {
  .lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive {
    margin-left: 375px;
    width: auto;
  }
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table {
  position: static;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header {
  left: 12px;
  position: fixed;
  right: 12px;
  top: -1px;
  z-index: 1020;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th {
  display: block;
  padding: 0;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th .lfr-search-iterator-fixed-header-inner-wrapper {
  overflow-x: hidden;
}
@media (min-width: 576px) {
  .lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th .lfr-search-iterator-fixed-header-inner-wrapper {
    margin-left: 375px;
  }
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th .lfr-search-iterator-fixed-header-inner-wrapper table {
  border-collapse: collapse;
  width: 100%;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th .lfr-search-iterator-fixed-header-inner-wrapper table th {
  border-radius: 0;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table td,
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table th {
  width: auto;
}
@media (min-width: 576px) {
  .lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table td:first-child,
  .lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table th:first-child {
    left: 0;
    position: absolute;
    right: 15px;
  }
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table th {
  height: auto;
}
.lfr-search-container-wrapper a:not(.component-action):not(.btn) {
  color: #495057;
  font-weight: 500;
  text-decoration: underline;
}
.lfr-search-container-wrapper a:not(.component-action):not(.btn):focus, .lfr-search-container-wrapper a:not(.component-action):not(.btn):hover {
  color: #000;
}
.lfr-search-container-wrapper .dropdown-action .dropdown-toggle {
  color: #6b6c7e;
}
.lfr-search-container-wrapper .dropdown-action .dropdown-toggle:hover {
  color: #272833;
}
.lfr-search-container-wrapper .lfr-icon-menu > .dropdown-toggle {
  color: #6b6c7e;
}
.lfr-search-container-wrapper .lfr-icon-menu > .dropdown-toggle:active, .lfr-search-container-wrapper .lfr-icon-menu > .dropdown-toggle:focus, .lfr-search-container-wrapper .lfr-icon-menu > .dropdown-toggle:hover {
  background-color: #f7f8f9;
  border-radius: 4px;
  color: #272833;
}
.lfr-search-container-wrapper .lfr-search-container-list .list-group:last-child .list-group-item:nth-last-child(2) {
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.lfr-search-container-wrapper .lfr-search-container-list + .taglib-search-iterator-page-iterator-bottom {
  margin-top: 20px;
}
.lfr-search-container-wrapper .list-group {
  margin-bottom: 0;
}
.lfr-search-container-wrapper .list-group + .list-group .list-group-header:first-child,
.lfr-search-container-wrapper .list-group + .list-group .list-group-item:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.lfr-search-container-wrapper .list-group .list-group-item h4 {
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 0;
}
.lfr-search-container-wrapper .list-group .list-group-item h5,
.lfr-search-container-wrapper .list-group .list-group-item h6,
.lfr-search-container-wrapper .list-group .list-group-item .h5,
.lfr-search-container-wrapper .list-group .list-group-item .h6 {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 0;
}
.lfr-search-container-wrapper .list-group .list-group-item span + h2.h5 {
  font-weight: 600;
}
.lfr-search-container-wrapper .list-group .list-group-item h6 + h5 {
  font-weight: 600;
}
.lfr-search-container-wrapper .table-list tbody tr:nth-last-child(2) td:first-child,
.lfr-search-container-wrapper .table-list tbody tr:nth-last-child(2) th:first-child {
  border-bottom-left-radius: 0.25rem;
}
.lfr-search-container-wrapper .table-list tbody tr:nth-last-child(2) td:last-child,
.lfr-search-container-wrapper .table-list tbody tr:nth-last-child(2) th:last-child {
  border-bottom-right-radius: 0.25rem;
}

.user-info {
  display: flex;
}
.user-info .sticker {
  align-self: center;
}
.user-info .user-details {
  margin-left: 1rem;
}
.user-info .user-name {
  color: #272833;
  font-weight: 600;
}
.user-info .date-info {
  color: #6b6c7e;
}

.user-status-tooltip .user-status-avatar {
  float: left;
  margin-right: 5px;
}
.user-status-tooltip .user-status-avatar .user-status-avatar-image {
  width: 27px;
}
.user-status-tooltip .user-status-info {
  display: inline-block;
  overflow: hidden;
}
.user-status-tooltip .user-status-info .user-status-date {
  font-size: 11px;
}

.lfr-search-container {
  margin-top: 1.5em;
  overflow: auto;
}
@media (max-width: 767.98px) {
  .lfr-search-container .selector-button {
    width: auto;
  }
}
.touch .lfr-search-container {
  -webkit-overflow-scrolling: touch;
}
.touch .lfr-search-container .searchcontainer-content .table {
  max-width: none;
}

.taglib-page-iterator {
  clear: both;
  height: auto;
  width: auto;
}
.taglib-page-iterator .lfr-pagination-buttons {
  float: right;
  margin: 0;
}
@media (max-width: 991.98px) {
  .taglib-page-iterator .lfr-pagination-buttons {
    width: 100%;
  }
}
@media (max-width: 991.98px) and (max-width: 767.98px) {
  .taglib-page-iterator .lfr-pagination-buttons {
    float: none;
    margin-top: 20px;
  }
}
@media (max-width: 991.98px) {
  .taglib-page-iterator .lfr-pagination-buttons > li {
    display: inline-block;
    width: 50%;
  }
  .taglib-page-iterator .lfr-pagination-buttons > li.first, .taglib-page-iterator .lfr-pagination-buttons > li.last {
    display: none;
  }
  .taglib-page-iterator .lfr-pagination-buttons > li > a {
    line-height: 20px;
    padding: 11px 19px;
  }
}
.taglib-page-iterator .lfr-pagination-config {
  float: left;
  line-height: 46px;
}
@media (max-width: 767.98px) {
  .taglib-page-iterator .lfr-pagination-config {
    float: none;
  }
  .taglib-page-iterator .lfr-pagination-config .current-page-menu {
    display: block;
  }
  .taglib-page-iterator .lfr-pagination-config .current-page-menu .btn {
    display: block;
  }
}
.taglib-page-iterator .lfr-pagination-config .lfr-pagination-delta-selector,
.taglib-page-iterator .lfr-pagination-config .lfr-pagination-page-selector {
  display: inline;
}
.taglib-page-iterator .lfr-pagination-config .lfr-pagination-delta-selector {
  float: none;
}
@media (max-width: 991.98px) {
  .taglib-page-iterator .lfr-pagination-config .lfr-pagination-delta-selector {
    display: none;
  }
}
.taglib-page-iterator .search-results {
  float: left;
  line-height: 46px;
  margin-left: 10px;
}
@media (max-width: 991.98px) {
  .taglib-page-iterator .search-results {
    display: none;
  }
}

.taglib-search-toggle .form-search {
  position: relative;
}
.taglib-search-toggle .form-search .input-group-btn {
  position: absolute;
}
@media (min-width: 992px) {
  .taglib-search-toggle .form-search .input-group-btn {
    position: static;
  }
}
.taglib-search-toggle .toggle-advanced {
  color: inherit;
  margin-left: 10px;
  position: absolute;
  top: 8px;
}
.taglib-search-toggle .toggle-advanced, .taglib-search-toggle .toggle-advanced:hover, .taglib-search-toggle .toggle-advanced:focus {
  text-decoration: none;
}

.taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced {
  background-color: #fcfcfc;
  border: solid #ddd;
  border-width: 0 1px 1px;
  margin-top: 0;
  padding: 15px 15px 0;
}
.navbar-search .taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced {
  border-width: 1px 0 0;
}
.taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced .taglib-search-toggle-advanced-content {
  position: relative;
}
.taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced .taglib-search-toggle-advanced-content .match-fields {
  margin-bottom: 0;
}
.taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced .taglib-search-toggle-advanced-content .match-fields-legend {
  color: #999;
  font-size: 13px;
}
.taglib-search-toggle-advanced-wrapper .btn.close {
  margin-right: 5px;
  position: relative;
  z-index: 1;
}

.taglib-user-display {
  padding: 0.5em;
}
.taglib-user-display .avatar {
  background: no-repeat center;
  background-size: 60px;
  display: block;
  height: 60px;
  margin: 0 auto;
  width: 60px;
}
.taglib-user-display .avatar.author:after {
  background: rgba(50, 168, 230, 0.5);
  border-radius: 50%;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
}
.taglib-user-display .user-details {
  margin-top: 1em;
}
.taglib-user-display .user-name {
  font-size: 1.1em;
  font-weight: bold;
}
.taglib-user-display a .user-name {
  text-decoration: underline;
}
.taglib-user-display.display-style-1 .user-profile-image {
  float: left;
  margin-right: 24px;
}
.taglib-user-display.display-style-1 .user-name {
  display: inline-block;
  margin-top: 10px;
}
.taglib-user-display.display-style-1 .user-details {
  margin-top: 0;
}
.taglib-user-display.display-style-2 .user-profile-image,
.taglib-user-display.display-style-2 .user-name {
  clear: both;
  display: block;
  min-height: 20px;
  text-align: center;
}
.taglib-user-display.display-style-3 {
  padding: 0;
}
.taglib-user-display.display-style-3 .user-profile-image {
  display: inline-block;
  vertical-align: middle;
}

.taglib-workflow-status .workflow-id,
.taglib-workflow-status .workflow-version,
.taglib-workflow-status .workflow-status {
  color: #999;
}
.table-cell .taglib-workflow-status {
  margin: 0;
}
.table-cell .taglib-workflow-status .workflow-status {
  padding-left: 0;
}

.lfr-autocomplete-input-list .yui3-aclist-list {
  margin: 0;
}

.portal-popup .sheet > .lfr-nav {
  margin-top: -24px;
}
.portal-popup .contacts-portlet .portlet-configuration-container .form {
  position: static;
}
.portal-popup .lfr-form-content {
  padding: 24px 12px;
}
.portal-popup .portlet-body,
.portal-popup .portlet-boundary,
.portal-popup .portlet-column,
.portal-popup .portlet-layout {
  height: 100%;
}
.portal-popup .portlet-column {
  position: static;
}
.portal-popup .dialog-body > .container-fluid-max-xl,
.portal-popup .dialog-body .container-view,
.portal-popup .export-dialog-tree > .container-fluid-max-xl,
.portal-popup .export-dialog-tree .container-view,
.portal-popup .lfr-dynamic-uploader > .container-fluid-max-xl,
.portal-popup .lfr-dynamic-uploader .container-view,
.portal-popup .lfr-form-content > .container-fluid-max-xl,
.portal-popup .lfr-form-content .container-view,
.portal-popup .portlet-configuration-body-content > .container-fluid-max-xl,
.portal-popup .portlet-configuration-body-content .container-view,
.portal-popup .process-list > .container-fluid-max-xl,
.portal-popup .process-list .container-view,
.portal-popup .roles-selector-body > .container-fluid-max-xl,
.portal-popup .roles-selector-body .container-view {
  padding-top: 20px;
}
.portal-popup .dialog-body > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .dialog-body .container-view .nav-tabs-underline,
.portal-popup .export-dialog-tree > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .export-dialog-tree .container-view .nav-tabs-underline,
.portal-popup .lfr-dynamic-uploader > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .lfr-dynamic-uploader .container-view .nav-tabs-underline,
.portal-popup .lfr-form-content > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .lfr-form-content .container-view .nav-tabs-underline,
.portal-popup .portlet-configuration-body-content > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .portlet-configuration-body-content .container-view .nav-tabs-underline,
.portal-popup .process-list > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .process-list .container-view .nav-tabs-underline,
.portal-popup .roles-selector-body > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .roles-selector-body .container-view .nav-tabs-underline {
  margin-left: -12px;
  margin-right: -12px;
  margin-top: -20px;
}
.portal-popup .dialog-body > .lfr-nav + .container-fluid-max-xl,
.portal-popup .export-dialog-tree > .lfr-nav + .container-fluid-max-xl,
.portal-popup .lfr-dynamic-uploader > .lfr-nav + .container-fluid-max-xl,
.portal-popup .lfr-form-content > .lfr-nav + .container-fluid-max-xl,
.portal-popup .portlet-configuration-body-content > .lfr-nav + .container-fluid-max-xl,
.portal-popup .process-list > .lfr-nav + .container-fluid-max-xl,
.portal-popup .roles-selector-body > .lfr-nav + .container-fluid-max-xl {
  padding-top: 0;
}
.portal-popup .login-container {
  padding: 1.5rem;
}
.portal-popup .management-bar-default {
  border-left-width: 0;
  border-radius: 0;
  border-right-width: 0;
  border-top-width: 0;
  margin-bottom: 0;
}
.portal-popup .navbar ~ .portlet-configuration-setup,
.portal-popup .portlet-export-import-container {
  height: calc(100% - 48px);
  position: relative;
}
@media (min-width: 576px) {
  .portal-popup .navbar ~ .portlet-configuration-setup,
  .portal-popup .portlet-export-import-container {
    height: calc(100% - 48px);
  }
}
.portal-popup .panel-group .panel {
  border-left-width: 0;
  border-radius: 0;
  border-right-width: 0;
}
.portal-popup .panel-group .panel + .panel {
  border-top-width: 0;
  margin-top: 0;
}
.portal-popup .panel-heading {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.portal-popup .portlet-configuration-setup .lfr-nav {
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
  padding-left: 3px;
  padding-right: 3px;
}
@media (min-width: 576px) {
  .portal-popup .portlet-configuration-setup .lfr-nav {
    padding-left: 8px;
    padding-right: 8px;
  }
}
.portal-popup .lfr-dynamic-uploader,
.portal-popup .process-list {
  bottom: 0;
  display: block;
  left: 0;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 48px;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 576px) {
  .portal-popup .lfr-dynamic-uploader,
  .portal-popup .process-list {
    top: 48px;
  }
}
.portal-popup .portlet-export-import-publish-processes {
  top: 0;
}
.portal-popup .dialog-footer {
  background-color: #fff;
  border-top: 1px solid #e7e7ed;
  bottom: 0;
  display: flex;
  flex-direction: row-reverse;
  left: 0;
  margin: 0;
  padding: 10px 24px;
  width: 100%;
  z-index: 1020;
}
@media (min-width: 768px) {
  .portal-popup .dialog-footer {
    position: fixed;
  }
}
.portal-popup .dialog-footer .btn {
  margin-left: 1rem;
  margin-right: 0;
}
.portal-popup .dialog-footer.dialog-footer-not-reverse {
  flex-direction: initial;
  justify-content: flex-end;
}
@media (min-width: 768px) {
  .portal-popup .dialog-body:not(:last-child),
  .portal-popup .lfr-dynamic-uploader:not(:last-child),
  .portal-popup .lfr-form-content:not(:last-child),
  .portal-popup .portlet-configuration-body-content:not(:last-child),
  .portal-popup .roles-selector-body:not(:last-child) {
    padding-bottom: 60px;
  }
}
.portal-popup .lfr-dynamic-uploader {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.portal-popup .lfr-dynamic-uploader.hide-dialog-footer {
  bottom: 0;
}
.portal-popup .lfr-dynamic-uploader.hide-dialog-footer + .dialog-footer {
  display: none;
}
.portal-popup .portlet-configuration-edit-permissions .portlet-configuration-body-content {
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.portal-popup .portlet-configuration-edit-permissions .portlet-configuration-body-content > form {
  flex-grow: 1;
  max-width: none;
  overflow: auto;
}
.portal-popup .portlet-configuration-edit-templates .portlet-configuration-body-content {
  bottom: 0;
}
.portal-popup:not(.article-preview) #main-content,
.portal-popup:not(.article-preview) #wrapper {
  bottom: 0;
  left: 0;
  overflow: auto;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
}
@media print {
  .portal-popup:not(.article-preview) #main-content,
  .portal-popup:not(.article-preview) #wrapper {
    position: initial;
  }
}
.portal-popup .columns-max > .portlet-layout.row {
  margin-left: 0;
  margin-right: 0;
}
.portal-popup .columns-max > .portlet-layout.row > .portlet-column {
  padding-left: 0;
  padding-right: 0;
}

html:not(#__):not(#___) .portlet-layout.dragging {
  border-collapse: separate;
}
html:not(#__):not(#___) .drop-area {
  background-color: #d3dadd;
}
html:not(#__):not(#___) .active-area {
  background: #ffc;
}
html:not(#__):not(#___) .portlet-boundary.yui3-dd-dragging {
  opacity: 0.6;
}
html:not(#__):not(#___) .portlet-boundary.yui3-dd-dragging .portlet {
  border: 2px dashed #ccc;
}
html:not(#__):not(#___) .sortable-layout-proxy {
  opacity: 1;
}
html:not(#__):not(#___) .sortable-layout-proxy .portlet-topper {
  background-image: none;
}
html:not(#__):not(#___) .proxy {
  cursor: move;
  opacity: 0.65;
  position: absolute;
}
html:not(#__):not(#___) .proxy.generic-portlet {
  height: 200px;
  width: 300px;
}
html:not(#__):not(#___) .proxy.generic-portlet .portlet-title {
  padding: 10px;
}
html:not(#__):not(#___) .proxy.not-intersecting .forbidden-action {
  background: url(../images/application/forbidden_action.png) no-repeat;
  display: block;
  height: 32px;
  position: absolute;
  right: -15px;
  top: -15px;
  width: 32px;
}
html:not(#__):not(#___) .resizable-proxy {
  border: 1px dashed #828f95;
  position: absolute;
  visibility: hidden;
}
html:not(#__):not(#___) .sortable-proxy {
  background: #727c81;
  margin-top: 1px;
}
html:not(#__):not(#___) .sortable-layout-drag-target-indicator {
  margin: 2px 0;
}
html:not(#__):not(#___) .yui3-dd-proxy {
  z-index: 1110 !important;
}

.portlet-layout.dragging {
  border-collapse: separate;
}

.drop-area {
  background-color: #d3dadd;
}

.active-area {
  background: #ffc;
}

.portlet-boundary.yui3-dd-dragging {
  opacity: 0.6;
  transform: scale(0.8);
  transition: transform 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .portlet-boundary.yui3-dd-dragging {
    transition: none;
  }
}
.portlet-boundary.yui3-dd-dragging .portlet {
  border: 2px dashed #ccc;
}

.sortable-layout-proxy {
  opacity: 1;
}
.sortable-layout-proxy .portlet-topper {
  background-image: none;
}

.proxy {
  cursor: move;
  opacity: 0.65;
  position: absolute;
}
.proxy.generic-portlet {
  height: 200px;
  width: 300px;
}
.proxy.generic-portlet .portlet-title {
  padding: 10px;
}
.proxy.not-intersecting .forbidden-action {
  background: url(../images/application/forbidden_action.png) no-repeat;
  display: block;
  height: 32px;
  position: absolute;
  right: -15px;
  top: -15px;
  width: 32px;
}

.resizable-proxy {
  border: 1px dashed #828f95;
  position: absolute;
  visibility: hidden;
}

.sortable-proxy {
  background: #727c81;
  margin-top: 1px;
}

.sortable-layout-drag-target-indicator {
  margin: 2px 0;
}

.yui3-dd-proxy {
  z-index: 1110 !important;
}

.portlet-column-content.empty {
  padding: 50px;
}

.lfr-portlet-title-editable {
  margin-top: 0;
  z-index: 9999;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content {
  padding: 0;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .field-input {
  margin-bottom: 0;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .textfield-label {
  display: none;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .btn-toolbar-content {
  display: inline-block;
  vertical-align: bottom;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .btn-group {
  margin-top: 0;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .btn {
  display: inline-block;
  float: none;
  margin-top: 0;
  width: auto;
}

.lfr-source-editor {
  border: solid 0 #ccc;
  border-bottom-width: 2px;
  position: relative;
}
.lfr-source-editor .ace_editor {
  height: 100%;
}
.lfr-source-editor .lfr-source-editor-toolbar li > .btn {
  background-color: #fff;
  border: transparent;
  color: #717383;
  outline: 0;
}
.lfr-source-editor .lfr-source-editor-code {
  background-color: #fff;
  color: #2b4259;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter {
  background-color: #ededef;
  color: #868896;
  overflow: hidden;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget {
  font-family: fontawesome-alloy;
  text-align: center;
  vertical-align: middle;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget.ace_open, .lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget.ace_closed {
  background-image: none;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget.ace_open:before {
  content: "▾";
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget.ace_closed:before {
  content: "▸";
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_gutter-active-cell {
  color: #fff;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_gutter-active-line {
  background-color: #717383;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_gutter-layer {
  border-right: solid 1px #ccc;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_info {
  background-image: none;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_active-line {
  background-color: #ededef;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_constant {
  color: #34adab;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_tag {
  color: #1d5ec7;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_string {
  color: #ff6c58;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_string.ace_regex {
  color: #f00;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code {
  background-color: #47474f;
  color: #fff;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_gutter {
  background: #54555e;
  color: #fff;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_gutter .ace_gutter-active-line {
  background-color: #009aed;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_content .ace_active-line {
  background-color: #11394e;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_content .ace_cursor {
  color: #fff;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_content .ace_tag {
  color: #4d91ff;
}

.lfr-fullscreen-source-editor {
  height: 100%;
  overflow: hidden;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-header {
  height: 40px;
  margin-right: 4px;
  margin-top: 4px;
  min-height: 40px;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content {
  height: 95%;
  position: relative;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content .panel-splitter {
  border: 1px solid #ccc;
  position: absolute;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content .preview-panel {
  display: inline-block;
  overflow-y: auto;
  padding-left: 20px;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content .source-panel {
  display: inline-block;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.vertical .source-panel,
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.vertical .preview-panel {
  height: 100%;
  width: 50%;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.vertical .panel-splitter {
  height: 100%;
  left: 50%;
  top: 0;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.horizontal .source-panel,
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.horizontal .preview-panel {
  height: 50%;
  width: 100%;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.horizontal .panel-splitter {
  top: 50%;
  width: 100%;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.simple .panel-splitter,
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.simple .preview-panel {
  display: none;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.simple .source-panel {
  height: 100%;
  width: 100%;
}

.lfr-fulscreen-source-editor-dialog .modal-footer {
  text-align: left;
}

.file-icon-color-0 {
  background-color: #fff;
  color: #6b6c7e;
}

.file-icon-color-1 {
  background-color: #fff;
  color: #a7a9bc;
}

.file-icon-color-2 {
  background-color: #fff;
  color: #50d2a0;
}

.file-icon-color-3 {
  background-color: #fff;
  color: #af78ff;
}

.file-icon-color-4 {
  background-color: #fff;
  color: #ffb46e;
}

.file-icon-color-5 {
  background-color: #fff;
  color: #ff5f5f;
}

.file-icon-color-6 {
  background-color: #fff;
  color: #4b9bff;
}

.file-icon-color-7 {
  background-color: #fff;
  color: #272833;
}

.lfr-item-viewer.uploading > div:not(.progress-container) {
  opacity: 0.3;
}
.lfr-item-viewer.uploading > .progress-container {
  visibility: visible;
}
.lfr-item-viewer .aspect-ratio a.item-preview {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  position: absolute;
  width: 100%;
}
.lfr-item-viewer .image-viewer-base-image-list {
  padding-top: 35px;
}
.lfr-item-viewer .item-preview:hover {
  cursor: pointer;
}
.lfr-item-viewer .progress-container {
  background-color: #fff;
  left: 0;
  margin: 0 auto;
  padding: 20px 30px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  visibility: hidden;
  width: 80%;
  z-index: 1000;
}
.lfr-item-viewer .progress-container a {
  position: absolute;
  right: 30px;
}
.lfr-item-viewer .progress-container .progress {
  margin-top: 10px;
}
.lfr-item-viewer .search-info {
  background-color: #d3e8f1;
}
.lfr-item-viewer .search-info .keywords {
  font-size: 1.4em;
  font-weight: bold;
}
.lfr-item-viewer .search-info .change-search-folder {
  font-size: 0.8em;
  font-weight: normal;
}
.lfr-item-viewer .upload-view {
  display: table;
  height: 400px;
  margin-top: 20px;
  width: 100%;
}
.lfr-item-viewer .upload-view > div {
  display: table-cell;
  vertical-align: middle;
}
.lfr-item-viewer .yui3-widget-bd {
  position: relative;
}

.lfr-menu-expanded li a:focus {
  background-color: #5b677d;
  color: #fff;
  text-shadow: -1px -1px #2c2f34;
}

.lfr-url-error {
  display: inline-block;
  white-space: normal;
  overflow-wrap: break-all;
  word-wrap: break-all;
}

.lfr-page-layouts {
  padding: 0;
}
.lfr-page-layouts input[type=radio] {
  opacity: 0;
  position: absolute;
}
.lfr-page-layouts input[type=radio]:checked + .card-horizontal {
  cursor: default;
}
.lfr-page-layouts input[type=radio]:checked + .card-horizontal::after {
  bottom: 0px;
  content: "";
  left: 0px;
  position: absolute;
  right: 0px;
  transition: height 0.15s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .lfr-page-layouts input[type=radio]:checked + .card-horizontal::after {
    transition: none;
  }
}
.lfr-page-layouts .card-horizontal {
  border-width: 1px;
  box-shadow: none;
  cursor: pointer;
  outline: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .lfr-page-layouts .card-horizontal {
    transition: none;
  }
}
.lfr-page-layouts .card-horizontal::after {
  border-radius: 0 0 0.25rem 0.25rem;
  bottom: 0px;
  content: "";
  height: 0;
  left: 0px;
  position: absolute;
  right: 0px;
  transition: height 0.15s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .lfr-page-layouts .card-horizontal::after {
    transition: none;
  }
}
.modal-body.dialog-iframe-bd {
  overflow: hidden;
  padding: 0;
}

.modal-dialog:not(.dialog-iframe-modal):not(.modal-full-screen) {
  position: relative;
}
.modal-dialog.dialog-iframe-modal {
  max-width: none;
}
.modal-dialog.modal-dialog-sm {
  max-width: 600px;
}
.modal-dialog .yui3-resize-handles-wrapper {
  pointer-events: all;
}
.modal-dialog .yui3-resize-handles-wrapper .yui3-resize-handle-inner-br {
  bottom: 0;
  right: 0;
}

.modal-open .modal {
  display: block;
}

.sheet > .panel-group .sheet-footer {
  margin-bottom: 0;
}

.sheet-footer .btn {
  margin-right: 1rem;
}
.sheet-footer .btn:last-child {
  margin-right: 0;
}

.tag-items {
  list-style: none;
  margin: 0 1em 0 0;
  padding: 0 1em 0.5em;
  white-space: normal;
}
.tag-items li {
  display: inline-block;
  margin: 0 1em 0 0;
  max-width: 100%;
}

.tag-selected {
  color: #000;
  font-weight: bold;
  text-decoration: none;
}

.tag-cloud .tag-popularity-1 {
  font-size: 1em;
}
.tag-cloud .tag-popularity-2 {
  font-size: 1.3em;
}
.tag-cloud .tag-popularity-3 {
  font-size: 1.6em;
}
.tag-cloud .tag-popularity-4 {
  font-size: 1.9em;
}
.tag-cloud .tag-popularity-5 {
  font-size: 2.2em;
}
.tag-cloud .tag-popularity-6 {
  font-size: 2.5em;
}

.lfr-portal-tooltip {
  display: inline-flex;
}
.lfr-portal-tooltip,
.lfr-portal-tooltip a {
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.tree-node .icon-check {
  padding-right: 2px;
}
.tree-node .tree-node-checked .icon-check {
  padding-right: 0;
}
.tree-node [class^=icon-] {
  margin-right: 5px;
}
.tree-node .tree-node-checkbox-container {
  margin-right: 0;
}
.tree-node .tree-node-selected .tree-label {
  background: none;
}

.tree-node-content .tree-hitarea {
  color: #999;
  font-size: 10px;
  padding-right: 6px;
}
.tree-node-content .tree-label {
  margin-left: 3px;
}
.tree-node-content .tree-node-hidden-hitarea {
  visibility: hidden;
}

.tree-node-selected .tree-label {
  background-color: transparent;
}

.tree-view li.tree-node .tree-node-content svg.lexicon-icon {
  pointer-events: none;
}

.user-icon-color-0 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #e7e7ed;
  color: #6b6c7e;
}

.user-icon-color-1 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #e7e7ed;
  color: #4a97f2;
}

.user-icon-color-2 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #e7e7ed;
  color: #e87523;
}

.user-icon-color-3 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #e7e7ed;
  color: #fb625b;
}

.user-icon-color-4 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #e7e7ed;
  color: #4fa488;
}

.user-icon-color-5 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #e7e7ed;
  color: #fe4fb5;
}

.user-icon-color-6 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #e7e7ed;
  color: #879b7a;
}

.user-icon-color-7 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #e7e7ed;
  color: #af78ff;
}

.user-icon-color-8 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #e7e7ed;
  color: #bf8c2a;
}

.user-icon-color-9 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #e7e7ed;
  color: #5f9bc7;
}

.collapse.open {
  display: block;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20class='lexicon-icon-outline%20bars-line-top'%20d='M480%2064H32C14.336%2064%200%2049.664%200%2032S14.336%200%2032%200h448c17.664%200%2032%2014.336%2032%2032s-14.336%2032-32%2032z'%20fill='%23272833'/%3E%3Cpath%20class='lexicon-icon-outline%20bars-line-middle'%20d='M480%20288H32c-17.664%200-32-14.336-32-32s14.336-32%2032-32h448c17.664%200%2032%2014.336%2032%2032s-14.336%2032-32%2032z'%20fill='%23272833'/%3E%3Cpath%20class='lexicon-icon-outline%20bars-line-bottom'%20d='M480%20512H32c-17.664%200-32-14.336-32-32s14.336-32%2032-32h448c17.664%200%2032%2014.336%2032%2032s-14.336%2032-32%2032z'%20fill='%23272833'/%3E%3C/svg%3E");
  height: 1em;
  width: 1em;
}

.navbar-nav .nav-item.hover:after {
  bottom: -0.3125rem;
  content: "";
  height: 0.3125rem;
  left: 0;
  position: absolute;
  width: 100%;
}

.navbar .navbar-toggler .c-inner {
  max-width: none;
}

html:not(#__):not(#___) .cadmin.portlet-topper {
  position: relative;
}
html:not(#__):not(#___) .cadmin.portlet-topper .portlet-topper-toolbar .portlet-icon-back {
  background: url(../images/arrows/12_left.png) no-repeat 0 50%;
  padding: 5px 5px 5px 18px;
}
html:not(#__):not(#___) .cadmin.portlet-topper .portlet-topper-toolbar .portlet-options .lfr-icon-menu-text {
  display: none;
}
html:not(#__):not(#___) .cadmin .component-action.portlet-options {
  color: white;
}

body.portlet {
  border-width: 0;
}

.portlet-icon-back {
  margin-top: -2px;
}
.portlet-topper .portlet-topper-toolbar .portlet-icon-back {
  background: url(../images/arrows/12_left.png) no-repeat 0 50%;
  padding: 5px 5px 5px 18px;
}

.portlet-options-dropdown {
  z-index: 1035;
}

.portlet-topper {
  position: relative;
}
.portlet-topper .portlet-topper-toolbar .portlet-options .lfr-icon-menu-text {
  display: none;
}
.portlet-draggable .portlet-topper {
  cursor: move;
}

.portlet-title-editable {
  cursor: pointer;
}

.portlet-title-text {
  display: inline-block;
  margin-top: 0;
  max-width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
}
.panel-page-body .portlet-title-text, .panel-page-content .portlet-title-text {
  cursor: auto;
}

.portlet-minimized .portlet-content {
  padding: 0;
}

.portlet-nested-portlets .portlet-boundary {
  left: 0 !important;
  position: relative !important;
  top: 0 !important;
}

.portlet-layout .portlet-header {
  margin-bottom: 1rem;
}

@media (min-width: 576px) {
  .portlet .visible-interaction {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .controls-hidden .portlet .visible-interaction {
    display: none;
  }
}
.portlet:hover .visible-interaction, .portlet.open .visible-interaction, .portlet.focus .visible-interaction {
  display: block;
}

.controls-hidden .lfr-meta-actions,
.controls-hidden .lfr-configurator-visibility {
  display: none;
}
.controls-hidden .portlet-topper-toolbar {
  display: none !important;
}

html:not(#__):not(#___) .cadmin.portlet-topper {
  background-color: #f7f7f7;
  border-color: transparent;
  border-radius: 0 0;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  color: #6b6c7e;
  display: box;
  display: flex;
  padding: 3px 12px 3px 24px;
  position: relative;
}
html:not(#__):not(#___) .portlet > .cadmin.portlet-topper {
  display: none;
}
@media (min-width: 768px) {
  html:not(#__):not(#___) .portlet > .cadmin.portlet-topper {
    display: flex;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    transition: opacity 0.25s, transform 0.25s;
    top: 0;
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  html:not(#__):not(#___) .portlet > .cadmin.portlet-topper {
    transition: none;
  }
}
html:not(#__):not(#___) .cadmin .portlet-actions {
  float: right;
}
html:not(#__):not(#___) .cadmin .portlet-options {
  display: inline-block;
}
html:not(#__):not(#___) .cadmin .portlet-title-menu {
  flex: 0 1 auto;
}
html:not(#__):not(#___) .cadmin .portlet-title-menu > span > a {
  display: inline-block;
  text-decoration: none;
}
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar {
  margin: 0;
  padding-left: 0;
}
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar > a,
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar > span > a,
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar .lfr-icon-menu > a {
  color: #6b6c7e;
}
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar > a:focus, html:not(#__):not(#___) .cadmin .portlet-topper-toolbar > a:hover {
  text-decoration: none;
}
html:not(#__):not(#___) .cadmin .portlet-name-text {
  font-size: 14px;
  font-weight: 600;
}
html:not(#__):not(#___) .cadmin .portlet-title-default {
  flex: 1 1 auto;
  line-height: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 576px) {
  html:not(#__):not(#___) .lfr-configurator-visibility .portlet:hover .portlet-topper, html:not(#__):not(#___) .lfr-configurator-visibility .portlet.focus .portlet-topper, html:not(#__):not(#___) .lfr-configurator-visibility .portlet.open .portlet-topper {
    opacity: 0.5;
  }
}
@media (min-width: 768px) {
  html:not(#__):not(#___) .controls-visible .portlet:hover > .portlet-content-editable, html:not(#__):not(#___) .controls-visible .portlet.open > .portlet-content-editable, html:not(#__):not(#___) .controls-visible .portlet.focus > .portlet-content-editable {
    border-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}
@media (min-width: 768px) {
  html:not(#__):not(#___) .controls-visible .portlet:hover > .cadmin.portlet-topper, html:not(#__):not(#___) .controls-visible .portlet.open > .cadmin.portlet-topper, html:not(#__):not(#___) .controls-visible .portlet.focus > .cadmin.portlet-topper {
    opacity: 1;
    transform: translateY(-97%);
  }
}
@media (min-width: 768px) {
  html:not(#__):not(#___) .controls-visible .portlet.open > .cadmin.portlet-topper {
    transition-duration: 0ms;
  }
}
@media (max-width: 767.98px) {
  html:not(#__):not(#___) .controls-visible .cadmin.portlet-topper {
    display: box;
    display: flex;
  }
}
html:not(#__):not(#___) .controls-visible .cadmin .portlet-topper-toolbar {
  display: block;
}

.portlet {
  margin-bottom: 10px;
  position: relative;
}
@media (min-width: 768px) {
  .controls-visible .portlet:hover > .portlet-content-editable, .controls-visible .portlet.open > .portlet-content-editable, .controls-visible .portlet.focus > .portlet-content-editable {
    border-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}
@media (min-width: 768px) {
  .controls-visible .portlet:hover > .portlet-topper, .controls-visible .portlet.open > .portlet-topper, .controls-visible .portlet.focus > .portlet-topper {
    opacity: 1;
    transform: translateY(-97%);
  }
}
@media (min-width: 576px) {
  .lfr-configurator-visibility .portlet:hover .portlet-topper, .lfr-configurator-visibility .portlet.focus .portlet-topper, .lfr-configurator-visibility .portlet.open .portlet-topper {
    opacity: 0.5;
  }
}

.portlet-content-editable {
  border-color: transparent;
  border-radius: 0 0;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
}
.portlet > .portlet-content-editable {
  border-color: transparent;
}
@media (max-width: 767.98px) {
  .controls-visible .portlet-content-editable {
    border-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

.portlet-name-text {
  font-size: 0.875rem;
  font-weight: 600;
}

.portlet-options {
  display: inline-block;
}

.portlet-title-default {
  flex: 1 1 auto;
  line-height: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portlet-title-menu {
  flex: 0 1 auto;
}
.portlet-title-menu > span > a {
  display: inline-block;
  text-decoration: none;
}

.portlet-topper {
  background-color: #f7f7f7;
  border-color: transparent;
  border-radius: 0 0;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  color: #6b6c7e;
  display: box;
  display: flex;
  padding: 3px 12px 3px 24px;
  position: relative;
}
.portlet > .portlet-topper {
  display: none;
}
@media (min-width: 768px) {
  .portlet > .portlet-topper {
    display: flex;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    transition: opacity 0.25s, transform 0.25s;
    top: 0;
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .portlet > .portlet-topper {
    transition: none;
  }
}
@media (max-width: 767.98px) {
  .controls-visible .portlet-topper {
    display: box;
    display: flex;
  }
}

.portlet-topper-toolbar {
  margin: 0;
  padding-left: 0;
}
.portlet-topper-toolbar > a,
.portlet-topper-toolbar > span > a,
.portlet-topper-toolbar .lfr-icon-menu > a {
  color: #6b6c7e;
}
.portlet-topper-toolbar > a:focus, .portlet-topper-toolbar > a:hover {
  text-decoration: none;
}
.controls-visible .portlet-topper-toolbar {
  display: block;
}

.lfr-panel-page .portlet-title {
  font-size: 13px;
}

.portlet-borderless .portlet-content {
  padding: 1rem;
}
.portlet-decorate .portlet-content {
  background: #fff;
  border-color: transparent;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  padding: 1rem;
  word-wrap: break-word;
}
.portlet-barebone .portlet-content {
  padding: 0;
}

.portlet-dynamic-data-lists-display .lfr-ddm-field-group,
.portlet-dynamic-data-lists .lfr-ddm-field-group {
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 28px 24px;
}

.breadcrumb.breadcrumb-vertical {
  display: inline-block;
  text-align: center;
}
.breadcrumb.breadcrumb-vertical li {
  display: block;
}
.breadcrumb.breadcrumb-vertical li.last, .breadcrumb.breadcrumb-vertical li.only {
  background: none;
}
.breadcrumb.breadcrumb-vertical .divider {
  background: url(../images/arrows/07_down.png) no-repeat 50% 100%;
  display: block;
  height: 10px;
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
}

.navbar form {
  margin: 0;
}

:not(.inline-item) > .loading-animation {
  margin-bottom: 20px;
  margin-top: 20px;
}
.product-menu .loading-animation {
  margin-top: 160px;
}

@keyframes lfr-drop-active {
  0% {
    background-color: #ebebeb;
    border-color: #ddd;
  }
  50% {
    background-color: #ddedde;
    border-color: #7d7;
    transform: scale(1.1);
  }
  75% {
    background-color: #ddedde;
    border-color: #7d7;
  }
  100% {
    background-color: #ebebeb;
    border-color: #ddd;
  }
}
.lfr-upload-container .progress-bar,
.lfr-upload-container .progress {
  border-radius: 10px;
}
.lfr-upload-container .upload-file,
.lfr-upload-container .upload-target {
  border-radius: 5px;
}
.upload-drop-active .lfr-upload-container .upload-target {
  animation: none;
}
.upload-drop-intent .lfr-upload-container .upload-target {
  animation: lfr-drop-active 1s ease 0.2s infinite;
}

.select-files {
  border-radius: 5px;
}

.taglib-form-navigator > .form-steps > ul.form-navigator.list-group {
  box-shadow: none;
}
.taglib-form-navigator > .form-steps > ul.form-navigator.list-group .tab .tab-label:hover .number, .taglib-form-navigator > .form-steps > ul.form-navigator.list-group .tab .tab-label:focus .number {
  box-shadow: 0 0 5px 0 #333;
  transition-duration: 0.25s;
  transition-property: box-shadow;
  transition-timing-function: ease-out;
}
.taglib-form-navigator > .form-steps > ul.form-navigator.list-group .tab .tab-label .number {
  border-radius: 50%;
}

@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
.lfr-progress-active .progress-bar-status,
.lfr-upload-container .file-uploading .progress-bar .progress {
  animation: progress-bar-stripes 0.5s linear infinite;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0));
  background-size: 40px 40px;
  transition: width, 0.5s, ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .lfr-progress-active .progress-bar-status,
  .lfr-upload-container .file-uploading .progress-bar .progress {
    transition: none;
  }
}

@keyframes highlight-animation {
  from {
    background-color: #ffc;
  }
  to {
    background-color: transparent;
  }
}
.highlight-animation {
  animation: highlight-animation 0.7s;
}

.portlet-options.btn-group .dropdown-toggle, .portlet-options.btn-group.open .dropdown-toggle {
  box-shadow: none;
}

.form-group.form-inline.input-boolean-wrapper label, .form-group.form-inline.input-checkbox-wrapper label {
  gap: 0.3125rem;
}

/* TEA Modernized — design tokens
   OFFICIAL 7-color brand palette (per logo guidelines, 2026-04-30).
   Modernized type, spacing, radii, and elevation.
   Note: the @import url() for Plus Jakarta Sans + JetBrains Mono lives at
   the top of `_custom.scss` so it precedes all other rules in the
   compiled stylesheet. */
:root {
  /* Brand — OFFICIAL 7-color palette */
  /* 4) Royal Purple — primary action / nav */
  --tea-purple: #6D4ED2;
  --tea-purple-600: #5A3FB8;
  --tea-purple-50: #ECE7FA;
  /* 6) Magenta — primary accent / CTAs */
  --tea-pink: #D30EA2;
  --tea-pink-600: #B00B89;
  --tea-pink-50: #FBE2F4;
  /* 2) Cerise — secondary accent / chips */
  --tea-cerise: #D3408D;
  --tea-cerise-50: #FBE6F1;
  /* 3) Cornflower — info / links */
  --tea-blue: #5086FC;
  --tea-blue-50: #E5EDFF;
  /* 5) Cyan — progress / success chrome */
  --tea-cyan: #07B6D3;
  --tea-cyan-50: #D3F3F8;
  /* 1) Saffron — warnings / streaks */
  --tea-amber: #F7C116;
  --tea-amber-50: #FEF1CC;
  /* 7) Tangerine — energy / "You" / record */
  --tea-orange: #EB7127;
  --tea-orange-50: #FCE3D2;
  /* Neutrals — EXACT from original */
  --tea-ink: #121a26; /* mirage */
  --tea-ink-2: #2a3445;
  --tea-slate: #5b6478;
  --tea-mist: #a3a7ae; /* gray-chateau */
  --tea-rock: #a0aeca; /* rock-blue */
  --tea-line: #e1e1e1; /* bon-jour */
  --tea-line-2: #f2f4f8; /* original soft surface */
  --tea-bg: #f2f4f8; /* original page bg */
  --tea-surface: #ffffff;
  --tea-surface-2: #f8f9fc;
  /* Semantic */
  --tea-success: #16B981;
  --tea-warn: #F5A524;
  --tea-danger: #F04438;
  /* Elevation */
  --tea-shadow-sm: 0 1px 2px rgba(18,26,38,0.04), 0 1px 1px rgba(18,26,38,0.03);
  --tea-shadow: 0 8px 24px -12px rgba(18,26,38,0.10), 0 2px 4px rgba(18,26,38,0.04);
  --tea-shadow-lg: 0 24px 48px -20px rgba(18,26,38,0.18), 0 4px 8px rgba(18,26,38,0.04);
  /* Radii */
  --tea-r-xs: 6px;
  --tea-r-sm: 10px;
  --tea-r-md: 14px;
  --tea-r-lg: 20px;
  --tea-r-xl: 28px;
  --tea-r-pill: 999px;
  /* Type */
  --tea-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
  --tea-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --tea-font-ar: "Cairo", "Noto Sans Arabic", Arial, sans-serif;
  /* Gradient — official logo arc, 7 brand colors */
  --tea-gradient: linear-gradient(115deg, #F7C116 0%, #EB7127 14%, #D30EA2 32%, #D3408D 48%, #6D4ED2 64%, #5086FC 82%, #07B6D3 100%);
  --tea-gradient-soft: linear-gradient(135deg, #FEF1CC 0%, #FBE2F4 35%, #ECE7FA 65%, #D3F3F8 100%);
  --tea-gradient-purple-pink: linear-gradient(135deg, #6D4ED2 0%, #D30EA2 100%);
  --tea-gradient-warm: linear-gradient(135deg, #F7C116 0%, #EB7127 50%, #D30EA2 100%);
}

* {
  box-sizing: border-box;
}

.tea-root,
.tea-root * {
  font-family: var(--tea-font);
}

.tea-root {
  color: var(--tea-ink);
  background: var(--tea-bg);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

/* ---------- App shell ---------- */
.tea-app {
  display: grid;
  grid-template-columns: 244px 1fr;
  min-height: 100%;
  background: var(--tea-bg);
}

.tea-rail {
  background: var(--tea-surface);
  border-right: 1px solid var(--tea-line);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Allow rail to scroll when viewport is short */
  overflow-y: auto;
  /* Stick to full viewport height on desktop */
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100vh;
}

.tea-rail-head {
  display: flex;
  align-items: center;
  padding: 6px 8px 22px;
  border-bottom: 1px dashed var(--tea-line);
  margin-bottom: 18px;
  /* shell.jsx uses inline style; keep it here so it works without JS too */
  text-decoration: none;
  color: inherit;
}

.tea-rail-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--tea-gradient);
  display: grid;
  place-items: center;
  color: white;
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 6px 14px -6px rgba(109, 78, 210, 0.55);
}

.tea-rail-brand {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.tea-rail-brand small {
  display: block;
  font-weight: 500;
  color: var(--tea-mist);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tea-rail-greet {
  padding: 14px 12px;
  border-radius: var(--tea-r-md);
  background: var(--tea-gradient-soft);
  margin-bottom: 8px;
}

.tea-rail-greet h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.tea-rail-greet p {
  font-size: 12px;
  color: var(--tea-slate);
  margin: 4px 0 0;
}

.tea-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 6px;
}

.tea-nav-section {
  font-size: 11px;
  color: var(--tea-mist);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 10px 6px;
  font-weight: 600;
}

.tea-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--tea-r-sm);
  color: var(--tea-slate);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.tea-nav-item:hover {
  background: var(--tea-line-2);
  color: var(--tea-ink);
}

.tea-nav-item:focus-visible {
  outline: 2px solid var(--tea-purple);
  outline-offset: -2px;
  background: var(--tea-line-2);
  color: var(--tea-ink);
}

.tea-nav-item.is-active {
  background: var(--tea-purple-50);
  color: var(--tea-purple);
  font-weight: 600;
}

.tea-nav-item.is-active .tea-ic {
  color: var(--tea-purple);
}

.tea-nav-item .tea-ic {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--tea-mist);
}

.tea-nav-item .tea-pill {
  margin-left: auto;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: var(--tea-r-pill);
  background: var(--tea-pink);
  color: white;
  font-weight: 600;
}

.tea-rail-foot {
  margin-top: auto;
  padding: 12px;
  border-top: 1px dashed var(--tea-line);
  display: flex;
  align-items: center;
  gap: 10px;
}

.tea-rail-foot .ava {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.tea-rail-foot .who {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.tea-rail-foot .who small {
  display: block;
  color: var(--tea-mist);
  font-weight: 500;
  font-size: 11px;
}

.tea-rail-foot button {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--tea-mist);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
}

.tea-rail-foot button:hover {
  background: var(--tea-line-2);
  color: var(--tea-ink);
}

/* ---------- Top bar ---------- */
.tea-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tea-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 32px;
  border-bottom: 1px solid var(--tea-line);
  background: var(--tea-surface);
  /* Stick topbar at top of the content column while page scrolls */
  position: sticky;
  top: 0;
  z-index: 40;
}

.tea-search {
  flex: 1;
  max-width: 520px;
  position: relative;
}

.tea-search input {
  width: 100%;
  height: 44px;
  border-radius: var(--tea-r-md);
  border: 1px solid var(--tea-line);
  background: var(--tea-surface-2);
  padding: 0 16px 0 44px;
  font-size: 14px;
  font-family: var(--tea-font);
  color: var(--tea-ink);
  transition: border-color 0.15s, background 0.15s;
}

.tea-search input:focus {
  outline: none;
  border-color: var(--tea-purple);
  background: var(--tea-surface);
  box-shadow: 0 0 0 4px var(--tea-purple-50);
}

.tea-search .tea-ic {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--tea-mist);
}

.tea-search kbd {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--tea-mono);
  font-size: 11px;
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--tea-mist);
}

.tea-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.tea-icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--tea-r-sm);
  border: 1px solid var(--tea-line);
  background: var(--tea-surface);
  color: var(--tea-slate);
  cursor: pointer;
  position: relative;
  transition: background 0.15s, color 0.15s;
}

.tea-icon-btn:hover {
  background: var(--tea-line-2);
  color: var(--tea-ink);
}

.tea-icon-btn:focus-visible {
  outline: 2px solid var(--tea-purple);
  outline-offset: 2px;
}

.tea-icon-btn .tea-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tea-pink);
  box-shadow: 0 0 0 2px white;
}

.tea-top-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 4px;
  border-radius: var(--tea-r-pill);
  border: 1px solid var(--tea-line);
  background: var(--tea-surface);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
}

.tea-top-user img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.tea-top-user .ind {
  color: var(--tea-mist);
}

.tea-top-user:hover {
  background: var(--tea-line-2);
}

.tea-top-user:focus-visible {
  outline: 2px solid var(--tea-purple);
  outline-offset: 2px;
}

/* Language toggle button (LangToggle in shell.jsx) */
.tea-lang-btn {
  height: 40px;
  min-width: 56px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--tea-line);
  background: var(--tea-surface);
  color: var(--tea-ink);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--tea-font);
  transition: background 0.15s, border-color 0.15s;
}

.tea-lang-btn:hover {
  background: var(--tea-line-2);
  border-color: var(--tea-purple);
}

.tea-lang-btn:focus-visible {
  outline: 2px solid var(--tea-purple);
  outline-offset: 2px;
}

/* RTL icon flip — used by shell.jsx ArrowRight in NotifPopover */
.tea-flip-x {
  transform: scaleX(-1);
}

/* ---------- Generic content ---------- */
.tea-page {
  padding: 32px;
  min-width: 0;
}

.tea-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.tea-page-head > * {
  min-width: 0;
}

.tea-eyebrow {
  font-size: 12px;
  color: var(--tea-purple);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.tea-h1 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
  line-height: 1.1;
}

.tea-h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.tea-h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.tea-sub {
  font-size: 14px;
  color: var(--tea-slate);
  margin: 6px 0 0;
}

/* Buttons */
.tea-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--tea-r-sm);
  font-family: var(--tea-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s ease, box-shadow 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
}

.tea-btn:active {
  transform: translateY(1px);
}

.tea-btn--primary {
  background: var(--tea-ink);
  color: white;
}

.tea-btn--primary:hover {
  background: #000;
}

.tea-btn--purple {
  background: var(--tea-purple);
  color: white;
  box-shadow: 0 8px 18px -8px rgba(109, 78, 210, 0.6);
}

.tea-btn--purple:hover {
  background: var(--tea-purple-600);
}

.tea-btn--pink {
  background: var(--tea-pink);
  color: white;
  box-shadow: 0 8px 18px -8px rgba(211, 14, 162, 0.6);
}

.tea-btn--cyan {
  background: var(--tea-cyan);
  color: white;
  box-shadow: 0 8px 18px -8px rgba(7, 182, 211, 0.55);
}

.tea-btn--cyan:hover {
  background: #069BB4;
}

.tea-btn--orange {
  background: var(--tea-orange);
  color: white;
  box-shadow: 0 8px 18px -8px rgba(235, 113, 39, 0.55);
}

.tea-btn--orange:hover {
  background: #D6611B;
}

.tea-btn--ghost {
  background: transparent;
  color: var(--tea-ink);
  border-color: var(--tea-line);
}

.tea-btn--ghost:hover {
  background: var(--tea-line-2);
}

.tea-btn--sm {
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
}

.tea-btn--lg {
  height: 48px;
  padding: 0 22px;
  font-size: 15px;
}

/* Card */
.tea-card {
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-lg);
  padding: 20px;
  box-shadow: var(--tea-shadow-sm);
}

/* Tag/chip */
.tea-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--tea-r-pill);
  background: var(--tea-line-2);
  color: var(--tea-ink-2);
  letter-spacing: -0.01em;
}

.tea-chip--purple {
  background: var(--tea-purple-50);
  color: var(--tea-purple);
}

.tea-chip--pink {
  background: var(--tea-pink-50);
  color: var(--tea-pink);
}

.tea-chip--cyan {
  background: var(--tea-cyan-50);
  color: var(--tea-cyan);
}

.tea-chip--blue {
  background: var(--tea-blue-50);
  color: var(--tea-blue);
}

.tea-chip--ok {
  background: rgba(22, 185, 129, 0.1);
  color: var(--tea-success);
}

.tea-chip--warn {
  background: rgba(245, 165, 36, 0.12);
  color: #B27200;
}

/* Progress bar */
.tea-bar {
  position: relative;
  height: 6px;
  border-radius: var(--tea-r-pill);
  background: var(--tea-line-2);
  overflow: hidden;
}

.tea-bar > i {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--tea-gradient);
  border-radius: inherit;
}

/* Stat */
.tea-stat-num {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-feature-settings: "tnum";
}

.tea-stat-label {
  font-size: 12px;
  color: var(--tea-mist);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-top: 8px;
}

/* Avatar */
.tea-ava {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
}

.tea-ava-stack {
  display: inline-flex;
}

.tea-ava-stack .tea-ava + .tea-ava {
  margin-left: -8px;
}

/* Star */
.tea-stars {
  display: inline-flex;
  gap: 2px;
  color: #F7C116;
}

.tea-stars svg {
  width: 14px;
  height: 14px;
}

.tea-stars .off {
  color: var(--tea-line);
}

/* Utility */
.tea-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tea-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tea-spacer {
  flex: 1;
}

.tea-divider {
  height: 1px;
  background: var(--tea-line);
  margin: 16px 0;
}

.tea-mono {
  font-family: var(--tea-mono);
}

/* Skeleton placeholder image (subtly striped) */
.tea-img {
  display: block;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(135deg, rgba(109, 78, 210, 0.06) 0 8px, rgba(109, 78, 210, 0.02) 8px 16px), var(--tea-purple-50);
  border-radius: var(--tea-r-md);
  position: relative;
  color: var(--tea-purple);
  font-family: var(--tea-mono);
  font-size: 11px;
  display: grid;
  place-items: center;
}

/* ---------- Tabs (My / All Scenarios) ---------- */
.tea-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--tea-line);
  margin-bottom: 18px;
}

.tea-tab {
  appearance: none;
  background: transparent;
  border: none;
  font-family: var(--tea-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--tea-mist);
  padding: 12px 18px;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}

.tea-tab:hover {
  color: var(--tea-ink-2);
}

.tea-tab.is-active {
  color: var(--tea-purple);
  border-bottom-color: var(--tea-purple);
}

.tea-tab__count {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tea-line-2);
  color: var(--tea-mist);
  font-feature-settings: "tnum";
}

.tea-tab.is-active .tea-tab__count {
  background: var(--tea-purple-50);
  color: var(--tea-purple);
}

/* ---------- Toolbar (sort + search + filter) ---------- */
.tea-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--tea-line);
  margin-bottom: 18px;
}

.tea-toolbar__sort {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tea-toolbar__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--tea-mist);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 4px;
}

.tea-toolbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tea-toolbar__search {
  position: relative;
  display: flex;
  align-items: center;
  width: 280px;
  max-width: 100%;
}

.tea-toolbar__search svg {
  position: absolute;
  left: 12px;
  color: var(--tea-mist);
  pointer-events: none;
}

.tea-toolbar__search input {
  width: 100%;
  height: 36px;
  border-radius: var(--tea-r-sm);
  border: 1px solid var(--tea-line);
  background: var(--tea-surface-2);
  padding: 0 12px 0 34px;
  font-size: 13px;
  font-family: var(--tea-font);
  color: var(--tea-ink);
  transition: border-color 0.15s, background 0.15s;
}

.tea-toolbar__search input:focus {
  outline: none;
  border-color: var(--tea-purple);
  background: var(--tea-surface);
  box-shadow: 0 0 0 3px var(--tea-purple-50);
}

/* ---------- Pill button (sort options) ---------- */
.tea-pill-btn {
  appearance: none;
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  color: var(--tea-slate);
  font-family: var(--tea-font);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--tea-r-pill);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tea-pill-btn:hover {
  background: var(--tea-line-2);
  color: var(--tea-ink);
}

.tea-pill-btn.is-active {
  background: var(--tea-purple);
  color: white;
  border-color: var(--tea-purple);
  box-shadow: 0 6px 14px -8px rgba(109, 78, 210, 0.55);
}

/* ---------- Scenario row ---------- */
.tea-scenario-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tea-scenario-row {
  display: grid;
  grid-template-columns: 168px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--tea-line);
}

.tea-scenario-row:last-child {
  border-bottom: none;
}

.tea-scenario-row__thumb {
  width: 168px;
  height: 110px;
  border-radius: var(--tea-r-md);
  overflow: hidden;
  display: block;
  background: repeating-linear-gradient(135deg, rgba(109, 78, 210, 0.06) 0 8px, rgba(7, 182, 211, 0.04) 8px 16px), var(--tea-gradient-soft);
  box-shadow: var(--tea-shadow-sm);
}

.tea-scenario-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.tea-scenario-row__thumb:hover img {
  transform: scale(1.04);
}

.tea-scenario-row__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tea-scenario-row__title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--tea-purple);
  letter-spacing: -0.01em;
  text-decoration: none;
  line-height: 1.3;
}

.tea-scenario-row__title:hover {
  color: var(--tea-purple-600);
  text-decoration: underline;
}

.tea-scenario-row__rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--tea-mist);
}

.tea-scenario-row__votes {
  font-feature-settings: "tnum";
  font-weight: 600;
}

.tea-scenario-row__blurb {
  margin: 0;
  font-size: 13px;
  color: var(--tea-slate);
  line-height: 1.55;
  max-width: 720px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tea-scenario-row__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}

.tea-scenario-row__skills-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tea-mist);
  margin-right: 4px;
}

.tea-scenario-row__skills .tea-chip {
  font-size: 11px;
  padding: 4px 10px;
  background: var(--tea-line-2);
  color: var(--tea-slate);
  font-weight: 600;
}

.tea-scenario-row__action {
  flex-shrink: 0;
}

@media (max-width: 880px) {
  .tea-scenario-row {
    grid-template-columns: 120px 1fr;
    gap: 14px;
  }
  .tea-scenario-row__thumb {
    width: 120px;
    height: 80px;
  }
  .tea-scenario-row__action {
    grid-column: 1/-1;
    justify-self: end;
  }
}
/* ---------- Pagination ---------- */
.tea-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--tea-line);
}

.tea-pagination__pages {
  display: flex;
  gap: 4px;
}

.tea-page-btn {
  appearance: none;
  width: 34px;
  height: 34px;
  border-radius: var(--tea-r-sm);
  border: 1px solid var(--tea-line);
  background: var(--tea-surface);
  color: var(--tea-slate);
  font-family: var(--tea-font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-feature-settings: "tnum";
}

.tea-page-btn:hover {
  background: var(--tea-line-2);
  color: var(--tea-ink);
}

.tea-page-btn.is-active {
  background: var(--tea-purple);
  color: white;
  border-color: var(--tea-purple);
  box-shadow: 0 6px 14px -8px rgba(109, 78, 210, 0.55);
}

.tea-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------- Empty state ---------- */
.tea-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--tea-slate);
}

.tea-empty__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--tea-purple-50);
  color: var(--tea-purple);
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
}

.tea-empty h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--tea-ink);
}

.tea-empty p {
  font-size: 13px;
  margin: 0;
}

.tea-link {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  color: var(--tea-purple);
  font-weight: 700;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  text-decoration: underline;
}

/* ---------- Page footer ---------- */
.tea-page-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--tea-line);
  color: var(--tea-mist);
  font-size: 12px;
}

.tea-page-foot a {
  color: var(--tea-slate);
  text-decoration: none;
  margin-left: 18px;
}

.tea-page-foot a:hover {
  color: var(--tea-ink);
}

/* ---------- Scenario detail · Hero ---------- */
.tea-scenario-hero {
  display: flex;
  gap: 24px;
  padding: 22px;
  margin-bottom: 22px;
  align-items: flex-start;
}

.tea-scenario-hero__media {
  border-radius: var(--tea-r-md);
  overflow: hidden;
  background: var(--tea-line-2);
  width: 280px;
  height: 210px;
  flex-shrink: 0;
}

.tea-scenario-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tea-scenario-hero__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.tea-scenario-hero__title {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--tea-purple);
  margin: 0;
  line-height: 1.15;
}

.tea-scenario-hero__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--tea-mist);
}

.tea-scenario-hero__votes {
  font-feature-settings: "tnum";
  font-weight: 600;
  color: var(--tea-slate);
}

.tea-scenario-hero__divider {
  width: 1px;
  height: 14px;
  background: var(--tea-line);
}

.tea-scenario-hero__enrolled {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--tea-slate);
}

.tea-scenario-hero__blurb {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tea-slate);
  max-width: 70ch;
}

.tea-scenario-hero__skills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px dashed var(--tea-line);
  margin-top: 4px;
}

.tea-scenario-hero__skills-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tea-ink);
  margin-right: 6px;
}

@media (max-width: 880px) {
  .tea-scenario-hero {
    flex-direction: column;
    gap: 18px;
    padding: 18px;
  }
  .tea-scenario-hero__media {
    width: 100%;
    height: 200px;
  }
}
/* ---------- Scenario detail · Activity ---------- */
.tea-scenario-activity {
  padding: 26px;
}

.tea-scenario-activity__head {
  margin-bottom: 22px;
  max-width: 78ch;
}

.tea-phase-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

@media (max-width: 1180px) {
  .tea-phase-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 720px) {
  .tea-phase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .tea-phase-grid {
    grid-template-columns: 1fr;
  }
}
.tea-phase {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px;
  border-radius: var(--tea-r-md);
  background: var(--tea-line-2);
  color: var(--tea-ink);
  border: 1px solid var(--tea-line);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s, background 0.15s;
  min-height: 220px;
}

.tea-phase:hover {
  transform: translateY(-2px);
  border-color: var(--tea-purple-200, #d6cdf2);
  box-shadow: var(--tea-shadow-md);
}

.tea-phase__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tea-phase__eyebrow {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tea-mist);
}

.tea-phase__badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tea-phase__badge--done {
  background: rgba(34, 197, 94, 0.12);
  color: var(--tea-success);
}

.tea-phase__badge--active {
  background: var(--tea-purple-50);
  color: var(--tea-purple);
}

.tea-phase__badge--locked {
  background: var(--tea-line);
  color: var(--tea-mist);
}

.tea-phase__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: white;
  color: var(--tea-slate);
  border: 1px solid var(--tea-line);
  margin: 6px 0 4px;
}

.tea-phase__label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--tea-ink);
  text-wrap: pretty;
  flex: 1;
}

.tea-phase__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tea-purple);
  margin-top: auto;
}

/* state variants */
.tea-phase.is-done {
  background: white;
  border-color: var(--tea-line);
}

.tea-phase.is-done .tea-phase__icon {
  background: rgba(34, 197, 94, 0.1);
  color: var(--tea-success);
  border-color: rgba(34, 197, 94, 0.25);
}

.tea-phase.is-done .tea-phase__cta {
  color: var(--tea-success);
}

.tea-phase.is-active {
  background: var(--tea-purple);
  border-color: var(--tea-purple);
  color: white;
  box-shadow: 0 14px 28px -16px rgba(109, 78, 210, 0.55);
}

.tea-phase.is-active .tea-phase__eyebrow,
.tea-phase.is-active .tea-phase__label {
  color: white;
}

.tea-phase.is-active .tea-phase__icon {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
  color: white;
}

.tea-phase.is-active .tea-phase__cta {
  color: white;
}

.tea-phase.is-locked {
  background: var(--tea-line-2);
  cursor: not-allowed;
  opacity: 0.85;
}

.tea-phase.is-locked:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--tea-line);
}

.tea-phase.is-locked .tea-phase__icon {
  color: var(--tea-mist);
}

.tea-phase.is-locked .tea-phase__label {
  color: var(--tea-slate);
}

.tea-scenario-activity__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--tea-line);
}

/* ============================================================
   Phase Flow — slides, video, quiz, header/footer
   ============================================================ */
.tea-flow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.tea-flow-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tea-slate);
  text-decoration: none;
}

.tea-flow-back:hover {
  color: var(--tea-purple);
}

.tea-flow-crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--tea-mist);
  font-weight: 600;
}

.tea-flow-crumb__scenario {
  color: var(--tea-ink);
}

.tea-flow-crumb__phase {
  color: var(--tea-purple);
}

.tea-flow-crumb__sep {
  color: var(--tea-line);
}

.tea-flow-crumb__step {
  color: var(--tea-mist);
}

/* ----- Slide (gradient hero) ----- */
.tea-slide {
  position: relative;
  border-radius: var(--tea-r-lg);
  overflow: hidden;
  aspect-ratio: 16/9;
  color: white;
  box-shadow: var(--tea-shadow-lg);
  isolation: isolate;
}

.tea-slide__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1.5px), radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.5px);
  background-size: 14px 14px, 22px 22px;
  background-position: 0 0, 7px 11px;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.tea-slide__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 6% 7% 14%;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
}

.tea-slide__content h1, .tea-slide__content h2 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(20px, 3vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.tea-slide__content p {
  margin: 0;
  font-size: clamp(14px, 1.6vw, 22px);
  line-height: 1.45;
  opacity: 0.96;
}

.tea-slide__content .tea-slide__lead {
  font-weight: 800;
}

.tea-slide__content .tea-slide__highlight {
  color: #ffd44a;
  font-weight: 800;
}

.tea-slide__logo {
  position: absolute;
  right: 22px;
  bottom: 18px;
  width: 110px;
  max-width: 22%;
  z-index: 3;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
  opacity: 0.92;
}

.tea-slide__page {
  position: absolute;
  left: 16px;
  bottom: -28px;
  background: var(--tea-purple-50);
  color: var(--tea-purple);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
  z-index: 3;
}

/* ----- Slide grid (e.g. GROW: 4 boxes) ----- */
.tea-slide__grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  margin-top: 6px;
  text-align: left;
}

.tea-slide__grid-cell {
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(2px);
  padding: 14px 18px;
  border-radius: 10px;
  font-weight: 800;
  font-size: clamp(15px, 1.8vw, 22px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tea-slide__split {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  align-items: stretch;
}

.tea-slide__split > div {
  display: grid;
  place-items: center;
  padding: 5%;
}

/* "Yes!" badge slide */
.tea-slide__badge {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f43f5e, #d946ef);
  color: white;
  font-size: 32px;
  font-weight: 800;
  box-shadow: 0 18px 38px -10px rgba(219, 39, 119, 0.6), inset 0 0 0 6px rgba(255, 255, 255, 0.85);
}

/* ----- Flow footer (Previous / Next) ----- */
.tea-flow-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}

.tea-flow-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  cursor: pointer;
  border: none;
}

.tea-flow-btn--ghost {
  background: var(--tea-line-2);
  color: var(--tea-slate);
  border: 1px solid var(--tea-line);
}

.tea-flow-btn--ghost:hover {
  background: white;
  color: var(--tea-ink);
}

.tea-flow-btn--purple {
  background: var(--tea-purple);
  color: white;
  box-shadow: 0 8px 18px -10px rgba(109, 78, 210, 0.55);
}

.tea-flow-btn--purple:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px -10px rgba(109, 78, 210, 0.65);
}

/* ----- Video player ----- */
.tea-video {
  background: #0b0b14;
  border-radius: var(--tea-r-md);
  overflow: hidden;
  box-shadow: var(--tea-shadow-lg);
}

.tea-video__stage {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.tea-video__poster img {
  width: 50%;
  opacity: 0.9;
}

.tea-video__frame {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tea-video__ended {
  width: 100%;
  height: 100%;
  background: #000;
}

.tea-video__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #0f0f1a;
  color: rgba(255, 255, 255, 0.85);
}

.tea-video__btn {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.tea-video__btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.tea-video__bar {
  position: relative;
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
}

.tea-video__bar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, #38bdf8, #6d4ed2);
  border-radius: 2px;
}

.tea-video__handle {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.tea-video__time {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 12px;
  min-width: 46px;
  text-align: right;
  color: rgba(255, 255, 255, 0.7);
}

.tea-video__vol {
  position: relative;
  width: 60px;
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
}

.tea-video__vol i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: #38bdf8;
  border-radius: 2px;
}

/* ----- Question / quiz card ----- */
.tea-qcard {
  background: white;
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-md);
  padding: 32px;
  box-shadow: var(--tea-shadow-sm);
  max-width: 880px;
  margin: 0 auto;
}

.tea-qcard__title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 22px;
  color: var(--tea-ink);
  text-wrap: balance;
}

.tea-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tea-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--tea-r-sm);
  border: 1px solid var(--tea-line);
  cursor: pointer;
  background: white;
  transition: border-color 0.15s, background 0.15s;
}

.tea-choice:hover {
  border-color: var(--tea-purple-200, #d6cdf2);
  background: var(--tea-line-2);
}

.tea-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tea-choice__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--tea-line);
  flex-shrink: 0;
  margin-top: 2px;
  display: grid;
  place-items: center;
  transition: border-color 0.15s;
}

.tea-choice.is-on .tea-choice__dot {
  border-color: var(--tea-purple);
}

.tea-choice.is-on .tea-choice__dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tea-purple);
}

.tea-choice.is-on {
  border-color: var(--tea-purple);
  background: var(--tea-purple-50);
}

.tea-choice__txt {
  font-size: 13px;
  line-height: 1.5;
  color: var(--tea-ink);
}

.tea-qcard__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.tea-qcard__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--tea-ink);
  margin: 0 0 8px;
}

.tea-qcard__textarea {
  width: 100%;
  min-height: 110px;
  padding: 12px 14px;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-sm);
  background: white;
  resize: vertical;
}

.tea-qcard__textarea:focus {
  outline: none;
  border-color: var(--tea-purple);
}

.tea-qcard__readonly {
  background: var(--tea-line-2);
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-sm);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tea-slate);
  white-space: pre-wrap;
}

.tea-qcard__verdict {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 14px;
}

.tea-qcard__verdict--wrong {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
}

.tea-qcard__verdict--right {
  background: rgba(34, 197, 94, 0.12);
  color: var(--tea-success);
}

.tea-qcard__correct {
  background: rgba(34, 197, 94, 0.08);
  border-left: 3px solid var(--tea-success);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--tea-ink);
  margin-bottom: 16px;
  border-radius: var(--tea-r-sm);
}

.tea-qcard__rating {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 18px;
}

.tea-qcard__rating-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--tea-ink);
}

.tea-rating {
  display: inline-flex;
  gap: 4px;
  background: white;
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-sm);
  padding: 6px;
  width: fit-content;
}

.tea-rating button {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid var(--tea-line);
  background: white;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--tea-slate);
  font-feature-settings: "tnum";
}

.tea-rating button.is-on,
.tea-rating button:hover {
  background: var(--tea-purple);
  color: white;
  border-color: var(--tea-purple);
}

.tea-rating-foot {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--tea-mist);
  margin-top: 6px;
  max-width: 312px;
}

.tea-qcard__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 22px;
}

/* ============================================================
   Practice landing (Phase 3 · #28)
   ============================================================ */
.tea-practice-intro {
  background: white;
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-md);
  padding: 22px 28px;
  margin-bottom: 22px;
  box-shadow: var(--tea-shadow-sm);
}

.tea-practice-intro__lede {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tea-slate);
  text-wrap: pretty;
}

.tea-practice-intro__lede strong {
  color: var(--tea-ink);
}

.tea-practice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.tea-practice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-md);
  overflow: hidden;
  box-shadow: var(--tea-shadow-sm);
  transition: box-shadow 0.15s, transform 0.15s;
}

.tea-practice-card:hover {
  box-shadow: var(--tea-shadow-lg);
  transform: translateY(-2px);
}

.tea-practice-card__head {
  padding: 22px 24px 18px;
  color: white;
}

.tea-practice-card--purple .tea-practice-card__head {
  background: linear-gradient(135deg, #6d4ed2 0%, #a855f7 100%);
}

.tea-practice-card--green .tea-practice-card__head {
  background: linear-gradient(135deg, #10b981 0%, #38bdf8 100%);
}

.tea-practice-card__eyebrow {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.tea-practice-card__head h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.tea-practice-card__body {
  padding: 22px 24px;
  flex: 1;
}

.tea-practice-card__body p {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--tea-slate);
}

.tea-practice-card__body ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tea-practice-card__body li {
  position: relative;
  padding-left: 22px;
  font-size: 13px;
  color: var(--tea-slate);
  line-height: 1.5;
}

.tea-practice-card__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--tea-purple-50);
  border: 2px solid var(--tea-purple);
}

.tea-practice-card--green .tea-practice-card__body li::before {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
}

.tea-practice-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 24px 24px;
  padding: 12px 18px;
  background: var(--tea-purple);
  color: white;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.15s;
}

.tea-practice-card__cta:hover {
  transform: translateY(-1px);
}

.tea-practice-card__cta--green {
  background: #10b981;
}

/* ============================================================
   SimuTutor (Phase 3 · #29-32)
   ============================================================ */
.tea-sim {
  background: white;
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-md);
  padding: 28px;
  box-shadow: var(--tea-shadow-sm);
}

.tea-sim__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.tea-sim__top h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--tea-ink);
}

.tea-sim__count {
  font-size: 12px;
  color: var(--tea-mist);
  font-weight: 600;
}

.tea-sim__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.tea-sim__prompt, .tea-sim__rec {
  background: var(--tea-line-2);
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tea-sim__prompt-head {
  padding: 12px 18px;
  background: linear-gradient(135deg, #6d4ed2, #a855f7);
  color: white;
  font-size: 13px;
  font-weight: 700;
}

.tea-sim__prompt-body {
  padding: 22px;
  flex: 1;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tea-ink);
}

.tea-sim__prompt-body p {
  margin: 0;
  text-wrap: pretty;
}

.tea-sim__rec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: linear-gradient(135deg, #f97c5b, #f43f5e);
  color: white;
  font-size: 13px;
  font-weight: 700;
}

.tea-sim__rec-head .tea-icon-btn {
  color: white;
  background: rgba(255, 255, 255, 0.18);
}

.tea-sim__rec-head .tea-icon-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.tea-sim__stage {
  position: relative;
  aspect-ratio: 4/3;
  background: #1c1d2b;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.tea-sim__cam-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.tea-sim__cam-empty p {
  margin: 0;
}

.tea-sim__playback {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tea-sim__playbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #14141f;
  color: rgba(255, 255, 255, 0.85);
}

.tea-sim__playbtn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.18);
  color: white;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.tea-sim__playbtn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.tea-sim__progress {
  position: relative;
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
}

.tea-sim__progress i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--tea-pink);
  border-radius: 2px;
}

.tea-sim__time {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 11px;
}

.tea-sim__hint {
  margin: 18px 0 0;
  background: var(--tea-warning-50, #fff8e6);
  border: 1px solid #f5e3b8;
  border-radius: var(--tea-r-sm);
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.55;
  color: #876f3a;
  text-align: center;
}

.tea-sim__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.tea-sim__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.tea-sim__btn:hover {
  transform: translateY(-1px);
}

.tea-sim__btn--rec {
  background: linear-gradient(135deg, #ef4444, #f43f5e);
  color: white;
  box-shadow: 0 8px 20px -10px rgba(244, 63, 94, 0.6);
}

.tea-sim__btn-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
  animation: tea-rec-pulse 1.6s infinite;
}

@keyframes tea-rec-pulse {
  50% {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.15);
  }
}
.tea-sim__btn--re {
  background: #10b981;
  color: white;
  box-shadow: 0 8px 20px -10px rgba(16, 185, 129, 0.55);
}

.tea-sim__btn--save {
  background: linear-gradient(135deg, #f97c5b, #f43f5e);
  color: white;
  box-shadow: 0 8px 20px -10px rgba(244, 63, 94, 0.55);
}

/* ============================================================
   Self-assessment (Phase 3 · #33)
   ============================================================ */
.tea-assess {
  background: white;
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-md);
  padding: 28px;
  box-shadow: var(--tea-shadow-sm);
}

.tea-assess__hero {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 22px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--tea-line);
  margin-bottom: 22px;
}

.tea-assess__hero h2 {
  margin: 0;
  font-size: 22px;
  color: var(--tea-purple);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.tea-assess__hero img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: var(--tea-r-sm);
}

.tea-assess__meta {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 6px 0 12px;
  font-size: 12px;
  color: var(--tea-mist);
}

.tea-assess__stars {
  color: #f59e0b;
  font-size: 13px;
  letter-spacing: 1px;
}

.tea-assess__stars em {
  color: var(--tea-mist);
  font-style: normal;
  font-size: 12px;
  margin-left: 4px;
}

.tea-assess__count {
  color: var(--tea-slate);
}

.tea-assess__lede {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--tea-slate);
  text-wrap: pretty;
}

.tea-assess__skills {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

.tea-assess__skill-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--tea-mist);
  margin-right: 4px;
}

.tea-assess__h3 {
  margin: 18px 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--tea-ink);
}

.tea-assess__sub {
  margin: 0 0 16px;
  font-size: 12px;
  color: var(--tea-mist);
}

.tea-assess__table {
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-sm);
  overflow: hidden;
  margin-bottom: 18px;
}

.tea-assess__thead, .tea-assess__row {
  display: grid;
  grid-template-columns: 1.4fr 2.5fr 0.9fr 1.1fr;
  gap: 14px;
  padding: 12px 16px;
  font-size: 12px;
  align-items: start;
}

.tea-assess__thead {
  background: var(--tea-line-2);
  color: var(--tea-mist);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}

.tea-assess__row {
  border-top: 1px solid var(--tea-line);
  background: white;
}

.tea-assess__row:nth-child(odd) {
  background: rgba(248, 249, 253, 0.5);
}

.tea-assess__cell {
  font-size: 12px;
  line-height: 1.55;
  color: var(--tea-slate);
}

.tea-assess__cell--prompt {
  font-weight: 700;
  color: var(--tea-ink);
}

.tea-assess__cell--desc {
  font-size: 12px;
}

.tea-assess__watch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--tea-cyan);
  color: white;
  border: none;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.tea-assess__watch:hover {
  filter: brightness(1.05);
}

.tea-assess__select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--tea-line);
  border-radius: 6px;
  font-size: 12px;
  background: white;
  color: var(--tea-ink);
  cursor: pointer;
}

.tea-assess__comments {
  margin-top: 14px;
}

.tea-assess__comments label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--tea-ink);
  margin-bottom: 6px;
}

/* ============================================================
   LiveTutor (Phase 4)
   ============================================================ */
.tea-livetutor {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 18px;
}

.tea-livetutor__panel {
  background: white;
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-md);
  padding: 24px;
  box-shadow: var(--tea-shadow-sm);
}

.tea-livetutor__panel header {
  margin-bottom: 14px;
}

.tea-livetutor__eyebrow {
  display: inline-block;
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
  white-space: nowrap;
}

.tea-practice-card__eyebrow {
  white-space: nowrap;
}

.tea-livetutor__panel h3 {
  margin: 0;
  font-size: 18px;
  color: var(--tea-ink);
  font-weight: 700;
}

.tea-livetutor__panel ol {
  margin: 6px 0 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: lt;
}

.tea-livetutor__panel li {
  counter-increment: lt;
  position: relative;
  padding-left: 36px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--tea-slate);
}

.tea-livetutor__panel li::before {
  content: counter(lt);
  position: absolute;
  left: 0;
  top: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tea-purple-50);
  color: var(--tea-purple);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
}

.tea-livetutor__panel li strong {
  color: var(--tea-ink);
}

.tea-livetutor__tutors {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tea-livetutor__tutor {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  background: white;
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-md);
  padding: 12px 14px;
  box-shadow: var(--tea-shadow-sm);
}

.tea-livetutor__tutor img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.tea-livetutor__tutor strong {
  display: block;
  font-size: 13px;
  color: var(--tea-ink);
}

.tea-livetutor__tutor small {
  font-size: 11px;
  color: var(--tea-mist);
}

.tea-tag {
  display: inline-flex;
  align-items: center;
  background: var(--tea-purple-50);
  color: var(--tea-purple);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.tea-tag--green {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

/* booking grid */
.tea-livebook {
  background: white;
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-md);
  padding: 24px 28px;
  box-shadow: var(--tea-shadow-sm);
}

.tea-livebook h2 {
  margin: 0;
  font-size: 18px;
  color: var(--tea-ink);
  font-weight: 700;
}

.tea-livebook__sub {
  margin: 4px 0 18px;
  font-size: 12px;
  color: var(--tea-mist);
}

.tea-livebook__sub a {
  color: var(--tea-purple);
  text-decoration: none;
  font-weight: 600;
}

.tea-livebook__grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.tea-livebook__head, .tea-livebook__row {
  display: grid;
  grid-template-columns: 70px repeat(5, 1fr);
  gap: 8px;
  align-items: center;
}

.tea-livebook__head span {
  font-size: 11px;
  font-weight: 700;
  color: var(--tea-mist);
  text-align: center;
  padding: 6px 0;
}

.tea-livebook__time {
  font-size: 12px;
  color: var(--tea-mist);
  font-weight: 600;
}

.tea-livebook__cell {
  border: 1px solid var(--tea-line);
  background: white;
  border-radius: 8px;
  padding: 10px 0;
  font-size: 12px;
  color: var(--tea-slate);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.tea-livebook__cell:hover {
  background: var(--tea-purple-50);
  border-color: var(--tea-purple);
  color: var(--tea-purple);
}

.tea-livebook__cell.is-on {
  background: var(--tea-purple);
  color: white;
  border-color: var(--tea-purple);
}

.tea-livebook__cell.is-taken {
  background: var(--tea-line-2);
  color: var(--tea-mist);
  cursor: not-allowed;
}

.tea-livebook__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--tea-line);
  padding-top: 16px;
  font-size: 13px;
  color: var(--tea-slate);
}

/* booked confirmation */
.tea-livebooked {
  background: white;
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-md);
  padding: 40px 28px;
  text-align: center;
  box-shadow: var(--tea-shadow-sm);
}

.tea-livebooked__check {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 18px;
  background: rgba(16, 185, 129, 0.15);
  color: #047857;
  display: grid;
  place-items: center;
}

.tea-livebooked h2 {
  margin: 0;
  font-size: 22px;
  color: var(--tea-ink);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.tea-livebooked p {
  margin: 10px auto 22px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--tea-slate);
  max-width: 480px;
}

.tea-livebooked__cta {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ==============================================================
   PART A — Phase 3 redesign (.tea-prac, .tea-prac-card, .tea-sim2)
   ============================================================== */
.tea-prac__hero {
  background: white;
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-lg);
  padding: 28px 32px;
  margin-bottom: 18px;
  box-shadow: var(--tea-shadow-sm);
}

.tea-prac__kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tea-purple);
  background: var(--tea-purple-50);
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.tea-prac__title {
  margin: 0 0 8px;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tea-ink);
}

.tea-prac__lede {
  margin: 0;
  max-width: 680px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tea-slate);
  text-wrap: pretty;
}

.tea-prac__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 14px;
}

.tea-prac-card {
  position: relative;
  display: grid;
  grid-template-columns: 220px 1fr;
  background: white;
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-lg);
  overflow: hidden;
  box-shadow: var(--tea-shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tea-prac-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--tea-shadow-lg);
}

.tea-prac-card__art {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.tea-prac-card--purple .tea-prac-card__art {
  background: linear-gradient(135deg, #6d4ed2 0%, #a855f7 55%, #ec4899 100%);
}

.tea-prac-card--teal .tea-prac-card__art {
  background: linear-gradient(135deg, #0ea5b7 0%, #10b981 55%, #38bdf8 100%);
}

.tea-prac-card__icon {
  position: relative;
  z-index: 2;
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.15));
}

.tea-prac-card__blobs {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.tea-prac-card__blobs i {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  filter: blur(20px);
}

.tea-prac-card__blobs i:nth-child(1) {
  width: 140px;
  height: 140px;
  top: -30px;
  left: -30px;
}

.tea-prac-card__blobs i:nth-child(2) {
  width: 110px;
  height: 110px;
  bottom: -30px;
  right: -20px;
  background: rgba(255, 255, 255, 0.25);
}

.tea-prac-card__blobs i:nth-child(3) {
  width: 70px;
  height: 70px;
  top: 40%;
  right: 30%;
  background: rgba(255, 255, 255, 0.12);
}

.tea-prac-card__body {
  padding: 24px 26px 22px;
  display: flex;
  flex-direction: column;
}

.tea-prac-card__chip {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tea-mist);
  background: var(--tea-line-2);
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.tea-prac-card__body h3 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--tea-ink);
}

.tea-prac-card__body p {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--tea-slate);
  text-wrap: pretty;
}

.tea-prac-card__list {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tea-prac-card__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--tea-ink-2);
}

.tea-prac-card--purple .tea-prac-card__list li svg {
  color: #a855f7;
}

.tea-prac-card--teal .tea-prac-card__list li svg {
  color: #10b981;
}

.tea-prac-card__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding: 10px 18px;
  border-radius: var(--tea-r-md);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: white;
  transition: transform 0.15s, box-shadow 0.15s;
}

.tea-prac-card--purple .tea-prac-card__cta {
  background: linear-gradient(135deg, #6d4ed2, #a855f7);
  box-shadow: 0 8px 18px -10px rgba(168, 85, 247, 0.6);
}

.tea-prac-card--teal .tea-prac-card__cta {
  background: linear-gradient(135deg, #10b981, #0ea5b7);
  box-shadow: 0 8px 18px -10px rgba(16, 185, 129, 0.6);
}

.tea-prac-card__cta:hover {
  transform: translateY(-1px);
}

.tea-prac__hint {
  margin: 18px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--tea-mist);
}

/* ----- SimuTutor v2 ----- */
.tea-sim2 {
  background: white;
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-lg);
  padding: 22px;
  box-shadow: var(--tea-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tea-sim2__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 4px 14px;
  border-bottom: 1px solid var(--tea-line);
  flex-wrap: wrap;
}

.tea-sim2__bar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.tea-sim2__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--tea-purple);
  letter-spacing: -0.005em;
}

.tea-sim2__brand-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tea-purple);
  box-shadow: 0 0 0 4px var(--tea-purple-50);
}

.tea-sim2__sep {
  width: 1px;
  height: 16px;
  background: var(--tea-line);
}

.tea-sim2__progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--tea-mist);
}

.tea-sim2__progress strong {
  color: var(--tea-ink);
  font-weight: 700;
}

.tea-sim2__pip {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: var(--tea-line);
}

.tea-sim2__pip.is-on {
  background: linear-gradient(90deg, #6d4ed2, #a855f7);
}

.tea-sim2__pip.is-done {
  background: var(--tea-purple);
  opacity: 0.55;
}

.tea-sim2__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
}

.tea-sim2__status.is-ready {
  background: var(--tea-line-2);
  color: var(--tea-ink-2);
}

.tea-sim2__status.is-review {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.tea-sim2__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.tea-sim2__status.is-review .tea-sim2__status-dot {
  background: #10b981;
}

.tea-sim2__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 18px;
}

.tea-sim2__prompt {
  background: linear-gradient(135deg, #f8f3ff 0%, #fdf2f8 100%);
  border: 1px solid #ead8ff;
  border-radius: var(--tea-r-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tea-sim2__chip {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tea-purple);
  background: white;
  padding: 5px 10px;
  border: 1px solid #e9d5ff;
}

.tea-sim2__prompt-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--tea-ink);
  text-wrap: pretty;
  letter-spacing: -0.005em;
}

.tea-sim2__tip {
  margin-top: auto;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fff8e6;
  border: 1px solid #fde68a;
  border-radius: var(--tea-r-sm);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #78350f;
}

.tea-sim2__cam {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tea-sim2__cam-frame {
  position: relative;
  aspect-ratio: 16/11;
  background: linear-gradient(180deg, #1a1426 0%, #0d0a18 100%);
  border-radius: var(--tea-r-md);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.tea-sim2__cam-corners {
  position: absolute;
  inset: 12px;
  pointer-events: none;
}

.tea-sim2__cam-corners i {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.45);
}

.tea-sim2__cam-corners i:nth-child(1) {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}

.tea-sim2__cam-corners i:nth-child(2) {
  top: 0;
  right: 0;
  border-left: 0;
  border-bottom: 0;
}

.tea-sim2__cam-corners i:nth-child(3) {
  bottom: 0;
  left: 0;
  border-right: 0;
  border-top: 0;
}

.tea-sim2__cam-corners i:nth-child(4) {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
}

.tea-sim2__cam-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: white;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  padding: 5px 10px;
  border-radius: 999px;
  z-index: 3;
}

.tea-sim2__cam-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
}

.tea-sim2__cam-dot.is-live {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.35);
  animation: tea-pulse 1.4s ease-in-out infinite;
}

@keyframes tea-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.35);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.1);
  }
}
.tea-sim2__cam-cog {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.14);
  color: white;
  display: grid;
  place-items: center;
  z-index: 3;
}

.tea-sim2__cam-cog:hover {
  background: rgba(255, 255, 255, 0.24);
}

.tea-sim2__cam-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

.tea-sim2__cam-empty strong {
  color: white;
  font-size: 13px;
  font-weight: 700;
}

.tea-sim2__cam-empty span {
  font-size: 11px;
}

.tea-sim2__cam-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── CameraSetupPanel diagnostic overlay ────────────────────────────── */
.tea-diag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 14px;
  text-align: center;
  width: 100%;
  color: rgba(255, 255, 255, 0.85);
  box-sizing: border-box;
  overflow-y: auto;
}

.tea-diag__title {
  font-size: 13px;
  font-weight: 700;
  color: white;
  margin: 2px 0 0;
}

.tea-diag__sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  line-height: 1.45;
  max-width: 260px;
}

.tea-diag__checks {
  list-style: none;
  padding: 0;
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  max-width: 260px;
  text-align: left;
}

.tea-diag__check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}

.tea-diag__check-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.25);
}

.tea-diag__check.is-pass .tea-diag__check-dot {
  background: var(--tea-success, #10b981);
}

.tea-diag__check.is-fail .tea-diag__check-dot {
  background: var(--tea-danger, #ef4444);
}

.tea-diag__check.is-warn .tea-diag__check-dot {
  background: var(--tea-warn, #f59e0b);
}

.tea-diag__check.is-pending .tea-diag__check-dot {
  background: rgba(255, 255, 255, 0.5);
  animation: tea-pulse 1.4s ease-in-out infinite;
}

.tea-diag__steps {
  width: 100%;
  max-width: 280px;
  text-align: left;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}

.tea-diag__steps p {
  margin: 0 0 4px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.tea-diag__steps ol {
  margin: 0;
  padding-left: 16px;
  line-height: 1.65;
}

.tea-diag__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--tea-r-sm, 6px);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 2px;
}

.tea-diag__btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

.tea-sim2__transport {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--tea-line-2);
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-md);
  padding: 8px 12px;
}

.tea-sim2__transport-play {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #6d4ed2, #a855f7);
  color: white;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 14px -8px rgba(168, 85, 247, 0.6);
}

.tea-sim2__wave {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 32px;
}

.tea-sim2__wave i {
  flex: 1;
  background: linear-gradient(180deg, #a855f7, #6d4ed2);
  border-radius: 1px;
  min-width: 2px;
}

.tea-sim2__transport-time {
  font-family: var(--tea-mono);
  font-size: 11px;
  color: var(--tea-mist);
  min-width: 88px;
  text-align: right;
}

.tea-sim2__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 6px;
  border-top: 1px solid var(--tea-line);
  padding: 14px 4px 4px;
  flex-wrap: wrap;
}

.tea-sim2__actions-hint {
  font-size: 12px;
  color: var(--tea-mist);
}

.tea-sim2__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--tea-r-md);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  cursor: pointer;
  border: none;
}

.tea-sim2__btn--ghost {
  background: white;
  color: var(--tea-ink);
  border: 1px solid var(--tea-line);
}

.tea-sim2__btn--ghost:hover {
  background: var(--tea-line-2);
}

.tea-sim2__btn--rec {
  background: linear-gradient(135deg, #ef4444, #f43f5e);
  color: white;
  box-shadow: 0 10px 22px -10px rgba(244, 63, 94, 0.55);
}

.tea-sim2__btn--rec:hover {
  transform: translateY(-1px);
}

.tea-sim2__rec-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
  animation: tea-pulse-light 1.4s ease-in-out infinite;
}

@keyframes tea-pulse-light {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.1);
  }
}
.tea-sim2__btn--save {
  background: linear-gradient(135deg, #f97c5b, #f43f5e);
  color: white;
  box-shadow: 0 10px 22px -10px rgba(244, 63, 94, 0.55);
}

.tea-sim2__btn--save:hover {
  transform: translateY(-1px);
}

/* ==============================================================
   PART B — Phase 4 redesign (.tea-lt, .tea-cal, .tea-booked)
   ============================================================== */
.tea-lt__hero {
  background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 50%, #eff6ff 100%);
  border: 1px solid #bae6fd;
  border-radius: var(--tea-r-lg);
  padding: 28px 32px;
  margin-bottom: 18px;
  box-shadow: var(--tea-shadow-sm);
}

.tea-lt__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #047857;
  background: white;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
  border: 1px solid #a7f3d0;
}

.tea-lt__kicker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
  animation: tea-pulse-green 1.6s ease-in-out infinite;
}

@keyframes tea-pulse-green {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.05);
  }
}
.tea-lt__title {
  margin: 0 0 8px;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tea-ink);
}

.tea-lt__lede {
  margin: 0;
  max-width: 680px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tea-slate);
  text-wrap: pretty;
}

.tea-lt__split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
}

.tea-lt__steps {
  margin: 0;
  padding: 22px 26px;
  list-style: none;
  background: white;
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-lg);
  box-shadow: var(--tea-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tea-lt__step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: start;
}

.tea-lt__step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #0ea5b7);
  color: white;
  font-weight: 800;
  font-size: 13px;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 14px -8px rgba(16, 185, 129, 0.6);
}

.tea-lt__step strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--tea-ink);
  margin-bottom: 2px;
}

.tea-lt__step p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--tea-slate);
}

.tea-lt__tutors {
  background: white;
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-lg);
  padding: 18px 18px 14px;
  box-shadow: var(--tea-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tea-lt__tutors-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tea-mist);
  margin-bottom: 4px;
}

.tea-lt__tutor {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--tea-line-2);
  border-radius: var(--tea-r-md);
}

.tea-lt__tutor-ava {
  position: relative;
  width: 44px;
  height: 44px;
}

.tea-lt__tutor-ava img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.tea-lt__tutor-online {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid white;
}

.tea-lt__tutor-meta strong {
  display: block;
  font-size: 13px;
  color: var(--tea-ink);
  font-weight: 700;
}

.tea-lt__tutor-meta small {
  font-size: 11px;
  color: var(--tea-mist);
}

.tea-lt__tutor-next {
  font-size: 11px;
  font-weight: 700;
  color: #047857;
  background: white;
  border: 1px solid #a7f3d0;
  padding: 5px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ----- Calendar booking ----- */
.tea-cal {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  align-items: start;
}

.tea-cal__side {
  background: white;
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-lg);
  padding: 20px;
  box-shadow: var(--tea-shadow-sm);
  position: sticky;
  top: 18px;
}

.tea-cal__side-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tea-mist);
  margin-bottom: 10px;
}

.tea-cal__tutorlist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tea-cal__tutor {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--tea-line);
  background: white;
  border-radius: var(--tea-r-md);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.tea-cal__tutor:hover {
  border-color: var(--tea-purple);
}

.tea-cal__tutor.is-on {
  border-color: var(--tea-purple);
  background: var(--tea-purple-50);
  box-shadow: 0 0 0 3px rgba(109, 78, 210, 0.1);
}

.tea-cal__tutor-ava {
  position: relative;
  width: 40px;
  height: 40px;
}

.tea-cal__tutor-ava img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.tea-cal__tutor-online {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid white;
}

.tea-cal__tutor-meta {
  min-width: 0;
}

.tea-cal__tutor-meta strong {
  display: block;
  font-size: 13px;
  color: var(--tea-ink);
  font-weight: 700;
}

.tea-cal__tutor-meta small {
  font-size: 11px;
  color: var(--tea-mist);
}

.tea-cal__tutor-rate {
  font-size: 12px;
  font-weight: 700;
  color: #f59e0b;
  white-space: nowrap;
}

.tea-cal__side-sep {
  height: 1px;
  background: var(--tea-line);
  margin: 16px 0;
}

.tea-cal__details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tea-cal__detail {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
}

.tea-cal__detail strong {
  display: block;
  font-size: 12px;
  color: var(--tea-ink);
  font-weight: 700;
}

.tea-cal__detail small {
  font-size: 11px;
  color: var(--tea-mist);
}

.tea-cal__main {
  background: white;
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-lg);
  padding: 24px;
  box-shadow: var(--tea-shadow-sm);
}

.tea-cal__main-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.tea-cal__main-head h2 {
  margin: 0 0 4px;
  font-size: 18px;
  color: var(--tea-ink);
  font-weight: 700;
}

.tea-cal__main-head p {
  margin: 0;
  font-size: 12px;
  color: var(--tea-mist);
}

.tea-cal__weeknav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--tea-line-2);
  border-radius: var(--tea-r-md);
  padding: 4px;
}

.tea-cal__weeknav span {
  font-size: 12px;
  font-weight: 700;
  color: var(--tea-ink);
  padding: 0 10px;
  min-width: 90px;
  text-align: center;
}

.tea-cal__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.tea-cal__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 4px;
  border: 1px solid var(--tea-line);
  background: white;
  border-radius: var(--tea-r-md);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.tea-cal__day:hover {
  border-color: var(--tea-purple);
  transform: translateY(-1px);
}

.tea-cal__day small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tea-mist);
}

.tea-cal__day strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--tea-ink);
  letter-spacing: -0.02em;
  line-height: 1;
}

.tea-cal__day em {
  font-style: normal;
  font-size: 10px;
  color: var(--tea-mist);
}

.tea-cal__day.is-on {
  background: linear-gradient(135deg, #6d4ed2, #a855f7);
  border-color: transparent;
  box-shadow: 0 8px 18px -10px rgba(168, 85, 247, 0.55);
}

.tea-cal__day.is-on small,
.tea-cal__day.is-on strong,
.tea-cal__day.is-on em {
  color: white;
}

.tea-cal__group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tea-mist);
  margin: 4px 0 10px;
}

.tea-cal__slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.tea-cal__slot {
  position: relative;
  padding: 12px 8px;
  border: 1px solid var(--tea-line);
  background: white;
  border-radius: var(--tea-r-md);
  font-size: 14px;
  font-weight: 700;
  color: var(--tea-ink);
  font-family: var(--tea-mono), ui-monospace, "SF Mono", monospace;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}

.tea-cal__slot:hover {
  border-color: var(--tea-purple);
  color: var(--tea-purple);
  background: var(--tea-purple-50);
}

.tea-cal__slot.is-on {
  background: linear-gradient(135deg, #6d4ed2, #a855f7);
  color: white;
  border-color: transparent;
  box-shadow: 0 8px 18px -10px rgba(168, 85, 247, 0.55);
  transform: translateY(-1px);
}

.tea-cal__slot.is-taken {
  background: var(--tea-line-2);
  color: var(--tea-mist);
  cursor: not-allowed;
  border-style: dashed;
}

.tea-cal__slot.is-taken small {
  display: block;
  font-family: var(--tea-font);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-top: 2px;
}

.tea-cal__slot:hover small {
  color: var(--tea-mist);
}

.tea-cal__foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--tea-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.tea-cal__foot-summary {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: center;
}

.tea-cal__foot-summary strong {
  display: block;
  font-size: 13px;
  color: var(--tea-ink);
  font-weight: 700;
}

.tea-cal__foot-summary small {
  font-size: 11px;
  color: var(--tea-mist);
}

.tea-cal__foot-check {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #0ea5b7);
  color: white;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 14px -8px rgba(16, 185, 129, 0.6);
}

.tea-cal__foot-empty {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tea-line-2);
  border: 2px dashed var(--tea-line);
}

/* ----- Booked confirmation ----- */
.tea-booked {
  position: relative;
  background: white;
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-lg);
  padding: 40px 28px 32px;
  text-align: center;
  box-shadow: var(--tea-shadow-sm);
  overflow: hidden;
}

.tea-booked__burst {
  position: absolute;
  top: 60px;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.tea-booked__burst i {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 14px;
  border-radius: 3px;
  background: var(--c, #a855f7);
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-90px);
  opacity: 0.85;
}

.tea-booked__check {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #0ea5b7);
  color: white;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  box-shadow: 0 16px 32px -16px rgba(16, 185, 129, 0.6);
}

.tea-booked__title {
  margin: 0 0 6px;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tea-ink);
}

.tea-booked__sub {
  margin: 0 auto 22px;
  max-width: 420px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--tea-slate);
}

.tea-booked__card {
  max-width: 460px;
  margin: 0 auto 22px;
  background: var(--tea-line-2);
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.tea-booked__card-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: center;
}

.tea-booked__card-row strong {
  display: block;
  font-size: 13px;
  color: var(--tea-ink);
  font-weight: 700;
}

.tea-booked__card-row small {
  font-size: 11px;
  color: var(--tea-mist);
}

.tea-booked__card-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.tea-booked__card-ava {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.tea-booked__cta {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ==============================================================
   PART C — Global responsive (mobile drawer + reflow)
   ============================================================== */
/* hamburger button — hidden on desktop */
.tea-burger {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--tea-line);
  background: white;
  border-radius: var(--tea-r-md);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
}

.tea-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--tea-ink);
  border-radius: 1px;
}

.tea-burger:hover {
  background: var(--tea-line-2);
  border-color: var(--tea-purple);
}

.tea-burger:focus-visible {
  outline: 2px solid var(--tea-purple);
  outline-offset: 2px;
}

/* drawer scrim — hidden on desktop */
.tea-drawer-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(18, 26, 38, 0.45);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  grid-column: 1/-1; /* in case grid auto-places it */
}

/* ====== Dashboard responsive grids ====== */
.tea-dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.tea-dash-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  margin-bottom: 28px;
}

.tea-dash-inprog {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.tea-dash-recs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Calendar responsive */
.tea-calpage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
}

.tea-calpage-3 {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

.tea-time-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* ---------- ≤ 1200px : dashboard stats wrap to 2x2 ---------- */
@media (max-width: 1200px) {
  .tea-dash-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .tea-dash-row {
    grid-template-columns: 1fr;
  }
  .tea-dash-inprog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tea-calpage {
    grid-template-columns: 1fr;
  }
  .tea-calpage-3 {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
  .tea-calpage-3 > :nth-child(1) {
    grid-column: 1/-1;
    max-width: 380px;
  }
}
/* ---------- ≤ 1100px : tighten paddings + sticky calendar off ---------- */
@media (max-width: 1100px) {
  .tea-page {
    padding: 24px;
  }
  .tea-cal {
    grid-template-columns: 1fr;
  }
  .tea-cal__side {
    position: static;
  }
  .tea-cal__tutorlist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .tea-lt__split {
    grid-template-columns: 1fr;
  }
  /* prac cards: stack art + body within each card, but keep 2 cards side-by-side */
  .tea-prac-card {
    grid-template-columns: 160px 1fr;
  }
  .tea-prac-card__icon {
    width: 72px;
    height: 72px;
  }
}
/* ---------- ≤ 980px : prac grid stacks (cards too narrow side-by-side) ---------- */
@media (max-width: 980px) {
  .tea-prac__grid {
    grid-template-columns: 1fr;
  }
  .tea-prac-card {
    grid-template-columns: 200px 1fr;
  }
  .tea-prac-card__icon {
    width: 88px;
    height: 88px;
  }
  .tea-dash-recs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tea-calpage-3 {
    grid-template-columns: 1fr;
  }
  .tea-calpage-3 > :nth-child(1) {
    max-width: none;
  }
}
/* ---------- ≤ 720px : everything to 1 column ---------- */
@media (max-width: 720px) {
  .tea-dash-stats {
    grid-template-columns: 1fr 1fr;
  }
  .tea-dash-inprog {
    grid-template-columns: 1fr;
  }
  .tea-dash-recs {
    grid-template-columns: 1fr;
  }
  .tea-time-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* ---------- ≤ 880px : sidebar becomes drawer; phase pages stack ---------- */
@media (max-width: 880px) {
  .tea-burger {
    display: flex;
  }
  .tea-app {
    grid-template-columns: 1fr;
  }
  .tea-rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 84vw;
    /* Reset the desktop sticky height — fixed + top/bottom stretches naturally */
    height: auto;
    max-height: none;
    z-index: 70;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 0 16px 40px rgba(18, 26, 38, 0.18);
  }
  .tea-app.is-drawer-open .tea-rail {
    transform: translateX(0);
  }
  .tea-app.is-drawer-open .tea-drawer-scrim {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
  .tea-topbar {
    padding: 14px 18px;
    gap: 10px;
  }
  .tea-search input {
    height: 40px;
    font-size: 13px;
    padding-left: 38px;
    padding-right: 10px;
  }
  .tea-search .tea-ic {
    width: 16px;
    height: 16px;
    left: 12px;
  }
  .tea-search kbd {
    display: none;
  }
  .tea-top-actions {
    gap: 4px;
  }
  .tea-top-actions > .tea-icon-btn:first-child {
    display: none;
  } /* drop "Help" on mobile */
  .tea-page {
    padding: 18px;
  }
  .tea-h1 {
    font-size: 26px;
  }
  .tea-page-head {
    gap: 12px;
    margin-bottom: 18px;
  }
  /* Phase 3 / 4 grids stack */
  .tea-prac__hero {
    padding: 22px 20px;
  }
  .tea-prac__grid {
    grid-template-columns: 1fr;
  }
  .tea-prac-card {
    grid-template-columns: 1fr;
  }
  .tea-prac-card__art {
    aspect-ratio: 16/6;
  }
  .tea-prac-card__icon {
    width: 64px;
    height: 64px;
  }
  .tea-sim2 {
    padding: 16px;
  }
  .tea-sim2__grid {
    grid-template-columns: 1fr;
  }
  .tea-sim2__prompt {
    padding: 18px;
  }
  .tea-sim2__prompt-text {
    font-size: 15px;
  }
  .tea-sim2__bar-left {
    gap: 10px;
  }
  .tea-sim2__sep {
    display: none;
  }
  .tea-sim2__actions {
    justify-content: stretch;
  }
  .tea-sim2__btn {
    flex: 1;
    justify-content: center;
  }
  .tea-sim2__actions-hint {
    flex-basis: 100%;
    text-align: center;
    order: -1;
  }
  .tea-lt__hero {
    padding: 22px 20px;
  }
  .tea-lt__steps {
    padding: 18px;
  }
  .tea-lt__tutor-next {
    font-size: 10px;
    padding: 4px 8px;
  }
  .tea-cal__main {
    padding: 18px;
  }
  .tea-cal__tutorlist {
    grid-template-columns: 1fr;
  }
  .tea-cal__days {
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
  }
  .tea-cal__day {
    padding: 8px 2px;
  }
  .tea-cal__day strong {
    font-size: 18px;
  }
  .tea-cal__day em {
    display: none;
  }
  .tea-cal__slots {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
  .tea-booked {
    padding: 32px 20px 24px;
  }
  .tea-booked__check {
    width: 60px;
    height: 60px;
  }
  /* Slides keep aspect; tighten padding */
  .tea-slide__content {
    padding: 28px 24px !important;
  }
  /* Quiz / question cards */
  .tea-qcard {
    padding: 22px 20px !important;
  }
  /* Self-assessment table — stack rows vertically */
  .tea-assess__hero {
    grid-template-columns: 1fr !important;
  }
  .tea-assess__hero img {
    height: 160px;
    order: -1;
  }
  .tea-assess__thead {
    display: none !important;
  }
  .tea-assess__row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 14px !important;
  }
  .tea-assess__cell--prompt {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--tea-purple) !important;
  }
  .tea-assess__cell--desc {
    font-size: 12px !important;
  }
  /* Scenario grid + practice grid + livetutor split */
  .tea-livetutor {
    grid-template-columns: 1fr;
  }
  .tea-livebook__head, .tea-livebook__row {
    grid-template-columns: 60px repeat(5, 1fr);
    gap: 4px;
  }
  .tea-livebook__head span {
    font-size: 10px;
  }
  .tea-livebook__cell {
    font-size: 11px;
    padding: 8px 2px;
  }
  /* Flow header / footer */
  .tea-flow-head {
    padding: 12px 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .tea-flow-foot {
    padding-top: 18px !important;
    gap: 8px;
    flex-wrap: wrap;
  }
  .tea-flow-btn {
    flex: 1;
    justify-content: center;
    min-width: 0;
  }
}
/* ---------- ≤ 600px : phone density ---------- */
@media (max-width: 600px) {
  .tea-page {
    padding: 14px;
  }
  .tea-h1 {
    font-size: 22px;
  }
  .tea-topbar {
    padding: 12px 14px;
  }
  .tea-top-actions {
    display: flex;
  }
  .tea-search {
    max-width: none;
  }
  .tea-prac__hero {
    padding: 18px 16px;
  }
  .tea-prac__title {
    font-size: 22px;
  }
  .tea-prac-card__body {
    padding: 18px 18px 16px;
  }
  .tea-prac-card__body h3 {
    font-size: 20px;
  }
  .tea-lt__hero {
    padding: 18px 16px;
  }
  .tea-lt__title {
    font-size: 22px;
  }
  .tea-lt__steps {
    padding: 14px;
  }
  .tea-cal__main {
    padding: 14px;
  }
  .tea-cal__main-head h2 {
    font-size: 16px;
  }
  .tea-cal__weeknav {
    width: 100%;
    justify-content: space-between;
  }
  .tea-cal__weeknav span {
    flex: 1;
  }
  /* Day strip → 4 visible, scroll horizontally */
  .tea-cal__days {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .tea-cal__days::-webkit-scrollbar {
    height: 4px;
  }
  .tea-cal__day {
    flex: 0 0 64px;
    scroll-snap-align: start;
  }
  .tea-cal__day em {
    display: block;
    font-size: 9px;
  }
  .tea-cal__slots {
    grid-template-columns: repeat(3, 1fr);
  }
  .tea-booked__title {
    font-size: 22px;
  }
  .tea-booked__cta {
    flex-direction: column;
  }
  .tea-booked__cta .tea-flow-btn {
    width: 100%;
    justify-content: center;
  }
  /* SimuTutor camera stays prominent but smaller */
  .tea-sim2__bar {
    font-size: 11px;
  }
  .tea-sim2__brand {
    font-size: 12px;
  }
  .tea-sim2__progress strong {
    display: none;
  }
  .tea-sim2__cam-frame {
    aspect-ratio: 4/3;
  }
  /* Slide hero scales */
  .tea-slide {
    aspect-ratio: 4/3 !important;
  }
  .tea-slide__logo {
    width: 70px !important;
    right: 14px !important;
    bottom: 12px !important;
  }
  .tea-slide__page {
    font-size: 11px !important;
  }
  /* Choices full width */
  .tea-choices {
    gap: 8px !important;
  }
  /* Video controls compress */
  .tea-video__controls {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
  }
  .tea-video__time {
    min-width: 60px;
  }
  .tea-video__vol {
    display: none;
  }
}
/* ============================================================
   TUTOR (LiveTutor) screens
   ============================================================ */
.tea-tutor-banner {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
  padding: 26px 30px;
  border-radius: 24px;
  margin-bottom: 28px;
  background: linear-gradient(120deg, #6D4ED2 0%, #D3408D 60%, #EB7127 100%);
  color: white;
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(109, 78, 210, 0.55);
  isolation: isolate;
}

.tea-tutor-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 200px at 110% 110%, rgba(255, 255, 255, 0.16), transparent), radial-gradient(500px 160px at -10% -10%, rgba(255, 255, 255, 0.18), transparent);
  pointer-events: none;
}

.tea-tutor-banner__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0;
  max-width: 520px;
}

.tea-tutor-banner__sub {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.92;
  max-width: 460px;
}

.tea-tutor-banner__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
  white-space: nowrap;
}

.tea-tutor-banner__cta {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.tea-tutor-banner__cta .tea-btn {
  background: white;
  color: #1F1247;
  border: none;
}

.tea-tutor-banner__cta .tea-btn--ghost {
  background: rgba(255, 255, 255, 0.14);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* countdown card */
.tea-tutor-banner__count {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
}

.tea-tutor-banner__count-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}

.tea-tutor-banner__count-name {
  font-size: 17px;
  font-weight: 700;
}

.tea-tutor-banner__count-name small {
  display: block;
  font-weight: 500;
  opacity: 0.8;
  font-size: 12px;
  margin-top: 3px;
}

.tea-tutor-banner__count-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 4px;
}

.tea-tutor-banner__count-cell {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
}

.tea-tutor-banner__count-cell strong {
  font-size: 22px;
  font-weight: 800;
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
  display: block;
}

.tea-tutor-banner__count-cell small {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .tea-tutor-banner {
    grid-template-columns: 1fr;
    padding: 22px;
  }
}
/* tutor stats row */
.tea-tutor-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.tea-tutor-stat {
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-lg);
  padding: 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.tea-tutor-stat__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.tea-tutor-stat__icon--purple {
  background: var(--tea-purple-50);
  color: var(--tea-purple);
}

.tea-tutor-stat__icon--cyan {
  background: var(--tea-cyan-50);
  color: var(--tea-cyan);
}

.tea-tutor-stat__icon--orange {
  background: var(--tea-orange-50);
  color: var(--tea-orange);
}

.tea-tutor-stat__icon--pink {
  background: var(--tea-pink-50);
  color: var(--tea-pink);
}

.tea-tutor-stat__num {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
  line-height: 1;
}

.tea-tutor-stat__label {
  font-size: 12px;
  color: var(--tea-mist);
  font-weight: 600;
  margin-top: 4px;
}

.tea-tutor-stat__delta {
  font-size: 11px;
  font-weight: 700;
  color: var(--tea-success);
  margin-top: 4px;
}

@media (max-width: 1180px) {
  .tea-tutor-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .tea-tutor-stats {
    grid-template-columns: 1fr;
  }
}
/* tutor session row card */
.tea-tcard {
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  margin-bottom: 16px;
  transition: box-shadow 0.15s, transform 0.15s;
}

.tea-tcard:hover {
  box-shadow: var(--tea-shadow);
  transform: translateY(-1px);
}

.tea-tcard__media {
  position: relative;
  background: var(--tea-line-2);
  min-height: 100%;
}

.tea-tcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tea-tcard__when {
  position: absolute;
  left: 12px;
  top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  border-radius: 12px;
  padding: 6px 10px;
  min-width: 56px;
  box-shadow: var(--tea-shadow-sm);
}

.tea-tcard__when strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--tea-purple);
  line-height: 1;
  font-feature-settings: "tnum";
}

.tea-tcard__when small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tea-mist);
  margin-top: 2px;
}

.tea-tcard__status {
  position: absolute;
  right: 12px;
  top: 12px;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--tea-purple);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tea-tcard__status--done {
  color: var(--tea-success);
}

.tea-tcard__status--soon {
  color: var(--tea-orange);
}

.tea-tcard__body {
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: start;
}

.tea-tcard__title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--tea-purple);
  margin: 0;
  text-decoration: none;
}

.tea-tcard__title:hover {
  color: var(--tea-purple-600);
}

.tea-tcard__rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--tea-mist);
  margin-top: 4px;
}

.tea-tcard__blurb {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--tea-slate);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tea-tcard__skills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.tea-tcard__skills-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tea-mist);
  margin-right: 4px;
}

.tea-tcard__skills .tea-chip {
  font-size: 11px;
  padding: 4px 10px;
  background: var(--tea-line-2);
  color: var(--tea-slate);
}

.tea-tcard__cta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  min-width: 140px;
}

.tea-tcard__cta .tea-btn {
  justify-content: center;
}

/* learner block at bottom of tutor session card */
.tea-tcard__learner {
  grid-column: 1/-1;
  margin: 14px -22px -18px;
  padding: 16px 22px;
  background: var(--tea-line-2);
  border-top: 1px solid var(--tea-line);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: stretch;
}

.tea-tcard__learner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  font-size: 12px;
}

.tea-tcard__learner-grid > div {
  display: flex;
  gap: 12px;
}

.tea-tcard__learner-grid dt {
  color: var(--tea-mist);
  font-weight: 700;
  min-width: 86px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  padding-top: 1px;
}

.tea-tcard__learner-grid dd {
  margin: 0;
  color: var(--tea-ink);
  font-weight: 600;
  font-size: 13px;
}

.tea-tcard__learner-grid dd small {
  color: var(--tea-mist);
  display: block;
  font-weight: 500;
  font-size: 11px;
  margin-top: 2px;
}

.tea-tcard__time {
  background: linear-gradient(135deg, #5086FC, #6D4ED2);
  color: white;
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
  align-self: stretch;
  position: relative;
  overflow: hidden;
  justify-content: center;
}

.tea-tcard__time-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}

.tea-tcard__time-date {
  font-size: 14px;
  font-weight: 700;
}

.tea-tcard__time-time {
  font-size: 22px;
  font-weight: 800;
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}

.tea-tcard__time-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.tea-tcard__time-actions button {
  appearance: none;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  cursor: pointer;
  font-family: var(--tea-font);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tea-tcard__time-actions button:hover {
  background: rgba(255, 255, 255, 0.28);
}

@media (max-width: 980px) {
  .tea-tcard {
    grid-template-columns: 1fr;
  }
  .tea-tcard__media {
    aspect-ratio: 16/9;
    min-height: 0;
  }
  .tea-tcard__body {
    grid-template-columns: 1fr;
  }
  .tea-tcard__learner {
    grid-template-columns: 1fr;
    margin: 12px -16px -14px;
    padding: 14px 16px;
  }
  .tea-tcard__learner-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .tea-tcard__time {
    min-width: 0;
  }
  .tea-tcard__cta {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
/* ============================================================
   Tutor session DETAIL (single screen)
   ============================================================ */
.tea-tdetail-hero {
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-lg);
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 26px;
  margin-bottom: 22px;
  box-shadow: var(--tea-shadow-sm);
}

.tea-tdetail-hero__media {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--tea-r-md);
  overflow: hidden;
  background: var(--tea-line-2);
}

.tea-tdetail-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tea-tdetail-hero__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tea-purple);
  margin: 0;
  line-height: 1.18;
}

.tea-tdetail-hero__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--tea-mist);
  margin: 8px 0 14px;
}

.tea-tdetail-hero__meta strong {
  color: var(--tea-slate);
  font-weight: 700;
}

.tea-tdetail-hero__blurb {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tea-slate);
  max-width: 70ch;
}

.tea-tdetail-hero__skills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--tea-line);
}

.tea-tdetail-hero__skills-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tea-ink);
  margin-right: 6px;
}

.tea-tdetail-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

@media (max-width: 880px) {
  .tea-tdetail-hero {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .tea-tdetail-hero__media {
    aspect-ratio: 16/9;
  }
}
/* learner panel */
.tea-tdetail-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
}

@media (max-width: 1100px) {
  .tea-tdetail-grid {
    grid-template-columns: 1fr;
  }
}
.tea-tdetail-learner {
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-lg);
  padding: 24px 26px;
  box-shadow: var(--tea-shadow-sm);
}

.tea-tdetail-learner h3 {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 700;
}

.tea-tdetail-learner__row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--tea-line-2);
}

.tea-tdetail-learner__row:last-child {
  border-bottom: none;
}

.tea-tdetail-learner__row img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.tea-tdetail-learner__row strong {
  font-size: 16px;
  font-weight: 700;
}

.tea-tdetail-learner__row small {
  display: block;
  font-size: 12px;
  color: var(--tea-mist);
  margin-top: 2px;
}

.tea-tdetail-learner__details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  margin-top: 6px;
  font-size: 12px;
}

.tea-tdetail-learner__details > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tea-tdetail-learner__details dt {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tea-mist);
  margin: 0;
}

.tea-tdetail-learner__details dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--tea-ink);
}

/* session-time panel */
.tea-tdetail-time {
  position: relative;
  border-radius: var(--tea-r-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #5086FC 0%, #6D4ED2 50%, #D3408D 100%);
  color: white;
  padding: 26px;
  box-shadow: 0 24px 48px -22px rgba(109, 78, 210, 0.45);
  display: flex;
  flex-direction: column;
  gap: 16px;
  isolation: isolate;
}

.tea-tdetail-time::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(400px 200px at 100% 110%, rgba(255, 255, 255, 0.16), transparent);
  pointer-events: none;
}

.tea-tdetail-time__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.82;
}

.tea-tdetail-time__date {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.tea-tdetail-time__time {
  font-size: 36px;
  font-weight: 800;
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
  line-height: 1;
}

.tea-tdetail-time__tz {
  font-size: 13px;
  opacity: 0.82;
}

.tea-tdetail-time__upload {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: white;
  color: #1F1247;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: var(--tea-font);
  transition: transform 0.12s;
}

.tea-tdetail-time__upload:hover {
  transform: translateY(-1px);
}

.tea-tdetail-time__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin: 4px 0;
}

.tea-tdetail-time__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.tea-tdetail-time__row span:first-child {
  opacity: 0.82;
}

.tea-tdetail-time__row span:last-child {
  font-weight: 700;
}

/* ============================================================
   Tutor schedule (LiveTutor availability)
   ============================================================ */
.tea-tsched {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 22px;
}

@media (max-width: 1100px) {
  .tea-tsched {
    grid-template-columns: 1fr;
  }
}
.tea-tsched__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tea-tsched__tz {
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-lg);
  padding: 16px 18px;
  box-shadow: var(--tea-shadow-sm);
}

.tea-tsched__tz-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--tea-mist);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tea-tsched__tz-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  gap: 8px;
}

.tea-tsched__tz-name {
  font-weight: 700;
  font-size: 14px;
}

.tea-tsched__tz-name small {
  display: block;
  font-size: 11px;
  color: var(--tea-mist);
  font-weight: 500;
}

/* ── Themed timezone-picker modal ────────────────────────────────────── */
.tea-tsched__tz-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tea-tsched__tz-modal-card {
  background: #fff;
  color: var(--tea-ink);
  border-radius: var(--tea-r-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  width: min(560px, 100%);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tea-tsched__tz-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 22px 12px;
  border-bottom: 1px solid var(--tea-line);
}

.tea-tsched__tz-modal-title {
  margin: 4px 0 4px;
  font-size: 18px;
  font-weight: 700;
}

.tea-tsched__tz-modal-sub {
  margin: 0;
  font-size: 12px;
  color: var(--tea-slate);
  line-height: 1.55;
}

.tea-tsched__tz-modal-search {
  margin: 12px 22px 8px;
  padding: 9px 12px;
  font-size: 13px;
  border-radius: var(--tea-r-sm);
  border: 1px solid var(--tea-line);
  background: var(--tea-bg);
  outline: none;
}

.tea-tsched__tz-modal-search:focus {
  border-color: var(--tea-purple);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
}

.tea-tsched__tz-modal-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 12px 12px;
}

.tea-tsched__tz-modal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--tea-r-sm);
  padding: 9px 12px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.tea-tsched__tz-modal-row:hover {
  background: var(--tea-bg);
}

.tea-tsched__tz-modal-row.is-selected {
  background: rgba(124, 58, 237, 0.08);
  border-color: var(--tea-purple);
}

.tea-tsched__tz-modal-row-name {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  font-size: 13px;
}

.tea-tsched__tz-modal-row-name small {
  font-size: 11px;
  color: var(--tea-mist);
  font-weight: 500;
}

.tea-tsched__tz-modal-row-off {
  font-size: 12px;
  font-weight: 700;
  color: var(--tea-slate);
  font-feature-settings: "tnum";
}

.tea-tsched__tz-modal-empty {
  padding: 24px 8px;
  text-align: center;
  font-size: 13px;
  color: var(--tea-slate);
}

.tea-tsched__tz-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 22px 18px;
  border-top: 1px solid var(--tea-line);
  background: var(--tea-bg);
}

.tea-tsched__alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--tea-r-md);
  background: linear-gradient(135deg, rgba(247, 193, 22, 0.16), rgba(235, 113, 39, 0.14));
  border: 1px solid rgba(235, 113, 39, 0.28);
  font-size: 13px;
  line-height: 1.5;
  color: #7A4C12;
}

.tea-tsched__alert svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--tea-orange);
}

.tea-tsched__alert strong {
  display: block;
  color: #5C3A0E;
  font-weight: 800;
  margin-bottom: 2px;
}

.tea-tsched__stats {
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-lg);
  padding: 18px 20px;
  box-shadow: var(--tea-shadow-sm);
}

.tea-tsched__stats h4 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
}

.tea-tsched__stats-section {
  margin-bottom: 14px;
}

.tea-tsched__stats-section:last-child {
  margin-bottom: 0;
}

.tea-tsched__stats-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tea-mist);
  margin-bottom: 8px;
}

.tea-tsched__stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  padding: 6px 0;
}

.tea-tsched__stats-row span:first-child {
  color: var(--tea-slate);
}

.tea-tsched__stats-row strong {
  font-weight: 700;
  font-feature-settings: "tnum";
}

.tea-tsched__main {
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-lg);
  padding: 22px;
  box-shadow: var(--tea-shadow-sm);
}

.tea-tsched__monthrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.tea-tsched__month-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.tea-tsched__month-title small {
  font-weight: 500;
  color: var(--tea-mist);
  margin-left: 6px;
  font-size: 14px;
}

.tea-tsched__month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 10px 8px 16px;
  border-bottom: 1px solid var(--tea-line);
  margin-bottom: 16px;
}

.tea-tsched__month-h {
  font-size: 11px;
  font-weight: 800;
  color: var(--tea-mist);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 0;
  text-align: center;
}

.tea-tsched__day {
  aspect-ratio: 1.4;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--tea-ink);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  position: relative;
  font-family: var(--tea-font);
  font-feature-settings: "tnum";
}

.tea-tsched__day:hover {
  background: var(--tea-line-2);
}

.tea-tsched__day.is-out {
  color: var(--tea-mist);
  cursor: default;
}

.tea-tsched__day.is-out:hover {
  background: transparent;
}

.tea-tsched__day.is-selected {
  background: var(--tea-purple);
  color: white;
  font-weight: 800;
  box-shadow: 0 8px 18px -10px rgba(109, 78, 210, 0.55);
}

.tea-tsched__day.has-slots::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--tea-cyan);
}

.tea-tsched__day.is-selected.has-slots::after {
  background: white;
}

/* week strip + slot grid */
.tea-tsched__weekhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.tea-tsched__weekrange {
  font-size: 14px;
  font-weight: 700;
}

.tea-tsched__weekrange small {
  display: block;
  font-size: 12px;
  color: var(--tea-mist);
  font-weight: 500;
}

.tea-tsched__weeknav {
  display: flex;
  gap: 6px;
}

.tea-tsched__legend {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--tea-slate);
  margin-bottom: 10px;
}

.tea-tsched__legend-sw {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid var(--tea-line);
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

.tea-tsched__legend-sw--free {
  background: white;
}

.tea-tsched__legend-sw--avail {
  background: var(--tea-purple);
  border-color: var(--tea-purple);
}

.tea-tsched__legend-sw--booked {
  background: linear-gradient(135deg, var(--tea-cyan) 0%, var(--tea-blue) 100%);
  border-color: var(--tea-cyan);
}

.tea-tsched__legend-sw--off {
  background: var(--tea-line-2);
}

.tea-tsched__slots {
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-md);
  overflow: hidden;
  background: var(--tea-surface-2);
}

.tea-tsched__slots-head {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  gap: 1px;
  background: var(--tea-line);
  border-bottom: 1px solid var(--tea-line);
}

.tea-tsched__slots-head > div {
  background: var(--tea-surface);
  padding: 10px 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--tea-slate);
}

.tea-tsched__slots-head > div small {
  display: block;
  font-size: 10px;
  color: var(--tea-mist);
  font-weight: 600;
  margin-top: 2px;
}

.tea-tsched__slots-head > div.is-today {
  color: var(--tea-purple);
}

.tea-tsched__slots-head > div.is-today small {
  color: var(--tea-purple);
}

.tea-tsched__slots-body {
  max-height: 480px;
  overflow-y: auto;
  background: var(--tea-line);
}

.tea-tsched__slots-row {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  gap: 1px;
}

.tea-tsched__slots-row + .tea-tsched__slots-row {
  margin-top: 1px;
}

.tea-tsched__slots-time {
  background: var(--tea-surface-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--tea-mist);
  display: grid;
  place-items: center;
  font-family: var(--tea-font);
  font-feature-settings: "tnum";
  padding: 8px 4px;
}

.tea-tsched__slot {
  appearance: none;
  border: none;
  background: var(--tea-surface);
  cursor: pointer;
  padding: 8px 4px;
  font-size: 11px;
  font-family: var(--tea-font);
  color: var(--tea-slate);
  font-weight: 600;
  text-align: center;
  transition: background 0.12s, color 0.12s;
}

.tea-tsched__slot:hover {
  background: var(--tea-purple-50);
  color: var(--tea-purple);
}

.tea-tsched__slot.is-avail {
  background: var(--tea-purple);
  color: white;
  font-weight: 700;
}

.tea-tsched__slot.is-booked {
  background: linear-gradient(135deg, var(--tea-cyan) 0%, var(--tea-blue) 100%);
  color: white;
  font-weight: 700;
}

.tea-tsched__slot.is-off {
  background: var(--tea-line-2);
  color: var(--tea-mist);
  cursor: default;
}

.tea-tsched__slot.is-off:hover {
  background: var(--tea-line-2);
  color: var(--tea-mist);
}

.tea-tsched__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--tea-line);
}

.tea-tsched__foot-summary {
  font-size: 13px;
  color: var(--tea-slate);
}

.tea-tsched__foot-summary strong {
  color: var(--tea-ink);
}

/* tutor sessions tabs (large) */
.tea-tsessions__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

.tea-tsessions__filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================================================
   COACH screens
   ============================================================ */
/* hero alert */
.tea-coach-alert {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  padding: 20px 24px;
  border-radius: var(--tea-r-lg);
  margin-bottom: 24px;
  background: linear-gradient(120deg, #5086FC 0%, #6D4ED2 100%);
  color: white;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 18px 40px -22px rgba(80, 134, 252, 0.55);
  isolation: isolate;
}

.tea-coach-alert::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 160px at 110% 110%, rgba(255, 255, 255, 0.16), transparent);
  pointer-events: none;
}

.tea-coach-alert__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.tea-coach-alert__title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}

.tea-coach-alert__sub {
  font-size: 13px;
  opacity: 0.9;
  margin: 0;
  line-height: 1.5;
}

.tea-coach-alert__cta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tea-coach-alert__cta .tea-btn {
  background: white;
  color: #1F1247;
  border: none;
  white-space: nowrap;
}

.tea-coach-alert__cta .tea-btn--ghost {
  background: rgba(255, 255, 255, 0.16);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

/* coach session row card */
.tea-ccard {
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 240px 1fr;
  margin-bottom: 16px;
  transition: box-shadow 0.15s, transform 0.15s;
}

.tea-ccard:hover {
  box-shadow: var(--tea-shadow);
  transform: translateY(-1px);
}

.tea-ccard__media {
  position: relative;
  background: var(--tea-line-2);
  min-height: 100%;
}

.tea-ccard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tea-ccard__due {
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: white;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--tea-orange);
  box-shadow: var(--tea-shadow-sm);
}

.tea-ccard__due--ok {
  color: var(--tea-success);
}

.tea-ccard__due--late {
  color: var(--tea-danger);
}

.tea-ccard__body {
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 1fr;
}

.tea-ccard__title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--tea-purple);
  margin: 0;
  text-decoration: none;
}

.tea-ccard__title:hover {
  color: var(--tea-purple-600);
}

.tea-ccard__blurb {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--tea-slate);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tea-ccard__skills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.tea-ccard__skills-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tea-mist);
  margin-right: 4px;
}

.tea-ccard__details {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--tea-line-2);
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 16px;
  align-items: end;
}

.tea-ccard__details > dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tea-ccard__details dt {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tea-mist);
}

.tea-ccard__details dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--tea-ink);
}

.tea-ccard__details dd small {
  display: block;
  font-size: 11px;
  color: var(--tea-mist);
  font-weight: 500;
  margin-top: 1px;
}

.tea-ccard__cta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  min-width: 150px;
}

.tea-ccard__cta .tea-btn {
  justify-content: center;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .tea-ccard__details {
    grid-template-columns: repeat(2, 1fr);
  }
  .tea-ccard__cta {
    grid-column: 1/-1;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
@media (max-width: 900px) {
  .tea-ccard {
    grid-template-columns: 1fr;
  }
  .tea-ccard__media {
    aspect-ratio: 16/9;
    min-height: 0;
  }
  .tea-ccard__details {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   Coach FEEDBACK form
   ============================================================ */
.tea-cfb-hero {
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-lg);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 22px;
  margin-bottom: 16px;
  box-shadow: var(--tea-shadow-sm);
}

.tea-cfb-hero__media {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--tea-r-md);
  overflow: hidden;
  background: var(--tea-line-2);
}

.tea-cfb-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tea-cfb-hero__title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tea-purple);
  margin: 0;
}

.tea-cfb-hero__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--tea-mist);
  margin-top: 6px;
}

.tea-cfb-hero__blurb {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--tea-slate);
  max-width: 70ch;
}

.tea-cfb-hero__skills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.tea-cfb-hero__skills-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 4px;
}

.tea-cfb-hero__actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 880px) {
  .tea-cfb-hero {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .tea-cfb-hero__media {
    aspect-ratio: 16/9;
  }
}
.tea-cfb-session {
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-lg);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-bottom: 18px;
}

.tea-cfb-session h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tea-mist);
  padding-right: 18px;
  border-right: 1px solid var(--tea-line);
}

.tea-cfb-session dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tea-cfb-session dt {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tea-mist);
}

.tea-cfb-session dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--tea-ink);
}

.tea-cfb-session__cta {
  margin-left: auto;
}

/* rubric table */
.tea-rubric {
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-lg);
  margin-bottom: 18px;
  overflow: hidden;
}

.tea-rubric__head {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--tea-line);
}

.tea-rubric__head h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

.tea-rubric__head p {
  font-size: 13px;
  color: var(--tea-mist);
  margin: 4px 0 0;
}

.tea-rubric__progress {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.tea-rubric__progress small {
  font-size: 11px;
  color: var(--tea-mist);
  font-weight: 500;
}

.tea-rubric__row {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr 1.4fr;
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--tea-line-2);
  align-items: center;
}

.tea-rubric__row:last-child {
  border-bottom: none;
}

.tea-rubric__skill {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tea-rubric__skill-num {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--tea-purple-50);
  color: var(--tea-purple);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  font-feature-settings: "tnum";
}

.tea-rubric__skill-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.tea-rubric__desc {
  font-size: 13px;
  color: var(--tea-slate);
  line-height: 1.5;
}

.tea-rubric__score {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tea-rubric__opt {
  appearance: none;
  border: 1px solid var(--tea-line);
  background: var(--tea-surface);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tea-slate);
  cursor: pointer;
  font-family: var(--tea-font);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.tea-rubric__opt:hover {
  border-color: var(--tea-purple);
  color: var(--tea-purple);
}

.tea-rubric__opt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.tea-rubric__opt[data-tier="1"] .tea-rubric__opt-dot {
  background: var(--tea-danger);
}

.tea-rubric__opt[data-tier="2"] .tea-rubric__opt-dot {
  background: var(--tea-orange);
}

.tea-rubric__opt[data-tier="3"] .tea-rubric__opt-dot {
  background: var(--tea-success);
}

.tea-rubric__opt[data-tier="1"].is-on {
  background: rgba(225, 29, 72, 0.1);
  border-color: var(--tea-danger);
  color: var(--tea-danger);
}

.tea-rubric__opt[data-tier="2"].is-on {
  background: rgba(235, 113, 39, 0.1);
  border-color: var(--tea-orange);
  color: var(--tea-orange);
}

.tea-rubric__opt[data-tier="3"].is-on {
  background: rgba(20, 176, 111, 0.1);
  border-color: var(--tea-success);
  color: var(--tea-success);
}

@media (max-width: 980px) {
  .tea-rubric__row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px;
  }
  .tea-rubric__opt {
    padding: 6px 10px;
    font-size: 11px;
  }
}
.tea-cfb-comments {
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-lg);
  padding: 22px;
  margin-bottom: 18px;
}

.tea-cfb-comments h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

.tea-cfb-comments__hint {
  margin: 16px 0;
  padding: 12px 16px;
  background: rgba(247, 193, 22, 0.16);
  border-left: 4px solid var(--tea-orange);
  border-radius: 8px;
  font-size: 13px;
  color: #7A4C12;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.tea-cfb-comments__hint svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--tea-orange);
}

.tea-cfb-comments__group {
  margin-top: 18px;
}

.tea-cfb-comments__group label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tea-mist);
  margin-bottom: 8px;
}

.tea-cfb-comments__group textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-md);
  background: var(--tea-surface-2);
  font-family: var(--tea-font);
  font-size: 14px;
  color: var(--tea-ink);
  resize: vertical;
  box-sizing: border-box;
  line-height: 1.5;
}

.tea-cfb-comments__group textarea:focus {
  outline: none;
  border-color: var(--tea-purple);
  background: var(--tea-surface);
}

.tea-cfb-comments__group-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.tea-cfb-comments__count {
  font-size: 11px;
  color: var(--tea-mist);
}

.tea-cfb-comments__addrm {
  display: flex;
  gap: 6px;
}

.tea-cfb-comments__addrm button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--tea-line);
  background: var(--tea-surface);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-family: var(--tea-font);
  font-weight: 700;
  color: var(--tea-slate);
}

.tea-cfb-comments__addrm button:hover {
  border-color: var(--tea-purple);
  color: var(--tea-purple);
}

/* ============================================================
   Coach REPORT preview
   ============================================================ */
.tea-creport {
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-lg);
  overflow: hidden;
  box-shadow: var(--tea-shadow-sm);
}

.tea-creport__bar {
  background: #2C2842;
  color: rgba(255, 255, 255, 0.85);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
}

.tea-creport__bar-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.tea-creport__bar-actions button {
  appearance: none;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--tea-font);
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 6px;
}

.tea-creport__bar-actions button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.tea-creport__bar-page {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.tea-creport__bar-page input {
  width: 36px;
  padding: 3px 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: white;
  border-radius: 4px;
  font-family: var(--tea-font);
  font-size: 12px;
  text-align: center;
}

.tea-creport__page {
  background: white;
  margin: 28px auto;
  max-width: 720px;
  padding: 56px 64px;
  box-shadow: 0 24px 48px -22px rgba(28, 21, 71, 0.25);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.7;
  color: #2C2842;
  border-radius: 6px;
  position: relative;
}

.tea-creport__page p {
  margin: 0 0 14px;
}

.tea-creport__page p strong {
  font-weight: 700;
}

.tea-creport__page h2 {
  font-family: var(--tea-font);
  font-size: 18px;
  font-weight: 800;
  margin: 26px 0 12px;
  letter-spacing: -0.01em;
}

.tea-creport__page hr {
  border: none;
  border-top: 1px dashed rgba(28, 21, 71, 0.15);
  margin: 22px 0;
}

.tea-creport__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 18px 22px;
  border-top: 1px solid var(--tea-line);
  background: var(--tea-surface-2);
  flex-wrap: wrap;
}

.tea-creport__alert {
  padding: 12px 18px;
  background: rgba(247, 193, 22, 0.14);
  color: #7A4C12;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(247, 193, 22, 0.3);
}

/* ============================================================
   Legal pages (Privacy / Terms)
   ============================================================ */
.tea-legal-page {
  background: #f6f5f2;
  min-height: 100vh;
}

.tea-legal-wrap {
  max-width: 1240px;
  margin: -56px auto 0;
  padding: 0 32px 80px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  position: relative;
  z-index: 4;
}

/* TOC */
.tea-legal-toc {
  position: sticky;
  top: 24px;
  align-self: start;
  background: white;
  border-radius: 18px;
  padding: 22px 18px;
  box-shadow: 0 18px 40px -22px rgba(18, 26, 38, 0.18), 0 2px 6px -2px rgba(18, 26, 38, 0.08);
  max-height: calc(100vh - 48px);
  overflow: auto;
}

.tea-legal-toc__title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tea-mist);
  padding: 0 8px 12px;
  border-bottom: 1px solid var(--tea-line);
  margin-bottom: 8px;
}

.tea-legal-toc nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tea-legal-toc__link {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tea-slate);
  text-decoration: none;
  line-height: 1.4;
  transition: background 0.15s, color 0.15s;
}

.tea-legal-toc__link:hover {
  background: var(--tea-fog);
  color: var(--tea-ink);
}

.tea-legal-toc__link.is-active {
  background: linear-gradient(135deg, rgba(109, 78, 210, 0.1), rgba(7, 182, 211, 0.08));
  color: var(--tea-purple);
}

.tea-legal-toc__num {
  font-size: 10px;
  font-weight: 800;
  color: var(--tea-mist);
  letter-spacing: 0.08em;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}

.tea-legal-toc__link.is-active .tea-legal-toc__num {
  color: var(--tea-cyan);
}

.tea-legal-toc__contact {
  margin-top: 18px;
  padding: 14px;
  border-radius: 12px;
  background: var(--tea-fog);
  font-size: 12px;
  line-height: 1.5;
  display: grid;
  gap: 4px;
}

.tea-legal-toc__contact strong {
  color: var(--tea-ink);
}

.tea-legal-toc__contact a {
  color: var(--tea-purple);
  text-decoration: none;
  word-break: break-all;
}

/* Article */
.tea-legal-doc {
  background: white;
  border-radius: 22px;
  padding: 56px 64px;
  box-shadow: 0 24px 60px -28px rgba(18, 26, 38, 0.2), 0 2px 8px -4px rgba(18, 26, 38, 0.08);
  font-size: 15px;
  line-height: 1.7;
  color: var(--tea-slate);
}

.tea-legal-doc p {
  margin: 0 0 16px;
}

.tea-legal-doc strong {
  color: var(--tea-ink);
  font-weight: 700;
}

.tea-legal-doc a {
  color: var(--tea-purple);
  text-decoration: underline;
  text-decoration-color: rgba(109, 78, 210, 0.3);
  text-underline-offset: 3px;
}

.tea-legal-doc a:hover {
  text-decoration-color: var(--tea-purple);
}

.tea-legal-doc ul, .tea-legal-doc ol {
  margin: 0 0 18px;
  padding-left: 22px;
}

.tea-legal-doc li {
  margin-bottom: 8px;
}

.tea-legal-doc li::marker {
  color: var(--tea-cyan);
  font-weight: 800;
}

.tea-legal-intro {
  padding-bottom: 28px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--tea-line);
  font-size: 16px;
}

.tea-legal-intro p {
  margin-bottom: 14px;
}

.tea-legal-intro p:last-child {
  margin-bottom: 0;
}

.tea-legal-banner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(247, 193, 22, 0.16), rgba(247, 193, 22, 0.06));
  border-left: 3px solid #F7C116;
  margin-bottom: 22px;
  font-size: 14px;
}

.tea-legal-banner strong {
  color: var(--tea-ink);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tea-legal-section {
  margin-bottom: 44px;
  scroll-margin-top: 24px;
}

.tea-legal-section header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--tea-line);
}

.tea-legal-section__n {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  color: var(--tea-cyan);
  background: linear-gradient(135deg, var(--tea-purple), var(--tea-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tea-legal-section h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: var(--tea-ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.tea-legal-section h3 {
  margin: 24px 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tea-purple);
}

.tea-legal-callout {
  margin: 18px 0;
  padding: 18px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(109, 78, 210, 0.06), rgba(7, 182, 211, 0.06));
  border: 1px solid rgba(109, 78, 210, 0.15);
}

.tea-legal-callout strong {
  display: block;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tea-purple);
  margin-bottom: 8px;
}

.tea-legal-callout ul {
  margin: 0;
  padding-left: 18px;
}

.tea-legal-callout p {
  margin: 0;
  font-size: 14px;
}

.tea-legal-callout--warn {
  background: linear-gradient(135deg, rgba(211, 14, 162, 0.08), rgba(247, 193, 22, 0.06));
  border-color: rgba(211, 14, 162, 0.18);
}

.tea-legal-callout--warn strong {
  color: var(--tea-magenta);
}

.tea-legal-cols {
  columns: 2;
  column-gap: 28px;
  padding-left: 18px !important;
}

.tea-legal-cols li {
  break-inside: avoid;
}

.tea-legal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.tea-legal-grid__item {
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--tea-fog);
  border: 1px solid var(--tea-line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tea-legal-grid__item strong {
  font-size: 13px;
  color: var(--tea-purple);
  letter-spacing: 0.02em;
}

.tea-legal-grid__item span {
  font-size: 13px;
  color: var(--tea-slate);
  line-height: 1.4;
}

.tea-legal-rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  padding-left: 0 !important;
  list-style: none;
}

.tea-legal-rules li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
}

.tea-legal-rules li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--tea-magenta), var(--tea-purple));
  box-shadow: 0 0 0 3px rgba(211, 14, 162, 0.1);
}

.tea-legal-muted {
  color: var(--tea-mist);
  font-size: 13px;
}

.tea-legal-address {
  font-style: normal;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--tea-fog);
  border-left: 3px solid var(--tea-purple);
  font-size: 14px;
  line-height: 1.7;
  margin: 14px 0 18px;
}

/* Responsive */
@media (max-width: 980px) {
  .tea-legal-wrap {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 20px 60px;
  }
  .tea-legal-toc {
    position: static;
    max-height: none;
  }
  .tea-legal-doc {
    padding: 36px 28px;
  }
  .tea-legal-cols {
    columns: 1;
  }
  .tea-legal-rules {
    grid-template-columns: 1fr;
  }
  .tea-legal-nav a:not(:last-child) {
    display: none;
  }
}
@media (max-width: 600px) {
  .tea-legal-doc {
    padding: 28px 20px;
    border-radius: 16px;
  }
  .tea-legal-section h2 {
    font-size: 20px;
  }
  .tea-legal-section header {
    gap: 10px;
  }
}
/* ====================================================================
   LANDING + LOGIN — full responsive system
   ==================================================================== */
/* ----- Shared hero backdrop ----- */
.tea-hero-bg {
  position: relative;
  width: 100%;
  background-image: url("../images/tea-v2/hero-team.jpg");
  background-size: cover;
  background-position: center 30%;
  overflow: hidden;
  isolation: isolate;
}

.tea-hero-bg__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(7, 182, 211, 0.62) 0%, rgba(80, 134, 252, 0.45) 40%, rgba(109, 78, 210, 0.5) 75%, rgba(211, 14, 162, 0.4) 100%);
  mix-blend-mode: multiply;
}

.tea-hero-bg__fade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(18, 26, 38, 0) 0%, rgba(18, 26, 38, 0) 50%, rgba(18, 26, 38, 0.45) 100%);
}

.tea-hero-bg__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
}

/* ----- Hero nav ----- */
.tea-hero-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 48px;
  gap: 18px;
}

.tea-hero-nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.tea-hero-nav__brand img {
  height: 38px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

.tea-hero-nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.tea-hero-nav__links a {
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.tea-hero-nav__cta {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 22px;
  border-radius: 999px;
  background: white !important;
  color: var(--tea-purple) !important;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 8px 22px -10px rgba(18, 26, 38, 0.45);
  white-space: nowrap;
}

.tea-hero-nav__burger {
  display: none;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.tea-hero-nav__burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: white;
  border-radius: 2px;
}

/* ----- Hero footer ----- */
.tea-hero-foot {
  padding: 20px 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  gap: 18px;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.85);
}

.tea-hero-foot.is-dark {
  background: #121A26;
  color: rgba(255, 255, 255, 0.55);
  border-top: none;
  padding: 24px 48px;
}

.tea-hero-foot__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tea-hero-foot__brand img {
  height: 22px;
  opacity: 0.9;
}

.tea-hero-foot.is-dark .tea-hero-foot__brand img {
  opacity: 0.55;
}

.tea-hero-foot__links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.tea-hero-foot__links a {
  color: inherit;
  text-decoration: none;
}

/* ====================================================================
   LOGIN
   ==================================================================== */
.tea-login-wrap {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 32px 24px 64px;
}

.tea-login-card {
  width: 100%;
  max-width: 460px;
  background: var(--tea-surface);
  border-radius: 22px;
  box-shadow: 0 32px 80px -24px rgba(18, 26, 38, 0.45), 0 8px 18px -8px rgba(18, 26, 38, 0.2);
  overflow: hidden;
  position: relative;
}

.tea-login-card__sash {
  height: 4px;
  background: var(--tea-gradient);
}

.tea-login-card__sash--bottom {
  height: 6px;
}

.tea-login-card__body {
  padding: 32px 36px 28px;
}

.tea-login-card__head {
  text-align: center;
  margin-bottom: 22px;
}

.tea-login-card__head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tea-ink);
}

.tea-login-card__head p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--tea-slate);
}

.tea-login-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.22);
  border-radius: 10px;
  font-size: 12px;
  color: #9F1239;
  margin-bottom: 18px;
}

.tea-login-error svg {
  margin-top: 1px;
  flex-shrink: 0;
}

.tea-login-error__title {
  font-weight: 700;
}

.tea-login-error__sub {
  opacity: 0.85;
  margin-top: 2px;
}

.tea-login-error__close {
  margin-left: auto;
  border: none;
  background: transparent;
  color: #9F1239;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  display: grid;
  place-items: center;
}

.tea-login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tea-login-field__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.tea-login-field__head label {
  font-size: 11px;
  font-weight: 700;
  color: var(--tea-slate);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tea-login-field__req {
  color: var(--tea-pink);
  margin-left: 3px;
}

.tea-login-input {
  width: 100%;
  height: 46px;
  border-radius: 10px;
  border: 1px solid var(--tea-line);
  padding: 0 14px;
  font-family: var(--tea-font);
  font-size: 14px;
  background: var(--tea-surface-2);
  color: var(--tea-ink);
  transition: all 0.15s;
  outline: none;
}

.tea-login-input.is-focus,
.tea-login-input:focus {
  border-color: var(--tea-purple);
  background: white;
  box-shadow: 0 0 0 4px var(--tea-purple-50);
}

.tea-login-forgot {
  font-size: 11px;
  font-weight: 600;
  color: var(--tea-blue);
  text-decoration: none;
}

.tea-login-legal {
  margin: 8px 0 4px;
  font-size: 11.5px;
  color: var(--tea-mist);
  line-height: 1.5;
  text-align: center;
}

.tea-login-legal a {
  color: var(--tea-ink);
  font-weight: 600;
}

.tea-login-submit {
  width: 100%;
  justify-content: center;
  height: 46px;
  margin-top: 4px;
}

.tea-login-remember {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: var(--tea-slate);
  cursor: pointer;
  margin-top: 4px;
}

.tea-login-remember input {
  accent-color: var(--tea-purple);
  width: 14px;
  height: 14px;
}

/* ====================================================================
   LANDING
   ==================================================================== */
.tea-landing {
  background: #121A26;
  color: white;
}

.tea-land-hero {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 48px;
}

.tea-land-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.tea-land-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: white;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.02em;
  margin-bottom: 22px;
  backdrop-filter: blur(6px);
}

.tea-land-eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--tea-amber);
}

.tea-land-eyebrow--cyan {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 12px;
  color: var(--tea-cyan);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
  backdrop-filter: none;
}

.tea-land-eyebrow--white {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
  backdrop-filter: none;
}

.tea-land-kicker {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  opacity: 0.92;
  letter-spacing: -0.01em;
  max-width: 720px;
}

.tea-land-h1 {
  margin: 4px 0 18px;
  max-width: 720px;
  font-size: clamp(40px, 7vw, 92px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: white;
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.25);
}

.tea-land-h1__grad {
  background: linear-gradient(120deg, #F7C116, #EB7127 30%, #D30EA2 60%, #6D4ED2 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 6px;
}

.tea-land-lede {
  margin: 0 0 32px;
  max-width: 540px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}

.tea-land-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.tea-land-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 28px;
  font-weight: 700;
  font-size: 15px;
  border-radius: 12px;
  text-decoration: none;
  white-space: nowrap;
}

.tea-land-cta--white {
  background: white;
  color: var(--tea-ink);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.45);
}

.tea-land-cta--ghost {
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
}

.tea-land-cta--inkghost {
  background: rgba(0, 0, 0, 0.18);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.tea-land-feats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 64px;
  max-width: 920px;
}

.tea-land-feat {
  padding: 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  backdrop-filter: blur(6px);
}

.tea-land-feat__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  color: white;
  margin-bottom: 12px;
}

.tea-land-feat__title {
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 4px;
}

.tea-land-feat p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

/* HOW */
.tea-land-how {
  background: #121A26;
  padding: 104px 48px 96px;
  position: relative;
  overflow: hidden;
}

.tea-land-how__blob {
  position: absolute;
  top: -100px;
  right: -60px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109, 78, 210, 0.3), transparent 65%);
  filter: blur(20px);
  pointer-events: none;
}

.tea-land-how__inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.tea-land-how__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 56px;
}

.tea-land-h2 {
  margin: 0;
  font-size: clamp(32px, 4.6vw, 56px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  max-width: 760px;
  color: white;
}

.tea-land-h2--card {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
  letter-spacing: -0.03em;
}

.tea-land-h2-sub {
  margin: 14px 0 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.65);
  max-width: 560px;
  line-height: 1.55;
}

.tea-land-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tea-cyan);
  text-decoration: none;
  letter-spacing: -0.01em;
}

/* TIMELINE */
.tea-timeline {
  position: relative;
}

.tea-timeline__line {
  position: absolute;
  top: 28px;
  left: 5%;
  right: 5%;
  height: 3px;
  background: linear-gradient(90deg, #EB7127 0%, #D30EA2 25%, #6D4ED2 50%, #5086FC 75%, #07B6D3 100%);
  border-radius: 999px;
  box-shadow: 0 0 24px rgba(211, 14, 162, 0.4);
}

.tea-timeline__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  position: relative;
}

.tea-timeline__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.tea-timeline__node {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: white;
  font-size: 22px;
  font-weight: 800;
  display: grid;
  place-items: center;
  font-family: var(--tea-mono);
  letter-spacing: -0.02em;
}

.tea-timeline__tick {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.18);
  margin: 14px 0;
}

.tea-timeline__title {
  font-weight: 800;
  font-size: 16px;
  color: white;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.tea-timeline__step p {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.55;
  max-width: 200px;
}

/* STATS */
.tea-land-stats {
  background: #0B121C;
  padding: 56px 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tea-land-stats__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.tea-land-stat {
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  padding-left: 20px;
}

.tea-land-stat__n {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-family: var(--tea-mono);
  color: white;
  line-height: 1;
}

.tea-land-stat__l {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* CTA BAND */
.tea-land-cta-band {
  background: #121A26;
  padding: 96px 48px;
}

.tea-land-cta-card {
  max-width: 1080px;
  margin: 0 auto;
  background: var(--tea-gradient);
  border-radius: 28px;
  padding: 56px 56px 52px;
  position: relative;
  overflow: hidden;
}

.tea-land-cta-card__shine {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.18), transparent 50%);
  pointer-events: none;
}

.tea-land-cta-card__row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.tea-land-cta-card__text {
  flex: 1 1 420px;
}

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (max-width: 980px) {
  .tea-hero-nav {
    padding: 18px 24px;
  }
  .tea-hero-nav__burger {
    display: flex;
  }
  .tea-hero-nav__links {
    position: absolute;
    top: 76px;
    right: 24px;
    left: 24px;
    z-index: 10;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    background: rgba(18, 26, 38, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 14px;
    display: none;
  }
  .tea-hero-nav__links.is-open {
    display: flex;
  }
  .tea-hero-nav__links a {
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
  }
  .tea-land-hero {
    padding: 0 24px;
  }
  .tea-land-feats {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 48px;
  }
  .tea-land-how {
    padding: 72px 24px 64px;
  }
  .tea-land-how__head {
    margin-bottom: 36px;
  }
  .tea-land-stats {
    padding: 40px 24px;
  }
  .tea-land-stats__inner {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
  .tea-land-cta-band {
    padding: 64px 24px;
  }
  .tea-land-cta-card {
    padding: 36px 28px 32px;
    border-radius: 22px;
  }
  .tea-hero-foot,
  .tea-hero-foot.is-dark {
    padding: 20px 24px;
  }
  /* Timeline becomes vertical at this size */
  .tea-timeline__line {
    top: 0;
    bottom: 0;
    left: 28px;
    right: auto;
    width: 3px;
    height: auto;
    background: linear-gradient(180deg, #EB7127 0%, #D30EA2 25%, #6D4ED2 50%, #5086FC 75%, #07B6D3 100%);
  }
  .tea-timeline__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .tea-timeline__step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 18px;
    padding-left: 0;
  }
  .tea-timeline__node {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
  }
  .tea-timeline__tick {
    display: none;
  }
  .tea-timeline__title {
    margin: 14px 0 4px;
  }
  .tea-timeline__step p {
    max-width: none;
  }
}
@media (max-width: 640px) {
  .tea-hero-nav {
    padding: 14px 18px;
  }
  .tea-hero-nav__brand img {
    height: 32px;
  }
  .tea-land-hero {
    padding: 0 18px;
  }
  .tea-land-kicker {
    font-size: 18px;
  }
  .tea-land-h1 {
    font-size: clamp(36px, 12vw, 56px);
  }
  .tea-land-lede {
    font-size: 15px;
    margin-bottom: 24px;
  }
  .tea-land-cta {
    height: 48px;
    padding: 0 22px;
    font-size: 14px;
  }
  .tea-land-feats {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 40px;
  }
  .tea-land-how {
    padding: 56px 18px 48px;
  }
  .tea-land-how__blob {
    display: none;
  }
  .tea-land-stats {
    padding: 32px 18px;
  }
  .tea-land-stats__inner {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .tea-land-stat__n {
    font-size: 30px;
  }
  .tea-land-stat {
    padding-left: 14px;
  }
  .tea-land-cta-band {
    padding: 48px 18px;
  }
  .tea-land-cta-card {
    padding: 28px 20px;
  }
  .tea-hero-foot,
  .tea-hero-foot.is-dark {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px;
  }
  .tea-hero-foot__brand {
    font-size: 11px;
  }
  .tea-hero-foot__links {
    gap: 14px;
    flex-wrap: wrap;
    font-size: 11px;
  }
  .tea-login-wrap {
    padding: 24px 14px 40px;
  }
  .tea-login-card__body {
    padding: 26px 22px 22px;
  }
}
/* =====================================================================
   Dashboard — modular responsive blocks
   ===================================================================== */
/* hero banner */
.tea-dash-hero {
  position: relative;
  border-radius: 24px;
  padding: 28px 32px;
  color: #fff;
  background: linear-gradient(120deg, #1F1247 0%, #6D4ED2 38%, #D30EA2 75%, #EB7127 100%);
  overflow: hidden;
  margin-bottom: 28px;
}

.tea-dash-hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 200px at 90% 110%, rgba(255, 255, 255, 0.18), transparent);
  pointer-events: none;
}

.tea-dash-hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
}

.tea-dash-hero__copy {
  flex: 1;
  min-width: 0;
}

.tea-dash-hero__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 8px;
}

.tea-dash-hero__title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 520px;
}

.tea-dash-hero__title span {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  text-underline-offset: 5px;
}

.tea-dash-hero__cta {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.tea-dash-hero__resume {
  background: #fff !important;
  color: #1F1247 !important;
}

.tea-dash-hero__view {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
  background: transparent !important;
}

.tea-dash-hero__ring {
  width: 200px;
  height: 160px;
  border-radius: 18px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.tea-dash-hero__ring-label {
  position: absolute;
  bottom: 14px;
  left: 18px;
  right: 18px;
  font-size: 11px;
  opacity: 0.85;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* page head — title + actions */
.tea-dash-head {
  gap: 16px;
  flex-wrap: wrap;
}

.tea-dash-head__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* in-progress card foot */
.tea-dash-card__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  flex-wrap: wrap;
}

.tea-dash-card__author {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tea-dash-card__author span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tea-dash-card__count {
  font-size: 12px;
  color: var(--tea-mist);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.tea-dash-card__cta {
  margin-left: auto;
  flex-shrink: 0;
}

/* recommended row head */
.tea-dash-rec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.tea-dash-rec-head__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* in-progress / up-next section heads */
.tea-dash-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.tea-dash-section-head__link {
  font-size: 13px;
  color: var(--tea-purple);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
}

/* up next card */
.tea-dash-upnext {
  padding: 20px;
  align-self: start;
}

.tea-dash-upnext__cta {
  width: 100%;
  margin-top: 14px;
  justify-content: center;
}

/* upcoming item */
.tea-dash-up {
  display: flex;
  gap: 14px;
  padding: 12px 4px;
  align-items: center;
  border-bottom: 1px solid var(--tea-line-2);
}

.tea-dash-up__time {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-weight: 800;
  line-height: 1;
}

.tea-dash-up__time--purple {
  background: var(--tea-purple-50);
  color: var(--tea-purple);
}

.tea-dash-up__time--cyan {
  background: var(--tea-cyan-50);
  color: var(--tea-cyan);
}

.tea-dash-up__time--pink {
  background: var(--tea-pink-50);
  color: var(--tea-pink);
}

.tea-dash-up__time--blue {
  background: var(--tea-blue-50);
  color: var(--tea-blue);
}

.tea-dash-up__time-h {
  font-size: 18px;
}

.tea-dash-up__time-d {
  font-size: 10px;
  opacity: 0.8;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tea-dash-up__copy {
  flex: 1;
  min-width: 0;
}

.tea-dash-up__title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tea-dash-up__meta {
  font-size: 12px;
  color: var(--tea-mist);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tea-dash-up__cta {
  flex-shrink: 0;
}

/* new scenario card foot */
.tea-dash-newcard__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.tea-dash-newcard__cta {
  margin-left: auto;
  flex-shrink: 0;
}

/* =====================================================================
   Dashboard — breakpoints
   ===================================================================== */
/* ≤ 880px : hero stacks, ring under copy, page head stacks */
@media (max-width: 880px) {
  .tea-dash-hero {
    padding: 22px;
  }
  .tea-dash-hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }
  .tea-dash-hero__title {
    font-size: 22px;
    max-width: none;
  }
  .tea-dash-hero__ring {
    width: 100%;
    height: auto;
    padding: 18px 18px 36px;
  }
  .tea-dash-hero__cta .tea-btn {
    flex: 1;
    justify-content: center;
  }
  .tea-dash-head__actions {
    width: 100%;
  }
  .tea-dash-head__actions .tea-btn {
    flex: 1;
    justify-content: center;
  }
}
/* ≤ 600px : tighter hero, stat numbers shrink */
@media (max-width: 600px) {
  .tea-dash-hero {
    padding: 18px;
    border-radius: 18px;
    margin-bottom: 20px;
  }
  .tea-dash-hero__title {
    font-size: 19px;
  }
  .tea-dash-hero__cta .tea-btn {
    font-size: 13px;
    padding: 10px 14px;
  }
  .tea-dash-hero__ring-label {
    font-size: 10px;
  }
  .tea-stat-num {
    font-size: 28px !important;
  }
  .tea-dash-up {
    gap: 10px;
    padding: 10px 2px;
  }
  .tea-dash-up__time {
    width: 46px;
    height: 46px;
    border-radius: 12px;
  }
  .tea-dash-up__time-h {
    font-size: 16px;
  }
  .tea-dash-card__foot {
    gap: 8px;
  }
  .tea-dash-card__count {
    display: none;
  }
}
/* ≤ 420px : final compaction */
@media (max-width: 420px) {
  .tea-dash-hero__cta {
    flex-direction: column;
  }
  .tea-dash-hero__cta .tea-btn {
    width: 100%;
  }
  .tea-dash-stats {
    grid-template-columns: 1fr;
  }
  .tea-dash-head__actions {
    flex-direction: column;
  }
}
/* =====================================================================
   Dashboard — final narrow-width hardening
   ===================================================================== */
.tea-dash-head {
  align-items: flex-start;
}

.tea-dash-head > div:first-child {
  min-width: 0;
  flex: 1;
}

.tea-dash-head .tea-h1 {
  overflow-wrap: break-word;
  word-break: break-word;
}

.tea-dash-head .tea-sub {
  overflow-wrap: break-word;
}

.tea-dash-head .tea-eyebrow {
  overflow-wrap: break-word;
}

.tea-stat-num {
  word-break: break-word;
}

.tea-card {
  min-width: 0;
}

.tea-dash-inprog > * {
  min-width: 0;
}

.tea-dash-recs > * {
  min-width: 0;
}

.tea-dash-hero, .tea-dash-hero__inner, .tea-dash-hero__copy {
  min-width: 0;
}

.tea-dash-hero__title {
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 600px) {
  .tea-page {
    padding-left: 16px;
    padding-right: 16px;
  }
  .tea-h1 {
    font-size: 24px;
  }
}
@media (max-width: 420px) {
  .tea-page {
    padding-left: 12px;
    padding-right: 12px;
  }
  .tea-h1 {
    font-size: 22px;
  }
  .tea-dash-section-head .tea-h2 {
    font-size: 18px;
  }
}
/* ============== Dashboard hero variants A / B / C ============== */
.tea-hero-wrap {
  position: relative;
  margin-bottom: 28px;
}

.tea-hero-switch {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(20, 12, 52, 0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 4px 6px 4px 10px;
}

.tea-hero-switch__lab {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-right: 4px;
}

.tea-hero-switch__btn {
  appearance: none;
  border: none;
  background: transparent;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  cursor: pointer;
  font: 600 11px/1 var(--tea-font);
  color: rgba(255, 255, 255, 0.75);
}

.tea-hero-switch__btn.is-active {
  background: #fff;
  color: var(--tea-purple);
}

.tea-hero-c .tea-hero-switch {
  background: rgba(20, 12, 52, 0.85);
}

/* ---------- Variant A: refined gradient + scenario preview ---------- */
.tea-hero-a {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 28px 32px;
  background: linear-gradient(135deg, #1F1247 0%, #4424A8 38%, #6D4ED2 70%, #D30EA2 110%);
  color: #fff;
}

.tea-hero-a__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(600px 200px at 100% 0%, rgba(244, 224, 107, 0.15), transparent 60%), radial-gradient(500px 180px at 0% 100%, rgba(11, 217, 217, 0.18), transparent 60%);
}

.tea-hero-a__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
}

.tea-hero-a__copy {
  flex: 1;
  min-width: 0;
}

.tea-hero-a__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 10px;
}

.tea-hero-a__title {
  margin: 0 0 12px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.tea-hero-a__next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
}

.tea-hero-a__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--tea-saffron);
  box-shadow: 0 0 0 3px rgba(247, 193, 22, 0.25);
}

.tea-hero-a__meta {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

.tea-hero-a__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tea-hero-a__cta {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.tea-hero-a__resume {
  background: #fff !important;
  color: #1F1247 !important;
  font-weight: 700;
}

.tea-hero-a__view {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
  background: transparent !important;
}

.tea-hero-a__media {
  position: relative;
  width: 280px;
  height: 180px;
  flex-shrink: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.45);
}

.tea-hero-a__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05);
}

.tea-hero-a__media-ring {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 50px;
  height: 50px;
  background: rgba(20, 12, 52, 0.55);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 6px;
}

.tea-hero-a__media-pill {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(20, 12, 52, 0.7);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ---------- Variant B: full-bleed scene with scrim ---------- */
.tea-hero-b {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  min-height: 280px;
  background-size: cover;
  background-position: center;
  color: #fff;
  isolation: isolate;
}

.tea-hero-b__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(120deg, rgba(31, 18, 71, 0.92) 0%, rgba(68, 36, 168, 0.78) 38%, rgba(31, 18, 71, 0.55) 70%, rgba(31, 18, 71, 0.85) 100%);
}

.tea-hero-b__inner {
  position: relative;
  z-index: 1;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 280px;
  justify-content: space-between;
}

.tea-hero-b__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tea-hero-b__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
}

.tea-hero-b__pulse {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #0BD9D9;
  box-shadow: 0 0 0 0 rgba(11, 217, 217, 0.6);
  animation: tea-pulse 2s infinite;
}

@keyframes tea-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(11, 217, 217, 0.6);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(11, 217, 217, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(11, 217, 217, 0);
  }
}
.tea-hero-b__progress {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.tea-hero-b__progress small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-left: 4px;
}

.tea-hero-b__title {
  margin: 0;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  max-width: 600px;
}

.tea-hero-b__next {
  font-size: 14px;
  opacity: 0.9;
}

.tea-hero-b__bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.tea-hero-b__bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #F4E06B, #D30EA2 60%, #6D4ED2);
}

.tea-hero-b__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 4px;
}

.tea-hero-b__meta {
  display: flex;
  gap: 18px;
  font-size: 13px;
  opacity: 0.9;
}

.tea-hero-b__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tea-hero-b__cta {
  background: #fff !important;
  color: #1F1247 !important;
  font-weight: 700;
}

/* ---------- Variant C: light card, calm structure ---------- */
.tea-hero-c {
  position: relative;
  display: flex;
  background: #fff;
  border-radius: 24px;
  border: 1px solid var(--tea-line);
  box-shadow: 0 20px 50px -22px rgba(31, 18, 71, 0.18);
  overflow: hidden;
}

.tea-hero-c__rail {
  width: 8px;
  background: linear-gradient(180deg, #6D4ED2 0%, #D30EA2 50%, #F7C116 100%);
}

.tea-hero-c__main {
  flex: 1;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.tea-hero-c__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.tea-hero-c__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tea-mist);
  margin-bottom: 6px;
}

.tea-hero-c__title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  color: var(--tea-ink);
  letter-spacing: -0.02em;
}

.tea-hero-c__ring {
  position: relative;
  width: 68px;
  height: 68px;
  flex-shrink: 0;
}

.tea-hero-c__ring-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--tea-purple);
}

.tea-hero-c__rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--tea-line);
}

.tea-hero-c__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--tea-line);
  font-size: 14px;
}

.tea-hero-c__row-lab {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tea-mist);
  width: 80px;
  flex-shrink: 0;
}

.tea-hero-c__row-val {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tea-ink);
  font-weight: 500;
}

.tea-hero-c__cta {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.tea-hero-c__art {
  width: 240px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  border-left: 1px solid var(--tea-line);
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .tea-hero-a {
    padding: 22px;
  }
  .tea-hero-a__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }
  .tea-hero-a__title {
    font-size: 24px;
  }
  .tea-hero-a__media {
    width: 100%;
    height: 160px;
  }
  .tea-hero-a__cta .tea-btn {
    flex: 1;
    justify-content: center;
  }
  .tea-hero-b__inner {
    padding: 22px;
    min-height: 260px;
  }
  .tea-hero-b__title {
    font-size: 28px;
  }
  .tea-hero-b__foot {
    flex-direction: column;
    align-items: stretch;
  }
  .tea-hero-b__cta {
    justify-content: center;
  }
  .tea-hero-c__art {
    display: none;
  }
  .tea-hero-c__main {
    padding: 20px;
  }
  .tea-hero-c__title {
    font-size: 22px;
  }
}
@media (max-width: 600px) {
  .tea-hero-a {
    padding: 18px;
    border-radius: 18px;
  }
  .tea-hero-a__title {
    font-size: 21px;
  }
  .tea-hero-a__media {
    height: 140px;
  }
  .tea-hero-a__meta {
    flex-wrap: wrap;
    gap: 10px;
  }
  .tea-hero-a__cta {
    flex-direction: column;
  }
  .tea-hero-a__cta .tea-btn {
    width: 100%;
  }
  .tea-hero-b__inner {
    padding: 18px;
  }
  .tea-hero-b__title {
    font-size: 24px;
  }
  .tea-hero-b__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .tea-hero-b__meta {
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
  }
  .tea-hero-c__main {
    padding: 16px;
  }
  .tea-hero-c__title {
    font-size: 19px;
  }
  .tea-hero-c__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 0;
  }
  .tea-hero-c__row-lab {
    width: auto;
  }
  .tea-hero-c__cta {
    flex-direction: column;
  }
  .tea-hero-c__cta .tea-btn {
    width: 100%;
  }
  .tea-hero-switch {
    top: 8px;
    right: 8px;
    padding: 3px 4px 3px 8px;
  }
  .tea-hero-switch__lab {
    display: none;
  }
}
/* ============== Hero state toggle (in-progress / empty) ============== */
.tea-hero-state {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(20, 12, 52, 0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 4px 6px 4px 10px;
}

.tea-hero-state__lab {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-right: 4px;
}

.tea-hero-state__btn {
  appearance: none;
  border: none;
  background: transparent;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  cursor: pointer;
  font: 600 11px/1 var(--tea-font);
  color: rgba(255, 255, 255, 0.75);
}

.tea-hero-state__btn.is-active {
  background: #fff;
  color: var(--tea-purple);
}

/* ============== Hero empty state ============== */
.tea-hero-empty {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 32px;
  background: radial-gradient(700px 220px at 100% 0%, rgba(244, 224, 107, 0.18), transparent 60%), radial-gradient(500px 200px at 0% 100%, rgba(11, 217, 217, 0.18), transparent 60%), linear-gradient(135deg, #1F1247 0%, #4424A8 50%, #6D4ED2 100%);
  color: #fff;
}

.tea-hero-empty__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(600px 200px at 50% 110%, rgba(255, 255, 255, 0.08), transparent 60%);
}

.tea-hero-empty__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
}

.tea-hero-empty__copy {
  flex: 1;
  min-width: 0;
  max-width: 580px;
}

.tea-hero-empty__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 10px;
}

.tea-hero-empty__title {
  margin: 0 0 12px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.tea-hero-empty__sub {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  max-width: 540px;
  text-wrap: pretty;
}

.tea-hero-empty__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tea-hero-empty__primary {
  background: #fff !important;
  color: #1F1247 !important;
  font-weight: 700;
  text-decoration: none;
}

.tea-hero-empty__ghost {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
  background: transparent !important;
  text-decoration: none;
}

.tea-hero-empty__tips {
  display: flex;
  gap: 18px;
  margin-top: 22px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
  flex-wrap: wrap;
}

.tea-hero-empty__tips span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.tea-hero-empty__tip-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

/* Orbital art */
.tea-hero-empty__art {
  position: relative;
  width: 240px;
  height: 220px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.tea-hero-empty__orbit {
  position: relative;
  width: 220px;
  height: 220px;
  display: grid;
  place-items: center;
}

.tea-hero-empty__orbit::before,
.tea-hero-empty__orbit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.18);
}

.tea-hero-empty__orbit::after {
  inset: 24px;
  border-color: rgba(255, 255, 255, 0.12);
}

.tea-hero-empty__planet {
  width: 92px;
  height: 92px;
  border-radius: 999px;
  background: linear-gradient(135deg, #F4E06B 0%, #F7C116 60%, #ec9b1f 100%);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.35), inset 0 -6px 18px rgba(0, 0, 0, 0.1);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
}

.tea-hero-empty__moon {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.tea-hero-empty__moon--1 {
  background: #D30EA2;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.tea-hero-empty__moon--2 {
  background: #0BD9D9;
  bottom: 22px;
  right: 14px;
  width: 22px;
  height: 22px;
}

.tea-hero-empty__moon--3 {
  background: #6D4ED2;
  bottom: 38px;
  left: 18px;
  width: 12px;
  height: 12px;
}

/* Responsive */
@media (max-width: 880px) {
  .tea-hero-empty {
    padding: 22px;
  }
  .tea-hero-empty__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }
  .tea-hero-empty__title {
    font-size: 24px;
  }
  .tea-hero-empty__art {
    width: 100%;
    height: 160px;
  }
  .tea-hero-empty__orbit {
    width: 160px;
    height: 160px;
  }
  .tea-hero-empty__planet {
    width: 72px;
    height: 72px;
  }
  .tea-hero-empty__cta .tea-btn {
    flex: 1;
    justify-content: center;
  }
}
@media (max-width: 600px) {
  .tea-hero-empty {
    padding: 18px;
    border-radius: 18px;
  }
  .tea-hero-empty__title {
    font-size: 20px;
  }
  .tea-hero-empty__sub {
    font-size: 13px;
  }
  .tea-hero-empty__cta {
    flex-direction: column;
  }
  .tea-hero-empty__cta .tea-btn {
    width: 100%;
  }
  .tea-hero-empty__tips {
    gap: 12px;
    font-size: 11px;
  }
  .tea-hero-state {
    top: 8px;
    right: 8px;
    padding: 3px 4px 3px 8px;
  }
  .tea-hero-state__lab {
    display: none;
  }
}
/* ====================================================================
   RTL — Arabic (dir="rtl") support
   In Liferay 7.4, when a user's locale is Arabic the portal sets
   dir="rtl" on the <html> element. All overrides below use
   [dir="rtl"] as the ancestor selector so they are scoped to RTL
   mode only, and use flat (non-nested) selectors for gulp compat.
   ==================================================================== */
/* ---------- Arabic font for entire RTL root ---------- */
[dir=rtl] .tea-root,
[dir=rtl] .tea-root * {
  font-family: var(--tea-font-ar);
}

/* Base direction & text alignment */
[dir=rtl] .tea-root {
  direction: rtl;
  text-align: right;
}

/* ---------- App shell: sidebar flips to the right ---------- */
[dir=rtl] .tea-app {
  grid-template-columns: 1fr 244px;
}

/* ---------- Rail (sidebar): border moves to the left side ---------- */
[dir=rtl] .tea-rail {
  border-right: none;
  border-left: 1px solid var(--tea-line);
  order: 2;
}

[dir=rtl] .tea-main {
  order: 1;
}

/* ---------- Rail head: logo and brand text ---------- */
[dir=rtl] .tea-rail-head {
  flex-direction: row-reverse;
}

/* ---------- Nav items: icon + label + pill badge ---------- */
[dir=rtl] .tea-nav-item {
  flex-direction: row-reverse;
  text-align: right;
}

[dir=rtl] .tea-nav-item .tea-pill {
  margin-left: 0;
  margin-right: auto;
}

/* ---------- Rail foot: logout button goes to the left ---------- */
[dir=rtl] .tea-rail-foot {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-rail-foot button {
  margin-left: 0;
  margin-right: auto;
}

/* ---------- Top bar: search icon inside input field ---------- */
[dir=rtl] .tea-search .tea-ic {
  left: auto;
  right: 14px;
}

[dir=rtl] .tea-search input {
  padding: 0 44px 0 16px;
  text-align: right;
}

[dir=rtl] .tea-search kbd {
  right: auto;
  left: 12px;
}

/* ---------- Top bar: action cluster moves to the left ---------- */
[dir=rtl] .tea-top-actions {
  margin-left: 0;
  margin-right: auto;
}

/* Notification dot on icon buttons stays visually aligned */
[dir=rtl] .tea-icon-btn .tea-dot {
  right: auto;
  left: 8px;
}

/* Top user pill reverses its children */
[dir=rtl] .tea-top-user {
  flex-direction: row-reverse;
  padding: 4px 4px 4px 12px;
}

/* Language button: font family for Arabic label is already set by dir=rtl font rule;
   no structural override needed — the flex row is naturally mirrored in RTL */
/* .tea-flip-x is applied in LTR to reverse the arrow for RTL reading direction.
   In an RTL context the icon is already pointing the right way, so cancel the flip. */
[dir=rtl] .tea-flip-x {
  transform: none;
}

/* ---------- Toolbar search: icon flips ---------- */
[dir=rtl] .tea-toolbar__search svg {
  left: auto;
  right: 12px;
}

[dir=rtl] .tea-toolbar__search input {
  padding: 0 34px 0 12px;
  text-align: right;
}

/* ---------- Page head ---------- */
[dir=rtl] .tea-page-head {
  flex-direction: row-reverse;
}

/* ---------- Card: text alignment ---------- */
[dir=rtl] .tea-card {
  text-align: right;
}

/* ---------- Progress bar inner fill: starts from right ---------- */
[dir=rtl] .tea-bar > i {
  left: auto;
  right: 0;
}

/* ---------- Avatar stack: overlap direction reverses ---------- */
[dir=rtl] .tea-ava-stack .tea-ava + .tea-ava {
  margin-left: 0;
  margin-right: -8px;
}

/* ---------- Scenario row list ---------- */
[dir=rtl] .tea-scenario-row {
  direction: rtl;
}

[dir=rtl] .tea-scenario-row__body {
  text-align: right;
}

[dir=rtl] .tea-scenario-row__skills-label {
  margin-right: 0;
  margin-left: 4px;
}

/* ---------- Pagination ---------- */
[dir=rtl] .tea-pagination {
  flex-direction: row-reverse;
}

/* ---------- Page foot: links swap margins ---------- */
[dir=rtl] .tea-page-foot {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-page-foot a {
  margin-left: 0;
  margin-right: 18px;
}

/* ---------- Scenario hero ---------- */
[dir=rtl] .tea-scenario-hero {
  direction: rtl;
}

[dir=rtl] .tea-scenario-hero__skills-label {
  margin-right: 0;
  margin-left: 6px;
}

/* ---------- Phase grid ---------- */
[dir=rtl] .tea-phase__head {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-phase__cta {
  flex-direction: row-reverse;
}

/* ---------- Flow head / breadcrumb ---------- */
[dir=rtl] .tea-flow-head {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-flow-crumb {
  flex-direction: row-reverse;
}

/* ---------- Flow foot ---------- */
[dir=rtl] .tea-flow-foot {
  flex-direction: row-reverse;
}

/* ---------- Slide content ---------- */
[dir=rtl] .tea-slide__content {
  text-align: right;
}

[dir=rtl] .tea-slide__logo {
  right: auto;
  left: 22px;
}

[dir=rtl] .tea-slide__page {
  left: auto;
  right: 16px;
}

/* ---------- Slide split layout ---------- */
[dir=rtl] .tea-slide__split {
  direction: rtl;
}

/* ---------- Question card ---------- */
[dir=rtl] .tea-qcard {
  text-align: right;
  direction: rtl;
}

[dir=rtl] .tea-qcard__correct {
  border-left: none;
  border-right: 3px solid var(--tea-success);
}

/* ---------- Practice cards ---------- */
[dir=rtl] .tea-prac-card {
  direction: rtl;
}

[dir=rtl] .tea-prac-card__body {
  text-align: right;
}

[dir=rtl] .tea-prac-card__list li {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-practice-card__body li {
  padding-left: 0;
  padding-right: 22px;
}

[dir=rtl] .tea-practice-card__body li::before {
  left: auto;
  right: 0;
}

/* ---------- SimuTutor v2 ---------- */
[dir=rtl] .tea-sim2 {
  direction: rtl;
}

[dir=rtl] .tea-sim2__bar {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-sim2__bar-left {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-sim2__cam-tag {
  left: auto;
  right: 14px;
}

[dir=rtl] .tea-sim2__cam-cog {
  right: auto;
  left: 12px;
}

[dir=rtl] .tea-sim2__actions {
  flex-direction: row-reverse;
}

/* ---------- LiveTutor hero ---------- */
[dir=rtl] .tea-lt__hero {
  direction: rtl;
  text-align: right;
}

[dir=rtl] .tea-lt__kicker {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-lt__step {
  direction: rtl;
}

[dir=rtl] .tea-lt__tutors-head {
  text-align: right;
}

[dir=rtl] .tea-lt__tutor-online {
  right: auto;
  left: -2px;
}

/* ---------- Calendar ---------- */
[dir=rtl] .tea-cal {
  direction: rtl;
}

[dir=rtl] .tea-cal__side {
  text-align: right;
}

[dir=rtl] .tea-cal__tutor-online {
  right: auto;
  left: -2px;
}

[dir=rtl] .tea-cal__main-head {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-cal__slot.is-taken small {
  direction: rtl;
}

[dir=rtl] .tea-cal__foot {
  flex-direction: row-reverse;
}

/* ---------- Booked confirmation ---------- */
[dir=rtl] .tea-booked {
  direction: rtl;
  text-align: right;
}

[dir=rtl] .tea-booked__card {
  text-align: right;
}

[dir=rtl] .tea-booked__cta {
  flex-direction: row-reverse;
}

/* ---------- Tutor banner ---------- */
[dir=rtl] .tea-tutor-banner {
  direction: rtl;
}

[dir=rtl] .tea-tutor-banner__inner {
  direction: rtl;
}

[dir=rtl] .tea-tutor-banner__cta {
  flex-direction: row-reverse;
}

/* ---------- Tutor session card ---------- */
[dir=rtl] .tea-tcard {
  direction: rtl;
}

[dir=rtl] .tea-tcard__body {
  text-align: right;
}

[dir=rtl] .tea-tcard__skills-label {
  margin-right: 0;
  margin-left: 4px;
}

[dir=rtl] .tea-tcard__when {
  left: auto;
  right: 12px;
}

[dir=rtl] .tea-tcard__status {
  right: auto;
  left: 12px;
}

[dir=rtl] .tea-tcard__cta {
  align-items: stretch;
}

/* ---------- Tutor detail ---------- */
[dir=rtl] .tea-tdetail-hero {
  direction: rtl;
}

[dir=rtl] .tea-tdetail-hero__skills-label {
  margin-right: 0;
  margin-left: 6px;
}

/* ---------- Tutor schedule ---------- */
[dir=rtl] .tea-tsched {
  direction: rtl;
}

[dir=rtl] .tea-tsched__weekhead {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-tsched__legend {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-tsched__slots-head > div {
  text-align: center;
}

[dir=rtl] .tea-tsched__slot {
  direction: rtl;
}

[dir=rtl] .tea-tsched__day.has-slots::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ---------- Coach alert ---------- */
[dir=rtl] .tea-coach-alert {
  grid-template-columns: auto 1fr auto;
  direction: rtl;
}

[dir=rtl] .tea-coach-alert__cta {
  flex-direction: row-reverse;
}

/* ---------- Coach session card ---------- */
[dir=rtl] .tea-ccard {
  direction: rtl;
}

[dir=rtl] .tea-ccard__body {
  text-align: right;
}

[dir=rtl] .tea-ccard__due {
  left: auto;
  right: 12px;
}

[dir=rtl] .tea-ccard__skills-label {
  margin-right: 0;
  margin-left: 4px;
}

/* ---------- Coach feedback ---------- */
[dir=rtl] .tea-cfb-hero {
  direction: rtl;
}

[dir=rtl] .tea-cfb-hero__skills-label {
  margin-right: 0;
  margin-left: 4px;
}

[dir=rtl] .tea-cfb-session h4 {
  padding-right: 0;
  padding-left: 18px;
  border-right: none;
  border-left: 1px solid var(--tea-line);
}

[dir=rtl] .tea-cfb-session__cta {
  margin-left: 0;
  margin-right: auto;
}

[dir=rtl] .tea-cfb-comments__hint {
  border-left: none;
  border-right: 4px solid var(--tea-orange);
  flex-direction: row-reverse;
}

/* ---------- Rubric ---------- */
[dir=rtl] .tea-rubric__row {
  direction: rtl;
}

[dir=rtl] .tea-rubric__skill {
  flex-direction: row-reverse;
}

/* ---------- Coach report ---------- */
[dir=rtl] .tea-creport__bar {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-creport__bar-page {
  margin-left: 0;
  margin-right: auto;
}

[dir=rtl] .tea-creport__page {
  direction: rtl;
  text-align: right;
}

[dir=rtl] .tea-creport__foot {
  flex-direction: row-reverse;
}

/* ---------- Legal pages ---------- */
[dir=rtl] .tea-legal-wrap {
  direction: rtl;
  grid-template-columns: 1fr 280px;
}

[dir=rtl] .tea-legal-toc__link {
  text-align: right;
}

[dir=rtl] .tea-legal-banner {
  border-left: none;
  border-right: 3px solid #F7C116;
}

[dir=rtl] .tea-legal-address {
  border-left: none;
  border-right: 3px solid var(--tea-purple);
}

[dir=rtl] .tea-legal-doc {
  text-align: right;
  direction: rtl;
}

[dir=rtl] .tea-legal-doc ul,
[dir=rtl] .tea-legal-doc ol {
  padding-left: 0;
  padding-right: 22px;
}

[dir=rtl] .tea-legal-rules li {
  padding-left: 0;
  padding-right: 26px;
}

[dir=rtl] .tea-legal-rules li::before {
  left: auto;
  right: 0;
}

[dir=rtl] .tea-legal-section header {
  flex-direction: row-reverse;
}

/* ---------- Hero nav (landing / login) ---------- */
[dir=rtl] .tea-hero-nav {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-hero-nav__links {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-hero-foot {
  flex-direction: row-reverse;
}

/* ---------- Login card ---------- */
[dir=rtl] .tea-login-card {
  direction: rtl;
}

[dir=rtl] .tea-login-field__head {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-login-error {
  flex-direction: row-reverse;
  text-align: right;
}

[dir=rtl] .tea-login-error__close {
  margin-left: 0;
  margin-right: auto;
}

[dir=rtl] .tea-login-remember {
  flex-direction: row-reverse;
}

/* ---------- Landing page ---------- */
[dir=rtl] .tea-land-hero__inner {
  direction: rtl;
}

[dir=rtl] .tea-land-eyebrow {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-land-ctas {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-land-how__head {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-land-stat {
  border-left: none;
  border-right: 2px solid rgba(255, 255, 255, 0.1);
  padding-left: 0;
  padding-right: 20px;
}

[dir=rtl] .tea-land-cta-card__row {
  flex-direction: row-reverse;
}

/* ---------- Dashboard hero ---------- */
[dir=rtl] .tea-dash-hero__inner {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-dash-hero__cta {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-hero-inner {
  flex-direction: row-reverse;
}

/* ---------- Dashboard section heads ---------- */
[dir=rtl] .tea-dash-section-head {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-dash-rec-head {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-dash-head__actions {
  flex-direction: row-reverse;
}

/* ---------- Dashboard upcoming items ---------- */
[dir=rtl] .tea-dash-up {
  flex-direction: row-reverse;
}

/* ---------- Dashboard card foot ---------- */
[dir=rtl] .tea-dash-card__foot {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-dash-card__cta {
  margin-left: 0;
  margin-right: auto;
}

[dir=rtl] .tea-dash-newcard__cta {
  margin-left: 0;
  margin-right: auto;
}

/* ---------- Hero variants A / B / C ---------- */
[dir=rtl] .tea-hero-a__inner {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-hero-a__eyebrow {
  text-align: right;
}

[dir=rtl] .tea-hero-a__cta {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-hero-a__meta {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-hero-a__media-ring {
  right: auto;
  left: 12px;
}

[dir=rtl] .tea-hero-a__media-pill {
  left: auto;
  right: 12px;
}

[dir=rtl] .tea-hero-b__top {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-hero-b__foot {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-hero-b__meta {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-hero-c__head {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-hero-c__cta {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-hero-c__rail {
  order: 2;
}

[dir=rtl] .tea-hero-c__art {
  order: -1;
  border-left: none;
  border-right: 1px solid var(--tea-line);
}

/* ---------- Hero empty state ---------- */
[dir=rtl] .tea-hero-empty__inner {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-hero-empty__cta {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-hero-empty__tips {
  flex-direction: row-reverse;
}

/* ---------- Tabs ---------- */
[dir=rtl] .tea-tabs {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-tab {
  flex-direction: row-reverse;
}

/* ---------- Toolbar ---------- */
[dir=rtl] .tea-toolbar {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-toolbar__sort {
  flex-direction: row-reverse;
}

[dir=rtl] .tea-toolbar__label {
  margin-right: 0;
  margin-left: 4px;
}

[dir=rtl] .tea-toolbar__right {
  flex-direction: row-reverse;
}

/* ---------- Self-assessment ---------- */
[dir=rtl] .tea-assess__hero {
  direction: rtl;
}

[dir=rtl] .tea-assess__stars em {
  margin-left: 0;
  margin-right: 4px;
}

[dir=rtl] .tea-assess__skill-label {
  margin-right: 0;
  margin-left: 4px;
}

[dir=rtl] .tea-assess__thead,
[dir=rtl] .tea-assess__row {
  direction: rtl;
}

/* ---------- Tutor stats ---------- */
[dir=rtl] .tea-tutor-stat {
  flex-direction: row-reverse;
}

/* ---------- Drawer (mobile) in RTL: slides from right side ---------- */
@media (max-width: 880px) {
  [dir=rtl] .tea-app {
    grid-template-columns: 1fr;
  }
  [dir=rtl] .tea-rail {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }
  [dir=rtl] .tea-app.is-drawer-open .tea-rail {
    transform: translateX(0);
  }
}
html, body {
  background: var(--tea-bg);
  color: var(--tea-ink);
  font-family: var(--tea-font);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
}

a:hover {
  color: inherit;
  text-decoration: none;
}

.control-menu,
.control-menu-nav {
  box-shadow: none;
  border-bottom: 1px solid var(--tea-line);
}

body.tea-no-docbar.has-control-menu,
body.tea-no-docbar {
  padding-top: 0 !important;
}

body.tea-no-docbar .control-menu,
body.tea-no-docbar .control-menu-container,
body.tea-no-docbar .lfr-has-sticky-control-menu {
  display: none !important;
}

:root {
  --tea-product-menu-width: 320px;
}

body.tea-product-menu-open .tea-footer {
  padding-left: var(--tea-product-menu-width);
  transition: padding-left 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.tea-app {
  transition: margin-left 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.tea-app.tea-app--no-rail,
.tea-app:not(:has(> .tea-rail)) {
  grid-template-columns: 1fr;
}

.tea-footer {
  transition: padding-left 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@media (max-width: 1080px) {
  body.tea-product-menu-open .tea-app,
  body.tea-product-menu-open .tea-footer {
    margin-left: 0;
    padding-left: 0;
  }
}
.tea-root {
  min-height: 100vh;
  background: var(--tea-bg);
  color: var(--tea-ink);
  font-family: var(--tea-font);
  display: flex;
  flex-direction: column;
}

.tea-root > .tea-app {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}

.tea-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.tea-page {
  flex: 1 1 auto;
}

.tea-rail-head img {
  width: 100%;
  max-width: 180px;
  height: auto;
  display: block;
}

.tea-rail-greet--tutor {
  background: linear-gradient(135deg, #FEF1CC 0%, #FCE3D2 60%, #FBE2F4 100%);
}

.tea-rail-greet--coach {
  background: linear-gradient(135deg, #d3f3f8 0%, #E5EDFF 60%, #ECE7FA 100%);
}

.tea-rail-greet__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.tea-rail-greet__pill--cyan {
  background: rgba(7, 182, 211, 0.18);
  color: #048499;
}
.tea-rail-greet__pill--blue {
  background: rgba(80, 134, 252, 0.18);
  color: #3760cf;
}

.tea-rail-greet__pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.tea-rail-greet__pill--cyan .tea-rail-greet__pill-dot {
  background: var(--tea-cyan);
}
.tea-rail-greet__pill--blue .tea-rail-greet__pill-dot {
  background: var(--tea-blue);
}

.tea-rail-foot__signout {
  margin-left: auto;
  color: var(--tea-mist);
  padding: 6px;
  border-radius: 8px;
  display: grid;
  place-items: center;
}
.tea-rail-foot__signout svg {
  width: 16px;
  height: 16px;
}
.tea-rail-foot__signout:hover {
  background: var(--tea-line-2);
  color: var(--tea-ink);
}

.tea-nav-children {
  margin: 2px 0 4px 28px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 8px;
  border-left: 1px solid var(--tea-line);
}

.tea-nav-item--child {
  padding: 6px 10px;
  font-size: 13px;
  color: var(--tea-slate);
}
.tea-nav-item--child.is-active {
  background: var(--tea-purple-50);
  color: var(--tea-purple);
  font-weight: 600;
}

.tea-topnav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 1;
  min-width: 0;
  max-width: 480px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tea-topnav::-webkit-scrollbar {
  display: none;
}

.tea-topnav__item {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--tea-r-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--tea-slate);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.tea-topnav__item:hover, .tea-topnav__item:focus {
  background: var(--tea-line-2);
  color: var(--tea-ink);
  text-decoration: none;
}
.tea-topnav__item.is-active {
  background: var(--tea-purple-50);
  color: var(--tea-purple);
}

.tea-search {
  flex: 1;
  max-width: 520px;
  min-width: 200px;
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
}
.tea-search > .tea-ic {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--tea-mist);
  pointer-events: none;
  z-index: 2;
}
.tea-search > kbd {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--tea-mono);
  font-size: 11px;
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--tea-mist);
  pointer-events: none;
  z-index: 2;
}
.tea-search .portlet-boundary,
.tea-search .portlet-search-bar,
.tea-search section.portlet,
.tea-search .portlet-content,
.tea-search .portlet-content-container,
.tea-search .portlet-body,
.tea-search .portlet-borderless-container,
.tea-search form,
.tea-search .lfr-tooltip-scope,
.tea-search .input-group,
.tea-search .input-group-item {
  flex: 1;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  min-width: 0;
  min-height: 0;
  width: 100%;
}
.tea-search .portlet-topper,
.tea-search .portlet-title-text {
  display: none;
}
.tea-search .search-bar-suggestions,
.tea-search .search-bar-suggestions > .input-group-item,
.tea-search .search-bar-suggestions > .input-group-item > .input-group {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}
.tea-search input.search-bar-keywords-input,
.tea-search input.form-control,
.tea-search input[type=search],
.tea-search input[type=text],
.tea-search .input-group > input.form-control,
.tea-search .input-group .input-group-item > input.form-control,
.tea-search .input-group .input-group-item .input-group > input.form-control,
.tea-search .input-group .input-group-item .input-group-inset.form-control,
.tea-search .input-group .input-group-item .input-group-inset-after.form-control {
  width: 100%;
  height: 44px;
  border-radius: var(--tea-r-md);
  border-top-right-radius: var(--tea-r-md);
  border-bottom-right-radius: var(--tea-r-md);
  border: 1px solid var(--tea-line);
  background: var(--tea-surface-2);
  padding: 0 84px 0 44px;
  font-size: 14px;
  font-family: var(--tea-font);
  color: var(--tea-ink);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  box-shadow: none;
}
.tea-search input.search-bar-keywords-input:focus,
.tea-search input.form-control:focus,
.tea-search input[type=search]:focus,
.tea-search input[type=text]:focus,
.tea-search .input-group > input.form-control:focus,
.tea-search .input-group .input-group-item > input.form-control:focus,
.tea-search .input-group .input-group-item .input-group > input.form-control:focus,
.tea-search .input-group .input-group-item .input-group-inset.form-control:focus,
.tea-search .input-group .input-group-item .input-group-inset-after.form-control:focus {
  outline: none;
  border-color: var(--tea-purple);
  background: var(--tea-surface);
  box-shadow: 0 0 0 4px var(--tea-purple-50);
}
.tea-search input.search-bar-keywords-input::placeholder,
.tea-search input.form-control::placeholder,
.tea-search input[type=search]::placeholder,
.tea-search input[type=text]::placeholder,
.tea-search .input-group > input.form-control::placeholder,
.tea-search .input-group .input-group-item > input.form-control::placeholder,
.tea-search .input-group .input-group-item .input-group > input.form-control::placeholder,
.tea-search .input-group .input-group-item .input-group-inset.form-control::placeholder,
.tea-search .input-group .input-group-item .input-group-inset-after.form-control::placeholder {
  color: var(--tea-mist);
}
.tea-search .input-group-inset-item,
.tea-search .input-group-inset-item-after {
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  background: transparent;
  border: none;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  z-index: 2;
}
.tea-search button.btn,
.tea-search button.btn-unstyled,
.tea-search button[type=submit] {
  appearance: none;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--tea-mist);
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: var(--tea-r-sm);
  box-shadow: none;
}
.tea-search button.btn:hover, .tea-search button.btn:focus,
.tea-search button.btn-unstyled:hover,
.tea-search button.btn-unstyled:focus,
.tea-search button[type=submit]:hover,
.tea-search button[type=submit]:focus {
  background: var(--tea-line-2);
  color: var(--tea-purple);
  outline: none;
}
.tea-search button.btn .lexicon-icon,
.tea-search button.btn svg,
.tea-search button.btn-unstyled .lexicon-icon,
.tea-search button.btn-unstyled svg,
.tea-search button[type=submit] .lexicon-icon,
.tea-search button[type=submit] svg {
  width: 16px;
  height: 16px;
}
.tea-search .input-group .input-group-item .input-group-inset-after.form-control,
.tea-search .input-group .input-group-item .input-group .input-group-inset-after.form-control {
  padding-right: 84px;
}
@media (max-width: 1180px) {
  .tea-search > kbd {
    display: none;
  }
  .tea-search .input-group-inset-item,
  .tea-search .input-group-inset-item-after {
    right: 4px;
  }
  .tea-search .input-group .input-group-item .input-group-inset-after.form-control,
  .tea-search .input-group .input-group-item .input-group .input-group-inset-after.form-control {
    padding-right: 44px;
  }
}

.tea-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.tea-topbar .tea-icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--tea-r-sm);
  border: 1px solid var(--tea-line);
  background: var(--tea-surface);
  color: var(--tea-slate);
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.tea-topbar .tea-icon-btn:hover, .tea-topbar .tea-icon-btn:focus {
  background: var(--tea-line-2);
  color: var(--tea-ink);
  outline: none;
}
.tea-topbar .tea-icon-btn svg {
  width: 18px;
  height: 18px;
}

.tea-topbar .tea-icon-btn .tea-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tea-pink);
  box-shadow: 0 0 0 2px var(--tea-surface);
}

.tea-topbar .tea-icon-btn .tea-dot--badge {
  width: auto;
  min-width: 18px;
  height: 18px;
  top: -4px;
  right: -4px;
  padding: 0 5px;
  border-radius: 999px;
  color: white;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--tea-font);
  display: grid;
  place-items: center;
  background: var(--tea-pink);
}

.tea-top-user {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 4px;
  border-radius: var(--tea-r-pill);
  border: 1px solid var(--tea-line);
  background: var(--tea-surface);
  cursor: pointer;
  font-family: var(--tea-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--tea-ink-2);
  transition: background 0.15s, border-color 0.15s;
}
.tea-top-user:hover, .tea-top-user:focus {
  background: var(--tea-line-2);
  outline: none;
}
.tea-top-user img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.tea-top-user .ind {
  color: var(--tea-mist);
  font-size: 11px;
}

.tea-popover-host.is-open .tea-top-user {
  background: var(--tea-line-2);
}

.tea-popover-host {
  position: relative;
}
.tea-popover-host .tea-popover-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: 16px;
  box-shadow: var(--tea-shadow-lg);
  z-index: 50;
  overflow: hidden;
}
.tea-popover-host.is-open .tea-popover-panel {
  display: block;
  animation: tea-pop-in 0.15s ease-out;
}
.tea-popover-host[data-tea-popover=bell] .tea-popover-panel {
  width: 380px;
}
.tea-popover-host[data-tea-popover=user] .tea-popover-panel {
  width: 280px;
}

@keyframes tea-pop-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.tea-popover-panel__head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--tea-line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tea-popover-panel__head strong {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tea-ink);
}

.tea-popover-panel__action {
  font-size: 12px;
  color: var(--tea-purple);
  font-weight: 600;
  text-decoration: none;
}
.tea-popover-panel__action:hover {
  color: var(--tea-purple-600);
}

.tea-popover-panel__empty {
  padding: 28px 20px;
  text-align: center;
  color: var(--tea-mist);
}
.tea-popover-panel__empty p {
  margin: 0;
  font-size: 14px;
  color: var(--tea-ink-2);
  font-weight: 600;
}
.tea-popover-panel__empty small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--tea-mist);
}

.tea-popover-panel__empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 14px;
  background: var(--tea-purple-50);
  color: var(--tea-purple);
  display: grid;
  place-items: center;
}
.tea-popover-panel__empty-icon svg {
  width: 22px;
  height: 22px;
}

.tea-popover-panel__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--tea-line-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--tea-purple);
  text-decoration: none;
  background: var(--tea-surface-2);
}
.tea-popover-panel__foot:hover {
  background: var(--tea-purple-50);
  color: var(--tea-purple-600);
}

.tea-popover-panel__user {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--tea-line-2);
}
.tea-popover-panel__user img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.tea-popover-panel__name {
  font-weight: 700;
  font-size: 14px;
  color: var(--tea-ink);
}

.tea-popover-panel__email {
  font-size: 12px;
  color: var(--tea-mist);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.tea-popover-panel__group {
  padding: 6px;
}
.tea-popover-panel__group--danger {
  border-top: 1px solid var(--tea-line-2);
}

.tea-popover-panel__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tea-ink-2);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.tea-popover-panel__item:hover {
  background: var(--tea-line-2);
  color: var(--tea-ink);
  text-decoration: none;
}
.tea-popover-panel__item.is-danger {
  color: var(--tea-pink);
}
.tea-popover-panel__item.is-danger:hover {
  background: var(--tea-pink-50);
  color: var(--tea-pink-600);
}

.tea-popover-panel__icon {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--tea-mist);
}
.tea-popover-panel__icon svg {
  width: 16px;
  height: 16px;
}
.tea-popover-panel__item.is-danger .tea-popover-panel__icon {
  color: var(--tea-pink);
}

.tea-main .portlet-borderless-container,
.tea-main .portlet-content,
.tea-main .portlet-content-container {
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}

.tea-main .portlet {
  background: transparent;
  margin: 0;
  border: none;
  box-shadow: none;
}

.tea-main .portlet-topper,
.tea-main .portlet-title-text {
  display: none;
}

.tea-main .portlet.tea-portlet-card {
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-lg);
  box-shadow: var(--tea-shadow-sm);
  padding: 20px;
}

.tea-root.is-login {
  background: linear-gradient(135deg, rgba(7, 182, 211, 0.62) 0%, rgba(80, 134, 252, 0.45) 40%, rgba(109, 78, 210, 0.5) 75%, rgba(211, 14, 162, 0.4) 100%), var(--tea-ink);
}

.tea-login-shell {
  min-height: 75vh;
  display: flex;
  flex-direction: column;
}

.tea-login-shell .tea-login-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 48px;
}
.tea-login-shell .tea-login-nav img {
  height: 38px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

.tea-login-card {
  width: 100%;
  max-width: 460px;
  margin: auto;
  background: var(--tea-surface);
  border-radius: 22px;
  box-shadow: 0 32px 80px -24px rgba(18, 26, 38, 0.45), 0 8px 18px -8px rgba(18, 26, 38, 0.2);
  overflow: hidden;
  padding: 40px;
}

.tea-login-card.terms-conditions-card {
  max-width: none;
  width: 90%;
}
.tea-login-card.terms-conditions-card .portlet-title-text {
  display: none;
}

.tea-login-footer {
  padding: 20px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  flex-wrap: wrap;
  gap: 12px;
}
.tea-login-footer.is-dark {
  background: #121A26;
  color: rgba(255, 255, 255, 0.55);
}
.tea-login-footer > div:first-child {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tea-login-footer > div:first-child img {
  height: 22px;
  opacity: 0.9;
}
.tea-login-footer a {
  color: inherit;
  text-decoration: none;
}
.tea-login-footer a:hover {
  color: white;
}

.tea-login-footer__links {
  display: flex;
  gap: 22px;
}

.tea-app .tea-burger {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--tea-line);
  border-radius: var(--tea-r-sm);
  cursor: pointer;
  flex-shrink: 0;
}
.tea-app .tea-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--tea-ink-2);
  border-radius: 2px;
}

.tea-drawer-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(18, 26, 38, 0.45);
  z-index: 90;
}

@media (max-width: 1080px) {
  .tea-app {
    grid-template-columns: 1fr;
  }
  .tea-rail {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    overflow-y: auto;
  }
  .tea-app.is-drawer-open .tea-rail {
    transform: translateX(0);
    box-shadow: var(--tea-shadow-lg);
  }
  .tea-app.is-drawer-open .tea-drawer-scrim {
    display: block;
  }
  .tea-app .tea-burger {
    display: inline-flex;
  }
  .tea-topbar {
    padding: 14px 20px;
    gap: 12px;
  }
  .tea-topnav {
    display: none;
  }
}
@media (max-width: 720px) {
  .tea-topbar .user-full-name,
  .tea-topbar .user-display-name {
    display: none;
  }
}
.tea-footer {
  border-top: 1px solid var(--tea-line);
  background: var(--tea-surface);
  margin-top: auto;
}

.tea-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--tea-slate);
}
.tea-footer__inner p {
  margin: 0;
}

.tea-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 22px;
}
.tea-footer__links a {
  color: var(--tea-slate);
  text-decoration: none;
}
.tea-footer__links a:hover {
  color: var(--tea-purple);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media print {
  .tea-rail,
  .tea-topbar,
  .tea-footer,
  .tea-creport__bar,
  .tea-creport__foot,
  .control-menu,
  .lfr-product-menu-panel {
    display: none !important;
  }
  .tea-main,
  .tea-page {
    padding: 0;
  }
}
body.tea-admin-page .tea-app {
  display: grid;
  grid-template-columns: 244px 1fr;
  min-height: 100vh;
  background: var(--tea-bg);
}
body.tea-admin-page .tea-rail--admin .tea-rail-greet {
  background: linear-gradient(135deg, #FBE2F4 0%, #ECE7FA 60%, #d3f3f8 100%);
}
body.tea-admin-page .tea-rail--admin .tea-rail-greet__pill--admin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(211, 14, 162, 0.18);
  color: #a01477;
  font-size: 11px;
  font-weight: 700;
}
body.tea-admin-page .tea-rail--admin .tea-rail-greet__pill-dot--admin {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tea-pink);
}
body.tea-admin-page .tea-rail--admin .tea-nav-item.is-active {
  background: var(--tea-purple-50);
  color: var(--tea-purple);
  font-weight: 600;
}
body.tea-admin-page .tea-rail--admin .tea-nav-item.is-active .tea-ic {
  color: var(--tea-purple);
}
body.tea-admin-page .tea-topbar {
  padding: 18px 32px;
}
body.tea-admin-page .tea-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
body.tea-admin-page .tea-main__content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 32px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}
body.tea-admin-page.is-drawer-open {
  overflow: hidden;
}
@media (max-width: 1080px) {
  body.tea-admin-page .tea-app {
    grid-template-columns: 1fr;
  }
  body.tea-admin-page .tea-rail--admin {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    overflow-y: auto;
  }
  body.tea-admin-page .tea-app.is-drawer-open .tea-rail--admin {
    transform: translateX(0);
    box-shadow: var(--tea-shadow-lg);
  }
  body.tea-admin-page .tea-app.is-drawer-open .tea-drawer-scrim {
    display: block;
  }
  body.tea-admin-page .tea-burger {
    display: inline-flex;
  }
}
@media (max-width: 720px) {
  body.tea-admin-page .tea-main__content {
    padding: 18px;
  }
}

[dir=rtl] body.tea-admin-page .tea-rail--admin {
  border-right: 0;
  border-left: 1px solid var(--tea-line);
}
[dir=rtl] body.tea-admin-page .tea-rail--admin .tea-nav-item .tea-pill {
  margin-left: 0;
  margin-right: auto;
}
[dir=rtl] body.tea-admin-page .tea-rail--admin .tea-rail-foot button,
[dir=rtl] body.tea-admin-page .tea-rail--admin .tea-rail-foot a[title="Sign out"] {
  margin-left: 0 !important;
  margin-right: auto !important;
}
[dir=rtl] body.tea-admin-page .tea-rail--admin .tea-rail-foot a[title="Sign out"] svg {
  transform: scaleX(-1);
}
[dir=rtl] body.tea-admin-page .tea-topbar .tea-top-actions {
  margin-left: 0;
  margin-right: auto;
}
[dir=rtl] body.tea-admin-page .tea-topbar .tea-icon-btn .tea-dot {
  right: auto;
  left: 8px;
}
[dir=rtl] body.tea-admin-page .tea-search input {
  padding-left: 14px;
  padding-right: 44px;
  text-align: right;
}
[dir=rtl] body.tea-admin-page .tea-search .tea-ic {
  left: auto;
  right: 14px;
}
[dir=rtl] body.tea-admin-page .tea-search kbd {
  right: auto;
  left: 12px;
}
@media (max-width: 1080px) {
  [dir=rtl] body.tea-admin-page .tea-rail--admin {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }
  [dir=rtl] body.tea-admin-page .tea-app.is-drawer-open .tea-rail--admin {
    transform: translateX(0);
  }
}

/* ---- Admin page header ---- */
.adm-head {
  margin-bottom: 22px;
}

.adm-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--tea-mist);
  font-weight: 600;
  flex-wrap: wrap;
}

.adm-crumbs a {
  color: var(--tea-slate);
  text-decoration: none;
  transition: color 0.15s;
}

.adm-crumbs a:hover {
  color: var(--tea-purple);
}

.adm-crumbs__sep {
  color: var(--tea-line);
}

.adm-crumbs__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--tea-line-2);
  color: var(--tea-slate);
  margin-right: 4px;
}

.adm-crumbs__back:hover {
  background: var(--tea-purple-50);
  color: var(--tea-purple);
}

.adm-head__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.adm-head__copy {
  min-width: 0;
  flex: 1;
}

.adm-head__title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tea-ink);
  line-height: 1.15;
}

.adm-head__sub {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--tea-slate);
  max-width: 720px;
}

.adm-head__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ---- Toolbar (filter + order + search + new) ---- */
.adm-toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.adm-toolbar__left, .adm-toolbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.adm-toolbar__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

.adm-toolbar__check input {
  width: 16px;
  height: 16px;
  accent-color: var(--tea-purple);
}

.adm-toolbar__search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.adm-toolbar__search input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--tea-line);
  background: var(--tea-surface-2);
  border-radius: 10px;
  padding: 0 14px 0 38px;
  font-family: var(--tea-font);
  font-size: 14px;
  color: var(--tea-ink);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.adm-toolbar__search input:focus {
  outline: none;
  border-color: var(--tea-purple);
  background: var(--tea-surface);
  box-shadow: 0 0 0 4px var(--tea-purple-50);
}

.adm-toolbar__search > svg {
  position: absolute;
  left: 14px;
  color: var(--tea-mist);
  pointer-events: none;
}

@media (max-width: 720px) {
  .adm-toolbar {
    grid-template-columns: 1fr;
  }
  .adm-toolbar__right .tea-btn {
    flex: 1;
    justify-content: center;
  }
}
/* ---- Dropdown menu (filter/order) ---- */
.adm-menu {
  position: relative;
}

.adm-menu__trigger {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: 999px;
  color: var(--tea-slate);
  font: 600 13px/1 var(--tea-font);
  cursor: pointer;
}

.adm-menu__trigger:hover {
  background: var(--tea-line-2);
  color: var(--tea-ink);
}

.adm-menu__pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: 12px;
  box-shadow: 0 18px 40px -16px rgba(18, 26, 38, 0.18);
  padding: 6px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.adm-menu__item {
  appearance: none;
  border: none;
  background: transparent;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  font: 500 13px/1.3 var(--tea-font);
  color: var(--tea-ink-2);
  cursor: pointer;
}

.adm-menu__item:hover {
  background: var(--tea-line-2);
}

.adm-menu__item.is-active {
  background: var(--tea-purple-50);
  color: var(--tea-purple);
  font-weight: 700;
}

/* ---- Data table ---- */
.adm-table-wrap {
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: 14px;
  /* visible: the inner .adm-table-scroll handles horizontal table overflow,
     and RowActions kebab is portaled to <body> so its dropdown escapes any
     clipping context automatically. With overflow:visible on the wrap, the
     dropdown displays in front of subsequent rows without being clipped. */
  overflow: visible;
  margin-bottom: 16px;
}

.adm-table-scroll {
  /* Wide tables scroll horizontally INSIDE this child container rather
     than pushing the whole page wider. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Round the inside corners to match the wrap's border-radius. */
  border-radius: 14px;
}

.adm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  min-width: 720px;
}

.adm-table thead th {
  text-align: left;
  font-weight: 700;
  color: var(--tea-mist);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  padding: 14px 16px;
  background: var(--tea-surface-2);
  border-bottom: 1px solid var(--tea-line);
  position: sticky;
  top: 0;
  z-index: 1;
}

.adm-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--tea-line-2);
  color: var(--tea-ink-2);
  vertical-align: top;
}

.adm-table tbody tr:hover {
  background: var(--tea-surface-2);
}

.adm-table tbody tr:last-child td {
  border-bottom: none;
}

.adm-table__check {
  width: 38px;
  padding: 14px 0 14px 16px !important;
}

.adm-table__check input {
  accent-color: var(--tea-purple);
}

.adm-table__actions {
  width: 48px;
  padding: 14px 16px 14px 0 !important;
  text-align: right;
}

.adm-table__ellipsis {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adm-table__empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--tea-mist);
  font-size: 13px;
}

.adm-row-menu {
  appearance: none;
  border: none;
  background: transparent;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tea-mist);
  cursor: pointer;
}

.adm-row-menu:hover {
  background: var(--tea-line-2);
  color: var(--tea-ink);
}

.adm-row-menu__pop {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: 12px;
  box-shadow: 0 18px 40px -16px rgba(18, 26, 38, 0.22);
  padding: 6px;
  z-index: 30;
  display: flex;
  flex-direction: column;
}

.adm-row-menu__item {
  appearance: none;
  border: none;
  background: transparent;
  text-align: left;
  padding: 8px 12px;
  border-radius: 8px;
  font: 500 13px/1.3 var(--tea-font);
  color: var(--tea-ink-2);
  cursor: pointer;
  text-decoration: none;
}

.adm-row-menu__item:hover {
  background: var(--tea-line-2);
}

.adm-row-menu__item.is-danger {
  color: #9F1239;
}

.adm-row-menu__item.is-danger:hover {
  background: rgba(244, 63, 94, 0.08);
}

/* ---- Pagination ---- */
.adm-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 4px 4px 0;
}

.adm-pagination__count {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--tea-mist);
}

.adm-pagination__pages {
  display: flex;
  gap: 4px;
}

.adm-page-btn {
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--tea-line);
  background: var(--tea-surface);
  color: var(--tea-slate);
  font: 600 13px/1 var(--tea-font);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.adm-page-btn:hover {
  background: var(--tea-line-2);
  color: var(--tea-ink);
}

.adm-page-btn.is-active {
  background: var(--tea-purple);
  color: white;
  border-color: var(--tea-purple);
}

.adm-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.adm-page-btn.is-ellipsis {
  border: none;
  background: transparent;
}

/* ---- Status pills ---- */
.adm-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.adm-pill--ok {
  background: rgba(22, 185, 129, 0.12);
  color: #047857;
}

.adm-pill--soft {
  background: var(--tea-purple-50);
  color: var(--tea-purple);
}

.adm-pill--neutral {
  background: var(--tea-line-2);
  color: var(--tea-slate);
}

.adm-pill--danger {
  background: rgba(244, 63, 94, 0.12);
  color: #9F1239;
}

/* ---- Sub tabs ---- */
.adm-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--tea-line);
  margin-bottom: 22px;
  overflow-x: auto;
}

.adm-tabs__tab {
  appearance: none;
  border: none;
  background: transparent;
  font: 600 14px/1.2 var(--tea-font);
  color: var(--tea-mist);
  padding: 12px 18px;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.adm-tabs__tab:hover {
  color: var(--tea-ink-2);
}

.adm-tabs__tab.is-active {
  color: var(--tea-purple);
  border-bottom-color: var(--tea-purple);
}

.adm-tabs__count {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tea-line-2);
  color: var(--tea-mist);
  font-weight: 700;
}

.adm-tabs__tab.is-active .adm-tabs__count {
  background: var(--tea-purple-50);
  color: var(--tea-purple);
}

/* ---- Sidenav for edit screens (vertical inner nav) ---- */
.adm-sidenav {
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: 14px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.adm-sidenav__item {
  appearance: none;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  font: 600 13px/1.2 var(--tea-font);
  color: var(--tea-slate);
  text-align: left;
  cursor: pointer;
}

.adm-sidenav__item:hover {
  background: var(--tea-line-2);
  color: var(--tea-ink);
}

.adm-sidenav__item.is-active {
  background: var(--tea-purple-50);
  color: var(--tea-purple);
}

.adm-sidenav__item.is-active svg {
  color: var(--tea-purple);
  opacity: 1;
}

/* ---- Form sections + fields ---- */
.adm-section {
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 16px;
}

.adm-section__head {
  margin-bottom: 18px;
}

.adm-section__head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--tea-ink);
  letter-spacing: -0.01em;
}

.adm-section__head p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--tea-mist);
}

.adm-section__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}

.adm-section__body[data-cols="1"] {
  grid-template-columns: 1fr;
}

.adm-section__body[data-cols="3"] {
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 720px) {
  .adm-section__body {
    grid-template-columns: 1fr !important;
  }
}
.adm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.adm-field[data-span="2"] {
  grid-column: span 2;
}

.adm-field[data-span=full] {
  grid-column: 1/-1;
}

@media (max-width: 720px) {
  .adm-field[data-span="2"] {
    grid-column: span 1;
  }
}
.adm-field__label {
  font: 700 12px/1.2 var(--tea-font);
  color: var(--tea-slate);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.adm-field__req {
  color: var(--tea-pink);
  margin-left: 3px;
}

.adm-field__hint {
  font-size: 12px;
  color: var(--tea-mist);
}

.adm-field__error {
  font-size: 12px;
  color: #9F1239;
  font-weight: 600;
}

.adm-input {
  width: 100%;
  height: 42px;
  background: var(--tea-surface-2);
  border: 1px solid var(--tea-line);
  border-radius: 10px;
  padding: 0 14px;
  font: 400 14px/1.4 var(--tea-font);
  color: var(--tea-ink);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  outline: none;
}

.adm-input--ta {
  min-height: 110px;
  height: auto;
  padding: 12px 14px;
  resize: vertical;
}

.adm-input:focus {
  border-color: var(--tea-purple);
  background: var(--tea-surface);
  box-shadow: 0 0 0 4px var(--tea-purple-50);
}

.adm-select-wrap {
  position: relative;
}

.adm-select {
  appearance: none;
  width: 100%;
  height: 42px;
  background: var(--tea-surface-2);
  border: 1px solid var(--tea-line);
  border-radius: 10px;
  padding: 0 36px 0 14px;
  font: 400 14px/1.4 var(--tea-font);
  color: var(--tea-ink);
  cursor: pointer;
  outline: none;
}

.adm-select--sm {
  height: 30px;
  padding: 0 28px 0 10px;
  font-size: 12px;
}

.adm-select:focus {
  border-color: var(--tea-purple);
  background: var(--tea-surface);
  box-shadow: 0 0 0 4px var(--tea-purple-50);
}

/* ---- Checkbox + Switch ---- */
.adm-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font: 500 14px/1.4 var(--tea-font);
  color: var(--tea-ink-2);
  user-select: none;
}

.adm-check input {
  position: absolute;
  opacity: 0;
}

.adm-check__box {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1px solid var(--tea-line);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  background: var(--tea-surface);
  transition: all 0.15s;
}

.adm-check input:checked + .adm-check__box {
  background: var(--tea-purple);
  border-color: var(--tea-purple);
  color: white;
}

.adm-switch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.adm-switch input {
  position: absolute;
  opacity: 0;
}

.adm-switch__track {
  width: 38px;
  height: 22px;
  flex-shrink: 0;
  background: var(--tea-line);
  border-radius: 999px;
  position: relative;
  transition: background 0.15s;
}

.adm-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s;
}

.adm-switch input:checked + .adm-switch__track {
  background: var(--tea-purple);
}

.adm-switch input:checked + .adm-switch__track .adm-switch__thumb {
  transform: translateX(16px);
}

.adm-switch__copy strong {
  display: block;
  font: 600 14px/1.3 var(--tea-font);
  color: var(--tea-ink);
}

.adm-switch__copy small {
  display: block;
  font-size: 12px;
  color: var(--tea-mist);
  margin-top: 2px;
}

/* ---- Form footer ---- */
.adm-formfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.adm-formfoot__extra {
  font-size: 12px;
  color: var(--tea-mist);
}

.adm-formfoot__actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* ---- Tag picker ---- */
.adm-tagpicker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px dashed var(--tea-line);
  border-radius: 10px;
  background: var(--tea-surface-2);
  min-height: 42px;
}

.adm-tagpicker--empty {
  align-items: center;
  color: var(--tea-mist);
  font-size: 13px;
  padding: 12px;
}

.adm-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 12px/1 var(--tea-font);
  padding: 6px 8px 6px 10px;
  background: var(--tea-purple-50);
  color: var(--tea-purple);
  border-radius: 999px;
}

.adm-tag button {
  appearance: none;
  border: none;
  background: rgba(109, 78, 210, 0.18);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tea-purple);
  cursor: pointer;
}

.adm-tag button:hover {
  background: var(--tea-purple);
  color: white;
}

/* ---- KPI card ---- */
.adm-kpi {
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: 16px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}

.adm-kpi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.adm-kpi--purple::before {
  background: linear-gradient(90deg, var(--tea-purple), var(--tea-pink));
}

.adm-kpi--cyan::before {
  background: linear-gradient(90deg, var(--tea-cyan), var(--tea-blue));
}

.adm-kpi--orange::before {
  background: linear-gradient(90deg, var(--tea-orange), var(--tea-amber));
}

.adm-kpi--pink::before {
  background: linear-gradient(90deg, var(--tea-pink), var(--tea-cerise));
}

.adm-kpi__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.adm-kpi__value {
  font: 800 28px/1 var(--tea-font);
  letter-spacing: -0.02em;
  color: var(--tea-ink);
  font-feature-settings: "tnum";
}

.adm-kpi__label {
  font: 600 12px/1.3 var(--tea-font);
  color: var(--tea-mist);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 6px;
}

.adm-kpi__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--tea-purple-50);
  color: var(--tea-purple);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.adm-kpi--cyan .adm-kpi__icon {
  background: var(--tea-cyan-50);
  color: var(--tea-cyan);
}

.adm-kpi--orange .adm-kpi__icon {
  background: var(--tea-orange-50);
  color: var(--tea-orange);
}

.adm-kpi--pink .adm-kpi__icon {
  background: var(--tea-pink-50);
  color: var(--tea-pink);
}

.adm-kpi__delta {
  margin-top: 10px;
  font-size: 12px;
  color: var(--tea-success);
  font-weight: 700;
}

/* ---- Dashboard layout helpers ---- */
.adm-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

.adm-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

.adm-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}

.adm-grid-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  margin-bottom: 22px;
  align-items: start;
}

.adm-grid-1-3 {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 1180px) {
  .adm-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .adm-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 880px) {
  .adm-grid-2 {
    grid-template-columns: 1fr;
  }
  .adm-grid-2-1 {
    grid-template-columns: 1fr;
  }
  .adm-grid-1-3 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .adm-grid-4 {
    grid-template-columns: 1fr 1fr;
  }
  .adm-grid-3 {
    grid-template-columns: 1fr;
  }
}
/* ---- Card wrapper ---- */
.adm-card {
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: 14px;
  padding: 22px 24px;
}

.adm-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.adm-card__title {
  margin: 0;
  font: 700 15px/1.3 var(--tea-font);
  color: var(--tea-ink);
}

.adm-card__sub {
  margin: 0;
  font-size: 12px;
  color: var(--tea-mist);
}

/* ---- Admin sections drilled into via dashboard cards ---- */
.adm-dash-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: 16px;
  padding: 22px 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.adm-dash-card:hover {
  border-color: var(--tea-purple);
  transform: translateY(-1px);
  box-shadow: 0 18px 40px -22px rgba(109, 78, 210, 0.25);
}

.adm-dash-card__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--tea-purple-50);
  color: var(--tea-purple);
}

.adm-dash-card--cyan .adm-dash-card__icon {
  background: var(--tea-cyan-50);
  color: var(--tea-cyan);
}

.adm-dash-card--pink .adm-dash-card__icon {
  background: var(--tea-pink-50);
  color: var(--tea-pink);
}

.adm-dash-card--orange .adm-dash-card__icon {
  background: var(--tea-orange-50);
  color: var(--tea-orange);
}

.adm-dash-card--blue .adm-dash-card__icon {
  background: var(--tea-blue-50);
  color: var(--tea-blue);
}

.adm-dash-card__title {
  margin: 0;
  font: 700 16px/1.3 var(--tea-font);
  color: var(--tea-ink);
}

.adm-dash-card__sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--tea-slate);
  line-height: 1.5;
}

.adm-dash-card__arrow {
  margin-left: auto;
  color: var(--tea-mist);
}

.adm-dash-card:hover .adm-dash-card__arrow {
  color: var(--tea-purple);
}

/* ============== Cohort wizard stepper + modal ============== */
.adm-step {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
  overflow-x: auto;
}

.adm-step__node {
  appearance: none;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  font: 500 13px/1.2 var(--tea-font);
  color: var(--tea-mist);
  white-space: nowrap;
  flex-shrink: 0;
}

.adm-step__node:hover {
  background: var(--tea-line-2);
}

.adm-step__circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  border: 2px solid var(--tea-line);
  background: var(--tea-surface);
  color: var(--tea-mist);
  transition: all 0.15s;
  flex-shrink: 0;
}

.adm-step__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.adm-step__meta small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tea-mist);
}

.adm-step__meta strong {
  font-size: 13px;
  color: var(--tea-slate);
  font-weight: 600;
}

.adm-step__node.is-done .adm-step__circle {
  background: rgba(22, 185, 129, 0.15);
  border-color: var(--tea-success);
  color: var(--tea-success);
}

.adm-step__node.is-done .adm-step__meta strong {
  color: var(--tea-ink);
}

.adm-step__node.is-active .adm-step__circle {
  background: var(--tea-purple);
  border-color: var(--tea-purple);
  color: white;
  box-shadow: 0 0 0 4px var(--tea-purple-50);
}

.adm-step__node.is-active .adm-step__meta strong {
  color: var(--tea-purple);
  font-weight: 800;
}

.adm-step__line {
  flex: 1;
  min-width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--tea-line);
  margin: 0 4px;
}

.adm-step__line.is-done {
  background: var(--tea-success);
}

@media (max-width: 720px) {
  .adm-step__line {
    display: none;
  }
  .adm-step__meta strong {
    display: none;
  }
}
/* Modal */
.adm-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

.adm-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(18, 26, 38, 0.55);
  backdrop-filter: blur(2px);
}

.adm-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--tea-surface);
  border-radius: 18px;
  width: 100%;
  max-width: 880px;
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 64px -24px rgba(18, 26, 38, 0.45);
}

.adm-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--tea-line);
}

.adm-modal__head h3 {
  margin: 0;
  font: 700 18px/1.2 var(--tea-font);
  color: var(--tea-ink);
  letter-spacing: -0.01em;
}

.adm-modal__close {
  appearance: none;
  border: none;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--tea-mist);
  cursor: pointer;
}

.adm-modal__close:hover {
  background: var(--tea-line-2);
  color: var(--tea-ink);
}

.adm-modal__body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
}

.adm-modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--tea-line);
}

/* ============== Cohort list — desktop table / mobile cards ============== */
.adm-cohort-list--cards {
  display: none;
}

@media (max-width: 880px) {
  .adm-cohort-list--table {
    display: none;
  }
  .adm-cohort-list--cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
.adm-cohort-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--tea-surface);
  border: 1px solid var(--tea-line);
  border-radius: 12px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
}

.adm-cohort-card:hover {
  border-color: var(--tea-purple);
}

.adm-cohort-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.adm-cohort-card__title {
  font: 700 15px/1.3 var(--tea-font);
  color: var(--tea-purple);
  letter-spacing: -0.01em;
}

.adm-cohort-card__sub {
  font: 500 11px/1.4 var(--tea-font);
  color: var(--tea-mist);
  margin-top: 2px;
}

.adm-cohort-card__row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font: 500 12px/1.2 var(--tea-font);
  color: var(--tea-slate);
}

/* ============== Simple key/value table (used in view) ============== */
.adm-table.adm-table--simple {
  min-width: 0;
}

.adm-table--simple .adm-table__key {
  width: 180px;
  color: var(--tea-mist);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.adm-table--simple td {
  padding: 12px 16px;
}

/* ============== Step wizard responsive ============== */
@media (max-width: 720px) {
  .adm-step {
    padding: 10px 12px;
    gap: 4px;
  }
  .adm-step__node {
    padding: 4px 6px;
  }
  .adm-step__circle {
    width: 24px;
    height: 24px;
  }
  .adm-step__node.is-active .adm-step__circle {
    box-shadow: 0 0 0 3px var(--tea-purple-50);
  }
}
/* ============== Step content wrappers ============== */
@media (max-width: 720px) {
  .adm-section {
    padding: 16px 14px;
  }
  .adm-section__body[data-cols="3"] {
    grid-template-columns: 1fr;
  }
  .adm-table__check {
    padding: 12px 0 12px 10px !important;
  }
}
/* ============== Modal mobile ============== */
@media (max-width: 720px) {
  .adm-modal {
    padding: 16px 8px;
  }
  .adm-modal__panel {
    max-height: calc(100vh - 32px);
    border-radius: 14px;
  }
  .adm-modal__head, .adm-modal__body, .adm-modal__foot {
    padding-left: 16px;
    padding-right: 16px;
  }
  .adm-modal__head h3 {
    font-size: 16px;
  }
}
/* ============== Adm KPI tighter on small ============== */
@media (max-width: 640px) {
  .adm-kpi {
    padding: 14px 16px;
    border-radius: 12px;
  }
  .adm-kpi__value {
    font-size: 22px;
  }
  .adm-kpi__label {
    font-size: 11px;
    margin-top: 4px;
  }
}
/* ============== Form footer wrap on mobile ============== */
@media (max-width: 720px) {
  .adm-formfoot {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
  }
  .adm-formfoot__actions {
    flex-wrap: wrap;
  }
  .adm-formfoot__actions .tea-btn {
    flex: 1;
    justify-content: center;
  }
  .adm-formfoot__extra {
    text-align: center;
  }
}
/* ============== Admin scenarios — spacing + responsive polish ============== */
/* Section padding: tighter on mobile */
@media (max-width: 720px) {
  .adm-section {
    padding: 16px 14px;
    margin-bottom: 12px;
  }
  .adm-section__head {
    margin-bottom: 14px;
  }
  .adm-section__head h3 {
    font-size: 15px;
  }
}
/* Tables overflow horizontally on small screens — keep them scrollable */
.adm-table-wrap {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 880px) {
  .adm-table {
    min-width: 720px;
  }
  .adm-table thead th, .adm-table tbody td {
    padding: 12px 14px;
    font-size: 12px;
  }
  .adm-table__ellipsis {
    max-width: 180px;
  }
}
/* Allow long inline content inside admin tables to wrap at word boundaries
   when there is overflow, but DON'T break short identifiers / dates /
   pills character-by-character (which the more aggressive overflow-wrap:
   anywhere was causing on narrow columns). */
.adm-table td {
  word-break: normal;
  overflow-wrap: break-word;
}

.adm-table td.tea-mono {
  word-break: normal;
  overflow-wrap: anywhere;
}

.adm-table td [data-nowrap], .adm-table td .tea-mono {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

/* Feedback Skills row — collapse to single column on small screens */
.adm-section > div > div[style*="grid-template-columns: 220px 1fr 88px"] {
  /* fallback so it doesn't overflow */
}

@media (max-width: 720px) {
  /* Feedback Skills grid stacks */
  .adm-section [style*="220px 1fr 88px"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* Block icon grid in Add Block modal */
  .adm-modal__body div[style*="grid-template-columns: repeat(auto-fill, minmax(96px, 1fr))"] {
    grid-template-columns: repeat(3, 1fr) !important;
    padding: 10px !important;
  }
}
@media (max-width: 480px) {
  .adm-modal__body div[style*="grid-template-columns: repeat(auto-fill, minmax(96px, 1fr))"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* Tighten side-nav + content gap on tablets */
@media (max-width: 1100px) {
  .adm-grid-1-3 {
    gap: 16px;
  }
}
@media (max-width: 880px) {
  .adm-grid-1-3 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .adm-sidenav {
    padding: 4px;
  }
  .adm-sidenav__item {
    padding: 10px 12px;
    font-size: 13px;
  }
}
/* Toolbar inside scenario blocks: gap right and breathing room */
.adm-section > div > .adm-toolbar {
  margin-bottom: 12px;
  margin-top: 4px;
}

/* AdminTabs vertical breathing room when followed by side-nav */
.adm-tabs + .adm-grid-1-3 {
  margin-top: 4px;
}

/* Modal — responsive padding */
@media (max-width: 720px) {
  .adm-modal {
    padding: 12px 8px;
  }
  .adm-modal__panel {
    max-height: calc(100vh - 24px);
    border-radius: 14px;
  }
  .adm-modal__head, .adm-modal__body, .adm-modal__foot {
    padding-left: 14px;
    padding-right: 14px;
  }
  .adm-modal__head h3 {
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: anywhere;
    padding-right: 8px;
  }
  .adm-modal__body {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}
/* Field gaps inside modals */
.adm-modal__body .adm-field {
  margin-bottom: 14px;
}

.adm-modal__body .adm-field:last-child {
  margin-bottom: 0;
}

/* Form grids inside modals stack on small */
@media (max-width: 720px) {
  .adm-modal__body [style*="grid-template-columns: 1fr 1fr"],
  .adm-modal__body [style*="grid-template-columns: 1fr auto"],
  .adm-modal__body [style*="grid-template-columns: 1fr 130px"] {
    grid-template-columns: 1fr !important;
  }
}
/* Scenario hero icon row stacks */
@media (max-width: 720px) {
  .adm-section [style*="grid-template-columns: 1fr 220px"] {
    grid-template-columns: 1fr !important;
  }
  .adm-section [style*="grid-template-columns: 1fr 200px"] {
    grid-template-columns: 1fr !important;
  }
}
/* Mini Scenarios long cells — give them breathing room */
.adm-table td > div[style*="max-width:380px"] {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Status pill column slightly narrower on small */
@media (max-width: 880px) {
  .adm-pill {
    font-size: 10px;
    padding: 2px 7px;
  }
}
/* AdminHeader title wraps */
.adm-head__title {
  word-break: break-word;
  overflow-wrap: anywhere;
}

.adm-head__row {
  row-gap: 10px;
}

/* AdminToolbar — search shrinks on small */
@media (max-width: 720px) {
  .adm-toolbar {
    padding: 8px;
    gap: 8px;
  }
  .adm-toolbar__check {
    width: 28px;
    height: 28px;
  }
}
/* Form footer wraps */
@media (max-width: 720px) {
  .adm-formfoot {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
  }
  .adm-formfoot__actions {
    flex-wrap: wrap;
  }
  .adm-formfoot__actions .tea-btn {
    flex: 1;
    justify-content: center;
  }
  .adm-formfoot__extra {
    text-align: center;
  }
}
/* Stepper-free header padding when no breadcrumbs */
.adm-head {
  row-gap: 6px;
}

/* "Published" outlined badge on variant rows: don't shrink-wrap weirdly on narrow */
.adm-table tbody td > span[style*="border:1px solid var(--tea-success)"] {
  display: inline-block;
  white-space: nowrap;
}

/* Feedback Skills helper buttons block: make wider when stacked */
@media (max-width: 720px) {
  .adm-section [style*="220px 1fr 88px"] > div:last-child {
    display: flex !important;
    gap: 8px;
  }
  .adm-section [style*="220px 1fr 88px"] > div:last-child .tea-btn {
    flex: 1;
  }
}
/*
 * tea-v2-theme — Module-level helpers
 * Added 2026-05-03 to centralize the small CSS additions used by the
 * 10 React modules (tea-learner-calendar-web, tea-tutor-*-web,
 * tea-coach-*-web). All module index.css files are STUBS — every style
 * they need lives in this v2 theme so we have ONE source of design truth.
 *
 * This file complements _tokens.scss (which holds the canonical v2 design
 * vocabulary) and _shell-overrides.scss (Liferay portal chrome bridge).
 *
 * Add new shared design classes here when used by 2+ modules.
 */
/* ---------- Section-header row ("Upcoming sessions" / "Pending assessments") ---------- */
.tea-h2-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 22px 0 14px;
}

.tea-h2-row__link {
  font-size: 13px;
  color: var(--tea-purple);
  font-weight: 700;
  text-decoration: none;
}

.tea-h2-row__link:hover {
  color: var(--tea-purple-600);
}

/* ---------- Action group inside .tea-page-head (right-side button cluster) ---------- */
.tea-page-head__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- Inline flash messages (success / error toast equivalents) ---------- */
.tea-flash {
  border-radius: var(--tea-r-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 12px;
}

.tea-flash--ok {
  background: rgba(22, 185, 129, 0.1);
  color: var(--tea-success);
}

.tea-flash--err {
  background: rgba(240, 68, 56, 0.1);
  color: var(--tea-danger);
}

/* ---------- Generic loading / error states (used by every React module) ---------- */
.tea-tutor-loading,
.tea-coach-loading,
.tea-loading {
  padding: 32px;
  text-align: center;
  color: var(--tea-mist);
}

.tea-tutor-error,
.tea-coach-error,
.tea-error {
  padding: 32px;
  text-align: center;
  color: var(--tea-danger);
}

/* ---------- Tutor schedule — pending-edit cells (diff-based save UX) ---------- */
.tea-tsched__slot.is-pending-add {
  background: var(--tea-orange);
  color: white;
  font-weight: 700;
}

.tea-tsched__slot.is-pending-remove {
  background: repeating-linear-gradient(45deg, var(--tea-amber-50) 0, var(--tea-amber-50) 4px, white 4px, white 8px);
  color: var(--tea-orange);
}

.tea-tsched__flash {
  border-radius: var(--tea-r-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 12px;
}

.tea-tsched__flash--ok {
  background: rgba(22, 185, 129, 0.1);
  color: var(--tea-success);
}

.tea-tsched__flash--err {
  background: rgba(240, 68, 56, 0.1);
  color: var(--tea-danger);
}

/* ---------- Tutor session card — extra time-actions support ---------- */
.tea-tcard__time-actions a,
.tea-tcard__time-actions button {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  cursor: pointer;
  font-family: var(--tea-font);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.tea-tcard__time-actions a:hover,
.tea-tcard__time-actions button:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* ---------- Tutor schedule alert — extra small text support ---------- */
.tea-tsched__alert small {
  display: block;
  font-size: 12px;
  color: inherit;
}

/* ---------- Tutor schedule month calendar — today highlight ---------- */
.tea-tsched__day.is-today {
  font-weight: 700;
  color: var(--tea-purple);
}

/* ===========================================================================
   Responsive polish (added 2026-05-03 after dashboard playwright audit)
   =========================================================================== */
/* ---------- Dashboard "In progress" grid: auto-fit instead of fixed 2-col ----------
 * Prevents an empty cell when the learner has only 1 scenario in progress.
 * Overrides the canonical _tokens.scss rule at the same breakpoint.
 */
@media (max-width: 1200px) {
  .tea-dash-inprog {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}
/* ---------- Hero banner CTA: allow buttons to shrink at narrow widths ---------- */
.tea-dash-hero__cta .tea-btn,
.tea-tutor-banner__cta .tea-btn {
  min-width: 0; /* allow flex children to shrink below their content width */
}

@media (max-width: 480px) {
  /* Use the smaller --sm padding/height profile for hero CTAs on phones so
   * "Resume scenario" + "View all scenarios" fit on one line.
   */
  .tea-dash-hero__cta .tea-btn,
  .tea-tutor-banner__cta .tea-btn {
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
  }
  .tea-dash-hero__cta .tea-btn svg,
  .tea-tutor-banner__cta .tea-btn svg {
    width: 12px;
    height: 12px;
  }
}
/* ---------- Hero progress-ring: cap on phones so headline gets breathing room ---------- */
@media (max-width: 480px) {
  .tea-dash-hero__ring {
    width: 150px !important;
    height: 130px !important;
    padding: 12px !important;
  }
  .tea-dash-hero__ring svg {
    width: 88px !important;
    height: 88px !important;
  }
}
.signed-in .portlet-login {
  width: 100%;
  max-width: 460px;
  margin: auto;
  background: var(--tea-surface);
  border-radius: 22px;
  box-shadow: 0 32px 80px -24px rgba(18, 26, 38, 0.45), 0 8px 18px -8px rgba(18, 26, 38, 0.2);
  overflow: hidden;
  padding: 40px;
  min-height: 50vh;
}
.signed-in .tea-login-shell-content {
  min-height: 80vh;
}
.signed-in .tea-login-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.signed-out .tea-login-shell {
  display: flex;
  flex-direction: column;
  font-family: var(--tea-font);
  color: var(--tea-ink);
  background: radial-gradient(circle at 80% 110%, rgba(255, 255, 255, 0.18), transparent 60%), linear-gradient(180deg, rgba(15, 26, 42, 0.4) 0%, rgba(15, 26, 42, 0.72) 100%), linear-gradient(135deg, rgba(7, 182, 211, 0.55) 0%, rgba(80, 134, 252, 0.38) 30%, rgba(109, 78, 210, 0.46) 60%, rgba(211, 14, 162, 0.36) 85%, rgba(235, 113, 39, 0.36) 100%), url("../images/tea-v2/hero-team.jpg") center/cover no-repeat #0F1A2A;
  background-attachment: fixed;
  box-sizing: border-box;
}
.signed-out .tea-login-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  flex-shrink: 0;
}
.signed-out .tea-login-topbar__brand img {
  height: 36px;
  width: auto;
  display: block;
}
.signed-out .tea-login-topbar__links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.signed-out .tea-login-topbar__links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.15s;
}
.signed-out .tea-login-topbar__links a:hover {
  color: white;
}
.signed-out .tea-login-shell-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.signed-out .tea-login-shell-content *,
.signed-out .tea-login-shell-content *::before,
.signed-out .tea-login-shell-content *::after {
  box-sizing: border-box;
}
.signed-out .tea-login-shell-content .portlet-title-text {
  display: none;
}
.signed-out .tea-login-shell-content .login-container {
  width: 100%;
  max-width: 460px;
  background: var(--tea-surface);
  border-radius: 22px;
  box-shadow: 0 32px 80px -24px rgba(18, 26, 38, 0.55), 0 12px 24px -10px rgba(18, 26, 38, 0.3);
  padding: 40px 36px 32px;
  position: relative;
  overflow: hidden;
}
.signed-out .tea-login-shell-content .login-container::before, .signed-out .tea-login-shell-content .login-container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background: var(--tea-gradient);
}
.signed-out .tea-login-shell-content .login-container::before {
  top: 0;
  height: 4px;
}
.signed-out .tea-login-shell-content .login-container::after {
  bottom: 0;
  height: 6px;
}
.signed-out .tea-login-shell-content .tea-login-header {
  text-align: center;
  margin-bottom: 24px;
}
.signed-out .tea-login-shell-content .tea-login-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tea-ink);
  line-height: 1.1;
}
.signed-out .tea-login-shell-content .tea-login-header p {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--tea-slate);
}
.signed-out .tea-login-shell-content .sign-in-form .form-group,
.signed-out .tea-login-shell-content form .form-group {
  margin-bottom: 16px;
}
.signed-out .tea-login-shell-content .sign-in-form label,
.signed-out .tea-login-shell-content .sign-in-form label.control-label,
.signed-out .tea-login-shell-content .sign-in-form .control-label,
.signed-out .tea-login-shell-content form label,
.signed-out .tea-login-shell-content form label.control-label,
.signed-out .tea-login-shell-content form .control-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--tea-slate);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0;
  margin-bottom: 6px;
}
.signed-out .tea-login-shell-content .sign-in-form input.form-control,
.signed-out .tea-login-shell-content .sign-in-form input[type=text],
.signed-out .tea-login-shell-content .sign-in-form input[type=email],
.signed-out .tea-login-shell-content .sign-in-form input[type=password],
.signed-out .tea-login-shell-content form input.form-control,
.signed-out .tea-login-shell-content form input[type=text],
.signed-out .tea-login-shell-content form input[type=email],
.signed-out .tea-login-shell-content form input[type=password] {
  width: 100%;
  height: 46px;
  border-radius: 10px;
  border: 1px solid var(--tea-line);
  padding: 0 14px;
  font-family: var(--tea-font);
  font-size: 14px;
  background: var(--tea-surface-2);
  color: var(--tea-ink);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  outline: none;
  box-shadow: none;
}
.signed-out .tea-login-shell-content .sign-in-form input.form-control:focus,
.signed-out .tea-login-shell-content .sign-in-form input[type=text]:focus,
.signed-out .tea-login-shell-content .sign-in-form input[type=email]:focus,
.signed-out .tea-login-shell-content .sign-in-form input[type=password]:focus,
.signed-out .tea-login-shell-content form input.form-control:focus,
.signed-out .tea-login-shell-content form input[type=text]:focus,
.signed-out .tea-login-shell-content form input[type=email]:focus,
.signed-out .tea-login-shell-content form input[type=password]:focus {
  border-color: var(--tea-purple);
  background: white;
  box-shadow: 0 0 0 4px var(--tea-purple-50);
}
.signed-out .tea-login-shell-content .sign-in-form input.form-control::placeholder,
.signed-out .tea-login-shell-content .sign-in-form input[type=text]::placeholder,
.signed-out .tea-login-shell-content .sign-in-form input[type=email]::placeholder,
.signed-out .tea-login-shell-content .sign-in-form input[type=password]::placeholder,
.signed-out .tea-login-shell-content form input.form-control::placeholder,
.signed-out .tea-login-shell-content form input[type=text]::placeholder,
.signed-out .tea-login-shell-content form input[type=email]::placeholder,
.signed-out .tea-login-shell-content form input[type=password]::placeholder {
  color: var(--tea-mist);
}
.signed-out .tea-login-shell-content .text_right {
  text-align: right;
  margin: -8px 0 16px;
}
.signed-out .tea-login-shell-content .text_right a {
  font-size: 12px;
  font-weight: 600;
  color: var(--tea-blue);
  text-decoration: none;
}
.signed-out .tea-login-shell-content .text_right a:hover {
  text-decoration: underline;
}
.signed-out .tea-login-shell-content .btn_form,
.signed-out .tea-login-shell-content button.btn_form,
.signed-out .tea-login-shell-content input.btn_form,
.signed-out .tea-login-shell-content .btn-primary.btn_form,
.signed-out .tea-login-shell-content .btn.btn_form {
  width: 100%;
  height: 48px;
  border: none !important;
  border-radius: 12px !important;
  background: var(--tea-purple) !important;
  background-image: none !important;
  color: white !important;
  font-family: var(--tea-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.15s, transform 0.05s;
  margin-top: 4px;
  text-shadow: none;
}
.signed-out .tea-login-shell-content .btn_form::after,
.signed-out .tea-login-shell-content button.btn_form::after,
.signed-out .tea-login-shell-content input.btn_form::after,
.signed-out .tea-login-shell-content .btn-primary.btn_form::after,
.signed-out .tea-login-shell-content .btn.btn_form::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") center/contain no-repeat;
}
.signed-out .tea-login-shell-content .btn_form:hover,
.signed-out .tea-login-shell-content button.btn_form:hover,
.signed-out .tea-login-shell-content input.btn_form:hover,
.signed-out .tea-login-shell-content .btn-primary.btn_form:hover,
.signed-out .tea-login-shell-content .btn.btn_form:hover {
  background: var(--tea-purple-600) !important;
}
.signed-out .tea-login-shell-content .btn_form:active,
.signed-out .tea-login-shell-content button.btn_form:active,
.signed-out .tea-login-shell-content input.btn_form:active,
.signed-out .tea-login-shell-content .btn-primary.btn_form:active,
.signed-out .tea-login-shell-content .btn.btn_form:active {
  transform: translateY(1px);
}
.signed-out .tea-login-shell-content .btn_form:focus,
.signed-out .tea-login-shell-content button.btn_form:focus,
.signed-out .tea-login-shell-content input.btn_form:focus,
.signed-out .tea-login-shell-content .btn-primary.btn_form:focus,
.signed-out .tea-login-shell-content .btn.btn_form:focus {
  box-shadow: 0 0 0 4px var(--tea-purple-50) !important;
  outline: none;
}
.signed-out .tea-login-shell-content .aui-button-input {
  box-shadow: none !important;
}
.signed-out .tea-login-shell-content .button-holder {
  padding: 0 !important;
  display: block;
}
.signed-out .tea-login-shell-content .checkbox_form {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
.signed-out .tea-login-shell-content .checkbox_form .form-group {
  margin: 0;
}
.signed-out .tea-login-shell-content .checkbox_form label,
.signed-out .tea-login-shell-content .checkbox_form label.control-label,
.signed-out .tea-login-shell-content .checkbox_form .form-check-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--tea-slate);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.signed-out .tea-login-shell-content .checkbox_form input[type=checkbox] {
  accent-color: var(--tea-purple);
  width: 14px;
  height: 14px;
  margin: 0;
}
.signed-out .tea-login-shell-content .terms_tag {
  margin: 18px 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--tea-mist);
  line-height: 1.5;
}
.signed-out .tea-login-shell-content span[id$=passwordCapsLockSpan] {
  display: block;
  font-size: 11px;
  color: var(--tea-danger);
  margin-top: 4px;
}
.signed-out .tea-login-shell-content .alert {
  border-radius: 10px;
  font-size: 12px;
  padding: 10px 14px;
  border-width: 1px;
  margin-bottom: 14px;
}
.signed-out .tea-login-shell-content .alert-success {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.22);
  color: #047857;
}
.signed-out .tea-login-shell-content .alert-danger {
  background: rgba(244, 63, 94, 0.08);
  border-color: rgba(244, 63, 94, 0.22);
  color: #9F1239;
}
.signed-out .tea-login-shell-content .alert-info {
  background: rgba(80, 134, 252, 0.08);
  border-color: rgba(80, 134, 252, 0.22);
  color: #1E40AF;
}
.signed-out .tea-login-shell-content .alert-warning {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.22);
  color: #92400E;
}
.signed-out .tea-login-shell-content .tea-login-back {
  display: block;
  text-align: center;
  margin-top: 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tea-blue);
  text-decoration: none;
}
.signed-out .tea-login-shell-content .tea-login-back:hover {
  text-decoration: underline;
}
@media (max-width: 480px) {
  .signed-out .tea-login-shell-content {
    padding: 16px 16px 48px;
  }
  .signed-out .tea-login-shell-content .login-container {
    padding: 30px 22px 24px;
  }
}
@media (max-width: 480px) {
  .signed-out .tea-login-topbar {
    padding: 14px 16px;
  }
  .signed-out .tea-login-topbar__links {
    display: none;
  }
}

.tea-root.is-landing {
  min-height: 100vh;
  background: var(--tea-bg);
  display: flex;
  flex-direction: column;
}

.tea-landing-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.tea-landing-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 48px;
  background: transparent;
  color: white;
  transition: background 0.2s, backdrop-filter 0.2s, color 0.2s, padding 0.2s;
}
.tea-landing-nav.is-scrolled {
  background: rgba(18, 26, 38, 0.8);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  padding-top: 14px;
  padding-bottom: 14px;
  box-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.35);
}
.tea-landing-nav__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.tea-landing-nav__brand img {
  height: 38px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}
.tea-landing-nav__burger {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--tea-r-sm);
  color: white;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
}
.tea-landing-nav__burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.tea-landing-nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.tea-landing-nav__links a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s;
}
.tea-landing-nav__links a:hover {
  color: white;
}
.tea-landing-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--tea-r-pill);
  background: white;
  color: var(--tea-ink) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, transform 0.05s;
}
.tea-landing-nav__cta:hover {
  background: var(--tea-line-2);
  color: var(--tea-ink) !important;
}
.tea-landing-nav__cta:active {
  transform: translateY(1px);
}

.tea-landing-main {
  flex: 1 1 auto;
  min-width: 0;
}

.is-landing #main-content,
.is-landing main.tea-landing-main,
.is-landing .tea-landing-main {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

.is-landing #main-content > *,
.is-landing .tea-landing-main > *,
.is-landing .tea-landing-main .portlet,
.is-landing .tea-landing-main .portlet-content,
.is-landing .tea-landing-main .portlet-content-container,
.is-landing .tea-landing-main .portlet-borderless-container,
.is-landing .tea-landing-main .portlet-body,
.is-landing .tea-landing-main .portlet-layout,
.is-landing .tea-landing-main .layout-content,
.is-landing .tea-landing-main .page-editor__page-content,
.is-landing .tea-landing-main .page-editor,
.is-landing .tea-landing-main .lfr-layout-structure-item,
.is-landing .tea-landing-main .fragment-collection,
.is-landing .tea-landing-main .row,
.is-landing .tea-landing-main [class^=col-],
.is-landing .tea-landing-main [class*=" col-"] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
  width: 100% !important;
  flex: 1 1 100% !important;
}

.is-landing .tea-landing-main .portlet-topper,
.is-landing .tea-landing-main .portlet-title-text {
  display: none !important;
}

.is-landing .tea-landing-shell .container,
.is-landing .tea-landing-shell .container-fluid,
.is-landing .container,
.is-landing .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}

.is-landing .tea-page,
.is-landing .tea-page-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

.tea-landing-foot {
  background: var(--tea-ink, #0F1A2A);
  color: rgba(255, 255, 255, 0.82);
  padding: 24px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12.5px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.tea-landing-foot__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tea-landing-foot__brand img {
  height: 22px;
  opacity: 0.92;
}
.tea-landing-foot__links {
  display: flex;
  gap: 24px;
}
.tea-landing-foot__links a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}
.tea-landing-foot__links a:hover {
  color: white;
}

@media (max-width: 880px) {
  .tea-landing-nav {
    padding: 18px 22px;
  }
  .tea-landing-nav__burger {
    display: inline-flex;
  }
  .tea-landing-nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 22px 18px;
    background: rgba(18, 26, 38, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
  }
  .tea-landing-nav__links.is-open {
    max-height: 400px;
  }
  .tea-landing-nav__links a {
    padding: 12px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .tea-landing-nav__links__cta,
  .tea-landing-nav__links .tea-landing-nav__cta {
    margin-top: 8px;
    justify-content: center;
  }
  .tea-landing-nav.is-scrolled {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .tea-landing-foot {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px;
  }
}
[dir=rtl] .tea-landing-nav__cta svg {
  transform: scaleX(-1);
}

.tea-vp {
  position: relative;
  width: 100%;
  background: #0b1220;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.tea-vp__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b1220;
}
.tea-vp video,
.tea-vp .plyr,
.tea-vp .plyr__video-wrapper {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  background: #0b1220;
}
.tea-vp .plyr__captions {
  display: none;
}
.tea-vp__poster {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-color: #0b1220;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.25s ease;
  z-index: 2;
}
.tea-vp__poster--hidden {
  opacity: 0;
  pointer-events: none;
}
.tea-vp__end {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.82)), var(--tea-vp-end, none);
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  color: #fff;
  z-index: 3;
}
.tea-vp__end-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tea-vp__replay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--tea-purple, #6d28d9);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(109, 40, 217, 0.35);
}
.tea-vp__replay:hover {
  background: var(--tea-purple-2, #5b21b6);
}
.tea-vp__replay:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.tea-vp video::-webkit-media-controls-overflow-button,
.tea-vp video::-internal-media-controls-download-button {
  display: none;
}
.tea-vp video {
  object-fit: cover;
}

@keyframes plyr-progress {
  to {
    background-position: 25px 0;
    background-position: var(--plyr-progress-loading-size, 25px) 0;
  }
}
@keyframes plyr-popup {
  0% {
    opacity: 0.5;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes plyr-fade-in {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.plyr {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  align-items: center;
  direction: ltr;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  font-family: var(--plyr-font-family, inherit);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  font-weight: var(--plyr-font-weight-regular, 400);
  line-height: 1.7;
  line-height: var(--plyr-line-height, 1.7);
  max-width: 100%;
  min-width: 200px;
  position: relative;
  text-shadow: none;
  transition: box-shadow 0.3s ease;
  z-index: 0;
}

.plyr audio, .plyr iframe, .plyr video {
  display: block;
  height: 100%;
  width: 100%;
}

.plyr button {
  font: inherit;
  line-height: inherit;
  width: auto;
}

.plyr:focus {
  outline: 0;
}

.plyr--full-ui {
  box-sizing: border-box;
}

.plyr--full-ui *, .plyr--full-ui :after, .plyr--full-ui :before {
  box-sizing: inherit;
}

.plyr--full-ui a, .plyr--full-ui button, .plyr--full-ui input, .plyr--full-ui label {
  touch-action: manipulation;
}

.plyr__badge {
  background: #4a5464;
  background: var(--plyr-badge-background, #4a5464);
  border-radius: 2px;
  border-radius: var(--plyr-badge-border-radius, 2px);
  color: #fff;
  color: var(--plyr-badge-text-color, #fff);
  font-size: 9px;
  font-size: var(--plyr-font-size-badge, 9px);
  line-height: 1;
  padding: 3px 4px;
}

.plyr--full-ui ::-webkit-media-text-track-container {
  display: none;
}

.plyr__captions {
  animation: plyr-fade-in 0.3s ease;
  bottom: 0;
  display: none;
  font-size: 13px;
  font-size: var(--plyr-font-size-small, 13px);
  left: 0;
  padding: 10px;
  padding: var(--plyr-control-spacing, 10px);
  position: absolute;
  text-align: center;
  transition: transform 0.4s ease-in-out;
  width: 100%;
}

.plyr__captions span:empty {
  display: none;
}

@media (min-width: 480px) {
  .plyr__captions {
    font-size: 15px;
    font-size: var(--plyr-font-size-base, 15px);
    padding: 20px;
    padding: calc(var(--plyr-control-spacing, 10px) * 2);
  }
}
@media (min-width: 768px) {
  .plyr__captions {
    font-size: 18px;
    font-size: var(--plyr-font-size-large, 18px);
  }
}
.plyr--captions-active .plyr__captions {
  display: block;
}

.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
  transform: translateY(-40px);
  transform: translateY(calc(var(--plyr-control-spacing, 10px) * -4));
}

.plyr__caption {
  background: rgba(0, 0, 0, 0.8);
  background: var(--plyr-captions-background, rgba(0, 0, 0, 0.8));
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: #fff;
  color: var(--plyr-captions-text-color, #fff);
  line-height: 185%;
  padding: 0.2em 0.5em;
  white-space: pre-wrap;
}

.plyr__caption div {
  display: inline;
}

.plyr__control {
  background: rgba(0, 0, 0, 0);
  border: 0;
  border-radius: 4px;
  border-radius: var(--plyr-control-radius, 4px);
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  overflow: visible;
  padding: 7px;
  padding: calc(var(--plyr-control-spacing, 10px) * 0.7);
  position: relative;
  transition: all 0.3s ease;
}

.plyr__control svg {
  fill: currentColor;
  display: block;
  height: 18px;
  height: var(--plyr-control-icon-size, 18px);
  pointer-events: none;
  width: 18px;
  width: var(--plyr-control-icon-size, 18px);
}

.plyr__control:focus {
  outline: 0;
}

.plyr__control:focus-visible {
  outline: 2px dashed #00b2ff;
  outline: 2px dashed var(--plyr-focus-visible-color, var(--plyr-color-main, var(--plyr-color-main, #00b2ff)));
  outline-offset: 2px;
}

a.plyr__control {
  text-decoration: none;
}

.plyr__control.plyr__control--pressed .icon--not-pressed, .plyr__control.plyr__control--pressed .label--not-pressed, .plyr__control:not(.plyr__control--pressed) .icon--pressed, .plyr__control:not(.plyr__control--pressed) .label--pressed, a.plyr__control:after, a.plyr__control:before {
  display: none;
}

.plyr--full-ui ::-webkit-media-controls {
  display: none;
}

.plyr__controls {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  text-align: center;
}

.plyr__controls .plyr__progress__container {
  flex: 1;
  min-width: 0;
}

.plyr__controls .plyr__controls__item {
  margin-left: 2.5px;
  margin-left: calc(var(--plyr-control-spacing, 10px) / 4);
}

.plyr__controls .plyr__controls__item:first-child {
  margin-left: 0;
  margin-right: auto;
}

.plyr__controls .plyr__controls__item.plyr__progress__container {
  padding-left: 2.5px;
  padding-left: calc(var(--plyr-control-spacing, 10px) / 4);
}

.plyr__controls .plyr__controls__item.plyr__time {
  padding: 0 5px;
  padding: 0 calc(var(--plyr-control-spacing, 10px) / 2);
}

.plyr__controls .plyr__controls__item.plyr__progress__container:first-child, .plyr__controls .plyr__controls__item.plyr__time + .plyr__time, .plyr__controls .plyr__controls__item.plyr__time:first-child {
  padding-left: 0;
}

.plyr [data-plyr=airplay], .plyr [data-plyr=captions], .plyr [data-plyr=fullscreen], .plyr [data-plyr=pip], .plyr__controls:empty {
  display: none;
}

.plyr--airplay-supported [data-plyr=airplay], .plyr--captions-enabled [data-plyr=captions], .plyr--fullscreen-enabled [data-plyr=fullscreen], .plyr--pip-supported [data-plyr=pip] {
  display: inline-block;
}

.plyr__menu {
  display: flex;
  position: relative;
}

.plyr__menu .plyr__control svg {
  transition: transform 0.3s ease;
}

.plyr__menu .plyr__control[aria-expanded=true] svg {
  transform: rotate(90deg);
}

.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip {
  display: none;
}

.plyr__menu__container {
  animation: plyr-popup 0.2s ease;
  background: rgba(255, 255, 255, 0.9019607843);
  background: var(--plyr-menu-background, rgba(255, 255, 255, 0.9019607843));
  border-radius: 8px;
  border-radius: var(--plyr-menu-radius, 8px);
  bottom: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1490196078);
  box-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(0, 0, 0, 0.1490196078));
  color: #4a5464;
  color: var(--plyr-menu-color, #4a5464);
  font-size: 15px;
  font-size: var(--plyr-font-size-base, 15px);
  margin-bottom: 10px;
  position: absolute;
  right: -3px;
  text-align: left;
  white-space: nowrap;
  z-index: 3;
}

.plyr__menu__container > div {
  overflow: hidden;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.plyr__menu__container:after {
  border: 4px solid rgba(0, 0, 0, 0);
  border-top-color: rgba(255, 255, 255, 0.9019607843);
  border: var(--plyr-menu-arrow-size, 4px) solid rgba(0, 0, 0, 0);
  border-top-color: var(--plyr-menu-background, rgba(255, 255, 255, 0.9019607843));
  content: "";
  height: 0;
  position: absolute;
  right: 14px;
  right: calc(var(--plyr-control-icon-size, 18px) / 2 + var(--plyr-control-spacing, 10px) * 0.7 - var(--plyr-menu-arrow-size, 4px) / 2);
  top: 100%;
  width: 0;
}

.plyr__menu__container [role=menu] {
  padding: 7px;
  padding: calc(var(--plyr-control-spacing, 10px) * 0.7);
}

.plyr__menu__container [role=menuitem], .plyr__menu__container [role=menuitemradio] {
  margin-top: 2px;
}

.plyr__menu__container [role=menuitem]:first-child, .plyr__menu__container [role=menuitemradio]:first-child {
  margin-top: 0;
}

.plyr__menu__container .plyr__control {
  align-items: center;
  color: #4a5464;
  color: var(--plyr-menu-color, #4a5464);
  display: flex;
  font-size: 13px;
  font-size: var(--plyr-font-size-menu, var(--plyr-font-size-small, 13px));
  padding: 4.66667px 10.5px;
  padding: calc(var(--plyr-control-spacing, 10px) * 0.7 / 1.5) calc(var(--plyr-control-spacing, 10px) * 0.7 * 1.5);
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
}

.plyr__menu__container .plyr__control > span {
  align-items: inherit;
  display: flex;
  width: 100%;
}

.plyr__menu__container .plyr__control:after {
  border: 4px solid rgba(0, 0, 0, 0);
  border: var(--plyr-menu-item-arrow-size, 4px) solid rgba(0, 0, 0, 0);
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.plyr__menu__container .plyr__control--forward {
  padding-right: 28px;
  padding-right: calc(var(--plyr-control-spacing, 10px) * 0.7 * 4);
}

.plyr__menu__container .plyr__control--forward:after {
  border-left-color: #728197;
  border-left-color: var(--plyr-menu-arrow-color, #728197);
  right: 6.5px;
  right: calc(var(--plyr-control-spacing, 10px) * 0.7 * 1.5 - var(--plyr-menu-item-arrow-size, 4px));
}

.plyr__menu__container .plyr__control--forward:focus-visible:after, .plyr__menu__container .plyr__control--forward:hover:after {
  border-left-color: initial;
}

.plyr__menu__container .plyr__control--back {
  font-weight: 400;
  font-weight: var(--plyr-font-weight-regular, 400);
  margin: 7px;
  margin: calc(var(--plyr-control-spacing, 10px) * 0.7);
  margin-bottom: 3.5px;
  margin-bottom: calc(var(--plyr-control-spacing, 10px) * 0.7 / 2);
  padding-left: 28px;
  padding-left: calc(var(--plyr-control-spacing, 10px) * 0.7 * 4);
  position: relative;
  width: calc(100% - 14px);
  width: calc(100% - var(--plyr-control-spacing, 10px) * 0.7 * 2);
}

.plyr__menu__container .plyr__control--back:after {
  border-right-color: #728197;
  border-right-color: var(--plyr-menu-arrow-color, #728197);
  left: 6.5px;
  left: calc(var(--plyr-control-spacing, 10px) * 0.7 * 1.5 - var(--plyr-menu-item-arrow-size, 4px));
}

.plyr__menu__container .plyr__control--back:before {
  background: #dcdfe5;
  background: var(--plyr-menu-back-border-color, #dcdfe5);
  box-shadow: 0 1px 0 #fff;
  box-shadow: 0 1px 0 var(--plyr-menu-back-border-shadow-color, #fff);
  content: "";
  height: 1px;
  left: 0;
  margin-top: 3.5px;
  margin-top: calc(var(--plyr-control-spacing, 10px) * 0.7 / 2);
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 100%;
}

.plyr__menu__container .plyr__control--back:focus-visible:after, .plyr__menu__container .plyr__control--back:hover:after {
  border-right-color: initial;
}

.plyr__menu__container .plyr__control[role=menuitemradio] {
  padding-left: 7px;
  padding-left: calc(var(--plyr-control-spacing, 10px) * 0.7);
}

.plyr__menu__container .plyr__control[role=menuitemradio]:after, .plyr__menu__container .plyr__control[role=menuitemradio]:before {
  border-radius: 100%;
}

.plyr__menu__container .plyr__control[role=menuitemradio]:before {
  background: rgba(0, 0, 0, 0.1019607843);
  content: "";
  display: block;
  flex-shrink: 0;
  height: 16px;
  margin-right: 10px;
  margin-right: var(--plyr-control-spacing, 10px);
  transition: all 0.3s ease;
  width: 16px;
}

.plyr__menu__container .plyr__control[role=menuitemradio]:after {
  background: #fff;
  border: 0;
  height: 6px;
  left: 12px;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%) scale(0);
  transition: transform 0.3s ease, opacity 0.3s ease;
  width: 6px;
}

.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before {
  background: #00b2ff;
  background: var(--plyr-control-toggle-checked-background, var(--plyr-color-main, var(--plyr-color-main, #00b2ff)));
}

.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.plyr__menu__container .plyr__control[role=menuitemradio]:focus-visible:before, .plyr__menu__container .plyr__control[role=menuitemradio]:hover:before {
  background: rgba(35, 40, 47, 0.1019607843);
}

.plyr__menu__container .plyr__menu__value {
  align-items: center;
  display: flex;
  margin-left: auto;
  margin-right: -5px;
  margin-right: calc(var(--plyr-control-spacing, 10px) * 0.7 * -1 + 2px);
  overflow: hidden;
  padding-left: 24.5px;
  padding-left: calc(var(--plyr-control-spacing, 10px) * 0.7 * 3.5);
  pointer-events: none;
}

.plyr--full-ui input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(0, 0, 0, 0);
  border: 0;
  border-radius: 26px;
  border-radius: calc(var(--plyr-range-thumb-height, 13px) * 2);
  color: #00b2ff;
  color: var(--plyr-range-fill-background, var(--plyr-color-main, var(--plyr-color-main, #00b2ff)));
  display: block;
  height: 19px;
  height: calc(var(--plyr-range-thumb-active-shadow-width, 3px) * 2 + var(--plyr-range-thumb-height, 13px));
  margin: 0;
  min-width: 0;
  padding: 0;
  transition: box-shadow 0.3s ease;
  width: 100%;
}

.plyr--full-ui input[type=range]::-webkit-slider-runnable-track {
  background: rgba(0, 0, 0, 0);
  background-image: linear-gradient(90deg, currentColor 0, rgba(0, 0, 0, 0) 0);
  background-image: linear-gradient(to right, currentColor var(--value, 0), rgba(0, 0, 0, 0) var(--value, 0));
  border: 0;
  border-radius: 2.5px;
  border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
  height: 5px;
  height: var(--plyr-range-track-height, 5px);
  -webkit-transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  -webkit-user-select: none;
  user-select: none;
}

.plyr--full-ui input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  background: var(--plyr-range-thumb-background, #fff);
  border: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.1490196078), 0 0 0 1px rgba(35, 40, 47, 0.2);
  box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.1490196078), 0 0 0 1px rgba(35, 40, 47, 0.2));
  height: 13px;
  height: var(--plyr-range-thumb-height, 13px);
  margin-top: -4px;
  margin-top: calc((var(--plyr-range-thumb-height, 13px) - var(--plyr-range-track-height, 5px)) / 2 * -1);
  position: relative;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  width: 13px;
  width: var(--plyr-range-thumb-height, 13px);
}

.plyr--full-ui input[type=range]::-moz-range-track {
  background: rgba(0, 0, 0, 0);
  border: 0;
  border-radius: 2.5px;
  border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
  height: 5px;
  height: var(--plyr-range-track-height, 5px);
  -moz-transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  user-select: none;
}

.plyr--full-ui input[type=range]::-moz-range-thumb {
  background: #fff;
  background: var(--plyr-range-thumb-background, #fff);
  border: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.1490196078), 0 0 0 1px rgba(35, 40, 47, 0.2);
  box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.1490196078), 0 0 0 1px rgba(35, 40, 47, 0.2));
  height: 13px;
  height: var(--plyr-range-thumb-height, 13px);
  position: relative;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
  width: 13px;
  width: var(--plyr-range-thumb-height, 13px);
}

.plyr--full-ui input[type=range]::-moz-range-progress {
  background: currentColor;
  border-radius: 2.5px;
  border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
  height: 5px;
  height: var(--plyr-range-track-height, 5px);
}

.plyr--full-ui input[type=range]::-ms-track {
  color: rgba(0, 0, 0, 0);
}

.plyr--full-ui input[type=range]::-ms-fill-upper, .plyr--full-ui input[type=range]::-ms-track {
  background: rgba(0, 0, 0, 0);
  border: 0;
  border-radius: 2.5px;
  border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
  height: 5px;
  height: var(--plyr-range-track-height, 5px);
  -ms-transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  user-select: none;
}

.plyr--full-ui input[type=range]::-ms-fill-lower {
  background: rgba(0, 0, 0, 0);
  background: currentColor;
  border: 0;
  border-radius: 2.5px;
  border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
  height: 5px;
  height: var(--plyr-range-track-height, 5px);
  -ms-transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  user-select: none;
}

.plyr--full-ui input[type=range]::-ms-thumb {
  background: #fff;
  background: var(--plyr-range-thumb-background, #fff);
  border: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.1490196078), 0 0 0 1px rgba(35, 40, 47, 0.2);
  box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.1490196078), 0 0 0 1px rgba(35, 40, 47, 0.2));
  height: 13px;
  height: var(--plyr-range-thumb-height, 13px);
  margin-top: 0;
  position: relative;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
  width: 13px;
  width: var(--plyr-range-thumb-height, 13px);
}

.plyr--full-ui input[type=range]::-ms-tooltip {
  display: none;
}

.plyr--full-ui input[type=range]::-moz-focus-outer {
  border: 0;
}

.plyr--full-ui input[type=range]:focus {
  outline: 0;
}

.plyr--full-ui input[type=range]:focus-visible::-webkit-slider-runnable-track {
  outline: 2px dashed #00b2ff;
  outline: 2px dashed var(--plyr-focus-visible-color, var(--plyr-color-main, var(--plyr-color-main, #00b2ff)));
  outline-offset: 2px;
}

.plyr--full-ui input[type=range]:focus-visible::-moz-range-track {
  outline: 2px dashed #00b2ff;
  outline: 2px dashed var(--plyr-focus-visible-color, var(--plyr-color-main, var(--plyr-color-main, #00b2ff)));
  outline-offset: 2px;
}

.plyr--full-ui input[type=range]:focus-visible::-ms-track {
  outline: 2px dashed #00b2ff;
  outline: 2px dashed var(--plyr-focus-visible-color, var(--plyr-color-main, var(--plyr-color-main, #00b2ff)));
  outline-offset: 2px;
}

.plyr__poster {
  background-color: #000;
  background-color: var(--plyr-video-background, var(--plyr-video-background, #000));
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.2s ease;
  width: 100%;
  z-index: 1;
}

.plyr--stopped.plyr__poster-enabled .plyr__poster {
  opacity: 1;
}

.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster {
  display: none;
}

.plyr__time {
  font-size: 13px;
  font-size: var(--plyr-font-size-time, var(--plyr-font-size-small, 13px));
}

.plyr__time + .plyr__time:before {
  content: "⁄";
  margin-right: 10px;
  margin-right: var(--plyr-control-spacing, 10px);
}

@media (max-width: 767px) {
  .plyr__time + .plyr__time {
    display: none;
  }
}
.plyr__tooltip {
  background: #fff;
  background: var(--plyr-tooltip-background, #fff);
  border-radius: 5px;
  border-radius: var(--plyr-tooltip-radius, 5px);
  bottom: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1490196078);
  box-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.1490196078));
  color: #4a5464;
  color: var(--plyr-tooltip-color, #4a5464);
  font-size: 13px;
  font-size: var(--plyr-font-size-small, 13px);
  font-weight: 400;
  font-weight: var(--plyr-font-weight-regular, 400);
  left: 50%;
  line-height: 1.3;
  margin-bottom: 10px;
  margin-bottom: calc(var(--plyr-control-spacing, 10px) / 2 * 2);
  opacity: 0;
  padding: 5px 7.5px;
  padding: calc(var(--plyr-control-spacing, 10px) / 2) calc(var(--plyr-control-spacing, 10px) / 2 * 1.5);
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, 10px) scale(0.8);
  transform-origin: 50% 100%;
  transition: transform 0.2s ease 0.1s, opacity 0.2s ease 0.1s;
  white-space: nowrap;
  z-index: 2;
}

.plyr__tooltip:before {
  border-left: 4px solid rgba(0, 0, 0, 0);
  border-left: var(--plyr-tooltip-arrow-size, 4px) solid rgba(0, 0, 0, 0);
  border-right: 4px solid rgba(0, 0, 0, 0);
  border-right: var(--plyr-tooltip-arrow-size, 4px) solid rgba(0, 0, 0, 0);
  border-top: 4px solid #fff;
  border-top: var(--plyr-tooltip-arrow-size, 4px) solid var(--plyr-tooltip-background, #fff);
  bottom: -4px;
  bottom: calc(var(--plyr-tooltip-arrow-size, 4px) * -1);
  content: "";
  height: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 0;
  z-index: 2;
}

.plyr .plyr__control:focus-visible .plyr__tooltip, .plyr .plyr__control:hover .plyr__tooltip, .plyr__tooltip--visible {
  opacity: 1;
  transform: translate(-50%) scale(1);
}

.plyr .plyr__control:hover .plyr__tooltip {
  z-index: 3;
}

.plyr__controls > .plyr__control:first-child .plyr__tooltip, .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {
  left: 0;
  transform: translateY(10px) scale(0.8);
  transform-origin: 0 100%;
}

.plyr__controls > .plyr__control:first-child .plyr__tooltip:before, .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip:before {
  left: 16px;
  left: calc(var(--plyr-control-icon-size, 18px) / 2 + var(--plyr-control-spacing, 10px) * 0.7);
}

.plyr__controls > .plyr__control:last-child .plyr__tooltip {
  left: auto;
  right: 0;
  transform: translateY(10px) scale(0.8);
  transform-origin: 100% 100%;
}

.plyr__controls > .plyr__control:last-child .plyr__tooltip:before {
  left: auto;
  right: 16px;
  right: calc(var(--plyr-control-icon-size, 18px) / 2 + var(--plyr-control-spacing, 10px) * 0.7);
  transform: translateX(50%);
}

.plyr__controls > .plyr__control:first-child .plyr__tooltip--visible, .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip--visible, .plyr__controls > .plyr__control:first-child + .plyr__control:focus-visible .plyr__tooltip, .plyr__controls > .plyr__control:first-child + .plyr__control:hover .plyr__tooltip, .plyr__controls > .plyr__control:first-child:focus-visible .plyr__tooltip, .plyr__controls > .plyr__control:first-child:hover .plyr__tooltip, .plyr__controls > .plyr__control:last-child .plyr__tooltip--visible, .plyr__controls > .plyr__control:last-child:focus-visible .plyr__tooltip, .plyr__controls > .plyr__control:last-child:hover .plyr__tooltip {
  transform: translate(0) scale(1);
}

.plyr__progress {
  left: 6.5px;
  left: calc(var(--plyr-range-thumb-height, 13px) * 0.5);
  margin-right: 13px;
  margin-right: var(--plyr-range-thumb-height, 13px);
  position: relative;
}

.plyr__progress input[type=range], .plyr__progress__buffer {
  margin-left: -6.5px;
  margin-left: calc(var(--plyr-range-thumb-height, 13px) * -0.5);
  margin-right: -6.5px;
  margin-right: calc(var(--plyr-range-thumb-height, 13px) * -0.5);
  width: calc(100% + 13px);
  width: calc(100% + var(--plyr-range-thumb-height, 13px));
}

.plyr__progress input[type=range] {
  position: relative;
  z-index: 2;
}

.plyr__progress .plyr__tooltip {
  left: 0;
  max-width: 120px;
  overflow-wrap: break-word;
}

.plyr__progress__buffer {
  -webkit-appearance: none;
  background: rgba(0, 0, 0, 0);
  border: 0;
  border-radius: 100px;
  height: 5px;
  height: var(--plyr-range-track-height, 5px);
  left: 0;
  margin-top: -2.5px;
  margin-top: calc(var(--plyr-range-track-height, 5px) / 2 * -1);
  padding: 0;
  position: absolute;
  top: 50%;
}

.plyr__progress__buffer::-webkit-progress-bar {
  background: rgba(0, 0, 0, 0);
}

.plyr__progress__buffer::-webkit-progress-value {
  background: currentColor;
  border-radius: 100px;
  min-width: 5px;
  min-width: var(--plyr-range-track-height, 5px);
  -webkit-transition: width 0.2s ease;
  transition: width 0.2s ease;
}

.plyr__progress__buffer::-moz-progress-bar {
  background: currentColor;
  border-radius: 100px;
  min-width: 5px;
  min-width: var(--plyr-range-track-height, 5px);
  -moz-transition: width 0.2s ease;
  transition: width 0.2s ease;
}

.plyr__progress__buffer::-ms-fill {
  border-radius: 100px;
  -ms-transition: width 0.2s ease;
  transition: width 0.2s ease;
}

.plyr--loading .plyr__progress__buffer {
  animation: plyr-progress 1s linear infinite;
  background-image: linear-gradient(-45deg, rgba(35, 40, 47, 0.6) 25%, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 50%, rgba(35, 40, 47, 0.6) 0, rgba(35, 40, 47, 0.6) 75%, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0));
  background-image: linear-gradient(-45deg, var(--plyr-progress-loading-background, rgba(35, 40, 47, 0.6)) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, var(--plyr-progress-loading-background, rgba(35, 40, 47, 0.6)) 50%, var(--plyr-progress-loading-background, rgba(35, 40, 47, 0.6)) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
  background-repeat: repeat-x;
  background-size: 25px 25px;
  background-size: var(--plyr-progress-loading-size, 25px) var(--plyr-progress-loading-size, 25px);
  color: rgba(0, 0, 0, 0);
}

.plyr--video.plyr--loading .plyr__progress__buffer {
  background-color: rgba(255, 255, 255, 0.2509803922);
  background-color: var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.2509803922));
}

.plyr--audio.plyr--loading .plyr__progress__buffer {
  background-color: rgba(193, 200, 209, 0.6);
  background-color: var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, 0.6));
}

.plyr__progress__marker {
  background-color: #fff;
  background-color: var(--plyr-progress-marker-background, #fff);
  border-radius: 1px;
  height: 5px;
  height: var(--plyr-range-track-height, 5px);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  width: var(--plyr-progress-marker-width, 3px);
  z-index: 3;
}

.plyr__volume {
  align-items: center;
  display: flex;
  position: relative;
}

.plyr__volume input[type=range] {
  margin-left: 5px;
  margin-left: calc(var(--plyr-control-spacing, 10px) / 2);
  margin-right: 5px;
  margin-right: calc(var(--plyr-control-spacing, 10px) / 2);
  max-width: 90px;
  min-width: 60px;
  position: relative;
  z-index: 2;
}

.plyr--audio {
  display: block;
}

.plyr--audio .plyr__controls {
  background: #fff;
  background: var(--plyr-audio-controls-background, #fff);
  border-radius: inherit;
  color: #4a5464;
  color: var(--plyr-audio-control-color, #4a5464);
  padding: 10px;
  padding: var(--plyr-control-spacing, 10px);
}

.plyr--audio .plyr__control:focus-visible, .plyr--audio .plyr__control:hover, .plyr--audio .plyr__control[aria-expanded=true] {
  background: #00b2ff;
  background: var(--plyr-audio-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, #00b2ff)));
  color: #fff;
  color: var(--plyr-audio-control-color-hover, #fff);
}

.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track {
  background-color: rgba(193, 200, 209, 0.6);
  background-color: var(--plyr-audio-range-track-background, var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, 0.6)));
}

.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track {
  background-color: rgba(193, 200, 209, 0.6);
  background-color: var(--plyr-audio-range-track-background, var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, 0.6)));
}

.plyr--full-ui.plyr--audio input[type=range]::-ms-track {
  background-color: rgba(193, 200, 209, 0.6);
  background-color: var(--plyr-audio-range-track-background, var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, 0.6)));
}

.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb {
  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.1490196078), 0 0 0 1px rgba(35, 40, 47, 0.2), 0 0 0 3px rgba(35, 40, 47, 0.1019607843);
  box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.1490196078), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(35, 40, 47, 0.1019607843));
}

.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb {
  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.1490196078), 0 0 0 1px rgba(35, 40, 47, 0.2), 0 0 0 3px rgba(35, 40, 47, 0.1019607843);
  box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.1490196078), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(35, 40, 47, 0.1019607843));
}

.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb {
  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.1490196078), 0 0 0 1px rgba(35, 40, 47, 0.2), 0 0 0 3px rgba(35, 40, 47, 0.1019607843);
  box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.1490196078), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(35, 40, 47, 0.1019607843));
}

.plyr--audio .plyr__progress__buffer {
  color: rgba(193, 200, 209, 0.6);
  color: var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, 0.6));
}

.plyr--video {
  overflow: hidden;
}

.plyr--video.plyr--menu-open {
  overflow: visible;
}

.plyr__video-wrapper {
  background: #000;
  background: var(--plyr-video-background, var(--plyr-video-background, #000));
  border-radius: inherit;
  height: 100%;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.plyr__video-embed, .plyr__video-wrapper--fixed-ratio {
  aspect-ratio: 16/9;
}

@supports not (aspect-ratio: 16/9) {
  .plyr__video-embed, .plyr__video-wrapper--fixed-ratio {
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
  }
}
.plyr__video-embed iframe, .plyr__video-wrapper--fixed-ratio video {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.plyr--full-ui .plyr__video-embed > .plyr__video-embed__container {
  padding-bottom: 240%;
  position: relative;
  transform: translateY(-38.28125%);
}

.plyr--video .plyr__controls {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7490196078));
  background: var(--plyr-video-controls-background, linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7490196078)));
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  bottom: 0;
  color: #fff;
  color: var(--plyr-video-control-color, #fff);
  left: 0;
  padding: 5px;
  padding: calc(var(--plyr-control-spacing, 10px) / 2);
  padding-top: 20px;
  padding-top: calc(var(--plyr-control-spacing, 10px) * 2);
  position: absolute;
  right: 0;
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
  z-index: 3;
}

@media (min-width: 480px) {
  .plyr--video .plyr__controls {
    padding: 10px;
    padding: var(--plyr-control-spacing, 10px);
    padding-top: 35px;
    padding-top: calc(var(--plyr-control-spacing, 10px) * 3.5);
  }
}
.plyr--video.plyr--hide-controls .plyr__controls {
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
}

.plyr--video .plyr__control:focus-visible, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {
  background: #00b2ff;
  background: var(--plyr-video-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, #00b2ff)));
  color: #fff;
  color: var(--plyr-video-control-color-hover, #fff);
}

.plyr__control--overlaid {
  background: #00b2ff;
  background: var(--plyr-video-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, #00b2ff)));
  border: 0;
  border-radius: 100%;
  color: #fff;
  color: var(--plyr-video-control-color, #fff);
  display: none;
  left: 50%;
  opacity: 0.9;
  padding: 15px;
  padding: calc(var(--plyr-control-spacing, 10px) * 1.5);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s;
  z-index: 2;
}

.plyr__control--overlaid svg {
  left: 2px;
  position: relative;
}

.plyr__control--overlaid:focus, .plyr__control--overlaid:hover {
  opacity: 1;
}

.plyr--playing .plyr__control--overlaid {
  opacity: 0;
  visibility: hidden;
}

.plyr--full-ui.plyr--video .plyr__control--overlaid {
  display: block;
}

.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track {
  background-color: rgba(255, 255, 255, 0.2509803922);
  background-color: var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.2509803922)));
}

.plyr--full-ui.plyr--video input[type=range]::-moz-range-track {
  background-color: rgba(255, 255, 255, 0.2509803922);
  background-color: var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.2509803922)));
}

.plyr--full-ui.plyr--video input[type=range]::-ms-track {
  background-color: rgba(255, 255, 255, 0.2509803922);
  background-color: var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.2509803922)));
}

.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb {
  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.1490196078), 0 0 0 1px rgba(35, 40, 47, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.5019607843);
  box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.1490196078), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(255, 255, 255, 0.5019607843));
}

.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb {
  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.1490196078), 0 0 0 1px rgba(35, 40, 47, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.5019607843);
  box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.1490196078), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(255, 255, 255, 0.5019607843));
}

.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb {
  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.1490196078), 0 0 0 1px rgba(35, 40, 47, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.5019607843);
  box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.1490196078), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(255, 255, 255, 0.5019607843));
}

.plyr--video .plyr__progress__buffer {
  color: rgba(255, 255, 255, 0.2509803922);
  color: var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.2509803922));
}

.plyr:fullscreen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}

.plyr:fullscreen video {
  height: 100%;
}

.plyr:fullscreen .plyr__control .icon--exit-fullscreen {
  display: block;
}

.plyr:fullscreen .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}

.plyr:fullscreen.plyr--hide-controls {
  cursor: none;
}

@media (min-width: 1024px) {
  .plyr:fullscreen .plyr__captions {
    font-size: 21px;
    font-size: var(--plyr-font-size-xlarge, 21px);
  }
}
.plyr--fullscreen-fallback {
  background: #000;
  border-radius: 0 !important;
  bottom: 0;
  height: 100%;
  left: 0;
  margin: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 10000000;
}

.plyr--fullscreen-fallback video {
  height: 100%;
}

.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen {
  display: block;
}

.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}

.plyr--fullscreen-fallback.plyr--hide-controls {
  cursor: none;
}

@media (min-width: 1024px) {
  .plyr--fullscreen-fallback .plyr__captions {
    font-size: 21px;
    font-size: var(--plyr-font-size-xlarge, 21px);
  }
}
.plyr__ads {
  border-radius: inherit;
  bottom: 0;
  cursor: pointer;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.plyr__ads > div, .plyr__ads > div iframe {
  height: 100%;
  position: absolute;
  width: 100%;
}

.plyr__ads:after {
  background: #23282f;
  border-radius: 2px;
  bottom: 10px;
  bottom: var(--plyr-control-spacing, 10px);
  color: #fff;
  content: attr(data-badge-text);
  font-size: 11px;
  padding: 2px 6px;
  pointer-events: none;
  position: absolute;
  right: 10px;
  right: var(--plyr-control-spacing, 10px);
  z-index: 3;
}

.plyr__ads:empty:after {
  display: none;
}

.plyr__cues {
  background: currentColor;
  display: block;
  height: 5px;
  height: var(--plyr-range-track-height, 5px);
  left: 0;
  opacity: 0.8;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  z-index: 3;
}

.plyr__preview-thumb {
  background-color: #fff;
  background-color: var(--plyr-tooltip-background, #fff);
  border-radius: 8px;
  border-radius: var(--plyr-menu-radius, 8px);
  bottom: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1490196078);
  box-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.1490196078));
  margin-bottom: 10px;
  margin-bottom: calc(var(--plyr-control-spacing, 10px) / 2 * 2);
  opacity: 0;
  padding: 3px;
  pointer-events: none;
  position: absolute;
  transform: translateY(10px) scale(0.8);
  transform-origin: 50% 100%;
  transition: transform 0.2s ease 0.1s, opacity 0.2s ease 0.1s;
  z-index: 2;
}

.plyr__preview-thumb--is-shown {
  opacity: 1;
  transform: translate(0) scale(1);
}

.plyr__preview-thumb:before {
  border-left: 4px solid rgba(0, 0, 0, 0);
  border-left: var(--plyr-tooltip-arrow-size, 4px) solid rgba(0, 0, 0, 0);
  border-right: 4px solid rgba(0, 0, 0, 0);
  border-right: var(--plyr-tooltip-arrow-size, 4px) solid rgba(0, 0, 0, 0);
  border-top: 4px solid #fff;
  border-top: var(--plyr-tooltip-arrow-size, 4px) solid var(--plyr-tooltip-background, #fff);
  bottom: -4px;
  bottom: calc(var(--plyr-tooltip-arrow-size, 4px) * -1);
  content: "";
  height: 0;
  left: calc(50% + var(--preview-arrow-offset));
  position: absolute;
  transform: translateX(-50%);
  width: 0;
  z-index: 2;
}

.plyr__preview-thumb__image-container {
  background: #c1c8d1;
  border-radius: 7px;
  border-radius: calc(var(--plyr-menu-radius, 8px) - 1px);
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.plyr__preview-thumb__image-container img, .plyr__preview-thumb__image-container:after {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.plyr__preview-thumb__image-container:after {
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1490196078);
  content: "";
  pointer-events: none;
}

.plyr__preview-thumb__image-container img {
  max-height: none;
  max-width: none;
}

.plyr__preview-thumb__time-container {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7490196078));
  background: var(--plyr-video-controls-background, linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7490196078)));
  border-bottom-left-radius: 7px;
  border-bottom-left-radius: calc(var(--plyr-menu-radius, 8px) - 1px);
  border-bottom-right-radius: 7px;
  border-bottom-right-radius: calc(var(--plyr-menu-radius, 8px) - 1px);
  bottom: 0;
  left: 0;
  line-height: 1.1;
  padding: 20px 6px 6px;
  position: absolute;
  right: 0;
  z-index: 3;
}

.plyr__preview-thumb__time-container span {
  color: #fff;
  font-size: 13px;
  font-size: var(--plyr-font-size-time, var(--plyr-font-size-small, 13px));
}

.plyr__preview-scrubbing {
  bottom: 0;
  filter: blur(1px);
  height: 100%;
  left: 0;
  margin: auto;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.3s ease;
  width: 100%;
  z-index: 1;
}

.plyr__preview-scrubbing--is-shown {
  opacity: 1;
}

.plyr__preview-scrubbing img {
  height: 100%;
  left: 0;
  max-height: none;
  max-width: none;
  object-fit: contain;
  position: absolute;
  top: 0;
  width: 100%;
}

.plyr--no-transition {
  transition: none !important;
}

.plyr__sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  border: 0 !important;
  height: 1px !important;
  overflow: hidden;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

.plyr [hidden] {
  display: none !important;
}

/*# sourceMappingURL=main.css.map */
/*# sourceMappingURL=main.css.map */