.ptv-host {
  position: relative;
}

/* While the panel is up the player chrome underneath must not take clicks,
   otherwise the control bar swallows every press meant for Skip or Visit. */
.ptv-host > .vjs-control-bar,
.ptv-host > .vjs-big-play-button,
.ptv-host > .vjs-loading-spinner,
.ptv-host > .vjs-poster,
.ptv-host > .vjs-text-track-display,
.ptv-host > .vjs-modal-dialog,
.ptv-host > .vjs-title-bar {
  display: none !important;
  pointer-events: none !important;
}

.ptv-panel {
  position: absolute;
  inset: 0;
  z-index: 2147483000;
  background: #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
}

.ptv-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #000;
}

.ptv-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: contain;
  background: #000;
}

.ptv-controls {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ptv-timer {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}

.ptv-timer svg {
  width: 38px;
  height: 38px;
  transform: rotate(-90deg);
}

.ptv-timer circle {
  fill: none;
  stroke-width: 3;
}

.ptv-timer-track {
  stroke: rgba(255, 255, 255, .28);
}

.ptv-timer-fill {
  stroke: #32B0C6;
  stroke-linecap: round;
  stroke-dasharray: 100.53;
  stroke-dashoffset: 100.53;
  transition: stroke-dashoffset .2s linear;
}

.ptv-timer-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ptv-skip,
.ptv-cta {
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 11px 16px;
  min-height: 40px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.ptv-skip {
  background: rgba(0, 0, 0, .62);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .55);
}

.ptv-skip:hover {
  background: rgba(0, 0, 0, .82);
  color: #fff;
}

.ptv-cta {
  background: #32B0C6;
  color: #0b0b0b;
  border: 1px solid #32B0C6;
}

.ptv-cta:hover {
  background: #2991A3;
  border-color: #2991A3;
  color: #0b0b0b;
  text-decoration: none;
}

.ptv-sound {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 3;
  pointer-events: auto;
  background: rgba(0, 0, 0, .68);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 11px 15px;
  min-height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ptv-sound::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: currentColor;
  clip-path: polygon(0 35%, 32% 35%, 62% 8%, 62% 92%, 32% 65%, 0 65%);
}

.ptv-sound:hover {
  background: rgba(0, 0, 0, .86);
  color: #fff;
}

.ptv-skip:focus-visible,
.ptv-cta:focus-visible,
.ptv-sound:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Phone sizes. Every control keeps a 44px touch target, which is the smallest
   a thumb can hit reliably, and the row wraps instead of running off screen. */
@media (max-width: 640px) {
  .ptv-controls {
    right: 8px;
    bottom: 8px;
    left: 8px;
    gap: 8px;
    justify-content: flex-end;
  }

  .ptv-skip,
  .ptv-cta {
    padding: 12px 14px;
    font-size: 14px;
    min-height: 44px;
  }

  .ptv-cta {
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    white-space: nowrap;
  }

  .ptv-sound {
    left: 8px;
    top: 8px;
    padding: 12px 14px;
    min-height: 44px;
  }

  .ptv-timer,
  .ptv-timer svg {
    width: 36px;
    height: 36px;
  }

  .ptv-timer {
    flex-basis: 36px;
  }
}

/* Short landscape phones: the controls must not eat the creative. */
@media (max-height: 420px) and (orientation: landscape) {
  .ptv-controls {
    bottom: 6px;
    right: 6px;
  }

  .ptv-skip,
  .ptv-cta,
  .ptv-sound {
    padding: 9px 12px;
    min-height: 40px;
    font-size: 13px;
  }
}

/* Social media links: bottom of the sidebar and on the About page. */
.potolo-social-title {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.75;
  margin-bottom: 8px;
}

.potolo-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* One line in the sidebar, even with its scrollbar showing. */
.potolo-social-sidebar .potolo-social-row {
  flex-wrap: nowrap;
}

.potolo-social-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: inherit;
  background: rgba(127, 127, 127, 0.12);
  transition: background 0.15s ease, color 0.15s ease;
}

