/* vidma overrides (keeps your main app.css intact) */

/* Dropdown (More) - match capture 2: bold-ish, compact, less gap */
.dropdown-menu{
  min-width: 190px !important;
  padding: 6px 0 !important;
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}
.dropdown-menu .dropdown-item{
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  gap: 8px !important;
  line-height: 1.2 !important;
  color: rgba(116,132,144,.95) !important;
}
.dropdown-menu .dropdown-item i{
  font-size: 15px !important;
  width: 16px !important;
  margin-right: 0 !important;
  color: rgba(116,132,144,.78) !important;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus{
  background: transparent !important;
  color: rgba(60,72,90,.95) !important;
}
.dropdown-menu .dropdown-item:hover i,
.dropdown-menu .dropdown-item:focus i{
  color: rgba(60,72,90,.85) !important;
}
/* Ensure dropdown stays visible above cards */
.dropdown-menu{ z-index: 3000 !important; }
.dropdown-menu.show{ display:block !important; }
.video-card, .card{ overflow: visible !important; position: relative; }
.video-card .thumb, .card .thumb{ overflow:hidden !important; }

/* Privacy modal layout */
.privacy-block{
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.privacy-heading{
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin: 2px 0 10px;
}
.privacy-option{
  display:flex;
  gap: 12px;
  padding: 12px 6px;
  align-items:flex-start;
  cursor:pointer;
  user-select:none;
}
.privacy-radio{
  margin-top: 2px;
}
.privacy-name{
  font-size: 14px;
  font-weight: 700;
  color:#111827;
  line-height: 1.25;
}
.privacy-desc{
  font-size: 13px;
  color: rgba(116,132,144,.95);
  line-height: 1.35;
  margin-top: 2px;
}
.privacy-pass{
  margin-top: 10px;
  max-width: 320px;
  display:none;
}
.privacy-sep{
  height:1px;
  background: rgba(0,0,0,.08);
  margin: 0;
}
.privacy-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
}
.privacy-feedback{
  margin-top: 12px;
  padding: 10px 12px;
  font-size: 13px;
}



/* ===== All videos title ===== */
.list-title{
  margin: 10px 0 12px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

/* ===== Tighter spacing: header -> video list ===== */
.main{
  padding-top: 12px !important;
}
@media (max-width: 767px){
  .main{padding-top: 10px !important;}
}


/* ===== Footer like capture ===== */
.footer{
  padding: 16px 0 !important;
  background: transparent !important;
}
.footer__links--stream{
  display:flex !important;
  justify-content:center !important;
  flex-wrap: wrap;
  gap: 18px;
}


/* ===== Nav loader (used when navigating to Trending / Dashboard) ===== */
.talkz-nav-loader{
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
  background: rgba(0,0,0,.55);
  z-index: 99999;
}
.talkz-nav-loader.is-visible{ display: flex; }
.talkz-nav-loader__wrap{
  width: 79px;
  height: 79px;
  position: relative;
}
.talkz-nav-loader__logo{
  width: 43px;
  height: 43px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: .95;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.55));
}
.talkz-nav-loader__ring{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, .14);
  border-top-color: rgba(13, 110, 253, .95);
  animation: talkzSpin 1s linear infinite;
}
@keyframes talkzSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
.footer__links--stream a{
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(116,132,144,.55) !important;
  text-decoration: none !important;
  transition: color .15s ease, opacity .15s ease;
}
.footer__links--stream a:hover{
  color: #111827 !important;
  opacity: 1 !important;
}


/* Footer report button should look like footer links */
.footer__links--stream .footer-report{
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(116,132,144,.55) !important;
}
.footer__links--stream .footer-report:hover{
  color: #111827 !important;
}



/* =========================
   Video page — vidma 2020-ish look
   ========================= */
body.page-video{
  background: #e5e7eb !important;
}

body.page-video .main{
  padding-top: 0 !important;
}

/* Constrain the video page content like the reference */
body.page-video .video-wrap{
  max-width: 980px !important;
}

/* Header: simple brand on the left, small report link on the right */
body.page-video header.topbar{
  padding: 14px 0 8px !important;
}

body.page-video .brand{
  display:inline-flex !important;
  align-items:center !important;
  gap: 8px !important;
  text-decoration:none !important;
}

/* Logo transparent until hover */
body.page-video .brand-logo{
  opacity: .65;
  transition: opacity .15s ease;
}
body.page-video .brand:hover .brand-logo{
  opacity: 1;
}

body.page-video .brand-name{
  font-weight: 700 !important;
  color: #111827 !important;
}

body.page-video .video-report-link{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(116,132,144,.75) !important;
  text-decoration: none !important;
  cursor: pointer;
}
body.page-video .video-report-link:hover{
  color: #111827 !important;
}


/* Video meta box under the player — match vidma look */
body.page-video .playerwrap{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.10) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}

body.page-video .player video{
  border-radius: 3px 3px 0 0 !important;
  display: block;
}


body.page-video .player-meta{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 12px !important;
  background: #ffffff !important;
  border-top: 1px solid rgba(0,0,0,.10) !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}

body.page-video .player-meta .meta-title{
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(28,38,52,.95) !important;
}

body.page-video .player-meta .meta-views{
  font-size: 13px !important;
  font-weight: 400 !important;
  color: rgba(28,38,52,.70) !important;
}

body.page-video .player-brandbar{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 9px 12px !important;
  background: #f3f4f6 !important;
}

body.page-video .brandbar-actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.page-video .player-brandbar .brandbar-link{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  color: rgba(153,163,175,.95) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body.page-video .player-brandbar .brandbar-icon{
  font-size: 16px;
  line-height: 1;
  opacity: .55;
  transition: opacity .15s ease;
}

body.page-video .player-brandbar .brandbar-link:hover .brandbar-icon{
  opacity: 1;
}

body.page-video .player-brandbar .brandbar-logo{
  opacity: .55;
  transition: opacity .15s ease;
  filter: brightness(0);
  -webkit-filter: brightness(0);
}

body.page-video .player-brandbar .brandbar-link:hover .brandbar-logo{
  opacity: 1;
}

body.page-video .player-brandbar .brandbar-link:hover{
  color: rgba(120,132,146,.95) !important;
}

/* Share button on video page (vidma-style) */
body.page-video .share-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(28,38,52,.85);
  background: #f3f4f6;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
body.page-video .share-btn:hover{ filter: brightness(0.98); }
body.page-video .share-btn:active{ transform: translateY(1px); }

/* Cut button on video page (next to Share) */
body.page-video .cut-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(28,38,52,.85);
  background: #f3f4f6;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  text-decoration: none;
}
body.page-video .cut-btn:hover{ filter: brightness(0.98); }
body.page-video .cut-btn:active{ transform: translateY(1px); }

