/*
  ptw-light-site.css — overrides for light-default TENANT sites
  (currently fortemont-stream; payto.watch has ptw-default-site-light.css).

  Linked from base.html when PTW_LIGHT_DEFAULT is set and IS_DEFAULT_SITE is
  not, on its own cache-bust track (-lsX). The light-theme rules are scoped
  to html[data-ptw-theme="light"], so an explicit dark toggle on these sites
  restores the original dark chrome untouched; the per-tenant brand-colour
  section below is deliberately NOT theme-scoped (brand applies in both
  modes). This file is the only stylesheet linked on fortemont, so nothing
  here can leak to payto.watch or watchverse2.
*/

/* Auth / user-action panels (login, signup, password forms) */
html[data-ptw-theme="light"] .user-action-form-wrap { background: #fff; }

/* Site footer (ptw-glass.css hardcodes #0d0f11 in both themes) */
html[data-ptw-theme="light"] .ptw-footer {
  background: #fff;
  border-top: 1px solid rgba(20, 22, 30, 0.1);
}
html[data-ptw-theme="light"] .ptw-footer-brand { color: #0b0d10; }
html[data-ptw-theme="light"] .ptw-footer-links a { color: #687078; }
html[data-ptw-theme="light"] .ptw-footer-links a:hover {
  color: #0b0d10;
  background: rgba(20, 22, 30, 0.06);
}
html[data-ptw-theme="light"] .ptw-footer-copy { color: #687078; }

/* Gates (age / password / subscriber): white stage, outlined card */
html[data-ptw-theme="light"] .ptw-gate { background: #fff; color: #0b0d10; }
html[data-ptw-theme="light"] .ptw-gate-card { border: 1px solid rgba(20, 22, 30, 0.12); }

/* Full-page empty state */
html[data-ptw-theme="light"] .ptw-empty-state { background: #fff; color: #0b0d10; }

/* ============================================================
   Per-tenant brand colour (TenantSite.brand_color, set via
   /admin-dashboard/settings/ "Site Branding").

   root.html already injects :root{--ptw-coral;--ptw-on-coral} for
   tenants that have a brand colour. MediaCMS ships its theme as
   hardcoded green (#009933) in _commons.css body variables and
   consumes it through var(--theme-color, var(--default-theme-color))
   / var(--brand-color, var(--default-brand-color)) fallback chains —
   redefining the default variables here re-points every such
   surface (links, buttons, icons, upload progress, checkboxes,
   profile action buttons, the big play button) to the tenant's
   configured colour. Not theme-scoped on purpose: the brand
   colour applies in light and dark modes alike.
   ============================================================ */
body {
  --default-theme-color: var(--ptw-coral, #009933);
  --default-brand-color: var(--ptw-coral, #009933);
  --links-color: var(--ptw-coral, #009933);
}

/* Brand-fill surfaces that hardcode white text / check marks need
   the on-brand colour (dark) to stay legible on the acid fill. */
a.item-edit-link { color: var(--ptw-on-coral, #111); }
.profile-page-header a.edit-channel,
.profile-page-header a.edit-profile,
.profile-page-header .delete-profile-wrap > button { color: var(--ptw-on-coral, #111); }
.empty-media .button-link {
  color: var(--ptw-on-coral, #111);
  border-color: var(--ptw-coral, #009933);
  background-color: var(--ptw-coral, #009933);
}
input[type=checkbox]:checked {
  background-color: var(--ptw-coral, #009933);
  border-color: var(--ptw-coral, #009933);
}
input[type=checkbox]:checked::after { border-color: var(--ptw-on-coral, #111); }

/* ------------------------------------------------------------
   Video.js player chrome. video-js.css is injected at runtime by
   media.js (AFTER this sheet), so these rules carry the
   html[data-ptw-theme] prefix to win on specificity; the
   big-play button matches through .video-js to also beat the
   build's :hover/:focus rule. The control bar itself stays dark
   (it overlays the video canvas in both themes).
   ------------------------------------------------------------ */
html[data-ptw-theme] .video-js .vjs-big-play-button {
  background-color: var(--ptw-coral, #009933);
  border-color: var(--ptw-on-coral, #111);
  color: var(--ptw-on-coral, #111);
}
html[data-ptw-theme] .vjs-big-play-button .vjs-icon-placeholder:before,
html[data-ptw-theme] .vjs-big-play-button .vjs-svg-icon {
  color: var(--ptw-on-coral, #111);
  fill: var(--ptw-on-coral, #111);
}
html[data-ptw-theme] .vjs-play-progress {
  /* !important: the video-js bundle writes progressBar.color (#019932)
     as an inline style at runtime, which otherwise beats this rule */
  background-color: var(--ptw-coral, #009933) !important;
  color: var(--ptw-on-coral, #111);
}
html[data-ptw-theme] .vjs-play-progress .vjs-svg-icon { fill: var(--ptw-on-coral, #111); }
html[data-ptw-theme] .vjs-volume-level { background-color: var(--ptw-coral, #009933); }
html[data-ptw-theme] .vjs-volume-level .vjs-svg-icon { fill: var(--ptw-on-coral, #111); }
html[data-ptw-theme] .vjs-slider { background-color: rgba(255, 255, 255, 0.22); }
html[data-ptw-theme] .vjs-load-progress { background: rgba(255, 255, 255, 0.25); }
html[data-ptw-theme] .vjs-load-progress div { background: rgba(255, 255, 255, 0.4); }
html[data-ptw-theme] .video-js .vjs-mouse-display { background-color: var(--ptw-coral, #009933); }
html[data-ptw-theme] .vjs-mouse-display .vjs-time-tooltip,
html[data-ptw-theme] .vjs-mouse-display .vjs-volume-tooltip,
html[data-ptw-theme] .vjs-time-tooltip {
  background-color: var(--ptw-coral, #009933);
  color: var(--ptw-on-coral, #111);
}

/* ============================================================
   StreamOS design.md restyle — logged-in app area
   (view / upload / edit / wallet / admin). Linked from
   root.html AFTER the child extra_head block, so this sheet
   beats page-inline <style> rules on specificity ties; the
   few inline style="" attributes still need !important.

   All rules are scoped to html[data-ptw-theme="light"], so
   the dark toggle restores the original dark-glass surfaces
   of the wallet / admin / trailer card untouched.
   ============================================================ */

/* --- App shell ------------------------------------------------ */
html[data-ptw-theme="light"] body {
  background: #fff;
  color: #0b0d10;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --- /view page (React viewer in #page-media) ------------------ */
html[data-ptw-theme="light"] #page-media .media-title-banner h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: #0b0d10;
}
html[data-ptw-theme="light"] #page-media .media-labels-area .media-label-state > * {
  background: #f4f5f6;
  color: #687078;
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 600;
}
html[data-ptw-theme="light"] #page-media .media-views {
  color: #687078;
  font-weight: 500;
}
html[data-ptw-theme="light"] #page-media .media-actions button,
html[data-ptw-theme="light"] #page-media .media-views-actions button {
  border-radius: 999px !important;
  transition: background 0.15s ease;
}
html[data-ptw-theme="light"] #page-media .media-actions button:hover,
html[data-ptw-theme="light"] #page-media .media-views-actions button:hover {
  background: #f4f5f6;
}
/* Comments */
html[data-ptw-theme="light"] .comments-form-inner .form .form-textarea-wrap {
  background: #f4f5f6;
  border: 1px solid #e6e8eb;
  border-radius: 16px;
  padding: 12px 16px;
}
html[data-ptw-theme="light"] .comments-form-inner .form .form-textarea-wrap:after {
  display: none;
}
html[data-ptw-theme="light"] .comments-form-inner .form .form-textarea,
html[data-ptw-theme="light"] .comments-form-inner .form .form-textarea__input {
  background: transparent;
  color: #0b0d10;
}
html[data-ptw-theme="light"] .comments-form-inner .form .form-buttons button {
  background: #111;
  border: 1px solid #111;
  color: #fff;
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 600;
}
html[data-ptw-theme="light"] .comments-form-inner .form .form-buttons button:hover {
  background: #000;
}
html[data-ptw-theme="light"] #page-media .comments-list-inner { border-color: #e6e8eb; }
html[data-ptw-theme="light"] #page-media .comment-author { color: #0b0d10; font-weight: 600; }
html[data-ptw-theme="light"] #page-media .comment-date { color: #687078; }
html[data-ptw-theme="light"] #page-media .comment-text { color: #0b0d10; }
/* Related / up-next rows */
html[data-ptw-theme="light"] #page-media .items-list-hor .item { transition: transform 0.18s ease; }
html[data-ptw-theme="light"] #page-media .items-list-hor .item:hover { transform: translateY(-2px); }
html[data-ptw-theme="light"] #page-media .items-list-hor .item-thumb,
html[data-ptw-theme="light"] #page-media .items-list-hor a.item-thumb {
  border-radius: 16px;
  overflow: hidden;
}
html[data-ptw-theme="light"] #page-media .items-list-hor .item-main {
  color: #0b0d10;
  font-weight: 700;
  letter-spacing: -0.01em;
}
html[data-ptw-theme="light"] #page-media .items-list-hor .item-author,
html[data-ptw-theme="light"] #page-media .items-list-hor .item-views { color: #687078; }
/* AI-disclosure banner (inline styles in cms/media.html) */
html[data-ptw-theme="light"] .user-action-form-wrap[style*="max-width:none"] .user-action-form-inner {
  background: #f4f5f6 !important;
  border: 1px solid #e6e8eb !important;
  border-radius: 16px !important;
  color: #0b0d10 !important;
}

/* --- /upload --------------------------------------------------- */
html[data-ptw-theme="light"] .media-uploader-top-wrap h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #0b0d10;
}
html[data-ptw-theme="light"] .media-drag-drop-inner {
  background: #f4f5f6;
  border-radius: 24px;
  color: #687078;
}
html[data-ptw-theme="light"] .media-drag-drop-inner i.material-icons { color: #687078; }
html[data-ptw-theme="light"] .media-drag-drop-content-inner span {
  color: #687078;
  font-weight: 500;
}
html[data-ptw-theme="light"] .browse-files-btn-wrap .qq-upload-button-selector {
  background-color: var(--ptw-coral, #d9ff43);
  color: #111;
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 14px;
}
html[data-ptw-theme="light"] .media-upload-item-thumb { border-radius: 16px; }
html[data-ptw-theme="light"] .media-upload-item-name { color: #0b0d10; font-weight: 600; }
html[data-ptw-theme="light"] .media-upload-item-progress-bar-container {
  background: #ddd;
  border-radius: 999px;
}
html[data-ptw-theme="light"] .media-upload-item-progress-bar {
  background: #111;
  border-radius: 999px;
}

/* --- Edit pages (metadata / trim / captions / chapters / publish / replace) --- */
/* Tab strip — all inline style="" in cms/media_nav.html */
html[data-ptw-theme="light"] .media-edit-nav {
  background-color: #f4f5f6 !important;
  padding: 6px !important;
  margin-bottom: 24px !important;
  border-radius: 999px !important;
}
html[data-ptw-theme="light"] .media-edit-nav ul {
  justify-content: flex-start !important;
  gap: 6px;
}
html[data-ptw-theme="light"] .media-edit-nav li { display: inline-block !important; }
html[data-ptw-theme="light"] .media-edit-nav a {
  display: inline-block !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #687078 !important;
  border-bottom: none !important;
  transition: background 0.16s ease, color 0.16s ease;
}
html[data-ptw-theme="light"] .media-edit-nav a:hover {
  background: #fff;
  color: #0b0d10;
}
html[data-ptw-theme="light"] .media-edit-nav a[style*="border-bottom"] {
  background: #111 !important;
  color: #fff !important;
}
html[data-ptw-theme="light"] .media-edit-nav a[style*="border-bottom"]:hover {
  background: #000 !important;
}
/* Form panel wrapper — inline style="" div in edit_media / edit_video /
   publish_media / edit_chapters / replace_media */
html[data-ptw-theme="light"] .user-action-form-wrap > div[style*="border-radius: 8px"] {
  background: #fff !important;
  border: 1px solid #e6e8eb !important;
  border-radius: 24px !important;
  box-shadow: none !important;
  padding: 24px !important;
}
/* Replace-page warning box (inline style="" with #fff3cd) */
html[data-ptw-theme="light"] .user-action-form-wrap div[style*="#fff3cd"] {
  background-color: #f4f5f6 !important;
  border: 1px solid #e6e8eb !important;
  border-radius: 16px !important;
  color: #0b0d10 !important;
}
/* Trailer management card (MediaCMS greens in edit_media.html <style>) */
html[data-ptw-theme="light"] .mcms-trailer-card {
  border: 1px solid #e6e8eb;
  box-shadow: none;
  border-radius: 24px;
}
html[data-ptw-theme="light"] .mcms-trailer-card h3 {
  color: #0b0d10;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
html[data-ptw-theme="light"] .mcms-trailer-card h3::before { background: #111; }
html[data-ptw-theme="light"] .mcms-trailer-status { border-radius: 999px; }
html[data-ptw-theme="light"] .mcms-trailer-status.none { background: #f4f5f6; color: #687078; }
html[data-ptw-theme="light"] .mcms-trailer-status.set { background: #f4f5f6; color: #0f7a4d; }
html[data-ptw-theme="light"] .mcms-trailer-preview { border-radius: 16px; }
html[data-ptw-theme="light"] .mcms-trailer-btn { border-radius: 999px; padding: 12px 18px; }
html[data-ptw-theme="light"] .mcms-trailer-btn.primary {
  background: #111;
  color: #fff;
  border: 1px solid #111;
}
html[data-ptw-theme="light"] .mcms-trailer-btn.secondary {
  background: #f4f5f6;
  color: #0b0d10;
}
html[data-ptw-theme="light"] .mcms-trailer-btn.danger {
  background: #fdecec;
  color: #c2372f;
}
html[data-ptw-theme="light"] .mcms-trailer-msg { border-radius: 12px; }
html[data-ptw-theme="light"] .mcms-trailer-msg.success {
  background: #f4f5f6;
  color: #0f7a4d;
  border: 1px solid #e6e8eb;
}
html[data-ptw-theme="light"] .mcms-trailer-msg.error {
  background: #fdecec;
  color: #c2372f;
  border: 1px solid #f3d1cf;
}
html[data-ptw-theme="light"] .mcms-trailer-msg.info {
  background: #f4f5f6;
  color: #0b0d10;
  border: 1px solid #e6e8eb;
}

/* --- Wallet (monetization/wallet.html dark gold glass) ---------- */
html[data-ptw-theme="light"] .mcms-wallet-wrap {
  color: #0b0d10;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
html[data-ptw-theme="light"] .mcms-wallet-h1 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #0b0d10;
}
html[data-ptw-theme="light"] .mcms-wallet-sub { color: #687078; }
html[data-ptw-theme="light"] .mcms-wallet-balance-card {
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: 24px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-ptw-theme="light"] .mcms-wallet-balance-card::before {
  background: radial-gradient(ellipse, rgba(217, 255, 67, 0.25) 0%, rgba(123, 231, 255, 0.12) 45%, transparent 70%);
}
html[data-ptw-theme="light"] .mcms-wallet-balance-label { color: #687078; }
html[data-ptw-theme="light"] .mcms-wallet-balance-num {
  color: #0b0d10;
  text-shadow: none;
}
html[data-ptw-theme="light"] .mcms-wallet-balance-unit { color: #687078; }
html[data-ptw-theme="light"] .mcms-wallet-stat {
  background: #f4f5f6;
  border: none;
  border-radius: 16px;
}
html[data-ptw-theme="light"] .mcms-wallet-stat-label { color: #687078; }
html[data-ptw-theme="light"] .mcms-wallet-stat-value { color: #0b0d10; }
html[data-ptw-theme="light"] .mcms-wallet-section-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0b0d10;
}
html[data-ptw-theme="light"] .mcms-wallet-pkg {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: 24px;
  box-shadow: none;
}
html[data-ptw-theme="light"] .mcms-wallet-pkg:hover {
  transform: translateY(-4px);
  box-shadow: none;
  border-color: #cfd2d5;
}
html[data-ptw-theme="light"] .mcms-wallet-pkg-popular {
  border: 2px solid #111 !important;
  box-shadow: none !important;
}
html[data-ptw-theme="light"] .mcms-wallet-pkg-badge {
  background: var(--ptw-coral, #d9ff43);
  color: var(--ptw-on-coral, #111);
  border-radius: 999px;
  box-shadow: none;
}
html[data-ptw-theme="light"] .mcms-wallet-pkg-name { color: #0b0d10; }
html[data-ptw-theme="light"] .mcms-wallet-pkg-credits { color: #0b0d10; }
html[data-ptw-theme="light"] .mcms-wallet-pkg-bonus { color: #0f7a4d; }
html[data-ptw-theme="light"] .mcms-wallet-pkg-price { color: #687078; }
html[data-ptw-theme="light"] .mcms-wallet-pkg-price strong { color: #0b0d10; }
html[data-ptw-theme="light"] .mcms-wallet-buy {
  background: #111;
  border: 1px solid #111;
  color: #fff;
  border-radius: 999px;
  margin-top: auto;
}
html[data-ptw-theme="light"] .mcms-wallet-buy:hover {
  background: #000;
  transform: none;
}
html[data-ptw-theme="light"] .mcms-wallet-gw {
  background: #fff;
  border: 1px solid #cfd2d5;
  color: #687078;
  border-radius: 999px;
}
html[data-ptw-theme="light"] .mcms-wallet-gw:hover {
  background: #f4f5f6;
  transform: none;
}
html[data-ptw-theme="light"] .mcms-wallet-gw.active {
  background: #111;
  border-color: #111;
  color: #fff;
}
html[data-ptw-theme="light"] .mcms-wallet-tx th,
html[data-ptw-theme="light"] .mcms-wallet-tx td {
  border-bottom: 1px solid #e6e8eb;
}
html[data-ptw-theme="light"] .mcms-wallet-tx th { color: #687078; }
html[data-ptw-theme="light"] .mcms-wallet-tx tr:hover td { background: #f4f5f6; }
html[data-ptw-theme="light"] .mcms-wallet-tx-pos { color: #0f7a4d; }
html[data-ptw-theme="light"] .mcms-wallet-tx-neg { color: #0b0d10; }
html[data-ptw-theme="light"] .mcms-wallet-tx-zero { color: #687078; }
html[data-ptw-theme="light"] .mcms-wallet-tx-type {
  background: #f4f5f6;
  color: #687078;
  border-radius: 999px;
}
html[data-ptw-theme="light"] .mcms-wallet-empty { color: #687078; }
html[data-ptw-theme="light"] .mcms-wallet-toast {
  background: #111;
  border: 1px solid #111;
  color: #fff;
  border-radius: 16px;
}
html[data-ptw-theme="light"] .mcms-wallet-toast.error { border-color: #ef4444; }
html[data-ptw-theme="light"] .mcms-wallet-toast.success { border-color: #10b981; }

/* --- Admin dashboard (monetization/admin_dashboard.html) -------- */
/* Variable remap: most .ad-* rules consume these, so the light
   conversion happens automatically for every var-driven surface. */
html[data-ptw-theme="light"] {
  --ad-bg: #fff;
  --ad-bg-soft: #f4f5f6;
  --ad-surface: #fff;
  --ad-surface-2: #f4f5f6;
  --ad-border: #e6e8eb;
  --ad-text: #0b0d10;
  --ad-muted: #687078;
  --ad-accent: #111;
  --ad-accent-2: #111;
  --ad-gold: #8a6d1a;
  --ad-paid: #0f7a4d;
  --ad-pending: #8a6d1a;
  --ad-failed: #c2372f;
  --ad-shadow: none;
  --ad-shadow-lg: none;
}
html[data-ptw-theme="light"] .ad-wrap {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Hero: hardcoded dark-green gradient + glow radials */
html[data-ptw-theme="light"] .ad-hero {
  background: radial-gradient(900px 320px at 88% -40%, rgba(217, 255, 67, 0.28), rgba(123, 231, 255, 0.14) 50%, transparent 75%), #fff;
  border-bottom: 1px solid #e6e8eb;
}
html[data-ptw-theme="light"] .ad-hero::before {
  background: radial-gradient(ellipse, rgba(217, 255, 67, 0.16) 0%, transparent 60%);
}
html[data-ptw-theme="light"] .ad-hero::after {
  background: radial-gradient(ellipse, rgba(123, 231, 255, 0.14) 0%, transparent 60%);
}
html[data-ptw-theme="light"] .ad-hero h1 {
  font-weight: 800;
  letter-spacing: -0.04em;
}
html[data-ptw-theme="light"] .ad-hero-logo {
  background: #111;
  box-shadow: none;
}
html[data-ptw-theme="light"] .ad-btn {
  background: #f4f5f6;
  border: 1px solid #e6e8eb;
  color: #0b0d10;
  border-radius: 999px;
}
html[data-ptw-theme="light"] .ad-btn:hover {
  background: #ececee;
  transform: none;
  border-color: #cfd2d5;
}
html[data-ptw-theme="light"] .ad-btn-primary {
  background: #111;
  border-color: #111;
  color: #fff;
  box-shadow: none;
}
html[data-ptw-theme="light"] .ad-btn-primary:hover {
  background: #000;
  filter: none;
}
/* Stat cards */
html[data-ptw-theme="light"] .ad-stat:hover {
  transform: translateY(-3px);
  border-color: #cfd2d5;
}
html[data-ptw-theme="light"] .ad-stat-icon {
  background: rgba(11, 11, 11, 0.06);
  color: #111;
}
html[data-ptw-theme="light"] .ad-stat-icon.gold {
  background: rgba(138, 109, 26, 0.12);
}
html[data-ptw-theme="light"] .ad-stat-icon.blue {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}
html[data-ptw-theme="light"] .ad-stat-icon.purple {
  background: rgba(126, 34, 206, 0.1);
  color: #7e22ce;
}
html[data-ptw-theme="light"] .ad-stat-icon.red {
  background: rgba(194, 55, 47, 0.1);
  color: #c2372f;
}
html[data-ptw-theme="light"] .ad-stat-value.gold { text-shadow: none; }
/* Section headers */
html[data-ptw-theme="light"] .ad-section-title .ad-dot { box-shadow: none; }
/* Revenue mini-cards (hardcoded rgba fills) */
html[data-ptw-theme="light"] .ad-rev-card {
  background: #f4f5f6;
  border-radius: 16px;
}
html[data-ptw-theme="light"] .ad-rev-change.neutral { background: #ececee; }
/* Bar chart */
html[data-ptw-theme="light"] .ad-bar { box-shadow: none; }
html[data-ptw-theme="light"] .ad-bar.zero { background: #e6e8eb; }
/* Tables */
html[data-ptw-theme="light"] .ad-table th { background: #f4f5f6; }
html[data-ptw-theme="light"] .ad-table tr:hover td { background: #f4f5f6; }
/* Badges */
html[data-ptw-theme="light"] .ad-badge { border-radius: 999px; }
html[data-ptw-theme="light"] .ad-badge-cancelled,
html[data-ptw-theme="light"] .ad-badge-expired { color: #687078; }
html[data-ptw-theme="light"] .ad-badge-refunded { color: #7e22ce; }
html[data-ptw-theme="light"] .ad-badge-public {
  background: rgba(11, 11, 11, 0.08);
}
/* Thumbnails + system rows */
html[data-ptw-theme="light"] .ad-thumb {
  background: #f4f5f6;
  border-radius: 8px;
}
html[data-ptw-theme="light"] .ad-sys-row {
  background: #f4f5f6;
}
/* Stat values: ink, no glow (StreamOS palette, no gold) */
html[data-ptw-theme="light"] .ad-stat-value {
  color: #0b0d10;
  text-shadow: none;
}

/* ============================================================
   Round 3 — edit-page layout, form controls, admin polish
   ============================================================ */

/* --- Edit pages: neutralise the auth-page flex rule ------------ */
/* ptw-glass.css "Auth pages" targets html[data-ptw-theme]
   .user-action-form-wrap (ANY page, ANY theme): flex row,
   vertically centred, min-height 100vh. On edit_media.html the
   wrap holds (tab strip | form panel | trailer card), so the
   three become one flex row centred against the ~2280px form —
   the tab strip lands mid-page, below the fold. Restore normal
   block flow on the pages that use the wrap inside the app.
   :has() keeps this surgical: auth pages (login/signup) keep
   their centred layout. */
html[data-ptw-theme="light"] .user-action-form-wrap:has(.media-edit-nav) {
  display: block;
  min-height: 0;
  margin: 0;
}
/* AI-disclosure banner wrap on /view (inline max-width:none in cms/media.html) */
html[data-ptw-theme="light"] .user-action-form-wrap[style*="max-width:none"] {
  display: block;
  min-height: 0;
  margin: 0;
}
/* Tab strip: align with the 900px form panel below it */
html[data-ptw-theme="light"] .media-edit-nav {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
/* Crispy form controls: 999px pills, line borders, ink text */
html[data-ptw-theme="light"] .user-action-form-wrap .textinput,
html[data-ptw-theme="light"] .user-action-form-wrap .select {
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: 999px;
  color: #0b0d10;
  font-family: inherit;
  padding: 10px 16px;
  box-shadow: none;
}
html[data-ptw-theme="light"] .user-action-form-wrap .textinput:focus,
html[data-ptw-theme="light"] .user-action-form-wrap .select:focus {
  border-color: #111;
  outline: none;
  box-shadow: none;
}
html[data-ptw-theme="light"] .user-action-form-wrap .textarea {
  background: #f4f5f6;
  border: 1px solid #e6e8eb;
  border-radius: 16px;
  color: #0b0d10;
  font-family: inherit;
  padding: 12px 16px;
  box-shadow: none;
  resize: vertical;
}
html[data-ptw-theme="light"] .user-action-form-wrap .textarea:focus {
  border-color: #111;
  outline: none;
  box-shadow: none;
}

/* --- Admin dashboard: ink numbers + pill section tabs ---------- */
/* Revenue card values and gold table cells: ink, no gold (design.md) */
html[data-ptw-theme="light"] .ad-rev-card-value,
html[data-ptw-theme="light"] .ad-rev-card-value.gold,
html[data-ptw-theme="light"] .ad-rev-card-value.accent {
  color: #0b0d10;
}
html[data-ptw-theme="light"] .ad-table .gold {
  color: #0b0d10;
}
/* Section tabs: underline style → 999px pill strip (like .media-edit-nav) */
html[data-ptw-theme="light"] .ad-tabs {
  display: inline-flex;
  margin: 0 0 24px;
  padding: 6px;
  background: #f4f5f6;
  border-bottom: none;
  border-radius: 999px;
}
html[data-ptw-theme="light"] .ad-tab {
  padding: 9px 16px;
  border-bottom: none;
  border-radius: 999px;
  transition: background 0.16s ease, color 0.16s ease;
}
html[data-ptw-theme="light"] .ad-tab:hover {
  color: #0b0d10;
  background: #fff;
}
html[data-ptw-theme="light"] .ad-tab.active {
  background: #111;
  color: #fff;
}

/* Round 4: full crispy class set + !important to beat the body-inline
   .controls { border-radius: 4px } rule (18 copies per page, wins ties by order);
   plus the submit pill (btn btn-primary is Bootstrap green, radius 1px) */
html[data-ptw-theme="light"] .user-action-form-wrap .textinput,
html[data-ptw-theme="light"] .user-action-form-wrap .datetimeinput,
html[data-ptw-theme="light"] .user-action-form-wrap .numberinput,
html[data-ptw-theme="light"] .user-action-form-wrap .passwordinput,
html[data-ptw-theme="light"] .user-action-form-wrap .select,
html[data-ptw-theme="light"] .user-action-form-wrap .textarea {
  background: #fff !important;
  border: 1px solid #e6e8eb !important;
  border-radius: 999px !important;
  color: #0b0d10 !important;
  font-family: inherit !important;
  padding: 10px 16px !important;
  box-shadow: none !important;
}
html[data-ptw-theme="light"] .user-action-form-wrap .textarea {
  border-radius: 16px !important;
  padding: 12px 16px !important;
}
html[data-ptw-theme="light"] .user-action-form-wrap .textinput:focus,
html[data-ptw-theme="light"] .user-action-form-wrap .datetimeinput:focus,
html[data-ptw-theme="light"] .user-action-form-wrap .numberinput:focus,
html[data-ptw-theme="light"] .user-action-form-wrap .passwordinput:focus,
html[data-ptw-theme="light"] .user-action-form-wrap .select:focus,
html[data-ptw-theme="light"] .user-action-form-wrap .textarea:focus {
  border-color: #111 !important;
  outline: none;
  box-shadow: none !important;
}
html[data-ptw-theme="light"] .user-action-form-wrap input[type="submit"],
html[data-ptw-theme="light"] .user-action-form-wrap button[type="submit"] {
  background: #111 !important;
  border: 1px solid #111 !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 12px 28px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  cursor: pointer;
}
html[data-ptw-theme="light"] .user-action-form-wrap input[type="submit"]:hover,
html[data-ptw-theme="light"] .user-action-form-wrap button[type="submit"]:hover {
  background: #000 !important;
  border-color: #000 !important;
}

/* Round 5: native file inputs (poster .clearablefileinput + trailer
   #mcms-trailer-file, the latter lives outside any <form>) */
html[data-ptw-theme="light"] .user-action-form-wrap input[type="file"] {
  width: 100%;
  background: #fff !important;
  border: 1px solid #e6e8eb !important;
  border-radius: 999px !important;
  padding: 6px 10px 6px 6px !important;
  color: #687078 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
html[data-ptw-theme="light"] .user-action-form-wrap input[type="file"]::file-selector-button {
  background: #111 !important;
  border: 1px solid #111 !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 8px 20px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer;
  margin-right: 12px;
}
html[data-ptw-theme="light"] .user-action-form-wrap input[type="file"]::file-selector-button:hover {
  background: #000 !important;
  border-color: #000 !important;
}
html[data-ptw-theme="light"] .user-action-form-wrap input[type="file"]::filename {
  color: #687078;
}

/* ------------------------------------------------------------
   Round 6: topbar chrome matched to the StreamOS marketing landing
   header (sites/fortemont-stream/paytowatch/home.html): flat white
   translucent bar, plain 16px blur, hairline #e6e8eb rule, no drop
   shadow, 900-weight wordmark without the squircle mark, plain 14px
   links at 25px gaps. !important mirrors ptw-glass.css, which pins
   the same properties with !important of its own.
   ------------------------------------------------------------ */
html[data-ptw-theme="light"] { --ptw-header: 76px; }
html[data-ptw-theme="light"] .ptw-topbar {
  background: rgba(255, 255, 255, 0.9) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid #e6e8eb !important;
  box-shadow: none !important;
}
html[data-ptw-theme="light"] .ptw-topbar-inner { gap: 30px; }
html[data-ptw-theme="light"] .ptw-topbar .ptw-brand-mark { display: none; }
html[data-ptw-theme="light"] .ptw-topbar .ptw-brand {
  gap: 0;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -1px;
  color: #0b0d10;
}
html[data-ptw-theme="light"] .ptw-topbar .ptw-brand > span:last-child {
  font-weight: 900;
  letter-spacing: -1px;
}
html[data-ptw-theme="light"] .ptw-topbar .ptw-main-nav { margin-left: 0; gap: 25px; }
html[data-ptw-theme="light"] .ptw-topbar .ptw-main-nav a {
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  color: #0b0d10;
  background: none;
  border: 0;
  box-shadow: none;
}
html[data-ptw-theme="light"] .ptw-topbar .ptw-main-nav a:hover {
  color: #0b0d10;
  background: none;
  border: 0;
  box-shadow: none;
}
html[data-ptw-theme="light"] .ptw-topbar .ptw-top-actions { gap: 10px; }
html[data-ptw-theme="light"] .ptw-topbar .ptw-sb-toggle {
  background: none;
  border: 0;
  box-shadow: none;
}
/* Bare controls on the flat bar: the glass chips come off; the upload
   button keeps the landing's dark .btn pill recipe. */
html[data-ptw-theme="light"] .ptw-topbar .ptw-theme-toggle {
  background: none;
  border: 0;
  box-shadow: none;
  color: #0b0d10;
}
html[data-ptw-theme="light"] .ptw-topbar .ptw-theme-toggle:hover {
  background: none;
  color: #0b0d10;
  transform: none;
  box-shadow: none;
}
html[data-ptw-theme="light"] .ptw-topbar .ptw-upload-btn {
  width: auto;
  min-height: 0;
  padding: 10px 16px;
  background: #111 !important;
  border: 1px solid #111;
  border-radius: 999px;
  color: #fff;
  font-size: 20px;
  box-shadow: none;
}
html[data-ptw-theme="light"] .ptw-topbar .ptw-upload-btn:hover {
  background: #000 !important;
  border-color: #000;
  color: #fff;
  transform: none;
  box-shadow: none;
}

/* ------------------------------------------------------------
   Round 7: grid feeds (/foryou/ etc.) aligned to the landing page
   vocabulary: ink eyebrow kicker, bold tight-tracked section h2s,
   soft #f4f5f6 card tiles with generous radius, flat hover (no
   lift), the landing's uniform 14px grid rhythm.
   ------------------------------------------------------------ */
html[data-ptw-theme="light"] .ptw-section-title .ptw-kicker {
  color: #0b0d10;
  font-size: 13px;
}
html[data-ptw-theme="light"] .ptw-section-title h2 {
  font-weight: 700;
  letter-spacing: -0.055em;
}
html[data-ptw-theme="light"] .ptw-media-grid { gap: 14px; }
html[data-ptw-theme="light"] .ptw-yt-card {
  background: #f4f5f6;
  border-radius: 20px;
  padding: 10px 10px 12px;
}
html[data-ptw-theme="light"] .ptw-yt-card:hover { transform: none; }
html[data-ptw-theme="light"] .ptw-yt-thumb { border-radius: 12px; }
html[data-ptw-theme="light"] .ptw-yt-meta { padding: 10px 6px 0; }

/* ------------------------------------------------------------
   Round 8: owner actions on /view (media.css renders them as 40px
   circles in MediaCMS green + red) rebuilt as landing .btn pills:
   dark pill for Edit, white outline pill for Delete (hover inverts
   dark). The buttons come from the media.js bundle with bare
   material-icon ligatures, so the labels are generated content
   with an explicit UI font — the <i> keeps the icon glyph.
   ------------------------------------------------------------ */
html[data-ptw-theme="light"] .media-author-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
html[data-ptw-theme="light"] .media-author-actions .edit-media-icon,
html[data-ptw-theme="light"] .media-author-actions .remove-media-icon {
  width: auto;
  height: auto;
  padding: 8px 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: none;
  transform: none;
  text-decoration: none;
  cursor: pointer;
}
html[data-ptw-theme="light"] .media-author-actions .edit-media-icon .material-icons,
html[data-ptw-theme="light"] .media-author-actions .remove-media-icon .material-icons {
  font-size: 18px;
  line-height: 1;
}
html[data-ptw-theme="light"] .media-author-actions .edit-media-icon::after,
html[data-ptw-theme="light"] .media-author-actions .remove-media-icon::after {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
html[data-ptw-theme="light"] .media-author-actions .edit-media-icon::after { content: "Edit"; }
html[data-ptw-theme="light"] .media-author-actions .remove-media-icon::after { content: "Delete"; }
html[data-ptw-theme="light"] .media-author-actions .edit-media-icon {
  background-color: #111;
  border: 1px solid #111;
  color: #fff;
}
html[data-ptw-theme="light"] .media-author-actions .edit-media-icon:hover {
  background-color: #000;
  border-color: #000;
  box-shadow: none;
  transform: none;
}
html[data-ptw-theme="light"] .media-author-actions .remove-media-icon {
  background-color: #fff;
  border: 1px solid #111;
  color: #111;
}
html[data-ptw-theme="light"] .media-author-actions .remove-media-icon:hover {
  background-color: #111;
  border-color: #111;
  color: #fff;
  box-shadow: none;
  transform: none;
}

/* ------------------------------------------------------------
   Round 9: comment form polish on /view. The textarea inside the
   soft wrap must not paint its own translucent box, the wrap needs
   a visible focus state, and the disabled SUBMIT pill (media.css
   opacity .2 ghost) becomes a muted soft-gray pill that flips to
   the dark pill once enabled.
   ------------------------------------------------------------ */
html[data-ptw-theme="light"] .comments-form-inner .form .form-textarea,
html[data-ptw-theme="light"] .comments-form-inner .form .form-textarea__input {
  /* !important: ptw-glass.css pins background/border on .comments-form
     textarea with !important, and its focus system paints a 2px ring on
     the textarea itself — the wrap's #111 border is the focus indicator */
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
html[data-ptw-theme="light"] .comments-form-inner .form textarea::placeholder {
  color: #687078;
  font-weight: 400;
}
html[data-ptw-theme="light"] .comments-form-inner .form .form-textarea-wrap:focus-within,
html[data-ptw-theme="light"] .comments-form-inner .form .form-textarea-wrap.focused {
  border-color: #111;
}
html[data-ptw-theme="light"] .comments-form-inner .form .form-buttons button.disabled {
  background: #f4f5f6;
  border-color: #f4f5f6;
  color: #687078;
  opacity: 1;
  cursor: default;
}

/* ------------------------------------------------------------
   Round 10: viewer-info chrome on /view. MediaCMS paints the
   like/dislike/share/save/download circles in stock gray #909090
   on transparent circles — rebuilt as the landing's flat soft-gray
   chips with ink glyphs, eyebrow-style uppercase labels, ink
   counters; author banner re-tokened; comments heading matches the
   section-title style.
   ------------------------------------------------------------ */
html[data-ptw-theme="light"] .viewer-info .circle-icon-button {
  /* !important: media.css pins background transparent on
     .media-title-banner .media-actions ... .circle-icon-button at (0,4,0) */
  background: #f4f5f6 !important;
  color: #0b0d10;
}
html[data-ptw-theme="light"] .viewer-info .circle-icon-button .material-icons {
  color: #0b0d10;
}
html[data-ptw-theme="light"] #page-media .media-actions button,
html[data-ptw-theme="light"] #page-media .media-views-actions button {
  background: transparent;
}
html[data-ptw-theme="light"] #page-media .media-actions button:hover,
html[data-ptw-theme="light"] #page-media .media-views-actions button:hover {
  background: transparent;
}
html[data-ptw-theme="light"] #page-media .media-actions button:hover .circle-icon-button,
html[data-ptw-theme="light"] #page-media .media-views-actions button:hover .circle-icon-button {
  background: #e6e8eb !important;
}
html[data-ptw-theme="light"] .viewer-info .media-actions button .likes-counter,
html[data-ptw-theme="light"] .viewer-info .media-actions button .dislikes-counter {
  color: #0b0d10;
  font-weight: 600;
}
html[data-ptw-theme="light"] .viewer-info .media-actions .share button > span:last-child,
html[data-ptw-theme="light"] .viewer-info .media-actions .save button > span:last-child,
html[data-ptw-theme="light"] .viewer-info .video-downloads button > span:last-child {
  color: #0b0d10;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html[data-ptw-theme="light"] .viewer-info .author-banner-name {
  color: #0b0d10;
  font-weight: 600;
}
html[data-ptw-theme="light"] .viewer-info .author-banner-name span {
  color: inherit;
}
html[data-ptw-theme="light"] .viewer-info .author-banner-date {
  color: #687078;
  font-size: 13px;
  font-weight: 400;
}
html[data-ptw-theme="light"] .viewer-info .comments-list-inner h2 {
  color: #0b0d10;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.04em;
}
/* media.css paints a static 2px #909090 bar under the like/dislike
   pair via :before — not part of the design language */
html[data-ptw-theme="light"] .viewer-info .media-actions .like:before,
html[data-ptw-theme="light"] .viewer-info .media-actions .dislike:before {
  display: none;
}

/* ------------------------------------------------------------
   Round 11: player chrome — StreamOS tokens over the video canvas
   (kept on the bare html[data-ptw-theme] prefix like the rest of
   the player section: the chrome sits on video in both themes).
   !important mirrors the video-js bundle, which writes control-bar
   and big-play styles inline at runtime.
   ------------------------------------------------------------ */
html[data-ptw-theme] .video-js {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  /* clip the poster/video to the rounded surface */
  overflow: hidden;
}
html[data-ptw-theme] .video-js.vjs-fullscreen,
html[data-ptw-theme] .video-js:fullscreen {
  border-radius: 0;
}
html[data-ptw-theme] .vjs-control-bar {
  /* the video-js bundle paints its own slate control bar inline */
  background-color: rgba(11, 13, 16, 0.78) !important;
}
html[data-ptw-theme] .vjs-big-play-button {
  border: 0 !important;
  border-radius: 999px !important;
  transition: background-color 0.18s ease;
}
html[data-ptw-theme] .vjs-progress-holder {
  border-radius: 999px;
}
html[data-ptw-theme] .vjs-play-progress {
  border-radius: 999px;
}
html[data-ptw-theme] .vjs-time-control {
  font-size: 12px !important;
  letter-spacing: 0.02em;
}
html[data-ptw-theme] .vjs-menu-content {
  background-color: rgba(11, 13, 16, 0.95) !important;
  border-radius: 12px;
}
html[data-ptw-theme] .vjs-menu li.vjs-selected,
html[data-ptw-theme] .vjs-menu li:hover {
  color: var(--ptw-coral, #d9ff43) !important;
}

/* ------------------------------------------------------------
   Round 12: channel-page hero → the StreamOS light language.
   The hero band was the one block still dark (near-black bg, white
   text, cyan V4 kicker, acid + glass buttons) while the page below
   it is already white/ink. Buttons get the landing's dark/white
   pill pairing; !important defends the owner-only actions, which
   cannot be probe-verified (they render only for the owner).
   ------------------------------------------------------------ */
html[data-ptw-theme="light"] .ptw-show-hero {
  background: transparent;
  color: #0b0d10;
}
/* The channel banner (.ptw-show-hero-bg) is a full-bleed image layer;
   a white scrim keeps the banner present but the hero reading white,
   with ink text staying legible over any banner artwork. */
html[data-ptw-theme="light"] .ptw-show-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, #fff 32%, rgba(255, 255, 255, 0.86) 55%, rgba(255, 255, 255, 0.55) 100%);
}
html[data-ptw-theme="light"] .ptw-show-hero-bg {
  -webkit-filter: saturate(0.92);
  filter: saturate(0.92);
}
html[data-ptw-theme="light"] .ptw-show-content {
  color: #0b0d10;
}
html[data-ptw-theme="light"] .ptw-show-content .ptw-kicker {
  color: #0b0d10;
  font-size: 13px;
}
html[data-ptw-theme="light"] .ptw-show-content h1 {
  color: #0b0d10;
  font-weight: 700;
  letter-spacing: -0.06em;
}
html[data-ptw-theme="light"] .ptw-show-content .ptw-show-copy p {
  color: #687078;
  font-size: 16px;
}
html[data-ptw-theme="light"] .ptw-show-avatar {
  border: 1px solid #e6e8eb;
  box-shadow: none;
}
html[data-ptw-theme="light"] .ptw-show-content .ptw-primary-btn {
  background: #111 !important;
  border: 1px solid #111 !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: none;
}
html[data-ptw-theme="light"] .ptw-show-content .ptw-primary-btn:hover {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
  transform: none;
}
html[data-ptw-theme="light"] .ptw-show-content .ptw-secondary-btn {
  background: #fff !important;
  border: 1px solid #111 !important;
  color: #111 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-ptw-theme="light"] .ptw-show-content .ptw-secondary-btn:hover {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
  transform: none;
}

/* ------------------------------------------------------------
   Round 13: dark mode — the StreamOS system inverted. The landing
   defines no dark variant, so dark keeps the same structure with
   the palette flipped: ink canvas, near-white #f5f5f7 text,
   #16181c soft surfaces, hairline rgba(255,255,255,.10) rules and
   acid var(--ptw-coral, #d9ff43) as the primary accent (it replaces #111, which
   vanishes on dark). !important mirrors the same light rules.
   ------------------------------------------------------------ */
html[data-ptw-theme="dark"] { --ptw-header: 76px; }

/* topbar: landing chrome in dark */
html[data-ptw-theme="dark"] .ptw-topbar {
  background: rgba(11, 13, 16, 0.9) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: none !important;
}
html[data-ptw-theme="dark"] .ptw-topbar-inner { gap: 30px; }
html[data-ptw-theme="dark"] .ptw-topbar .ptw-brand-mark { display: none; }
html[data-ptw-theme="dark"] .ptw-topbar .ptw-brand {
  gap: 0;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -1px;
  color: #f5f5f7;
}
html[data-ptw-theme="dark"] .ptw-topbar .ptw-brand > span:last-child {
  font-weight: 900;
  letter-spacing: -1px;
}
html[data-ptw-theme="dark"] .ptw-topbar .ptw-main-nav { margin-left: 0; gap: 25px; }
html[data-ptw-theme="dark"] .ptw-topbar .ptw-main-nav a {
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  color: #f5f5f7;
  background: none;
  border: 0;
  box-shadow: none;
}
html[data-ptw-theme="dark"] .ptw-topbar .ptw-main-nav a:hover {
  color: #f5f5f7;
  background: none;
  border: 0;
  box-shadow: none;
}
html[data-ptw-theme="dark"] .ptw-topbar .ptw-top-actions { gap: 10px; }
html[data-ptw-theme="dark"] .ptw-topbar .ptw-sb-toggle {
  background: none;
  border: 0;
  box-shadow: none;
  color: #f5f5f7;
}
html[data-ptw-theme="dark"] .ptw-topbar .ptw-theme-toggle {
  background: none;
  border: 0;
  box-shadow: none;
  color: #f5f5f7;
}
html[data-ptw-theme="dark"] .ptw-topbar .ptw-theme-toggle:hover {
  background: none;
  color: #f5f5f7;
  transform: none;
  box-shadow: none;
}
html[data-ptw-theme="dark"] .ptw-topbar .ptw-upload-btn {
  width: auto;
  min-height: 0;
  padding: 10px 16px;
  background: var(--ptw-coral, #d9ff43) !important;
  border: 1px solid var(--ptw-coral, #d9ff43);
  border-radius: 999px;
  color: #111;
  font-size: 20px;
  box-shadow: none;
}
html[data-ptw-theme="dark"] .ptw-topbar .ptw-upload-btn:hover {
  background: #c9ef3d !important;
  border-color: #c9ef3d;
  color: #111;
  transform: none;
  box-shadow: none;
}

/* crispy forms in dark */
html[data-ptw-theme="dark"] .user-action-form-wrap .textinput,
html[data-ptw-theme="dark"] .user-action-form-wrap .datetimeinput,
html[data-ptw-theme="dark"] .user-action-form-wrap .numberinput,
html[data-ptw-theme="dark"] .user-action-form-wrap .passwordinput,
html[data-ptw-theme="dark"] .user-action-form-wrap .select,
html[data-ptw-theme="dark"] .user-action-form-wrap .textarea {
  background: #16181c !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  color: #f5f5f7 !important;
  font-family: inherit !important;
  padding: 10px 16px !important;
  box-shadow: none !important;
}
html[data-ptw-theme="dark"] .user-action-form-wrap .textarea {
  border-radius: 16px !important;
  padding: 12px 16px !important;
}
html[data-ptw-theme="dark"] .user-action-form-wrap .textinput:focus,
html[data-ptw-theme="dark"] .user-action-form-wrap .datetimeinput:focus,
html[data-ptw-theme="dark"] .user-action-form-wrap .numberinput:focus,
html[data-ptw-theme="dark"] .user-action-form-wrap .passwordinput:focus,
html[data-ptw-theme="dark"] .user-action-form-wrap .select:focus,
html[data-ptw-theme="dark"] .user-action-form-wrap .textarea:focus {
  border-color: var(--ptw-coral, #d9ff43) !important;
  outline: none;
  box-shadow: none !important;
}
html[data-ptw-theme="dark"] .user-action-form-wrap input[type="submit"],
html[data-ptw-theme="dark"] .user-action-form-wrap button[type="submit"] {
  background: var(--ptw-coral, #d9ff43) !important;
  border: 1px solid var(--ptw-coral, #d9ff43) !important;
  color: var(--ptw-on-coral, #111) !important;
  border-radius: 999px !important;
  padding: 12px 28px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  cursor: pointer;
}
html[data-ptw-theme="dark"] .user-action-form-wrap input[type="submit"]:hover,
html[data-ptw-theme="dark"] .user-action-form-wrap button[type="submit"]:hover {
  background: #c9ef3d !important;
  border-color: #c9ef3d !important;
}
html[data-ptw-theme="dark"] .user-action-form-wrap input[type="file"] {
  width: 100%;
  background: #16181c !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  padding: 6px 10px 6px 6px !important;
  color: #8b9198 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
html[data-ptw-theme="dark"] .user-action-form-wrap input[type="file"]::file-selector-button {
  background: var(--ptw-coral, #d9ff43) !important;
  border: 1px solid var(--ptw-coral, #d9ff43) !important;
  color: var(--ptw-on-coral, #111) !important;
  border-radius: 999px !important;
  padding: 8px 20px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer;
  margin-right: 12px;
}
html[data-ptw-theme="dark"] .user-action-form-wrap input[type="file"]::file-selector-button:hover {
  background: #c9ef3d !important;
  border-color: #c9ef3d !important;
}
html[data-ptw-theme="dark"] .user-action-form-wrap input[type="file"]::filename {
  color: #8b9198;
}

/* cards + section titles in dark */
html[data-ptw-theme="dark"] .ptw-section-title .ptw-kicker {
  color: #f5f5f7;
  font-size: 13px;
}
html[data-ptw-theme="dark"] .ptw-section-title h2 {
  font-weight: 700;
  letter-spacing: -0.055em;
  color: #f5f5f7;
}
html[data-ptw-theme="dark"] .ptw-media-grid { gap: 14px; }
html[data-ptw-theme="dark"] .ptw-yt-card {
  background: #16181c;
  border-radius: 20px;
  padding: 10px 10px 12px;
}
html[data-ptw-theme="dark"] .ptw-yt-card:hover { transform: none; }
html[data-ptw-theme="dark"] .ptw-yt-thumb { border-radius: 12px; }
html[data-ptw-theme="dark"] .ptw-yt-meta { padding: 10px 6px 0; }
html[data-ptw-theme="dark"] .ptw-yt-title a { color: #f5f5f7; }
html[data-ptw-theme="dark"] .ptw-yt-channel a,
html[data-ptw-theme="dark"] .ptw-yt-stats { color: #8b9198; }

/* comment form in dark */
html[data-ptw-theme="dark"] .comments-form-inner .form .form-textarea-wrap {
  background: #16181c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 12px 16px;
}
html[data-ptw-theme="dark"] .comments-form-inner .form .form-textarea-wrap:after { display: none; }
html[data-ptw-theme="dark"] .comments-form-inner .form .form-textarea,
html[data-ptw-theme="dark"] .comments-form-inner .form .form-textarea__input {
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  color: #f5f5f7 !important;
}
html[data-ptw-theme="dark"] .comments-form-inner .form textarea::placeholder {
  color: #8b9198;
  font-weight: 400;
}
html[data-ptw-theme="dark"] .comments-form-inner .form .form-textarea-wrap:focus-within,
html[data-ptw-theme="dark"] .comments-form-inner .form .form-textarea-wrap.focused {
  border-color: var(--ptw-coral, #d9ff43);
}
html[data-ptw-theme="dark"] .comments-form-inner .form .form-buttons button {
  background: var(--ptw-coral, #d9ff43) !important;
  border: 1px solid var(--ptw-coral, #d9ff43) !important;
  color: var(--ptw-on-coral, #111) !important;
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 600;
}
html[data-ptw-theme="dark"] .comments-form-inner .form .form-buttons button:hover {
  background: #c9ef3d !important;
  border-color: #c9ef3d !important;
}
html[data-ptw-theme="dark"] .comments-form-inner .form .form-buttons button.disabled {
  background: #16181c !important;
  border-color: #16181c !important;
  color: #8b9198 !important;
  opacity: 1;
  cursor: default;
}

/* /view viewer-info chrome in dark */
html[data-ptw-theme="dark"] .viewer-info .circle-icon-button {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f5f5f7;
}
html[data-ptw-theme="dark"] .viewer-info .circle-icon-button .material-icons {
  color: #f5f5f7;
}
html[data-ptw-theme="dark"] #page-media .media-actions button,
html[data-ptw-theme="dark"] #page-media .media-views-actions button {
  background: transparent;
}
html[data-ptw-theme="dark"] #page-media .media-actions button:hover .circle-icon-button,
html[data-ptw-theme="dark"] #page-media .media-views-actions button:hover .circle-icon-button {
  background: rgba(255, 255, 255, 0.16) !important;
}
html[data-ptw-theme="dark"] .viewer-info .media-actions button .likes-counter,
html[data-ptw-theme="dark"] .viewer-info .media-actions button .dislikes-counter {
  color: #f5f5f7;
  font-weight: 600;
}
html[data-ptw-theme="dark"] .viewer-info .media-actions .share button > span:last-child,
html[data-ptw-theme="dark"] .viewer-info .media-actions .save button > span:last-child,
html[data-ptw-theme="dark"] .viewer-info .video-downloads button > span:last-child {
  color: #f5f5f7;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html[data-ptw-theme="dark"] .viewer-info .author-banner-name {
  color: #f5f5f7;
  font-weight: 600;
}
html[data-ptw-theme="dark"] .viewer-info .author-banner-date {
  color: #8b9198;
  font-size: 13px;
  font-weight: 400;
}
html[data-ptw-theme="dark"] .viewer-info .comments-list-inner h2 {
  color: #f5f5f7;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.04em;
}
html[data-ptw-theme="dark"] .viewer-info .media-actions .like:before,
html[data-ptw-theme="dark"] .viewer-info .media-actions .dislike:before {
  display: none;
}
html[data-ptw-theme="dark"] .media-author-actions .edit-media-icon,
html[data-ptw-theme="dark"] .media-author-actions .remove-media-icon {
  width: auto;
  height: auto;
  padding: 8px 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: none;
  transform: none;
  text-decoration: none;
  cursor: pointer;
}
html[data-ptw-theme="dark"] .media-author-actions .edit-media-icon .material-icons,
html[data-ptw-theme="dark"] .media-author-actions .remove-media-icon .material-icons {
  font-size: 18px;
  line-height: 1;
}
html[data-ptw-theme="dark"] .media-author-actions .edit-media-icon::after,
html[data-ptw-theme="dark"] .media-author-actions .remove-media-icon::after {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
html[data-ptw-theme="dark"] .media-author-actions .edit-media-icon::after { content: "Edit"; }
html[data-ptw-theme="dark"] .media-author-actions .remove-media-icon::after { content: "Delete"; }
html[data-ptw-theme="dark"] .media-author-actions .edit-media-icon {
  background-color: var(--ptw-coral, #d9ff43) !important;
  border: 1px solid var(--ptw-coral, #d9ff43);
  color: var(--ptw-on-coral, #111);
}
html[data-ptw-theme="dark"] .media-author-actions .edit-media-icon:hover {
  background-color: #c9ef3d !important;
  border-color: #c9ef3d;
  box-shadow: none;
  transform: none;
}
html[data-ptw-theme="dark"] .media-author-actions .remove-media-icon {
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #f5f5f7;
}
html[data-ptw-theme="dark"] .media-author-actions .remove-media-icon:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: #f5f5f7;
  color: #f5f5f7;
  box-shadow: none;
  transform: none;
}

/* channel hero accents in dark */
html[data-ptw-theme="dark"] .ptw-show-content .ptw-kicker {
  color: #f5f5f7;
  font-size: 13px;
}
html[data-ptw-theme="dark"] .ptw-show-content h1 {
  color: #f5f5f7;
  font-weight: 700;
  letter-spacing: -0.06em;
}
html[data-ptw-theme="dark"] .ptw-show-content .ptw-show-copy p {
  color: #8b9198;
  font-size: 16px;
}
html[data-ptw-theme="dark"] .ptw-show-content .ptw-primary-btn {
  background: var(--ptw-coral, #d9ff43) !important;
  border: 1px solid var(--ptw-coral, #d9ff43) !important;
  color: var(--ptw-on-coral, #111) !important;
  box-shadow: none;
}
html[data-ptw-theme="dark"] .ptw-show-content .ptw-primary-btn:hover {
  background: #c9ef3d !important;
  border-color: #c9ef3d !important;
  color: #111 !important;
  transform: none;
}
html[data-ptw-theme="dark"] .ptw-show-content .ptw-secondary-btn {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #f5f5f7 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-ptw-theme="dark"] .ptw-show-content .ptw-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #f5f5f7 !important;
  color: #f5f5f7 !important;
  transform: none;
}

/* flash messages in dark (Bootstrap .alert is un-themed otherwise) */
html[data-ptw-theme="dark"] .alert {
  background: #16181c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f5f5f7;
  border-radius: 12px;
}
html[data-ptw-theme="dark"] .alert.alert-success {
  border-color: rgba(217, 255, 67, 0.35);
}
html[data-ptw-theme="dark"] .alert .close {
  color: #8b9198;
}

/* ------------------------------------------------------------
   Round 14: channel page preset layouts (Channel.page_theme).
   "course" = curriculum: about card + module cards with numbered
   lesson rows. "episodes" = featured episode + numbered episode
   grid. Tokens follow the light/dark systems already in this file.
   ------------------------------------------------------------ */
/* light */
html[data-ptw-theme="light"] .ptw-course-about { padding-top: 10px; }
html[data-ptw-theme="light"] .ptw-course-intro {
  background: #f4f5f6;
  border-radius: 24px;
  padding: 32px;
}
html[data-ptw-theme="light"] .ptw-course-intro .ptw-kicker {
  color: #0b0d10;
  font-size: 13px;
}
html[data-ptw-theme="light"] .ptw-course-intro h2 {
  margin: 8px 0 10px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: #0b0d10;
}
html[data-ptw-theme="light"] .ptw-course-intro p {
  margin: 0;
  color: #687078;
  font-size: 16px;
  line-height: 1.6;
  max-width: 680px;
}
html[data-ptw-theme="light"] .ptw-course-meta { margin-top: 16px; }
/* .ptw-badge is absolutely positioned for card thumbnails — inline here */
html[data-ptw-theme="light"] .ptw-course-meta .ptw-badge,
html[data-ptw-theme="dark"] .ptw-course-meta .ptw-badge {
  position: static;
  display: inline-block;
}
html[data-ptw-theme="light"] .ptw-course-module {
  background: #f4f5f6;
  border-radius: 24px;
  padding: 10px 20px 14px;
  margin: 14px 0;
}
html[data-ptw-theme="light"] .ptw-course-module-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 6px 12px;
}
html[data-ptw-theme="light"] .ptw-course-module-num {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #687078;
  white-space: nowrap;
}
html[data-ptw-theme="light"] .ptw-course-module-head h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #0b0d10;
  flex: 1;
}
html[data-ptw-theme="light"] .ptw-course-module-head small { color: #687078; font-size: 13px; }
html[data-ptw-theme="light"] .ptw-course-lesson {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 6px;
  border-top: 1px solid #e6e8eb;
  text-decoration: none;
  border-radius: 12px;
}
html[data-ptw-theme="light"] .ptw-course-lesson:hover { background: #fff; }
html[data-ptw-theme="light"] .ptw-course-num {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #0b0d10;
}
html[data-ptw-theme="light"] .ptw-course-lesson-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html[data-ptw-theme="light"] .ptw-course-lesson-body strong {
  color: #0b0d10;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-ptw-theme="light"] .ptw-course-lesson-body small { color: #687078; font-size: 12.5px; }
html[data-ptw-theme="light"] .ptw-course-lesson-meta { color: #687078; font-size: 13px; white-space: nowrap; }
html[data-ptw-theme="light"] .ptw-ep-featured {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 24px;
  align-items: center;
  background: #f4f5f6;
  border-radius: 24px;
  padding: 20px;
  text-decoration: none;
}
html[data-ptw-theme="light"] .ptw-ep-featured-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
html[data-ptw-theme="light"] .ptw-ep-featured-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
html[data-ptw-theme="light"] .ptw-ep-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.85);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
html[data-ptw-theme="light"] .ptw-ep-featured-body { display: flex; flex-direction: column; gap: 10px; padding-right: 8px; }
html[data-ptw-theme="light"] .ptw-ep-featured-body .ptw-kicker { color: #687078; font-size: 13px; }
html[data-ptw-theme="light"] .ptw-ep-featured-body strong {
  color: #0b0d10;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.15;
}
html[data-ptw-theme="light"] .ptw-ep-featured-body small { color: #687078; font-size: 14px; }
html[data-ptw-theme="light"] .ptw-ep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
html[data-ptw-theme="light"] .ptw-ep-card {
  display: flex;
  flex-direction: column;
  background: #f4f5f6;
  border-radius: 20px;
  padding: 10px 10px 12px;
  text-decoration: none;
  transition: transform 0.18s ease;
}
html[data-ptw-theme="light"] .ptw-ep-card:hover { transform: translateY(-2px); }
html[data-ptw-theme="light"] .ptw-ep-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
html[data-ptw-theme="light"] .ptw-ep-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
html[data-ptw-theme="light"] .ptw-ep-num {
  position: absolute;
  left: 10px;
  bottom: 10px;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
html[data-ptw-theme="light"] .ptw-ep-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 6px 0; }
html[data-ptw-theme="light"] .ptw-ep-body strong {
  color: #0b0d10;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html[data-ptw-theme="light"] .ptw-ep-body small { color: #687078; font-size: 12.5px; }
/* dark */
html[data-ptw-theme="dark"] .ptw-course-intro {
  background: #16181c;
}
html[data-ptw-theme="dark"] .ptw-course-intro .ptw-kicker { color: #f5f5f7; }
html[data-ptw-theme="dark"] .ptw-course-intro h2 { color: #f5f5f7; }
html[data-ptw-theme="dark"] .ptw-course-intro p { color: #8b9198; }
html[data-ptw-theme="dark"] .ptw-course-module { background: #16181c; }
html[data-ptw-theme="dark"] .ptw-course-module-num { color: #8b9198; }
html[data-ptw-theme="dark"] .ptw-course-module-head h3 { color: #f5f5f7; }
html[data-ptw-theme="dark"] .ptw-course-module-head small { color: #8b9198; }
html[data-ptw-theme="dark"] .ptw-course-lesson { border-top-color: rgba(255, 255, 255, 0.10); }
html[data-ptw-theme="dark"] .ptw-course-lesson:hover { background: rgba(255, 255, 255, 0.05); }
html[data-ptw-theme="dark"] .ptw-course-num { background: rgba(255, 255, 255, 0.08); color: #f5f5f7; }
html[data-ptw-theme="dark"] .ptw-course-lesson-body strong { color: #f5f5f7; }
html[data-ptw-theme="dark"] .ptw-course-lesson-body small,
html[data-ptw-theme="dark"] .ptw-course-lesson-meta { color: #8b9198; }
html[data-ptw-theme="dark"] .ptw-ep-featured { background: #16181c; }
html[data-ptw-theme="dark"] .ptw-ep-featured-thumb { background: #0b0d10; }
html[data-ptw-theme="dark"] .ptw-ep-play { background: rgba(255, 255, 255, 0.9); color: #111; }
html[data-ptw-theme="dark"] .ptw-ep-featured-body .ptw-kicker,
html[data-ptw-theme="dark"] .ptw-ep-featured-body small { color: #8b9198; }
html[data-ptw-theme="dark"] .ptw-ep-featured-body strong { color: #f5f5f7; }
html[data-ptw-theme="dark"] .ptw-ep-card { background: #16181c; }
html[data-ptw-theme="dark"] .ptw-ep-thumb { background: #0b0d10; }
html[data-ptw-theme="dark"] .ptw-ep-num { background: var(--ptw-coral, #d9ff43); color: var(--ptw-on-coral, #111); }
html[data-ptw-theme="dark"] .ptw-ep-body strong { color: #f5f5f7; }
html[data-ptw-theme="dark"] .ptw-ep-body small { color: #8b9198; }

/* ------------------------------------------------------------
   Round 15: iOS liquid-glass bottom tab bar, site-wide on this
   tenant (partial included from root.html). The standalone landing
   ships its own identical copy inline; keep the two in sync.
   ------------------------------------------------------------ */
.glassdock{display:none}
@media(max-width:900px){
 .glassdock{display:flex;position:fixed;top:auto;height:auto;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:60;gap:2px;padding:8px 10px;border-radius:32px;
  background:rgba(255,255,255,.52);-webkit-backdrop-filter:blur(26px) saturate(1.9);backdrop-filter:blur(26px) saturate(1.9);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 16px 48px rgba(11,13,16,.22),0 2px 8px rgba(11,13,16,.10),inset 0 1px 1px rgba(255,255,255,.9),inset 0 -1px 2px rgba(255,255,255,.35)}
 .glassdock::before{content:"";position:absolute;inset:0;border-radius:32px;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.65) 0%,rgba(255,255,255,.05) 30%,rgba(255,255,255,0) 55%,rgba(255,255,255,.35) 100%);mix-blend-mode:screen}
 .glassdock a{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;width:62px;padding:9px 0 7px;border-radius:24px;color:#3f444a;font-size:10px;font-weight:600;letter-spacing:.01em;text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:transform .25s cubic-bezier(.34,1.56,.64,1),color .2s,background .3s}
 .glassdock a svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 .glassdock a:active{transform:scale(.88)}
 .glassdock a.on{color:#0b0d10;background:rgba(255,255,255,.75);box-shadow:0 4px 14px rgba(11,13,16,.12),inset 0 1px 0 rgba(255,255,255,.95)}
 body{padding-bottom:96px}
}
/* long unbroken filenames must not push the video title off-screen */
.media-title-banner{max-width:100%}
.media-title-banner h1{max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
/* dark variant for the app's dark mode */
@media(max-width:900px){
 html[data-ptw-theme="dark"] .glassdock{background:rgba(22,24,28,.58);border-color:rgba(255,255,255,.12);box-shadow:0 16px 48px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.35),inset 0 1px 1px rgba(255,255,255,.10)}
 html[data-ptw-theme="dark"] .glassdock::before{background:linear-gradient(120deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.02) 30%,rgba(255,255,255,0) 55%,rgba(255,255,255,.05) 100%)}
 html[data-ptw-theme="dark"] .glassdock a{color:#9aa0a8}
 html[data-ptw-theme="dark"] .glassdock a.on{color:#f5f5f7;background:rgba(255,255,255,.10);box-shadow:0 4px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08)}
}