.potolo-social-row a:hover,
.potolo-social-row a:focus-visible {
  background: var(--primary, #32b0c6);
  color: var(--on-primary, #fff);
}

.potolo-social-row svg {
  width: 17px;
  height: 17px;
}

.potolo-social-sidebar {
  margin: 16px 0 8px;
  padding: 0 1.5rem;
}

.menu-container.collapsed .potolo-social-sidebar {
  display: none;
}

.potolo-social-about {
  margin: 32px 0 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(127, 127, 127, 0.25);
}

/* ------------------------------------------------------------------
   The phone step on the signup page.

   Its own colours rather than the platform's variables, because it has to
   look deliberate on whichever theme is loaded and a variable that is
   renamed upstream would leave it unreadable rather than merely off brand.
   ------------------------------------------------------------------ */
.potolo-verify {
  border: 1px solid rgba(127, 127, 127, 0.35);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 22px;
  background: rgba(127, 127, 127, 0.07);
  max-width: 560px;
}

/* Nothing on the page was a usable anchor, so it floats instead of
   disappearing. Still reachable, still on top, still readable on a phone. */
.potolo-verify-floating {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 560px;
  z-index: 10000;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

@media (prefers-color-scheme: dark) {
  .potolo-verify-floating {
    background: #1b1b1f;
  }
}

.potolo-verify[data-verified="yes"] {
  border-color: rgba(40, 160, 90, 0.6);
}

.potolo-verify-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
}

.potolo-verify-note {
  margin: 0 0 12px;
  font-size: 13.5px;
  opacity: 0.8;
}

.potolo-verify-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.potolo-verify-row input {
  flex: 1 1 200px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(127, 127, 127, 0.5);
  background: transparent;
  color: inherit;
  font-size: 15px;
}

.potolo-verify-row button {
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 6px;
  border: 0;
  cursor: pointer;
  font-size: 15px;
  white-space: nowrap;
}

.potolo-verify-row button[disabled] {
  opacity: 0.6;
  cursor: default;
}

.potolo-verify-said {
  margin: 0;
  font-size: 13.5px;
  min-height: 1.2em;
}

.potolo-verify-said[data-tone="good"] {
  color: #1d8a4e;
}

.potolo-verify-said[data-tone="bad"] {
  color: #c0392b;
}

/* ------------------------------------------------------------------
   The phone tab on the platform's sign in page.

   Its own colours rather than the platform's variables, for the same
   reason the signup card has its own: it has to look deliberate on
   whichever theme is loaded, and a variable renamed upstream would
   leave it unreadable rather than merely off brand.
   ------------------------------------------------------------------ */
.potolo-login-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 18px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.35);
}

.potolo-login-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  white-space: nowrap;
}

.potolo-login-tab[aria-selected="true"] {
  opacity: 1;
  border-bottom-color: #32B0C6;
}

.potolo-login-tab:focus-visible {
  outline: 2px solid #32B0C6;
  outline-offset: -2px;
}

.potolo-login-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.potolo-login-panel label {
  font-weight: 600;
  font-size: 14px;
  margin: 6px 0 0;
}

.potolo-login-panel input {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(127, 127, 127, 0.5);
  background: transparent;
  color: inherit;
  font-size: 15px;
  width: 100%;
}

.potolo-login-hint {
  margin: 0;
  font-size: 13px;
  opacity: 0.75;
}

#potolo-login-go {
  margin-top: 10px;
  min-height: 44px;
  cursor: pointer;
}

.potolo-login-said {
  margin: 6px 0 0;
  font-size: 13.5px;
  min-height: 1.2em;
}

.potolo-login-said[data-tone="bad"] {
  color: #c0392b;
}

/* ---------------------------------------------------------------------------
   The phone layout: the page's controls, kept in the drawer.

   Every rule is written under one of the two block ids, and that is not
   tidiness. Angular stamps a per component attribute onto its own selectors,
   so the platform's `.login-label` is really `.login-label[_ngcontent-x]`,
   which outranks a plain class and ties with a two class selector. An id
   settles it without !important, which would be a rule nobody downstream
   could override.

   None of this matches a wide window, so the desktop layout is untouched.
   --------------------------------------------------------------------------- */

/* The heading and the rule under the section come from the drawer itself,
   through the classes and the attribute put on in the script. All that is
   left here is the inside of the block, which is ours. The drawer's own
   horizontal padding is used by name so the section lines up with every
   other one, at whatever value the platform is currently using. */
#potolo-phone-extras .potolo-phone-block-body,
#potolo-phone-filters .potolo-phone-block-body {
  padding: 0 var(--co-menu-x-padding, 16px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  text-align: start;
}

/* A way in before a way back in: somebody who has no account cannot use the
   other one, and somebody who has one knows where it is. */
#potolo-phone-extras .create-account-button {
  order: 1;
}

#potolo-phone-extras .login-label {
  order: 2;
}

#potolo-phone-extras .potolo-phone-block-body > * {
  display: block;
  width: 100%;
  margin: 0;
  text-align: center;
}