/* Share overlay + dialogs */
body.page-video .share-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
  z-index: 1060; /* above normal content */
}
body.page-video .share-overlay.is-open{ display: flex; }
body.page-video .share-stack{
  width: min(560px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

body.page-video .share-dialog,
body.page-video .tip-dialog{
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}

body.page-video .share-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
}
body.page-video .share-title{
  font-weight: 700;
  font-size: 16px;
  color: rgba(28,38,52,.95);
}
body.page-video .share-close{
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: rgba(28,38,52,.70);
}

body.page-video .share-body{ padding: 0 16px 14px 16px; }

body.page-video .sharebox__group--stream{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 6px;
  overflow: hidden;
}
body.page-video .sharebox__group--stream .sharebox__input{
  border: 0 !important;
  padding: 10px 10px !important;
  font-size: 13px !important;
}
body.page-video .sharebox__btn--copy{
  border: 0 !important;
  border-left: 1px solid rgba(0,0,0,.10) !important;
  background: #0d6efd !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 0 12px !important;
}

body.page-video .share-start{
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(28,38,52,.80);
}
body.page-video .share-start__label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.page-video .share-start__time{
  width: 70px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.12);
  font-size: 13px;
  color: rgba(28,38,52,.80);
}
body.page-video .share-start__time:disabled{
  background: #f3f4f6;
  color: rgba(28,38,52,.45);
}

body.page-video .tip-header{
  padding: 14px 16px 8px 16px;
}
body.page-video .tip-title{
  font-weight: 700;
  color: rgba(28,38,52,.95);
}
body.page-video .tip-body{
  padding: 0 16px 14px 16px;
}
body.page-video .tip-strong{
  font-weight: 700;
  margin-bottom: 10px;
  color: rgba(28,38,52,.90);
}
body.page-video .tip-ok{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.10);
  background: #f3f4f6;
  font-weight: 700;
  font-size: 13px;
  color: rgba(28,38,52,.85);
}


/* Player container spacing to match reference */
body.page-video .playerwrap{
  margin-top: 14px !important;
  border-radius: 3px !important;
}

/* Footer: match homepage styling */
body.page-video .footer{
  border-top: 0 !important;
  background: transparent !important;
}


/* ===== Video page: Dark/Light toggle ===== */
body.page-video .video-theme-toggle{
  padding: 10px 0 18px;
  background: transparent;
}
body.page-video .video-theme-switch{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  user-select: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: rgba(28,38,52,.70);
}
body.page-video .video-theme-switch input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
body.page-video .video-theme-track{
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.10);
  display: inline-flex;
  align-items: center;
  padding: 2px;
  transition: background .15s ease, border-color .15s ease;
}
body.page-video .video-theme-thumb{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
  transform: translateX(0);
  transition: transform .15s ease;
}
body.page-video.theme-dark .video-theme-track{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.16);
}
body.page-video.theme-dark .video-theme-thumb{
  transform: translateX(16px);
}
body.page-video.theme-dark .video-theme-switch{
  color: rgba(255,255,255,.65);
}

/* Dark theme colors for the video page (keeps layout unchanged) */
body.page-video.theme-dark{
  background: #141414 !important;
  color: rgba(255,255,255,.92) !important;
}
body.page-video.theme-dark .playerwrap{
  background: #1e1e1e !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.55) !important;
}
body.page-video.theme-dark .player-meta{
  background: #1e1e1e !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
body.page-video.theme-dark .player-meta .meta-title{
  color: rgba(255,255,255,.92) !important;
}
body.page-video.theme-dark .player-meta .meta-views{
  color: rgba(255,255,255,.65) !important;
}
body.page-video.theme-dark .player-meta .meta-title--editable:hover{
  color: rgba(255,255,255,1) !important;
}
body.page-video.theme-dark .player-brandbar{
  background: #2a2a2a !important;
}
body.page-video.theme-dark .player-brandbar .brandbar-link{
  color: rgba(255,255,255,.70) !important;
}
body.page-video.theme-dark .player-brandbar .brandbar-link:hover{
  color: rgba(255,255,255,.90) !important;
}
body.page-video.theme-dark .player-brandbar .brandbar-logo{
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
  opacity: .70;
}
body.page-video.theme-dark .share-btn{
  color: rgba(255,255,255,.86);
  background: #2a2a2a;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
body.page-video.theme-dark .share-btn:hover{ filter: brightness(1.05); }

body.page-video.theme-dark .cut-btn{
  color: rgba(255,255,255,.86);
  background: #2a2a2a;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
body.page-video.theme-dark .cut-btn:hover{ filter: brightness(1.05); }

body.page-video.theme-dark .footer__links--stream a,
body.page-video.theme-dark .footer__links--stream .footer-report{
  color: rgba(255,255,255,.50) !important;
}
body.page-video.theme-dark .footer__links--stream a:hover,
body.page-video.theme-dark .footer__links--stream .footer-report:hover{
  color: rgba(255,255,255,.85) !important;
}



/* =========================
   Theme (Dark/Light) — sitewide except video page
   ========================= */
html.theme-dark{
  --bg: #0f0f0f;
  --surface: #1f1f1f;
  --surface2: #232323;
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.55);
  --border: rgba(255,255,255,.12);
  --shadow: 0 1px 2px rgba(0,0,0,.65);
  --link: #69a6ff;
}
html.theme-light{
  --bg: #e5e7eb;
  --surface: #ffffff;
  --surface2: #ffffff;
  --text: #748490;
  --muted: rgba(116,132,144,.75);
  --border: rgba(0,0,0,.10);
  --shadow: 0 1px 2px rgba(0,0,0,.08);
  --link: #007aff;
}


/* =========================
   vidma Dialog (Confirm/Alert) — Streamable-style
   Used to replace native browser confirm() dialogs.
   ========================= */
.talkz-dialog-backdrop{
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.55);
}
.talkz-dialog-backdrop.is-open{ display: flex; }

.talkz-dialog{
  width: min(640px, calc(100vw - 32px));
  background: var(--surface, #2a2a2a);
  color: var(--text, rgba(255,255,255,.92));
  border: 1px solid var(--border, rgba(255,255,255,.12));
  border-radius: 6px;
  box-shadow: 0 16px 50px rgba(0,0,0,.55);
  overflow: hidden;
}

.talkz-dialog__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
}
.talkz-dialog__title{
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;
}
.talkz-dialog__close{
  border: 0;
  background: transparent;
  color: var(--muted, rgba(255,255,255,.60));
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.talkz-dialog__close:hover{ background: rgba(255,255,255,.06); color: rgba(255,255,255,.88); }

.talkz-dialog__body{
  padding: 0 16px 14px;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  line-height: 1.45;
}

.talkz-dialog__msg{ margin-bottom: 10px; }

.talkz-link-field{
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(255,255,255,.14));
  background: var(--surface2, rgba(255,255,255,.06));
  color: var(--text, rgba(255,255,255,.92));
  font-size: 13px;
  outline: none;
}
.talkz-link-field:focus{
  border-color: rgba(0,122,255,.55);
  box-shadow: 0 0 0 3px rgba(0,122,255,.22);
}

.talkz-dialog__footer{
  padding: 0 16px 16px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.talkz-btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.talkz-btn:hover{ filter: brightness(1.06); }
.talkz-btn:active{ transform: translateY(1px); }
.talkz-btn--primary{
  border-color: rgba(0,122,255,.55);
  background: #007aff;
  color: #fff;
}
.talkz-btn--danger{
  border-color: rgba(239,68,68,.55);
  background: #ef4444;
  color: #fff;
}


/* Apply theme (keep video page layout/colors independent) */
body:not(.page-video){
  background: var(--bg) !important;
  color: var(--text) !important;
}

body.page-video{
  color: #111827 !important;
}
a{ color: var(--link); }
a:hover{ filter: brightness(.95); }

.uploadbar__inner{
  background: var(--surface) !important;
  box-shadow: var(--shadow) !important;
}
.topbar{
  background: transparent !important;
}

/* Navbar background (Home / Trending / Legal pages) */
body.page-home .topbar,
body.page-trending .topbar,
body.page-legal .topbar,
body.page-member .topbar{
  background-color: #232323 !important;
  border-bottom: 1px solid #111 !important;
  border-color: #111 !important;
}

/* Topbar menu buttons (Home / Trending / Legal pages) */
body.page-home .topbar__link,
body.page-trending .topbar__link,
body.page-legal .topbar__link,
body.page-member .topbar__link{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 15px;
  opacity: 1 !important;
}
body.page-home .topbar__link:hover,
body.page-trending .topbar__link:hover,
body.page-legal .topbar__link:hover,
body.page-member .topbar__link:hover{
  background: rgba(255,255,255,.06);
}

.video-card, .card{
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
.card__title{ color: var(--text) !important; }
.card__link{ color: var(--link) !important; }

input.form-control, textarea.form-control, .form-control{
  background: var(--surface2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
input::placeholder, textarea::placeholder{
  color: rgba(156,163,175,.85) !important;
}
html.theme-light input::placeholder, html.theme-light textarea::placeholder{
  color: rgba(116,132,144,.55) !important;
}

/* Modal */
.modal-content{
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.modal-header, .modal-footer{
  border-color: var(--border) !important;
}

/* =========================
   vidma Modal (Bootstrap) — match vidmaDialog look
   Applied only when the modal root has .talkz-modal
   ========================= */
.talkz-modal + .modal-backdrop{ background:#000; }
.modal-backdrop.show{ opacity: .55; }

.talkz-modal .modal-dialog{
  max-width: 640px;
}
.talkz-modal .modal-content{
  border-radius: 6px !important;
  box-shadow: 0 16px 50px rgba(0,0,0,.55) !important;
  overflow: hidden;
}
.talkz-modal .modal-header{
  padding: 14px 16px 10px !important;
  border-bottom: 0 !important;
}
.talkz-modal .modal-title{
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  margin: 0 !important;
}
.talkz-modal .modal-body{
  padding: 0 16px 16px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

html.theme-dark .talkz-modal .modal-body{ color: rgba(255,255,255,.78) !important; }
html.theme-light .talkz-modal .modal-body{ color: rgba(17,24,39,.78) !important; }

.talkz-modal .btn-close{
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  opacity: 1 !important;
}
html.theme-dark .talkz-modal .btn-close{
  filter: invert(1) opacity(.65);
}
html.theme-light .talkz-modal .btn-close{
  filter: opacity(.55);
}
.talkz-modal .btn-close:hover{
  background: rgba(255,255,255,.06) !important;
}
html.theme-light .talkz-modal .btn-close:hover{
  background: rgba(0,0,0,.05) !important;
}


/* Footer links */
.footerwrap, footer{
  background: transparent !important;
}
footer a, .footer a{
  color: var(--muted) !important;
  opacity: 1 !important;
}
footer a:hover, .footer a:hover{
  color: var(--text) !important;
}

/* Theme toggle switch */
.theme-toggle{
  width: 46px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.10);
  position: relative;
  display:inline-flex;
  align-items:center;
  padding: 2px;
  cursor: pointer;
  user-select:none;
}
html.theme-light .theme-toggle{
  background: rgba(0,0,0,.06);
}
.theme-toggle__thumb{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  transition: transform .18s ease;
  transform: translateX(0);
}
html.theme-dark .theme-toggle__thumb{
  transform: translateX(22px);
}
html.theme-light .theme-toggle__thumb{
  transform: translateX(0);
}
.theme-toggle:focus{ outline: none; box-shadow: 0 0 0 3px rgba(0,122,255,.20); }

/* Put toggle on the right in header */
.topbar__actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Mobile-only Home button (injected via assets/theme.js)
   Desktop already has the clickable logo, but mobile users need an explicit Home button. */
.topbar-home-mobile{ display:none !important; }
@media (max-width: 767px){
  .topbar-home-mobile{ display:inline-flex !important; }
}

/* Mobile: keep header actions tighter (buttons were too spaced out) */
@media (max-width: 720px){
  .topbar__actions{ gap: 6px; }
  .topbar__link{ padding-left: 6px; padding-right: 6px; }
}



/* ===== Dark mode refinements (match screenshots) ===== */
html.theme-dark .uploadbar__inner{
  background: #1d1d1d !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.45) !important;
}
html.theme-dark .sharebox__group{
  border: 1px solid rgba(255,255,255,.14) !important;
  background: transparent !important;
}
html.theme-dark .sharebox__input{
  background: transparent !important;
  border: 0 !important;
  color: rgba(255,255,255,.80) !important;
}
html.theme-dark .sharebox__input::placeholder{
  color: rgba(255,255,255,.45) !important;
}
html.theme-dark .sharebox__btn{
  background: transparent !important;
  border-left: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.78) !important;
}
html.theme-dark .sharebox__btn:hover{
  background: rgba(255,255,255,.06) !important;
}

html.theme-dark .video-card, 
html.theme-dark .card{
  background: #1f1f1f !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.35) !important;
  border-radius: 12px !important;
}
html.theme-dark .actions{
  background: #232323 !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}
html.theme-dark .actions .action-btn{
  color: rgba(255,255,255,.70) !important;
}
html.theme-dark .actions .action-btn:hover{
  color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.04) !important;
}
html.theme-dark .card__title{
  color: rgba(255,255,255,.92) !important;
}
html.theme-dark .copylink-mini{
  color: rgba(255,255,255,.55) !important;
}
html.theme-dark .copylink-mini i{
  color: rgba(255,255,255,.45) !important;
}
html.theme-dark .copylink-mini:hover{
  color: rgba(255,255,255,.88) !important;
}
html.theme-dark .copylink-mini:hover i{
  color: rgba(255,255,255,.75) !important;
}
html.theme-dark h1, html.theme-dark h2, html.theme-dark h3{
  color: rgba(255,255,255,.92) !important;
}
html.theme-dark .muted, html.theme-dark .text-muted{
  color: rgba(255,255,255,.55) !important;
}

/* Dropdown in dark mode */
html.theme-dark .dropdown-menu{
  background: #1f1f1f !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.55) !important;
}
html.theme-dark .dropdown-menu .dropdown-item{
  color: rgba(255,255,255,.70) !important;
}
html.theme-dark .dropdown-menu .dropdown-item i{
  color: rgba(255,255,255,.55) !important;
}
html.theme-dark .dropdown-menu .dropdown-item:hover{
  color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.06) !important;
}
html.theme-dark .dropdown-menu .dropdown-divider{
  border-top-color: rgba(255,255,255,.10) !important;
}



/* Fix: gray bar under cards in dark mode (use dark surface) */
html.theme-dark .card__body,
html.theme-dark .card-body,
html.theme-dark .card__meta,
html.theme-dark .meta,
html.theme-dark .video-meta{
  background: #1f1f1f !important;
}

html.theme-dark .actions,
html.theme-dark .card__actions{
  background: #232323 !important;
}



/* Fix: action buttons were white with opacity -> looked like gray blocks in dark mode */
html.theme-dark .actions{ background:#232323 !important; }
html.theme-dark .action-btn{
  background:#232323 !important;
  color: rgba(255,255,255,.70) !important;
  opacity: 1 !important;
  border-right: 1px solid rgba(255,255,255,.10) !important;
}
html.theme-dark .action-btn:last-child{ border-right: 0 !important; }
html.theme-dark .action-btn:hover{
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
}



/* Round card corners (including action bar) */
.video-card, .card{
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Remove right divider after "More" (last action button) */
.action-btn:last-child{
  border-right: 0 !important;
}



/* Remove divider after "More" robustly (handles dropdown wrappers/pseudo elements) */
.actions .action-btn{ border-right: 1px solid rgba(255,255,255,.10) !important; }
.actions .action-btn:last-of-type{ border-right: 0 !important; }

/* If "More" is inside a .dropdown wrapper, make sure its button has no right border */
.actions .dropdown:last-child .action-btn,
.actions .dropdown:last-child .btn,
.actions .action-btn.more,
.actions .action-btn.action-more{
  border-right: 0 !important;
}

/* Some builds use a separator pseudo-element on the button */
.actions .action-btn::after{
  border: 0 !important;
}

/* Back button in header */
.btn-back{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #fff !important;
  text-decoration: none !important;
}
.btn-back:hover{ filter: brightness(.92); }
.btn-back i{ font-size: 18px; }



/* Back button: force white text + visible left arrow */
.btn-back, .btn-back span, .btn-back i{
  color: #ffffff !important;
}
.btn-back i{
  font-size: 20px !important;
  line-height: 1 !important;
  display: inline-block !important;
}

/* Header logo replacement */
.brand-logo{ display:inline-block; vertical-align:middle; }
.brand-name{ color: var(--text) !important; font-weight:700; }

/* Use the new wide logo everywhere (hide text-only marks) */
.brand-name, .brandbar-name, .member-brand__name, .brand__name{ display:none !important; }
.brand__mark{ display:none !important; }
img.brand-logo{ height:31px !important; width:auto !important; }
img.brandbar-logo{ height:18px !important; width:auto !important; }
img.member-brand__logo{ height:18px !important; width:auto !important; }




/* ===== Static pages: force readable white text in dark mode ===== */
html.theme-dark body.page-static{
  color: rgba(255,255,255,.90) !important;
}
html.theme-dark body.page-static p,
html.theme-dark body.page-static li,
html.theme-dark body.page-static small,
html.theme-dark body.page-static .static-text{
  color: rgba(255,255,255,.70) !important;
}
html.theme-dark body.page-static h1,
html.theme-dark body.page-static h2,
html.theme-dark body.page-static h3{
  color: rgba(255,255,255,.86) !important;
}

/* Align back button with content and remove underline */
body.page-static .static-wrap{
  max-width: 980px;
  margin: 0 auto !important;
  padding: 18px 16px 10px !important;
}
.btn-back, .btn-back:hover, .btn-back:focus{
  text-decoration: none !important;
}
.btn-back span, .btn-back i{ color:#fff !important; }



/* ===== Actions: show divider to the LEFT of More ===== */
.actions .dropdown .action-btn,
.actions .dropdown .btn{
  border-left: 1px solid rgba(255,255,255,.10) !important;
}
html.theme-light .actions .dropdown .action-btn,
html.theme-light .actions .dropdown .btn{
  border-left: 1px solid rgba(0,0,0,.10) !important;
}



/* ===== Privacy modal: readable text in dark mode ===== */
html.theme-dark .modal-content{
  background: #1f1f1f !important;
  color: rgba(255,255,255,.90) !important;
}
html.theme-dark .modal-content h1,
html.theme-dark .modal-content h2,
html.theme-dark .modal-content h3,
html.theme-dark .modal-content .modal-title{
  color: rgba(255,255,255,.92) !important;
}
html.theme-dark .modal-content .text-muted,
html.theme-dark .modal-content .muted,
html.theme-dark .modal-content small{
  color: rgba(255,255,255,.60) !important;
}
html.theme-dark .modal-content label{
  color: rgba(255,255,255,.78) !important;
}



/* ===== Pagination styling (match screenshot) ===== */
.pagination{
  gap: 10px;
}
.pagination .page-link{
  background: transparent !important;
  border: 0 !important;
  color: rgba(255,255,255,.70) !important;
  font-weight: 600 !important;
  padding: 6px 8px !important;
}
.pagination .page-link:hover{
  color: rgba(255,255,255,.92) !important;
  text-decoration: none !important;
}
.pagination .page-item.active .page-link{
  color: rgba(255,255,255,.98) !important;
}
.pagination .page-item.disabled .page-link{
  color: rgba(255,255,255,.35) !important;
}
html.theme-light .pagination .page-link{
  color: rgba(0,0,0,.55) !important;
}
html.theme-light .pagination .page-link:hover{
  color: rgba(0,0,0,.80) !important;
}
html.theme-light .pagination .page-item.active .page-link{
  color: rgba(0,0,0,.95) !important;
}
html.theme-light .pagination .page-item.disabled .page-link{
  color: rgba(0,0,0,.30) !important;
}



/* ===== Privacy modal: titles/labels white, muted text stays muted ===== */
html.theme-dark #privacyModal .modal-title,
html.theme-dark #privacyModal h1,
html.theme-dark #privacyModal h2,
html.theme-dark #privacyModal h3,
html.theme-dark #privacyModal .section-title,
html.theme-dark #privacyModal label,
html.theme-dark #privacyModal .form-label,
html.theme-dark #privacyModal .privacy-option-title{
  color: rgba(255,255,255,.92) !important;
}

/* Radio option main text (Public/Private/Password protected) */
html.theme-dark #privacyModal .option-title,
html.theme-dark #privacyModal .form-check-label,
html.theme-dark #privacyModal .privacy-option strong{
  color: rgba(255,255,255,.92) !important;
}

/* Muted descriptions stay muted */
html.theme-dark #privacyModal .text-muted,
html.theme-dark #privacyModal small,
html.theme-dark #privacyModal .muted,
html.theme-dark #privacyModal .option-desc{
  color: rgba(255,255,255,.58) !important;
}


/* Privacy modal: privacy-name should be white in dark mode */
html.theme-dark .privacy-name{ color: rgba(255,255,255,.92) !important; }


/* ===== Actions bar aesthetics (Embed / Edit Video / More) ===== */
.actions{
  border-top: 1px solid rgba(255,255,255,.10) !important;
  background: #3a3a3a !important;
}
.video-card .actions, .card .actions{
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}
.actions .action-btn,
.actions .dropdown .action-btn,
.actions .dropdown .btn{
  background: transparent !important;
  color: rgba(255,255,255,.72) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
}
.actions .action-btn i,
.actions .dropdown .action-btn i,
.actions .dropdown .btn i{
  color: rgba(255,255,255,.62) !important;
  margin-right: 8px !important;
}
.actions .action-btn:hover,
.actions .dropdown .action-btn:hover,
.actions .dropdown .btn:hover{
  background: rgba(255,255,255,.05) !important;
  color: rgba(255,255,255,.92) !important;
}
.actions .action-btn:hover i,
.actions .dropdown .action-btn:hover i,
.actions .dropdown .btn:hover i{
  color: rgba(255,255,255,.80) !important;
}
/* separators between actions */
.actions .action-btn{ border-right: 1px solid rgba(255,255,255,.10) !important; }
.actions .action-btn:last-of-type{ border-right: 0 !important; }
.actions .dropdown .btn{ border-left: 1px solid rgba(255,255,255,.10) !important; }
/* remove any right divider after More */
.actions .dropdown:last-child .btn{ border-right: 0 !important; }


/* ===== Home pagination: match screenshot (Previous 1 2 Next) ===== */
.pagination{
  display:flex;
  align-items:center;
  gap: 14px !important;
  margin: 18px 0 0 !important;
}
.pagination .page-item{ margin:0 !important; }
.pagination .page-link{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: rgba(255,255,255,.78) !important;
  font-weight: 700 !important;
}
.pagination .page-link:hover{
  color: rgba(255,255,255,.95) !important;
  text-decoration: none !important;
}
.pagination .page-item.active .page-link{
  color: rgba(255,255,255,.98) !important;
}
.pagination .page-item.disabled .page-link{
  color: rgba(255,255,255,.38) !important;
}

/* Light mode */
html.theme-light .pagination .page-link{ color: rgba(0,0,0,.65) !important; }
html.theme-light .pagination .page-link:hover{ color: rgba(0,0,0,.90) !important; }
html.theme-light .pagination .page-item.active .page-link{ color: rgba(0,0,0,.95) !important; }
html.theme-light .pagination .page-item.disabled .page-link{ color: rgba(0,0,0,.35) !important; }



/* ===== Privacy modal: remove "Visibility" label ===== */
#privacyModal .modal-body > .mb-2.small-muted{ display:none !important; }

/* ===== Actions bar: light theme should be light (not dark) ===== */
html.theme-light .actions{
  background: #f3f4f6 !important;
  border-top: 1px solid rgba(0,0,0,.10) !important;
}
html.theme-light .actions .action-btn,
html.theme-light .actions .dropdown .action-btn,
html.theme-light .actions .dropdown .btn{
  color: rgba(17,24,39,.70) !important;
}
html.theme-light .actions .action-btn i,
html.theme-light .actions .dropdown .action-btn i,
html.theme-light .actions .dropdown .btn i{
  color: rgba(17,24,39,.55) !important;
}
html.theme-light .actions .action-btn{ border-right: 1px solid rgba(0,0,0,.10) !important; }
html.theme-light .actions .dropdown .btn{ border-left: 1px solid rgba(0,0,0,.10) !important; }
html.theme-light .actions .action-btn:hover,
html.theme-light .actions .dropdown .action-btn:hover,
html.theme-light .actions .dropdown .btn:hover{
  background: rgba(0,0,0,.04) !important;
  color: rgba(17,24,39,.92) !important;
}

/* ===== Back button alignment + no underline (static pages) ===== */
body.page-static .static-wrap{
  max-width: 980px;
  margin: 0 auto !important;
  padding: 28px 14px 10px !important; /* match main wrap */
  text-align: left !important;
}
.btn-back, .btn-back:hover, .btn-back:focus{
  text-decoration: none !important;
}

/* ===== Home pagination: also support non-bootstrap markup ===== */
#pager, #pagination, .pager, .pagination-wrap, .page-nav{
  display:flex;
  align-items:center;
  gap: 14px;
  margin: 18px 0 0;
  font-weight: 700;
}
#pager a, #pagination a, .pager a, .pagination-wrap a, .page-nav a{
  text-decoration:none !important;
  color: rgba(255,255,255,.78) !important;
}
#pager a:hover, #pagination a:hover, .pager a:hover, .pagination-wrap a:hover, .page-nav a:hover{
  color: rgba(255,255,255,.95) !important;
}
#pager .active, #pagination .active, .pager .active, .pagination-wrap .active, .page-nav .active{
  color: rgba(255,255,255,.98) !important;
}
html.theme-light #pager a, html.theme-light #pagination a, html.theme-light .pager a, html.theme-light .pagination-wrap a, html.theme-light .page-nav a{
  color: rgba(0,0,0,.65) !important;
}
html.theme-light #pager a:hover, html.theme-light #pagination a:hover, html.theme-light .pager a:hover, html.theme-light .pagination-wrap a:hover, html.theme-light .page-nav a:hover{
  color: rgba(0,0,0,.90) !important;
}