/* The header carries the same button twice, worded and icon only, and lets
   the width pick one. A drawer has room for words, and two buttons that do
   the same thing read as two different ways in. */
#potolo-phone-extras .login-icon {
  display: none;
}

#potolo-phone-extras .login-label {
  display: block;
}

/* --------------------------------------------------------------------------
   The filters, which were laid out for a content column the width of the
   page and now have a drawer instead.
   -------------------------------------------------------------------------- */

#potolo-phone-filters my-video-filters-header,
#potolo-phone-filters .root,
#potolo-phone-filters .filters,
#potolo-phone-filters .section,
#potolo-phone-filters .form-group {
  display: block;
  max-width: 100%;
  width: 100%;
}

/* wrap-reverse flips the cross axis. Harmless across a wide row, where it
   only decides which line wraps where; turned upright into a column it
   quietly pushes every label to the right hand edge. */
#potolo-phone-filters .d-flex.flex-wrap-reverse {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
}

#potolo-phone-filters .d-flex.flex-wrap-reverse > * {
  width: 100%;
  margin: 0;
}

#potolo-phone-filters .scope-info,
#potolo-phone-filters .filters-summary,
#potolo-phone-filters .active-filters {
  text-align: start;
}

#potolo-phone-filters .filters-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Sort keeps its label beside its box rather than above it: the box says
   what it is, and a second line for one word is a line wasted. */
#potolo-phone-filters .d-flex.flex-wrap.align-items-center {
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}

#potolo-phone-filters .select-label {
  margin: 0;
  white-space: nowrap;
}

#potolo-phone-filters my-select-videos-sort {
  flex: 1 1 auto;
  margin: 0;
}

/* Creator monetization page, /p/monetization. */
.ptv-mon { max-width: 920px; padding-top: 24px; padding-bottom: 48px; }
.ptv-mon-title { font-size: 26px; font-weight: 700; margin: 0 0 8px; }
.ptv-mon-muted { opacity: 0.75; }
.ptv-mon-card {
  border: 1px solid rgba(127, 127, 127, 0.3);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 18px 0;
}
.ptv-mon-card h2 { font-size: 19px; font-weight: 600; margin: 0 0 10px; }
.ptv-mon-card h3 { font-size: 16px; font-weight: 600; margin: 18px 0 8px; }
.ptv-mon-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ptv-mon-progress { margin: 12px 0; }
.ptv-mon-progress-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 14px; }
.ptv-mon-bar { height: 8px; border-radius: 999px; background: rgba(127, 127, 127, 0.2); overflow: hidden; }
.ptv-mon-bar span { display: block; height: 100%; background: var(--primary, #32b0c6); }
.ptv-mon-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.ptv-mon-chip-success { background: rgba(46, 160, 67, 0.16); color: #1f8a3a; }
.ptv-mon-chip-warning { background: rgba(214, 150, 0, 0.18); color: #9a6a00; }
.ptv-mon-chip-danger { background: rgba(207, 34, 46, 0.15); color: #c0262f; }
.ptv-mon-chip-info { background: rgba(50, 176, 198, 0.16); color: #1d7f91; }
.ptv-mon-chip-muted { background: rgba(127, 127, 127, 0.16); }
.ptv-mon-note { border-left: 3px solid rgba(127, 127, 127, 0.45); background: rgba(127, 127, 127, 0.08); padding: 10px 12px; margin: 10px 0; white-space: pre-wrap; }
.ptv-mon-banner { border-radius: 10px; padding: 10px 14px; margin: 12px 0; background: rgba(50, 176, 198, 0.14); }
.ptv-mon-error { color: #c0262f; margin: 8px 0 0; min-height: 1em; }
.ptv-mon-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 8px; }
.ptv-mon-stat { border-radius: 10px; background: rgba(127, 127, 127, 0.08); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.ptv-mon-stat strong { font-size: 22px; }
.ptv-mon-stat small { opacity: 0.75; }
.ptv-mon-table-wrap { overflow-x: auto; }
.ptv-mon-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ptv-mon-table th, .ptv-mon-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(127, 127, 127, 0.2); white-space: nowrap; }
.ptv-mon-table td:first-child { white-space: normal; max-width: 360px; }
.ptv-mon-form { margin-top: 16px; display: grid; gap: 12px; max-width: 480px; }
.ptv-mon-field { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
.ptv-mon-field input { font-weight: 400; }
.ptv-mon-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.ptv-mon-check input { margin-top: 3px; }
.ptv-mon-form button, .ptv-mon-card > button { justify-self: start; }