/* ===== Upload from a website button (Home, top-right) ===== */
.topbar__actions{ display:flex; align-items:center; gap: 10px; }
.website-upload-btn{
  background: #d1d5db; /* gray */
  color: #000;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}
.website-upload-btn:hover{ filter: brightness(0.98); }
.website-upload-btn:active{ transform: translateY(1px); }

/* Website upload modal */
.website-upload-help{ font-size: 13px; opacity: .75; }
.website-upload-status{ font-size: 13px; opacity: .85; margin-top: 10px; }


/* ===== Video page: inline editable title (owner only) ===== */
body.page-video .player-meta{ gap: 12px !important; }
body.page-video .player-meta .meta-title{ min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.page-video .player-meta .meta-title--editable{ cursor: text; }
body.page-video .player-meta .meta-title--editable:hover{ color: rgba(28,38,52,1) !important; }
body.page-video .player-meta .meta-title-input{
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  color: rgba(28,38,52,.95);
  background: transparent;
  border: 0;
  outline: none;
  padding: 0;
  margin: 0;
}
body.page-video .player-meta .meta-title-input:focus{
  box-shadow: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ===== Home listing: inline title editing ===== */
.card__title--editable{
  cursor: text;
}
.card__title-input{
  width: 100%;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.25;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: rgba(255,255,255,.85);
  caret-color: rgba(255,255,255,.85);
  outline: none;
}
.card__title-input:focus{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}


/* ===== Actions bar: clearer nardo dark gray (Embed / Edit Video / More) ===== */
.actions{
  background: #3a3a3a !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
}
.actions .action-btn,
.actions .dropdown .action-btn,
.actions .dropdown .btn{
  background: transparent !important;
  opacity: 1 !important;
}
.actions .action-btn,
.actions .dropdown .action-btn,
.actions .dropdown .btn{
  color: rgba(255,255,255,.84) !important;
}
.actions .action-btn i,
.actions .dropdown .action-btn i,
.actions .dropdown .btn i{
  color: rgba(255,255,255,.78) !important;
}
.actions .action-btn:hover,
.actions .dropdown .action-btn:hover,
.actions .dropdown .btn:hover{
  background: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.95) !important;
}
.actions .action-btn:hover i,
.actions .dropdown .action-btn:hover i,
.actions .dropdown .btn:hover i{
  color: rgba(255,255,255,.90) !important;
}

/* ===== Home (listing cards): actions bar and buttons background ===== */
body:not(.page-video):not(.page-static):not(.page-editor) .card .actions{
  background: #363636 !important;
}
body:not(.page-video):not(.page-static):not(.page-editor) .card .actions .action-btn,
body:not(.page-video):not(.page-static):not(.page-editor) .card .actions .dropdown .action-btn,
body:not(.page-video):not(.page-static):not(.page-editor) .card .actions .dropdown .btn{
  background: #363636 !important;
}

/* ===== Home listing: URL + Copy Link alignment & colors ===== */
#videoGrid .linkline{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
}
#videoGrid .card__link{
  flex:1 1 auto !important;
  min-width:0 !important;
  color:#ccc !important;
  text-decoration:none !important;
}
#videoGrid .card__link:hover{
  color:#fff !important;
  text-decoration:none !important;
}
#videoGrid .copylink-mini{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  line-height:1 !important;
}
#videoGrid .copylink-mini i{ position:relative; top:1px; }

/* vidma-style copied badge */
#videoGrid .copied-pill{
  display:inline-block;
  background:#0d6efd;
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding:3px 6px;
  border-radius:3px;
}

/* ===== Upload UI: Compression ETA ===== */
.uploading-card .uploading-text .uploading-eta{
  font-weight: 600;
  opacity: .95;
}
.uploading-card .uploading-text .uploading-tip{
  display:block;
  font-size: 12px;
  font-weight: 600;
  opacity: .75;
  margin-top: 4px;
}

/* ===== Video page: processing screen (vidma-like) ===== */
body.page-video .processing-stage{
  position: relative;
  width: 100%;
  background: #111;
  background-size: cover;
  background-position: center;
  aspect-ratio: 16 / 9;
}

body.page-video .processing-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

body.page-video .processing-center{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
}

body.page-video .processing-title{
  color: rgba(255,255,255,.92);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 8px;
}

body.page-video .processing-sub{
  color: rgba(255,255,255,.70);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 12px;
}

body.page-video .processing-bar{
  position: relative;
  width: min(320px, 80vw);
  height: 22px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 2px;
  overflow: hidden;
  background: rgba(0,0,0,.20);
}

body.page-video .processing-bar-label{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: rgba(255,255,255,.85);
  pointer-events: none;
}

body.page-video .processing-bar-fill{
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 45%;
  background: rgba(255,255,255,.78);
  animation: talkz-processing-sweep 1.35s ease-in-out infinite;
}

@keyframes talkz-processing-sweep{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(220%); }
}

/* ===== CONTACT PAGE (dark like home) ===== */
body.page-contact .contact-shell{
  padding: 26px 18px 30px;
}

body.page-contact .contact-hero{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: start;
}

body.page-contact .contact-back{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  text-decoration:none;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 14px;
}
body.page-contact .contact-back:hover{ color: var(--text); }

body.page-contact .contact-title{
  margin: 0 0 10px 0;
  font-size: 40px;
  letter-spacing: -0.5px;
}

body.page-contact .contact-subtitle{
  margin: 0 0 16px 0;
  max-width: 56ch;
  color: var(--muted);
  line-height: 1.6;
  font-size: 15px;
}

body.page-contact .contact-mini{
  display:flex;
  flex-direction: column;
  gap: 10px;
  max-width: 62ch;
}
body.page-contact .contact-mini__row{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
body.page-contact .contact-mini__row i{
  margin-top: 2px;
  color: var(--link);
}
body.page-contact .contact-email{
  color: var(--text);
  font-weight: 700;
}

body.page-contact .contact-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 16px;
}

body.page-contact .contact-card__header{
  display:flex;
  gap: 12px;
  align-items:center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
body.page-contact .contact-card__badge{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(0,122,255,.12);
  border: 1px solid rgba(0,122,255,.22);
  color: var(--link);
}
body.page-contact .contact-card__title{
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
}
body.page-contact .contact-card__hint{
  font-size: 13px;
  color: var(--muted);
}

body.page-contact .contact-label{
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
}

body.page-contact .contact-optional{
  font-weight: 700;
  color: var(--muted);
}

body.page-contact .contact-input{
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface2) !important;
  color: var(--text) !important;
}
body.page-contact .contact-input::placeholder{
  color: rgba(255,255,255,.35);
}
html.theme-light body.page-contact .contact-input::placeholder{
  color: rgba(0,0,0,.35);
}

body.page-contact .contact-input:focus{
  box-shadow: 0 0 0 4px rgba(0,122,255,.18) !important;
  border-color: rgba(0,122,255,.50) !important;
}

body.page-contact .contact-submit{
  width: 100%;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 800;
}

body.page-contact .contact-footnote{
  margin: 12px 0 0 0;
  font-size: 12px;
  color: var(--muted);
}
body.page-contact .contact-footnote a{
  color: var(--link);
  text-decoration: none;
}
body.page-contact .contact-footnote a:hover{ text-decoration: underline; }

@media (max-width: 980px){
  body.page-contact .contact-title{ font-size: 34px; }
  body.page-contact .contact-hero{ grid-template-columns: 1fr; }
}

/* ===== PATCH: Center Dark mode row on mobile ===== */
@media (max-width: 767px){
  .mobile-theme-under-footer{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  .mobile-theme-under-footer .mobile-theme-label{
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }
  .mobile-theme-under-footer .theme-toggle{
    margin: 0 !important;
    float: none !important;
    position: static !important;
  }
}

/* vidma homepage callout (shown when user has 0 videos) */
.talkz-callout{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px 16px;
  border-radius:16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.talkz-callout__badge{
  width:34px;
  height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  background: rgba(45,140,255,.18);
  border: 1px solid rgba(45,140,255,.45);
  color: #cfe6ff;
  flex:0 0 auto;
}
.talkz-callout__title{
  font-weight:800;
  font-size:16px;
  margin:0 0 4px;
}
.talkz-callout__text{
  color: rgba(255,255,255,.78);
  font-size:13px;
  line-height:1.35;
}
.talkz-callout__link{
  display:inline-block;
  margin-top:10px;
  font-weight:800;
  font-size:13px;
  color:#9fd0ff;
  text-decoration:none;
}
.talkz-callout__link:hover{ text-decoration:underline; }
@media (max-width: 520px){
  .talkz-callout{ padding:14px; }
  .talkz-callout__title{ font-size:15px; }
}

/* ===== Privacy modal: replace the "Visibility" label with a short helper sentence ===== */
.privacy-heading{
  /* Hide original text while preserving spacing */
  font-size: 0 !important;
  line-height: 1.25 !important;
}
.privacy-heading::before{
  content: "Choose who can watch this video.";
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .60) !important;
}

/* ===== PATCH: Privacy heading color ===== */
.privacy-heading{
  color: rgba(255, 255, 255, .60) !important;
}

/* ==========================
   Member area: hide footer
   ========================== */
body.page-member footer,
body.member footer,
body.page-dashboard footer,
body.dashboard footer,
.member-shell footer,
.member-layout footer,
.dashboard-shell footer,
.dashboard-layout footer,
.member-footer,
#memberFooter,
#dashboardFooter{
  display: none !important;
}

/* ==========================
   Video page ad slots
   ========================== */
/* ==========================
   Video page ads
   Ensures desktop and mobile slots never show at the same time
   ========================== */
.page-video .talkz-ad{
  width: 100%;
  margin: 12px 0;
}
.page-video .talkz-ad--top{ margin-top: 8px; }
.page-video .talkz-ad--bottom{
  margin-top: 10px;
  margin-bottom: 12px;
}

.page-video .talkz-ad__slot{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Default: desktop slot */
.page-video .talkz-ad__slot--desktop{ display: flex !important; }
.page-video .talkz-ad__slot--mobile{ display: none !important; }

/* Small screens: mobile slot */
@media (max-width: 767.98px){
  .page-video .talkz-ad__slot--desktop{ display: none !important; }
  .page-video .talkz-ad__slot--mobile{ display: flex !important; }
}

/* Force desktop ads on computers, even if the window is narrow */
@media (hover:hover) and (pointer:fine){
  .page-video .talkz-ad__slot--desktop{ display: flex !important; }
  .page-video .talkz-ad__slot--mobile{ display: none !important; }
}

/* Force mobile ads on touch devices, even if the screen is large */
@media (hover:none) and (pointer:coarse){
  .page-video .talkz-ad__slot--desktop{ display: none !important; }
  .page-video .talkz-ad__slot--mobile{ display: flex !important; }
}
.page-video .talkz-ad__placeholder{
  width: 300px;
  height: 250px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  user-select: none;
}
.page-video .talkz-ad__ph-title{
  font-weight: 800;
  letter-spacing: -.01em;
  color: rgba(255,255,255,.85);
  font-size: 13px;
}
.page-video .talkz-ad__ph-size{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
@media (min-width: 768px){
  .page-video .talkz-ad__placeholder{
    width: 728px;
    height: 90px;
    flex-direction: row;
    gap: 10px;
  }
  .page-video .talkz-ad__ph-size{ margin-top: 0; }
}




/* =======================
   Site Scrollbar (Dark/Light)
   ======================= */

/* Firefox */
html.theme-dark{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) rgba(255,255,255,.06);
}
html.theme-light{
  scrollbar-width: thin;
  scrollbar-color: rgba(15,23,42,.28) rgba(15,23,42,.08);
}

/* WebKit (Chrome/Edge/Safari)
   Apply to the document + common scroll containers.
*/
html.theme-dark::-webkit-scrollbar,
html.theme-dark body::-webkit-scrollbar,
html.theme-dark *::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
html.theme-dark::-webkit-scrollbar-track,
html.theme-dark body::-webkit-scrollbar-track,
html.theme-dark *::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
}
html.theme-dark::-webkit-scrollbar-thumb,
html.theme-dark body::-webkit-scrollbar-thumb,
html.theme-dark *::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,0); /* keeps thumb slim */
  background-clip: padding-box;
}
html.theme-dark::-webkit-scrollbar-thumb:hover,
html.theme-dark body::-webkit-scrollbar-thumb:hover,
html.theme-dark *::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.26);
  background-clip: padding-box;
}

html.theme-light::-webkit-scrollbar,
html.theme-light body::-webkit-scrollbar,
html.theme-light *::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
html.theme-light::-webkit-scrollbar-track,
html.theme-light body::-webkit-scrollbar-track,
html.theme-light *::-webkit-scrollbar-track{
  background: rgba(15,23,42,.08);
}
html.theme-light::-webkit-scrollbar-thumb,
html.theme-light body::-webkit-scrollbar-thumb,
html.theme-light *::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.22);
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0);
  background-clip: padding-box;
}
html.theme-light::-webkit-scrollbar-thumb:hover,
html.theme-light body::-webkit-scrollbar-thumb:hover,
html.theme-light *::-webkit-scrollbar-thumb:hover{
  background: rgba(15,23,42,.32);
  background-clip: padding-box;
}

/* Corner */
html.theme-dark::-webkit-scrollbar-corner,
html.theme-dark body::-webkit-scrollbar-corner,
html.theme-dark *::-webkit-scrollbar-corner{
  background: rgba(255,255,255,.06);
}
html.theme-light::-webkit-scrollbar-corner,
html.theme-light body::-webkit-scrollbar-corner,
html.theme-light *::-webkit-scrollbar-corner{
  background: rgba(15,23,42,.08);
}

/* ========= Upload resume banner (home) ========= */
.upload-resume{
  margin: 10px 0 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(10,18,32,.65);
  color: #e8eefc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.upload-resume__text{
  font-size: 13px;
  line-height: 1.35;
  opacity: .95;
}
.upload-resume__actions{
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.upload-resume__btn{
  height: 34px;
  border-radius: 12px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #e8eefc;
  font-weight: 700;
  font-size: 12px;
}
.upload-resume__btn:hover{ background: rgba(255,255,255,.10); }
.upload-resume__btn.is-primary{
  border-color: rgba(63,131,248,.55);
  background: rgba(63,131,248,.20);
}

/* Bulk upload button in the list controls */
.bulk-upload-btn{
  /* Bring it ~5px closer to the Sort button */
  margin-left: -2px;
}

/* Make the "Copy link" micro-action clearer (higher contrast + copied state) */
html.theme-dark .copylink-mini{
  color: rgba(255,255,255,.72) !important;
  font-weight: 600;
}
html.theme-dark .copylink-mini i{
  color: rgba(255,255,255,.62) !important;
}
html.theme-dark .copylink-mini.is-copied{
  color: rgba(255,255,255,.95) !important;
  font-weight: 800;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
}
html.theme-dark .copylink-mini.is-copied i{
  color: rgba(255,255,255,.95) !important;
}

/* Mobile spacing: give the Upload bar some breathing room */
@media (max-width: 520px){
  .uploadbar{
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }
  .uploadbar__inner{
    gap: 10px;
  }
}


/* === Share + QR dialogs: match dark style (like main Share modal) === */
body.page-video .share-dialog,
body.page-video .qr-dialog{
  background: #0b0f16 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.45) !important;
  color: rgba(255,255,255,.92) !important;
}

body.page-video .share-header,
body.page-video .qr-header{
  padding: 16px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

body.page-video .share-title,
body.page-video .qr-title{
  color: rgba(255,255,255,.95) !important;
  font-weight: 600 !important; /* not bold-bold */
}

body.page-video .share-close{
  color: rgba(255,255,255,.75) !important;
}

body.page-video .share-body,
body.page-video .qr-body{
  padding: 14px 18px 18px !important;
}

body.page-video .share-link__input,
body.page-video .share-start__time,
body.page-video .share-body input[type="text"],
body.page-video .share-body input[type="email"],
body.page-video .share-body input[type="url"]{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;
}

body.page-video .share-link__input::placeholder,
body.page-video .share-start__time::placeholder{
  color: rgba(255,255,255,.45) !important;
}

body.page-video .share-link__btn,
body.page-video .share-link button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.92) !important;
}

body.page-video .share-link__btn:hover,
body.page-video .share-link button:hover{
  background: rgba(255,255,255,.12) !important;
}

/* QR layout */
body.page-video .qr-body{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

body.page-video .qr-imgwrap{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  background: #ffffff !important;
  padding: 14px !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.25) !important;
}

/* Remove any leftover light-theme text colors inside the share stack */
body.page-video .share-stack,
body.page-video .share-stack *{
  color: inherit;
}



/* Center QR code in QR modal */
.qr-dialog .qr-body{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}
.qr-dialog .qr-imgwrap{
  margin: 12px auto 0 auto !important;
}

/* Navbar (menu) container-fluid: make only the topbar full-width */
.topbar .wrap{max-width:none !important;}


/* Country restriction pickers */
.privacy-block select.form-control { height:auto; }