* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: #ffffff;
}

/* ===== SHARED ===== */

.hidden {
  display: none;
}

.status-message {
  margin: 16px 0;
  color: #d7d7d7;
  text-align: center;
}

.error {
  color: #ff9d9d;
}

.empty-message {
  padding: 18px;
  background: #6c4c4c;
  border-radius: 14px;
  color: #ffffff
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ===== LANDING ===== */

/* ===== LANDING PANEL GLOBAL ===== */
.landing-panel {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 32px;
  padding: 28px 20px 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  width: 100%;
}


.landing-body {
  background:
    linear-gradient(rgba(38, 30, 30, 0.82), rgba(38, 30, 30, 0.82)),
    url("assets/home_background/home_background.jpg");
  background-size: cover;
  background-position: center;
  min-height: 100vh;
}

.landing-container {
  max-width: 420px;
  margin: 0 auto;
  padding: 10px 20px 40px;
  text-align: center;
}

.landing-header {
  margin-bottom: 40px;
}

.landing-logo {
  width: 50%;
  max-width: 720px;
  display: block;
  margin: 0 auto;
}

.divider {
  height: 10px;
  width: 100%;
  margin: 24px auto 0;
  background: rgb(114 85 86);
  border-radius: 999px;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.menu-button {
  display: block;
  padding: 22px 20px;
  border-radius: 28px;
  border: 2px solid rgba(150, 150, 150, 0.75);
  background: rgba(30, 10, 10, 0.45);
  color: white;
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
  backdrop-filter: blur(2px);
}

.menu-button:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.06);
}

.menu-button.disabled {
  opacity: 1;
  pointer-events: none;
}

/* ===== BROWSE ===== */

.browse-body {
  background: #3a2825;
  min-height: 100vh;
}

.browse-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 8px;
  background: rgba(38, 30, 30, 0.92);
  backdrop-filter: blur(8px);
}

.browse-topbar h1 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
}

.back-button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  font-size: 2.4rem;
  line-height: 1;
  background: rgba(255, 255, 255, 0.03);
}

.topbar-spacer {
  width: 52px;
  height: 52px;
}

.browse-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.browse-logo-wrap {
  text-align: center;
  margin: 18px 0 30px;
}

.browse-logo-image {
  width: 50%;
  max-width: 300px;
  display: block;
  margin: 0 auto;
  margin-top: -35px;
}

/* ===== CATEGORY GRID ===== */

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 20px;
}

.category-card {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.1s ease;
}

.category-image-wrap {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  border: 5px solid #6d4344;
  background: #c6b7b4;
  aspect-ratio: 1 / 1;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/*
.category-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15),
    rgba(0,0,0,0.25)
  );
  pointer-events: none;
}
*/
.category-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.category-card:hover .category-image {
  transform: scale(1.03);
}

.category-card:active .category-image-wrap {
  transform: scale(0.97);
  box-shadow:
    0 4px 10px rgba(0,0,0,0.4),
    inset 0 0 0 1px rgba(255,255,255,0.08);
}

.category-label {
  margin-top: 12px;
  text-align: center;
  font-size: 1.05rem;
  color: #ffffff;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ===== VIDEOS LIST ===== */

.videos-body {
  background: #3a2825;
  min-height: 100vh;
}

.videos-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 8px;
  background: rgba(38, 30, 30, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.videos-topbar h1 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
}

.videos-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.video-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.video-list-card {
  cursor: pointer;
}

.video-list-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.video-list-thumb {
  width: 100%;
  display: block;
  border-radius: 24px;
  object-fit: cover;
}


.video-list-title {
  margin-top: 12px;
  font-size: 1.15rem;
  color: #ffffff;
}

/* ===== PLAYER ===== */

.player-body {
  background: #2b1e1c;
  min-height: 100vh;
}

.player-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 8px;
  background: rgba(38, 30, 30, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.player-topbar h1 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
}

.player-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.player-video-section {
  margin-bottom: 22px;
}

.player-frame-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #120f0f;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.native-player {
  width: 100%;
  height: 100%;
  display: block;
  background: #000000;
}

.player-info-section {
  padding: 4px 2px 0;
}

.player-video-title {
  margin: 0 0 10px;
  font-size: 1.4rem;
  line-height: 1.25;
}

.player-video-description {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #d4c6c6;
  white-space: pre-wrap;
}

.player-controls-section {
  margin-top: 28px;
}

.player-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.player-nav-button {
  min-width: 120px;
  padding: 14px 18px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.player-nav-button:hover {
  background: rgba(255, 255, 255, 0.14);
}

.player-nav-button:active {
  transform: scale(0.97);
}

.player-nav-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.player-position {
  flex: 1;
  text-align: center;
  color: #d4c6c6;
  font-size: 0.95rem;
}

.player-up-next-center {
  margin-top: 16px;
  text-align: center;
}

.player-side-label {
  font-size: 0.78rem;
  color: #8f8585;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.player-side-title {
  font-size: 0.95rem;
  color: #a79d9d;
  line-height: 1.35;
}

/* ===== RESPONSIVE ===== */

@media (min-width: 768px) {
  .landing-container {
    max-width: 520px;
  }

  .menu-button {
    font-size: 1.15rem;
  }

  .category-label {
    font-size: 1.15rem;
  }

  .video-list-title {
    font-size: 1.3rem;
  }

  .player-side-title {
    font-size: 1rem;
  }
}

.playlist-preview-container {
  padding-bottom: 56px;
}

.playlist-preview-action-section {
  margin-top: 18px;
}

.playlist-preview-select-button {
  width: 100%;
  padding: 16px 18px;
  border: 0;
  border-radius: 18px;
  background: #4a6fb3;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}

.playlist-preview-select-button:active {
  transform: scale(0.98);
}

.playlist-preview-select-button.is-selected {
  background: #355d2f;
}

.playlist-preview-select-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


/* ===== PLAYLISTS ===== */

.playlist-body {
  background: linear-gradient(180deg, #241917 0%, #2a1a18 100%);
  min-height: 100vh;
}

.playlist-ios-body {
  padding-bottom: 140px;
}

.playlist-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 8px;
  background: rgba(38, 30, 30, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.playlist-topbar h1 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
}

.playlist-container,
.playlist-ios-container {
  max-width: 920px;
  margin: 0 auto;
  padding: 18px 16px 120px;
}

.playlist-form-section {
  margin-bottom: 18px;
}

.playlist-label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.98rem;
  color: #ffffff;
}

.playlist-name-input {
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: rgba(77,55,55,0.46);
  color: #ffffff;
  font-size: 1rem;
  padding: 0 18px;
  outline: none;
}

.playlist-name-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.playlist-instructions-section {
  margin-bottom: 22px;
}

.playlist-instructions-section p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  line-height: 1.5;
}

.playlist-category-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.playlist-category-card {
  display: grid;
  grid-template-columns: 124px 1fr 24px;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  padding: 4px 2px;
}

.playlist-category-image-shell {
  width: 124px;
  height: 124px;
  padding: 4px;
  border-radius: 28px;
  border: 4px solid rgba(102, 45, 47, 0.6);
}

.playlist-category-image-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: #cfbfbc;
}

.playlist-category-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.playlist-category-title {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
}

.playlist-category-chevron {
  color: rgba(255, 255, 255, 0.16);
  font-size: 2.4rem;
  line-height: 1;
  text-align: center;
}

.playlist-summary-section {
  margin-top: 28px;
  margin-bottom:20px;
}

.playlist-summary-count {
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
  margin-bottom: 14px;
}

.playlist-selected-video-list,
.playlist-saved-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.playlist-empty-state,
.playlist-saved-empty {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
}

.playlist-draft-row,
.saved-playlist-card {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.playlist-draft-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
}

.playlist-draft-order {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 700;
  text-align: center;
}

.playlist-draft-info {
  min-width: 0;
}

.playlist-draft-title {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playlist-draft-meta {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.9rem;
}

.playlist-draft-remove,
.playlist-secondary-button,
.playlist-ios-secondary-button {
  border: 0;
  border-radius: 16px;
  background: #7f1717;
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
}

.playlist-draft-remove {
  padding: 10px 14px;
}

.playlist-ios-bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(37, 25, 23, 0) 0%, rgb(37 25 23 / 28%) 28%, rgb(37 25 23 / 56%) 100%);
}

.playlist-ios-bottom-bar-double {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.playlist-ios-primary-button,
.playlist-ios-primary-link,
.primary-action-button.link-button {
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 18px;
  margin-bottom: 20px;
  border: 0;
  border-radius: 24px;
  background: #7a1918;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.playlist-ios-primary-button:disabled {
  background: rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.82);
  cursor: not-allowed;
}

.playlist-ios-secondary-button {
  width: min(440px, 100%);
  min-height: 56px;
  margin: 0 auto;
  padding: 14px 20px;
  border-radius: 22px;
}

.playlist-category-container {
  padding-bottom: 20px;
}

.playlist-video-card-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.playlist-video-picker-row {
  display: grid;
  grid-template-columns: 1fr 64px;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 28px;
  background: rgb(98 89 89);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.22);
}

.playlist-video-main-link {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(120px, 42%) 1fr;
  align-items: center;
  gap: 16px;
  color: inherit;
  text-decoration: none;
}

.playlist-video-picker-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  display: block;
  background: #1b1b1b;
}

.playlist-video-picker-text {
  min-width: 0;
}

.playlist-video-picker-index {
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.playlist-video-picker-title {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.playlist-select-circle {
  width: 46px;
  height: 46px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  justify-self: center;
  position: relative;
}

.playlist-select-circle.selected::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #7a1918;
}

.playlist-name-badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
}

.saved-playlist-card {
  padding: 16px;
}

.saved-playlist-header {
  margin-bottom: 10px;
}

.saved-playlist-title {
  margin: 0 0 6px;
  font-size: 1.12rem;
  color: #ffffff;
}

.saved-playlist-meta,
.saved-playlist-preview {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.45;
}

.saved-playlist-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.saved-playlist-actions .playlist-secondary-button,
.saved-playlist-actions .primary-action-button.link-button {
  min-height: 48px;
  border-radius: 16px;
  width: auto;
  padding: 12px 16px;
  flex: 1;
}

@media (min-width: 768px) {
  .playlist-ios-container,
  .playlist-container {
    padding-left: 28px;
    padding-right: 28px;
  }

  .playlist-category-list {
    gap: 22px;
  }

  .playlist-video-picker-row {
    padding: 18px;
  }
}
/* ===== PLAYLISTS ===== */

.playlist-body {
  background: #2b1e1c;
  min-height: 100vh;
}

.playlist-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.playlist-create-card {
  display: block;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 20px;
  text-align: center;
  text-decoration: none;
  color: white;
  font-weight: 700;
  background: rgba(255,255,255,0.08);
}

.playlist-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px;
  margin-bottom: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
}

.playlist-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.playlist-count {
  font-size: 0.9rem;
  color: #c9bcbc;
}

.playlist-actions {
  display: flex;
  gap: 10px;
}

.play-btn {
  background: #662d2f;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
}

.delete-btn {
  background: rgba(255,255,255,0.1);
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
}
/* ===== MY PLAYLISTS PREMIUM ===== */

.playlist-body {
  background: #2b1e1c;
  min-height: 100vh;
}

.playlist-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.playlist-create-card {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: #ffffff;
  padding: 18px 20px;
  margin-bottom: 28px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s ease, background 0.15s ease;
}

.playlist-create-card:hover {
  background: rgba(255, 255, 255, 0.09);
}

.playlist-create-card:active {
  transform: scale(0.98);
}

.playlist-create-plus {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #662d2f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.playlist-create-title {
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.playlist-create-subtitle {
  font-size: 0.92rem;
  color: #c9bcbc;
}

.playlist-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.playlist-section-header h2 {
  margin: 0;
  font-size: 1.1rem;
  color: #ffffff;
}

.playlist-total {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
}

.playlist-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.playlist-premium-card {
  margin-bottom: 12px;
  padding: 18px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

.playlist-card-top {
  display: flex;
  gap: 16px;
  align-items: center;
}

.playlist-thumb-wrap {
  width: 108px;
  height: 108px;
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
  background: #1d1413;
  border: 4px solid rgba(102, 45, 47, 0.75);
}

.playlist-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.playlist-card-info {
  min-width: 0;
  flex: 1;
}

.playlist-card-title {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 1.15rem;
  line-height: 1.25;
}

.playlist-card-count {
  font-size: 0.92rem;
  color: #d7caca;
  margin-bottom: 8px;
}

.playlist-card-preview {
  margin: 0;
  font-size: 0.92rem;
  color: #fff;
  line-height: 1.4;
}

.playlist-card-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.playlist-play-button,
.playlist-delete-button,
.playlist-empty-button {
  border: 0;
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 0.98rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}

.playlist-play-button:active,
.playlist-delete-button:active,
.playlist-empty-button:active {
  transform: scale(0.98);
}

.playlist-play-button {
  flex: 1;
  background: #662d2f;
  color: #ffffff;
}

.playlist-play-button:hover {
  background: #783537;
}

.playlist-delete-button {
  min-width: 96px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.playlist-delete-button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.playlist-empty-state {
  text-align: center;
  padding: 44px 24px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

.playlist-empty-icon {
  font-size: 2rem;
  margin-bottom: 10px;
  opacity: 0.9;
}

.playlist-empty-state h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}

.playlist-empty-state p {
  margin: 0 0 20px;
  color: #c9bcbc;
  line-height: 1.5;
}

.playlist-empty-button {
  display: inline-block;
  background: #662d2f;
  color: #ffffff;
}

@media (max-width: 640px) {
  .playlist-card-top {
    align-items: flex-start;
  }

  .playlist-thumb-wrap {
    width: 92px;
    height: 92px;
  }

  .playlist-card-actions {
    flex-direction: column;
  }

  .playlist-delete-button {
    width: 100%;
  }
}

/* ===== TESTS ===== */

.test-body {
  background: #261e1e;
  min-height: 100vh;
}

.test-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.test-run-container {
  max-width: 860px;
}

.test-panel {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 26px;
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.action-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.test-panel h2 {
  margin: 0;
  font-size: 1.1rem;
}

.test-section-header-row,
.test-results-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.test-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.test-mode-button,
.stepper-button,
.text-action-button,
.info-icon-button,
.test-category-row,
.test-option-button,
.primary-action-button,
.secondary-action-button,
.primary-link-button,
.secondary-link-button,
.result-delete-button {
  font: inherit;
}

.test-mode-button,
.stepper-button,
.text-action-button,
.info-icon-button,
.primary-action-button,
.secondary-action-button,
.primary-link-button,
.secondary-link-button,
.result-delete-button {
  border: 0;
  border-radius: 16px;
  cursor: pointer;
}

.test-mode-button {
  padding: 14px 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 700;
}

.test-mode-button.active {
  background: #ffffff;
  color: #261e1e;
}

.info-icon-button {
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 700;
}

.text-action-button {
  padding: 10px 12px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.stepper-row {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  gap: 12px;
}

.stepper-button {
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.8rem;
}

.stepper-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.stepper-value {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  font-weight: 700;
}

.test-help-text {
  color: #d5c9c9;
  font-size: 0.95rem;
  margin: 10px 0 0;
}

.test-help-text.dimmed {
  opacity: 0.75;
}

.test-summary-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  margin-bottom: 14px;
  font-size: 0.94rem;
}

.test-category-list,
.test-options,
.results-list,
.results-missed-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.test-category-row {
  width: 100%;
  border: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  text-align: left;
  border-radius: 18px;
  cursor: pointer;
}

.test-category-row.selected {
  background: rgba(255, 255, 255, 0.14);
}

.test-category-thumb {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}

.test-category-copy {
  flex: 1;
  min-width: 0;
}

.test-category-title {
  font-weight: 700;
}

.test-category-check {
  font-size: 1.3rem;
  color: #b9ffb1;
}

.primary-action-button,
.primary-link-button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-top: 14px;
  padding: 16px;
  background: #ffffff;
  color: #ffffff;
  font-weight: 700;
}

.primary-action-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.secondary-action-button,
.secondary-link-button,
.result-delete-button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 14px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 700;
}

.test-video-shell {
  margin-bottom: 16px;
}

.test-video-player {
  width: 100%;
  border-radius: 20px;
  background: #000;
  max-height: 58vh;
}

.test-progress-label {
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 6px;
}

.test-option-button {
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.test-option-button.selected {
  background: rgba(255, 255, 255, 0.2);
}

.test-option-scroll {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.test-option-scroll::-webkit-scrollbar {
  display: none;
}

.test-option-check {
  color: #b9ffb1;
  font-weight: 700;
}

.results-mode-line,
.results-score-line {
  text-align: center;
}

.results-mode-line {
  color: rgba(255,255,255,0.88);
  font-weight: 700;
}

.results-score-line {
  color: #fff;
  font-size: 1.06rem;
  line-height: 1.5;
}

.results-subheading {
  font-weight: 700;
  margin-bottom: 8px;
}

.results-missed-item {
  color: rgba(255,255,255,0.92);
}

.result-card {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

.result-card-top,
.result-card-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.result-card-bottom {
  margin-top: 10px;
  color: #d5c9c9;
  font-size: 0.94rem;
}

.result-title-wrap {
  min-width: 0;
  flex: 1;
}

.result-title {
  font-weight: 700;
  margin-bottom: 6px;
}

.result-categories {
  color: #d5c9c9;
  line-height: 1.4;
}

.result-score-badge {
  min-width: 70px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  text-align: center;
  font-weight: 700;
}

.result-percent {
  color: #fff;
  font-weight: 700;
}

.result-delete-button {
  margin-top: 14px;
}

@media (max-width: 640px) {
  .test-container {
    padding: 16px 12px 30px;
  }

  .test-panel {
    border-radius: 22px;
    padding: 14px;
  }

  .stepper-row {
    grid-template-columns: 46px 1fr 46px;
    gap: 8px;
  }

  .stepper-button {
    width: 46px;
    height: 46px;
  }

  .result-card-top,
  .result-card-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ===== TEST IOS POLISH ===== */
.ios-like-page {
  padding-bottom: 150px;
}

.test-topbar {
  background: rgba(38, 30, 30, 0.96);
}

.test-topbar h1 {
  font-size: 1.2rem;
  font-weight: 800;
}

.circle-icon-button,
.topbar-text-button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.9);
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: 700;
}

.circle-icon-button {
  font-size: 1.5rem;
  line-height: 1;
}

.topbar-text-button {
  width: auto;
  min-width: 52px;
  padding: 0 14px;
  font-size: 1rem;
  text-decoration: underline;
}

.test-setup-container,
.results-screen-container {
  max-width: 860px;
  padding-top: 8px;
}

.test-section-block {
  margin-bottom: 22px;
}

.test-section-block h2,
.compact-header-row h2 {
  margin: 0 0 12px;
  margin-top: 23px;
  color: #fff;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  font-weight: 800;
}

.compact-header-row {
  margin-bottom: 12px;
}

.ios-segment-shell,
.ios-stepper-shell,
.ios-card-panel {
  background: #eceaea;
  border-radius: 34px;
  padding: 12px;
  color: #000;
}

.ios-segment-toggle {
  gap: 0;
  background: #d9d9d9;
  border-radius: 999px;
  padding: 4px;
}

.ios-segment-toggle .test-mode-button {
  background: transparent;
  color: #000;
  border-radius: 999px;
  min-height: 54px;
  font-size: 1rem;
}

.ios-segment-toggle .test-mode-button.active {
    background: #aa9896;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}

.ios-stepper-shell {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.ios-stepper-value {
  background: transparent;
  color: #000;
  justify-content: flex-start;
  text-align: left;
  padding: 0 10px;
  min-height: 56px;
  font-size: 1rem;
}

.ios-stepper-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 2px solid rgba(0,0,0,0.18);
  border-radius: 999px;
  overflow: hidden;
}

.ios-stepper-button {
  width: 72px;
  height: 56px;
  background: transparent;
  color: #000;
  border-radius: 0;
}

.ios-stepper-button + .ios-stepper-button {
  border-left: 2px solid rgba(0,0,0,0.3);
}

.category-card-panel {
  padding-top: 8px;
  padding-bottom: 8px;
}

.select-all-row,
.ios-category-row {
  background: transparent;
  color: #000;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 18px;
}

.select-all-row .test-category-title,
.ios-category-row .test-category-title {
  color: #000;
  font-size: 1rem;
}

.select-all-row .test-category-check,
.ios-category-row .test-category-check {
  color: rgba(0,0,0,0.35);
  font-size: 1.9rem;
  line-height: 1;
}

.select-all-row.selected .test-category-check,
.ios-category-row.selected .test-category-check {
  color: #000;
}

.separated-list {
  gap: 0;
}

.ios-list-divider {
  height: 1px;
  background: rgba(0,0,0,0.12);
  margin: 0 10px;
}

.sticky-test-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 18px calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(38,30,30,0.98), rgba(38,30,30,0.88), transparent);
}

.sticky-test-footer-inner {
  max-width: 860px;
  margin: 0 auto;
  background: rgba(0,0,0,0.18);
  border-radius: 38px;
  padding: 14px;
}

.ios-primary-button {
  border-radius: 24px;
  min-height: 68px;
  background: #8d898a;
  color: white;
  font-size: 1.05rem;
  font-weight: 800;
}

.ios-primary-button:disabled {
  opacity: 1;
  background: #ffffff;
  color: rgba(0,0,0,0.78);
}

.share-panel {
  background: rgba(255,255,255,0.12);
  border-radius: 36px;
  padding: 14px;
  margin-bottom: 22px;
}

.ios-secondary-button {
  border-radius: 24px;
  min-height: 68px;
  background: rgba(255,255,255,0.22);
  color: #fff;
  font-size: 1.05rem;
}

.results-ios-list {
  gap: 0;
}

.ios-result-card {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 18px 2px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.result-right-side {
  text-align: right;
  min-width: 72px;
}

.result-score-large {
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
}

.result-date {
  margin-top: 10px;
  color: rgba(255,255,255,0.7);
  font-size: 0.96rem;
}


.dvoc-modal-title {
  font-size: 1.2rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 14px;
}

.dvoc-modal-body {
  color: rgba(0,0,0,0.72);
  font-size: 1.05rem;
  line-height: 1.45;
}

.dvoc-modal-body p {
  margin: 0 0 18px;
}

.dvoc-modal-button {
  width: 100%;
  min-height: 64px;
  border: 0;
  border-radius: 22px;
  background: rgba(0,0,0,0.12);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
}

@media (max-width: 640px) {
  .ios-stepper-shell {
    grid-template-columns: 1fr auto;
  }

  .ios-stepper-button {
    width: 56px;
  }

  .sticky-test-footer {
    padding-left: 10px;
    padding-right: 10px;
  }
}
/* =========================================================
   DVOC RESPONSIVE FOUNDATION
   Safe append-only utilities for mobile-first + desktop
   Add at the VERY BOTTOM of the existing style.css
   ========================================================= */

/* Shared page width wrapper */
.dvoc-shell {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Vertical rhythm */
.dvoc-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dvoc-stack-lg {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Generic responsive grid */
.dvoc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .dvoc-grid.dvoc-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .dvoc-grid.dvoc-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dvoc-grid.dvoc-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Two-column desktop split for pages that need list + detail */
.dvoc-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 1024px) {
  .dvoc-split {
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    align-items: start;
  }
}

/* Touch-first sections/cards without forcing a redesign */
.dvoc-panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 16px;
}

@media (min-width: 768px) {
  .dvoc-panel {
    padding: 20px;
  }
}

/* Safer media sizing helpers */
.dvoc-media {
  width: 100%;
  display: block;
}

.dvoc-media-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}

/* Mobile-first button rhythm helper */
.dvoc-touch-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) {
  .dvoc-touch-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

/* Desktop-only enhancement hook */
.dvoc-desktop-only {
  display: none;
}

@media (min-width: 1024px) {
  .dvoc-desktop-only {
    display: block;
  }
}

/* Mobile-only enhancement hook */
.dvoc-mobile-only {
  display: block;
}

@media (min-width: 1024px) {
  .dvoc-mobile-only {
    display: none;
  }
}

/* Safer spacing helpers */
.dvoc-mt-8  { margin-top: 8px; }
.dvoc-mt-12 { margin-top: 12px; }
.dvoc-mt-16 { margin-top: 16px; }
.dvoc-mt-20 { margin-top: 20px; }
.dvoc-mt-24 { margin-top: 24px; }

.dvoc-mb-8  { margin-bottom: 8px; }
.dvoc-mb-12 { margin-bottom: 12px; }
.dvoc-mb-16 { margin-bottom: 16px; }
.dvoc-mb-20 { margin-bottom: 20px; }
.dvoc-mb-24 { margin-bottom: 24px; }

/* Slightly roomier desktop shell */
@media (min-width: 1024px) {
  .dvoc-shell {
    padding-left: 24px;
    padding-right: 24px;
  }
}
/* Override category grid for desktop */
@media (min-width: 1024px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* ===== VIDEOS GRID UPGRADE ===== */

.video-list {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 26px;
}

/* Tablet */
@media (min-width: 768px) {
  .video-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .video-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Make cards nicer in grid */
.video-list-card {
  height: 100%;
}

.video-list-link {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* ===== PLAYER DESKTOP UPGRADE ===== */

/* Improve spacing on desktop */
@media (min-width: 1024px) {
  .player-video-section {
    margin-bottom: 0;
  }

  .player-info-section {
    padding-left: 10px;
  }

  .player-controls-section {
    margin-top: 24px;
  }
}

/* Make right column feel like a panel */
@media (min-width: 1024px) {
  .player-info-section,
  .player-controls-section {
    background: rgba(255, 255, 255, 0.04);
    padding: 18px;
    border-radius: 18px;
  }

  .player-info-section {
    margin-bottom: 16px;
  }
}
/* ===== PLAYER DESKTOP TUNING ===== */

/* Give player page more width than the normal 900px container */
@media (min-width: 1024px) {
  .player-container {
    max-width: 1280px;
  }
}

/* Do NOT split yet on normal desktop/laptop widths */
@media (min-width: 1024px) and (max-width: 1399px) {
  .player-container .dvoc-split {
    grid-template-columns: 1fr;
  }

  .player-info-section,
  .player-controls-section {
    background: transparent;
    padding: 4px 2px 0;
    border-radius: 0;
  }

  .player-info-section {
    margin-bottom: 0;
  }
}

/* Only use split layout on larger screens */
@media (min-width: 1400px) {
  .player-container .dvoc-split {
    grid-template-columns: minmax(0, 2fr) minmax(320px, 380px);
    gap: 28px;
    align-items: start;
  }

  .player-video-section {
    margin-bottom: 0;
  }

  .player-info-section,
  .player-controls-section {
    background: rgba(255, 255, 255, 0.04);
    padding: 18px;
    border-radius: 18px;
  }

  .player-info-section {
    margin-bottom: 16px;
  }
}
/* ===== PLAYLIST PLAYER POLISH ===== */

/* Give playlist player more width */
@media (min-width: 1024px) {
  .player-container {
    max-width: 1280px;
  }
}

/* Slight visual distinction for playlist mode */
.player-body {
  background: #3a2825;
}

/* Emphasize playlist title */
#playlist-player-page-title {
  font-weight: 800;
}

/* Improve spacing */
@media (min-width: 1024px) {
  .player-info-section,
  .player-controls-section {
    background: rgba(255, 255, 255, 0.04);
    padding: 18px;
    border-radius: 18px;
  }

  .player-info-section {
    margin-bottom: 16px;
  }
}
/* ===== LANDING DESKTOP UPGRADE ===== */

/* Expand container on desktop */
@media (min-width: 1024px) {
  .landing-container {
    max-width: 1000px;
    padding-top: 80px;
  }
}

/* Bigger logo presence */
@media (min-width: 1024px) {
  .landing-logo {
    max-width: 640px;
  }
}

/* Menu becomes grid on desktop */
@media (min-width: 768px) {
  .menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Make buttons feel better on desktop */
@media (min-width: 1024px) {
  .menu-button {
    font-size: 1.1rem;
    padding: 26px 22px;
  }
}
/* ===== DESKTOP HERO LANDING ===== */

/* Full hero background behavior */
.landing-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Desktop panel */
@media (min-width: 1024px) {

  .landing-panel {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-radius: 32px;
    padding: 40px 40px 32px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
    max-width: 900px;
    width: 100%;
  }

  /* Bigger logo */
  .landing-logo {
    max-width: 800px;
  }

  /* Better spacing */
  .landing-header {
    margin-bottom: 30px;
  }

  /* Grid menu */
  .menu {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Bigger buttons */
  .menu-button {
    padding: 26px;
    font-size: 1.1rem;
  }

}
/* ===== BUTTON REFINEMENT (DESKTOP) ===== */

@media (min-width: 1024px) {
  .menu-button {
    border-width: 2px; /* half of 8px */
  }
}
/* ===== LOGO SWITCH (MOBILE vs DESKTOP) ===== */

/* Default: mobile */
.logo-desktop {
  display: none;
}

/* Desktop only */
@media (min-width: 1024px) {
  .logo-mobile {
    display: none;
  }

  .logo-desktop {
    display: block;
  }
}
/* ===== LOGIN PAGE ===== */

.login-info {
  margin-bottom: 28px;
  color: #ffffff;
  text-align: left;
}

.login-info h2 {
  margin-bottom: 6px;
  font-size: 1.3rem;
}

.login-price {
  font-weight: 700;
  margin-bottom: 14px;
}

.login-info p {
  margin-bottom: 12px;
  line-height: 1.5;
  color: #e2d6d6;
}

/* Inputs cleaner */
.login-input {
  border: none;
  outline: none;
  text-align: left;
  padding-left: 20px;
}

/* Back button alignment */
.login-back {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Desktop layout */
@media (min-width: 1024px) {

  .login-form {
    max-width: 420px;
    margin: 0 auto;
  }

  .login-info {
    max-width: 720px;
    margin: 0 auto 32px;
    text-align: center;
  }

}/* ===== LOGIN BUTTON CENTER FIX ===== */

.login-form {
  max-width: 420px;
  margin: 0 auto;
}

/* Desktop: center everything nicely */
@media (min-width: 1024px) {
  .login-form {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .login-form .menu-button {
    width: 100%;
    max-width: 320px;
  }

  .login-form input.menu-button {
    max-width: 320px;
  }
}


/* ===== LOGIN FINAL LAYOUT (2-COLUMN BUTTONS, NO BACK) ===== */

.login-form {
  max-width: 420px;
  margin: 0 auto;
}

/* Inputs full width */
.login-form input.menu-button {
  width: 100%;
}

/* Desktop layout */
@media (min-width: 1024px) {

  .login-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 500px;
    margin: 0 auto;
  }

  /* Inputs span full width */
  .login-form input.menu-button {
    grid-column: span 2;
  }

  /* Buttons side-by-side */
  #login {
    grid-column: 1;
  }

  #signup {
    grid-column: 2;
  }

}
/* ===== LOGIN INPUT CENTER FIX ===== */

@media (min-width: 1024px) {

  .login-form input.menu-button {
    grid-column: span 2;
    justify-self: center;   /* 👈 THIS is the key */
    width: 100%;
    max-width: 320px;
  }

}
/* ===== DESKTOP NAVBAR TUNING ===== */

.dvoc-navbar {
  display: none;
}

@media (min-width: 1024px) {
  .dvoc-navbar {
    display: grid;
    grid-template-columns: 220px 1fr auto;
    align-items: center;
    padding: 14px 24px;
    background: rgba(92, 42, 43, 0.6);
    color: white;
    position: sticky;
    top: 0;
    z-index: 200;
    column-gap: 32px;
  }

  .dvoc-nav-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .dvoc-nav-logo {
    height: 40px;
    display: block;
  }

  .dvoc-nav-center {
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* left align */
    gap: 28px;
  }

  .dvoc-nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .dvoc-nav-link {
    color: white;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }

  .dvoc-nav-link:hover {
    opacity: 0.85;
  }
}


/* ===== NAV DROPDOWN FIX (FINAL) ===== */

@media (min-width: 1024px) {
  .dvoc-nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .dvoc-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% - 2px);
    right: 0;
    left: auto;
    background: #3a1f1f;
    border-radius: 12px;
    padding: 8px;
    min-width: 180px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    z-index: 250;
  }

  .dvoc-dropdown-menu a {
    display: block;
    padding: 10px 12px;
    color: white;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 8px;
  }

  .dvoc-dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .dvoc-nav-dropdown:hover .dvoc-dropdown-menu {
    display: block;
  }

  .dvoc-user-pill {
    background: rgba(255,255,255,0.2);
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
  }
}


.reverse-prompt-shell {
  margin-bottom: 16px;
  padding: 18px 20px;
  border-radius: 24px;
  background: rgba(255,255,255,0.08);
  text-align: center;
}

.reverse-prompt-label {
  color: rgba(255,255,255,0.75);
  font-size: 0.92rem;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.reverse-prompt-title {
  color: #fff;
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  line-height: 1.25;
  font-weight: 800;
}

.reverse-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.reverse-video-option {
  border: 0;
  border-radius: 20px;
  padding: 10px;
  background: rgba(0,0,0,0.24);
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.reverse-video-option:active {
  transform: scale(0.985);
}

.reverse-video-option.selected {
  background: rgba(255,255,255,0.18);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.22) inset;
}

.reverse-video-media {
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}

.reverse-video-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

.reverse-video-badge {
  margin-top: 10px;
  text-align: center;
  font-size: 0.94rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}

.result-direction {
  color: rgba(255,255,255,0.82);
  font-size: 0.92rem;
  margin-bottom: 6px;
}

@media (max-width: 640px) {
  .reverse-video-grid {
    grid-template-columns: 1fr;
  }

  .reverse-prompt-shell {
    padding: 16px;
  }
}


.three-up-toggle {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.three-up-toggle .test-mode-button {
  font-size: 0.95rem;
  padding-left: 8px;
  padding-right: 8px;
}

.test-category-copy {
  min-width: 0;
  flex: 1;
}

.test-category-meta {
  margin-top: 4px;
  font-size: 0.86rem;
  color: rgba(0,0,0,0.62);
}

.playlist-loading-row {
  margin: 0;
  padding: 8px 6px;
}

@media (max-width: 640px) {
  .three-up-toggle .test-mode-button {
    font-size: 0.84rem;
    min-height: 50px;
  }
}

/* ===== SEARCH ===== */
.dvoc-search-panel {
  margin: 0 0 20px;
}

.dvoc-search-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.dvoc-search-input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(77,55,55,0.46);
  color: #fff;
  font-size: 16px;
}

.dvoc-search-button,
.dvoc-search-clear-button,
.playlist-search-add-button {
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-size: 15px;
}

.dvoc-search-button,
.playlist-search-add-button {
  background: #775456;
  color: #ffffff;
  font-weight: 600;
}

.dvoc-search-input::-webkit-input-placeholder {
  color: #958b8b;
}

.dvoc-search-clear-button {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.dvoc-search-clear-button:hover,
.dvoc-search-button:hover,
.playlist-search-add-button:hover {
  opacity: 0.92;
}

.browse-results-header {
  margin: 10px 0 16px;
}

.browse-results-title {
  margin: 0;
  font-size: 20px;
}

.browse-search-card .video-list-link {
  display: block;
}

.browse-search-category {
  margin-top: 8px;
  font-size: 13px;
  opacity: 0.75;
}

.playlist-search-row {
  align-items: center;
}

.playlist-search-main-link {
  cursor: default;
}

.playlist-search-add-button.selected,
.playlist-search-add-button:disabled {
  background: rgba(255,255,255,0.2);
  color: #fff;
  cursor: default;
}

@media (max-width: 640px) {
  .dvoc-search-button,
  .dvoc-search-clear-button {
    flex: 1 1 calc(50% - 5px);
  }
}


/* ===== PREVIEW PLAYER SIZE FIX ===== */
.playlist-preview-player-wrapper {
  max-width: 420px;
  margin: 24px auto 0;
}

#playlist-preview-player {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: 12px;
}
/* ===== PLAYLIST CATEGORY GRID (RESPONSIVE) ===== */

/* Desktop: 2 columns */
@media (min-width: 1024px) {
  .playlist-category-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

/* Large screens: 4 columns */
@media (min-width: 1400px) {
  .playlist-category-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* ===== PLAYLIST CATEGORY GRID (RESPONSIVE + DESKTOP CARD POLISH) ===== */

/* Desktop: 3 columns */
@media (min-width: 1024px) {
  .playlist-category-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
  }

  .playlist-category-card {
    min-height: 150px;
    padding: 16px 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.22),
      inset 0 0 0 1px rgba(255,255,255,0.03);
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  }

  .playlist-category-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.08);
    box-shadow:
      0 16px 32px rgba(0, 0, 0, 0.26),
      inset 0 0 0 1px rgba(255,255,255,0.05);
  }

  .playlist-category-card:active {
    transform: scale(0.99);
  }

  .playlist-category-title {
    font-size: 1.15rem;
  }

  .playlist-category-chevron {
    color: rgba(255, 255, 255, 0.28);
  }
}

/* Large screens: 5 columns */
@media (min-width: 1400px) {
  .playlist-category-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
/* ===== DESKTOP CATEGORY CARD REFINEMENT ===== */

@media (min-width: 1024px) {

  /* Stack image + title vertically */
  .playlist-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px;
  }

  /* Make image sit nicely */
  .playlist-category-card img {
    margin-bottom: 10px;
  }

  /* Move title under image */
  .playlist-category-title {
    margin-top: 6px;
    font-size: 1rem;
  }

  /* Make red stroke thinner */
  .playlist-category-card img,
  .playlist-category-card .playlist-category-thumbnail {
    border: 2px solid rgba(145, 129, 129, 0.6); /* half thickness feel */
  }

  /* Optional: soften hover a bit */
  .playlist-category-card:hover {
    transform: translateY(-2px);
  }
}
/* ===== DESKTOP CATEGORY TILE STYLE (FIXED SPACING) ===== */

@media (min-width: 1024px) {

  .playlist-category-list {
    justify-items: center;
    gap: 32px;
  }

  .playlist-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    width: 100%;
    max-width: 180px;

    height: 200px;

    padding: 16px;
    border-radius: 24px;

    background: rgba(255, 255, 255, 0.05);
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.25),
      inset 0 0 0 1px rgba(255,255,255,0.04);

    transition: transform 0.15s ease, background 0.15s ease;
  }

  .playlist-category-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.08);
  }

  .playlist-category-thumbnail {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 20px;
    border: 2px solid rgba(145, 129, 129, 0.6);
    margin-bottom: 10px;
  }

  .playlist-category-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 6px;
  }

  .playlist-category-chevron {
    display: none;
  }
}
/* ===== SPACING BETWEEN VIDEO ROWS ===== */

.playlist-video-picker-row {
  margin-bottom: 16px;
}
/* ===== VIDEO ROW BACKGROUND COLOR ===== */

.playlist-video-row {
  background: #382d2c !important;
}

/* ===== SHARED TOPBAR SYSTEM (FINAL + BACKGROUND CONTROL) ===== */

/* Global defaults */
:root {
  --topbar-bg: transparent;

  --topbar-text-color: #ffffff;
  --topbar-icon-color: #ffffff;
  --topbar-icon-border-color: rgba(255, 255, 255, 0.18);
  --topbar-icon-bg: rgba(255, 255, 255, 0.03);
}

/* Shared topbar layout */
.shared-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  height: 60px;
  padding: 0 16px;

  background: var(--topbar-bg);
  color: var(--topbar-text-color);
}

/* Title */
.shared-topbar h1 {
  font-size: 14px;
  font-weight: 300;
  margin: 0;
  color: var(--topbar-text-color);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tablet */
@media (min-width: 768px) {
  .shared-topbar h1 {
    font-size: 12px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .shared-topbar h1 {
    font-size: 16px;
  }
}

/* Back button */
.shared-topbar .back-button {
  min-width: 100px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  flex-shrink: 0;
  white-space: nowrap;

  color: var(--topbar-icon-color);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;

  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  transition: background 0.15s ease,
              transform 0.15s ease,
              border-color 0.15s ease;
}

.shared-topbar .back-button:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255,255,255,0.22);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .shared-topbar .back-button {
    min-width: 100px;
    height: 38px;
    padding: 0 14px;
    font-size: 0.9rem;
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* Spacer */
.shared-topbar .topbar-spacer {
  width: 78px;
  height: 38px;
}

@media (max-width: 640px) {
  .shared-topbar .topbar-spacer {
    width: 72px;
    height: 36px;
  }
}

/* ===== OPTIONAL PER-PAGE CONTROL ===== */

.browse-topbar {
  --topbar-bg: transparent;
}

.videos-topbar {
  --topbar-bg: transparent;
}

.player-topbar {
  --topbar-bg: transparent;
}

.playlist-topbar {
  --topbar-bg: transparent;
}

.test-topbar {
  --topbar-bg: transparent;

  --topbar-icon-border-color: rgba(255, 255, 255, 0.9);
  --topbar-icon-bg: transparent;
}
/* ===== PLAYER CATEGORY LIST ===== */

.player-category-list-section {
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.04);
  padding: 18px;
  border-radius: 18px;
}

.player-category-video-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

/* Base item */
.player-category-video-item {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  font: inherit;
  cursor: pointer;

  opacity: 0.65;
  transition: background 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
}

/* Hover (desktop feel) */
.player-category-video-item:hover {
  background: rgba(255, 255, 255, 0.08);
  opacity: 1;
}

/* Active = currently playing */
.player-category-video-item.is-active {
  background: rgba(255, 255, 255, 0.16);
  opacity: 1;
  font-weight: 700;
}

/* Optional: subtle "pressed" feel */
.player-category-video-item:active {
  transform: scale(0.98);
}
/* ===== PLAYER EARLIER DESKTOP BREAKPOINT ===== */

/* Start "desktop-ish" player layout earlier */
@media (min-width: 860px) {
  .player-container {
    max-width: 1180px;
  }

  .player-container .dvoc-split {
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 360px);
    gap: 24px;
    align-items: start;
  }

  .player-video-section {
    margin-bottom: 0;
  }

  .player-info-section,
  .player-controls-section {
    background: rgba(255, 255, 255, 0.04);
    padding: 18px;
    border-radius: 18px;
  }

  .player-info-section {
    margin-bottom: 16px;
  }
}
/* ===== PLAYLIST PLAYER HOVER CONTROLS ===== */

.playlist-player-frame-wrap video::-webkit-media-controls {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.playlist-player-frame-wrap:hover video::-webkit-media-controls {
  opacity: 1;
}

/* ===== PLAYLIST PLAYER VIDEO LIST ===== */

#playlist-video-list-panel {
  max-height: none;
  overflow-y: auto;
}
/* ===== PLAYLIST PLAYER VIDEO INTERACTION ===== */

#playlist-video-player {
  cursor: pointer;
}



/* ===== BILLING / ACCESS UI POLISH ===== */

.billing-panel {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#billing-title {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  font-weight: 800;
  color: #ffffff;
  text-align: center;
}

.billing-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.billing-button {
  min-width: 240px;
  min-height: 54px;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.billing-button:hover {
  background: rgba(255,255,255,0.18);
}

.billing-button:active {
  transform: scale(0.98);
}

.billing-button.primary {
  background: #8e5a5a;
}

.billing-button.primary:hover {
  background: #a16666;
}

.billing-status {
  min-height: 24px;
  color: rgba(255,255,255,0.82);
  text-align: center;
  font-size: 0.96rem;
}

.billing-status-error {
  color: #ffb7b7;
}

.billing-status-ok {
  color: rgba(255,255,255,0.82);
}

/* Locked state for landing buttons */
.menu-button-locked.menu-button {
  position: relative;
  opacity: 0.58;
  filter: saturate(0.75);
  background: rgba(20, 12, 12, 0.32);
  border-color: rgba(150, 113, 113, 0.2);
  cursor: not-allowed;
}

.menu-button-locked.menu-button:hover {
  transform: none;
  background: rgba(20, 12, 12, 0.32);
}

.menu-button-locked.menu-button::after {
  content: attr(data-lock-label);
  position: absolute;
  right: 16px;
  top: 14px;
  font-size: 0.78rem;
  line-height: 1;
  color: rgba(255,255,255,0.7);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Only show lock icon when label exists */
.menu-button-locked.menu-button[data-lock-label]::after {
  content:  attr(data-lock-label);
}

.menu-button-locked.menu-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.08));
  pointer-events: none;
}

/* Locked state for desktop nav */
@media (min-width: 1024px) {
  .dvoc-nav-link.menu-button-locked,
  .dvoc-dropdown-menu a.menu-button-locked {
    opacity: 0.45;
    pointer-events: auto;
    cursor: not-allowed;
  }

  .dvoc-nav-link.menu-button-locked,
  .dvoc-dropdown-menu a.menu-button-locked {
    opacity: 0.45;
    pointer-events: auto;
    cursor: not-allowed;
  }

  .dvoc-nav-link.menu-button-locked::after,
  .dvoc-dropdown-menu a.menu-button-locked::after {
    content: none;
  }
}

/* Small polish for active profile status tile */
#profile-button {
  background: rgba(255,255,255,0.08);
}

@media (max-width: 767px) {
  #billing-title {
    font-size: 1.15rem;
  }

  .billing-button {
    width: 100%;
    min-width: 0;
  }

  .menu-button-locked.menu-button::after {
    top: 10px;
    right: 12px;
    font-size: 0.72rem;
  }
}


/* ===== ACTIVE PLAN TEXT REFINEMENT ===== */

.billing-panel.active-plan #billing-title {
  font-size: 0.95rem;
  font-weight: 500;
  opacity: 0.85;
  margin-top: 18px;
}



/* ===== ORGANIZATION DASHBOARD ===== */
.organization-page { padding-top: 10px; }
.organization-summary-panel { gap: 18px; }
.organization-summary-head { display: flex; flex-direction: column; gap: 14px; }
.organization-summary-head h1 { margin: 0; font-size: 1.6rem; }
.organization-meta-line { margin: 4px 0 0; color: rgba(255,255,255,0.74); }
.organization-stats { margin-top: 6px; }
.organization-stat-card { background: rgba(255,255,255,0.06); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.organization-stat-label { color: rgba(255,255,255,0.72); font-size: 0.9rem; }
.organization-stat-card strong { font-size: 1.35rem; }
.organization-invite-output { width: 100%; }
.organization-invite-card { background: rgba(255,255,255,0.06); border-radius: 18px; padding: 16px; text-align: left; }
.organization-invite-title { font-weight: 700; margin-bottom: 10px; }
.organization-invite-link a { color: #fff; word-break: break-all; }
.organization-invite-meta { margin-top: 10px; color: rgba(255,255,255,0.72); font-size: 0.92rem; }
.organization-members-head { margin-bottom: 16px; }
.organization-members-head h2 { margin: 0 0 8px; }
.organization-members-list { display: flex; flex-direction: column; gap: 12px; }
.organization-member-row { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 18px; background: rgba(255,255,255,0.06); }
.organization-member-title { font-weight: 700; font-size: 1rem; }
.organization-member-meta, .organization-member-seat { color: rgba(255,255,255,0.72); margin-top: 4px; font-size: 0.92rem; }
.organization-member-actions { display: flex; flex-direction: column; gap: 10px; }
.organization-action-button { min-height: 46px; padding: 12px 14px; border-radius: 14px; border: 0; background: rgba(255,255,255,0.12); color: #fff; font-weight: 700; cursor: pointer; }
.organization-action-button.danger { background: rgba(140, 32, 32, 0.85); }
.organization-action-button:disabled { opacity: 0.45; cursor: not-allowed; }
@media (min-width: 860px) { .organization-summary-head { flex-direction: row; align-items: center; justify-content: space-between; } .organization-member-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; } .organization-member-actions { flex-direction: row; min-width: 260px; justify-content: flex-end; } }



.entry-screen {
  max-width: 520px;
}

.entry-copy {
  margin-bottom: 28px;
}

.entry-menu {
  margin-top: 18px;
}

.login-input {
  width: 100%;
  text-align: left;
}

/* ===== ORGANIZATION Landing ===== */
.org-info-page {
  background: #261e1e;
  color: #f5f1eb;
  min-height: 100vh;
}

.org-info-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

.org-hero {
  text-align: center;
  margin-bottom: 48px;
}

.org-hero h1 {
  font-size: 2.4rem;
  line-height: 1.2;
  margin-bottom: 16px;
}

.org-subheadline {
  font-size: 1.2rem;
  margin-bottom: 16px;
  color: #f0d8b8;
}

.org-intro {
  max-width: 700px;
  margin: 0 auto 28px;
  line-height: 1.6;
  color: #e7ddd3;
}

.org-hero-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.org-section,
.org-bottom-cta {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 18px;
  padding: 28px 24px;
  margin-bottom: 24px;
}

.org-section h2,
.org-bottom-cta h2 {
  margin-top: 0;
  margin-bottom: 14px;
  font-size: 1.4rem;
}

.org-section p,
.org-bottom-cta p {
  line-height: 1.6;
  color: #e7ddd3;
}

.org-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.org-step-card {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  padding: 20px;
}

.org-step-card h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.05rem;
}

.org-feature-list {
  padding-left: 20px;
  line-height: 1.8;
  color: #e7ddd3;
}

.org-bottom-cta {
  text-align: center;
}

.back-link {
  color: #f5f1eb;
  text-decoration: none;
  font-size: 0.95rem;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}

.top-logo {
  height: 40px;
  width: auto;
}

@media (min-width: 768px) {
  .org-steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .org-hero h1 {
    font-size: 3rem;
  }
}


/* ===== ORGANIZATION INFO PAGE: STYLE-MATCHED ===== */
.org-page-body {
  min-height: 100vh;
}

.org-entry-shell {
  max-width: 1080px;
  padding-top: 32px;
  padding-bottom: 44px;
}

.org-entry-panel {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.org-top-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 8px;
}

.org-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.98rem;
}

.org-back-link:hover {
  opacity: 0.9;
}

.org-landing-header {
  margin-bottom: 28px;
}

.org-hero {
  text-align: center;
  margin-bottom: 28px;
}

.org-eyebrow {
  display: none;
  margin: 0 0 10px;
  color: #f0d8b8;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.org-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 5vw, 2rem);
  line-height: 1.08;
  color: #ffffff;
}

.org-subheadline {
  margin: 0 auto 14px;
  max-width: 720px;
  color: #f2e4d6;
  font-size: clamp(1.06rem, 2vw, 1.28rem);
  line-height: 1.45;
}

.org-intro {
  max-width: 760px;
  margin: 0 auto;
  color: #e2d6d6;
  line-height: 1.65;
  font-size: 1rem;
}

.org-hero-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 720px;
  margin: 28px auto 0;
}

.org-cta-button {
  text-align: center;
}

.org-cta-button-secondary {
  background: rgba(30, 10, 10, 0.34);
}

.org-section,
.org-bottom-cta {
  padding: 22px;
  border-radius: 26px;
  background: rgba(255,255,255,0.06);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

.org-section {
  margin-top: 18px;
}

.org-section h2,
.org-bottom-cta h2 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 1.35rem;
  line-height: 1.2;
}

.org-section p,
.org-bottom-cta p,
.org-section-header p,
.org-step-card p {
  margin: 0;
  color: #dfd1d1;
  line-height: 1.6;
}

.org-section-header {
  margin-bottom: 16px;
}

.org-section-header p {
  margin-top: 6px;
  color: rgba(255,255,255,0.72);
}

.org-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.org-step-card {
  position: relative;
  min-height: 100%;
  padding: 20px;
  border-radius: 22px;
  background: rgba(0,0,0,0.16);
  border: 1px solid rgba(255,255,255,0.06);
}

.org-step-number {
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
}

.org-step-card h3 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 1.08rem;
  line-height: 1.25;
}

.org-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.org-feature-list {
  margin: 0;
  padding-left: 20px;
  color: #dfd1d1;
}

.org-feature-list li {
  margin-bottom: 8px;
  line-height: 1.55;
}

.org-bottom-cta {
  margin-top: 22px;
  text-align: center;
}

.org-bottom-cta .org-cta-button {
  display: block;
  margin: 18px auto 0;
  max-width: 520px;
}

@media (min-width: 768px) {
  .org-hero-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .org-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .org-two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .org-entry-shell {
    padding-top: 56px;
  }

  .org-entry-panel {
    padding: 42px 42px 36px;
  }
}
.org-back-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 8px 14px;
  border-radius: 999px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);

  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;

  backdrop-filter: blur(6px);
  transition: all 0.2s ease;
}

.org-back-button:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
}
/* ===== DVOC DESIGN SYSTEM (NEW BASE) ===== */

.dvoc-panel-glass {
  border-radius: 26px;
  background: rgba(255,255,255,0.06);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  padding: 22px;
}
/* ===== ORGANIZATION CHECKOUT ===== */

.org-checkout-card {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.org-checkout-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.org-checkout-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.org-checkout-label {
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 700;
}

.org-checkout-input {
  width: 100%;
  min-height: 60px;
  padding: 0 18px;
  border: 0;
  outline: none;
  border-radius: 20px;
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  font-size: 1rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

.org-checkout-input::placeholder {
  color: rgba(255,255,255,0.45);
}

.org-seat-row {
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  gap: 12px;
  align-items: center;
}

.org-small-control {
  min-height: 56px;
  border: 0;
  border-radius: 18px;
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 700;
  cursor: pointer;
}

.org-seat-display {
  min-height: 56px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #ffffff;
  font-weight: 700;
  font-size: 1.05rem;
}
.org-seat-input {
  width: 72px;
  border: 0;
  outline: none;
  background: transparent;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;

  appearance: textfield;
  -moz-appearance: textfield;
}

.org-seat-input::-webkit-outer-spin-button,
.org-seat-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.org-seat-text {
  color: rgba(255,255,255,0.76);
  font-weight: 600;
}

.org-billing-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.org-billing-button {
  min-height: 58px;
  border: 0;
  border-radius: 20px;
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.org-billing-button:hover,
.org-small-control:hover {
  background: rgba(255,255,255,0.14);
}

.org-billing-button:active,
.org-small-control:active {
  transform: scale(0.98);
}

.org-price-panel {
  text-align: center;
  padding: 10px 12px 2px;
}

.org-price-panel h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.25rem;
  line-height: 1.3;
}

.org-checkout-main-button {
  width: 100%;
  text-align: center;
}

@media (min-width: 768px) {
  .org-checkout-card {
    padding: 28px;
  }

  .org-price-panel h3 {
    font-size: 1.4rem;
  }
}

/* ===== PRICING TIERS ===== */

.org-tier-block {
  margin-top: 14px;
  padding: 16px 12px 4px;
}

.org-tier-title {
  margin: 0 0 14px;
  text-align: center;
  font-size: 1.1rem;
  color: #ffffff;
}

.org-tier-table {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.org-tier-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0 2px 8px;
}

.org-tier-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) {
  .org-tier-groups {
    grid-template-columns: 1fr 1fr;
  }
}

.org-tier-group {
  background: rgba(255,255,255,0.05);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,0.04);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.org-tier-group-label {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 8px;
}

.org-tier-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 2px;
  font-size: 0.95rem;
  color: #ffffff;
  border-radius: 10px;
  transition: background 0.18s ease, color 0.18s ease;
}

.org-tier-row + .org-tier-row {
  border-top: 1px solid rgba(255,255,255,0.06);
}

.org-tier-row span:last-child {
  font-weight: 700;
  color: #f0d8b8;
}

.org-billing-button.is-active {
  background: rgba(122, 25, 24, 0.75);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.org-tier-group.is-active {
  background: rgba(122, 25, 24, 0.18);
  border-color: rgba(240,216,184,0.22);
  box-shadow:
    0 0 0 1px rgba(240,216,184,0.08) inset,
    0 10px 24px rgba(0,0,0,0.14);
}

.org-tier-group.is-active .org-tier-group-label {
  color: #f0d8b8;
}

.org-tier-row.is-active {
  background: rgba(255,255,255,0.08);
}

.org-tier-row.is-active span:first-child,
.org-tier-row.is-active span:last-child {
  color: #ffffff;
  font-weight: 800;
}


/* ===== NAVBAR MOBILE VISIBILITY PATCH ===== */

.dvoc-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(116, 85, 86, 0.24);
  color: white;
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.dvoc-nav-left,
.dvoc-nav-center,
.dvoc-nav-right {
  display: flex;
  align-items: center;
}

.dvoc-nav-left {
  flex: 0 0 auto;
}

.dvoc-nav-center {
  flex: 1 1 auto;
  gap: 14px;
  justify-content: center;
  min-width: 0;
}

.dvoc-nav-right {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.dvoc-nav-logo {
  height: 34px;
  display: block;
}

.dvoc-nav-link {
  color: white;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.dvoc-nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-bottom: 6px;
  margin-bottom: -6px;
}

.dvoc-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  background: #7f5e5e;
  border-radius: 12px;
  padding: 8px;
  min-width: 180px;
  max-width: min(280px, calc(100vw - 24px));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  z-index: 250;
}

.dvoc-dropdown-menu a {
  display: block;
  padding: 10px 12px;
  color: white;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 8px;
}

.dvoc-dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dvoc-nav-dropdown:hover .dvoc-dropdown-menu,
.dvoc-nav-dropdown.open .dvoc-dropdown-menu {
  display: block;
}

.dvoc-user-pill {
  background: rgba(255,255,255,0.2);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .dvoc-navbar {
    padding: 10px 12px;
  }

  .dvoc-nav-logo {
    height: 30px;
  }

  .dvoc-nav-center {
    display: none;
  }

  .dvoc-user-pill {
    padding: 8px 12px;
  }
}



/* ===== FORCE NAVBAR VISIBLE (FINAL OVERRIDE) ===== */
.dvoc-navbar {
  display: flex !important;
}

/* Ensure dropdown works on mobile tap (not only hover) */
.dvoc-nav-dropdown.open .dvoc-dropdown-menu {
  display: block;
}



/* ===== LOGO: ALWAYS USE MOBILE VERSION ===== */
.logo-mobile {
  display: block !important;
}

.logo-desktop {
  display: none !important;
}

/* ===== DVOC MODAL SYSTEM (GLOBAL) ===== */

.dvoc-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.dvoc-modal.hidden {
  display: none !important;
}

.dvoc-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}

.dvoc-modal-card {
  position: relative;
  z-index: 1;
  width: min(92vw, 520px);
  padding: 24px;
  border-radius: 24px;
  background: rgba(78,67,67,0.66);
  color: #ffffff;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.dvoc-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.1);
  font-size: 1.2rem;
  cursor: pointer;
}

/* ===== SINGLE PLAN CHOICE MODAL ===== */

.single-plan-choice-card {
  width: min(92vw, 560px);
}

.single-plan-choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}

.single-plan-choice-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.single-plan-choice-option:hover {
  background: rgba(255,255,255,0.14);
  transform: translateY(-1px);
}

.single-plan-choice-featured {
  border-color: rgba(255,255,255,0.34);
  background: rgba(184,50,50,0.24);
}

.single-plan-choice-name {
  font-size: 1.05rem;
  font-weight: 800;
}

.single-plan-choice-price {
  font-size: 1.35rem;
  font-weight: 900;
}

.single-plan-choice-note {
  font-size: 0.92rem;
  opacity: 0.86;
}

.single-plan-choice-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  font-size: 0.75rem;
  font-weight: 800;
}

@media (min-width: 620px) {
  .single-plan-choice-grid {
    grid-template-columns: 1fr 1fr;
  }
}
/* ===== AUTH MODAL: SINGLE SOURCE OF TRUTH ===== */
#auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#auth-modal.hidden {
  display: none !important;
}

#auth-modal .dvoc-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#auth-modal .dvoc-modal-card {
  position: relative;
  z-index: 1;
  width: min(92vw, 520px);
  margin: 0;
  padding: 28px 20px 22px;
  border-radius: 28px;
  background: rgba(78, 67, 67, 0.66);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 24px 60px rgba(0,0,0,0.38);
  color: #ffffff;
}

#auth-modal #auth-modal-title {
  margin: 0 0 10px;
  font-size: 1.9rem;
  line-height: 1.08;
  color: #ffffff;
}

#auth-modal #auth-modal-copy {
  margin: 0 0 18px;
  color: #eadede;
  line-height: 1.45;
  font-size: 1rem;
}

#auth-modal .dvoc-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

#auth-modal .login-input {
  display: block;
  width: 100%;
  min-height: 58px;
  margin: 0 0 12px;
  padding: 0 20px;
  border: 0 !important;
  border-radius: 999px !important;
  background: #dfe4ef !important;
  color: #111111 !important;
  font-size: 1rem !important;
  font-weight: 600;
  text-align: left;
  box-shadow: none;
  backdrop-filter: none;
}

#auth-modal .login-input::placeholder {
  color: rgba(0,0,0,0.48);
  font-weight: 600;
}

#auth-modal #auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 140px;
  min-height: 74px;
  margin-top: 4px;
  padding: 16px 28px;
  border-radius: 28px !important;
  border: 4px solid rgba(150, 113, 113, 0.35) !important;
  background: rgba(30, 10, 10, 0.45) !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 700;
  box-shadow: none;
  backdrop-filter: blur(2px);
}

#auth-modal #auth-status {
  margin-top: 12px;
  text-align: left;
  min-height: 20px;
  color: #f0e6e6;
}

@media (max-width: 640px) {
  #auth-modal {
    padding: 14px;
  }

  #auth-modal .dvoc-modal-card {
    width: min(94vw, 460px);
    padding: 26px 18px 20px;
    border-radius: 24px;
  }

  #auth-modal #auth-modal-title {
    font-size: 1.45rem;
  }

  #auth-modal #auth-submit {
    min-width: 120px;
    min-height: 70px;
    padding: 14px 24px;
  }
}




/* ===== SINGLE SETTINGS ===== */
.single-page {
  padding-top: 10px;
}

.single-summary-panel,
.single-upgrade-panel {
  position: relative;
  overflow: hidden;
}

.single-summary-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.single-summary-copy-wrap {
  max-width: 760px;
}

.single-summary-head h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.15rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.single-summary-copy {
  max-width: 680px;
}

.single-upgrade-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.single-detail-grid {
  margin-top: 10px;
}

.single-detail-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 92px;
}

.single-detail-label {
  color: rgba(255,255,255,0.72);
  font-size: 0.9rem;
}

.single-detail-card strong {
  font-size: 1.05rem;
  word-break: break-word;
}

.single-upgrade-copy {
  max-width: 860px;
}

.single-upgrade-copy p {
  margin: 0;
  color: rgba(255,255,255,0.82);
  line-height: 1.6;
}

.single-section-head h2 {
  letter-spacing: -0.02em;
}

@media (min-width: 860px) {
  .single-summary-head {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}


/* ===== SINGLE PAGE BACKGROUND (MATCH LANDING) ===== */
.single-bg {
  background:
    linear-gradient(rgba(38, 30, 30, 0.82), rgba(38, 30, 30, 0.82)),
    url("assets/home_background/home_background.jpg");
  background-size: cover;
  background-position: center;
  min-height: 100vh;
}


/* ===== GLOBAL BACKGROUND (D-VOC) ===== */
body,
.browse-body,
.videos-body,
.test-body,
.playlist-body,
.player-body,
.single-bg,
.landing-body {
  background:
    linear-gradient(rgba(38, 30, 30, 0.82), rgba(38, 30, 30, 0.82)),
    url("assets/home_background/home_background.jpg") center / cover fixed no-repeat;
  min-height: 100vh;
}


/* ===== PLAYLIST CATEGORY GRID CLEAN RESPONSIVE ===== */

.playlist-category-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  justify-items: center;
}

@media (min-width: 768px) {
  .playlist-category-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .playlist-category-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.playlist-category-card {
  width: 100%;
  max-width: 180px;
}


/* ===== PLAYLIST CATEGORY BOXES: ALWAYS VISIBLE + GLASS ===== */
.playlist-category-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  justify-items: center;
}

@media (min-width: 768px) {
  .playlist-category-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .playlist-category-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.playlist-category-card {
  width: 100%;
  max-width: 180px;
  min-height: 200px;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 16px;
  border-radius: 24px;

  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255,255,255,0.03);

  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.playlist-category-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.11);
}

.playlist-category-card img,
.playlist-category-card .playlist-category-thumbnail,
.playlist-category-image-shell {
  margin-bottom: 10px;
}

.playlist-category-image-shell {
  width: 110px;
  height: 110px;
  padding: 4px;
  border-radius: 24px;
  border: 4px solid rgba(92, 42, 43, 0.6);
  background: rgba(255, 255, 255, 0.04);
}

.playlist-category-image-wrap {
  border-radius: 18px;
}

.playlist-category-title {
  margin-top: 6px;
  font-size: 0.95rem;
  font-weight: 600;
}

.playlist-category-chevron {
  display: none !important;
}


/* ===== PLAYLIST CATEGORY GRID FINAL: MOBILE 2 / TABLET 4 / DESKTOP 5 ===== */
.playlist-category-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  justify-items: center;
}

@media (min-width: 768px) {
  .playlist-category-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .playlist-category-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ===== DVOC STYLE VARIANT: SOFT ===== */
body,
.browse-body,
.videos-body,
.test-body,
.playlist-body,
.player-body,
.single-bg,
.landing-body {
  background:
    linear-gradient(rgba(109, 102, 102, 0.80), rgba(38, 30, 30, 0.80)),
    url("assets/home_background/home_background.jpg") center / cover fixed no-repeat;
}

.landing-panel,
.dvoc-panel,
.dvoc-panel-glass,
.playlist-category-card,
.playlist-premium-card,
.test-panel,
.result-card,
.organization-stat-card,
.organization-invite-card,
.organization-member-row,
.single-detail-card,
.player-info-section,
.player-controls-section,
.dvoc-modal-card,
#auth-modal .dvoc-modal-card {
  background: rgba(206,189,188,0.24) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.26),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

.menu-button,
.billing-button,
.playlist-play-button,
.playlist-ios-primary-button,
.primary-action-button,
.primary-link-button {
  background: rgba(90, 48, 48, 8) !important;
}

.category-label,
.video-list-title,
.playlist-card-title,
.playlist-category-title {
  color: rgba(255,255,255,0.95);
}

.explore-info {
  text-align: center;
  margin-top: 20px;
}

.explore-text {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
  max-width: 420px;
  margin: 0 auto 14px;
  line-height: 1.4;
}

.explore-login-button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: rgba(133, 66, 66, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}

.explore-login-button:hover {
  background: rgba(133, 66, 66, 0.65);
  transform: translateY(-1px);
}


/* ===== TRAINING PAGE CREATE-PLAYLIST STYLE ===== */
.training-create-style-body {
  padding-bottom: 140px;
}

.training-create-style-container {
  padding-top: 18px;
}

.training-create-results-row {
  justify-content: flex-end;
  margin: 0 0 18px;
}

.training-hub-result-button {
  min-height: 52px;
  padding: 12px 22px;
  border-radius: 22px;
  background: rgba(255,255,255,0.16);
  color: #ffffff;
  font-weight: 800;
  text-decoration: none;
}

.assigned-training-section {
  margin-bottom: 26px;
}

.assigned-training-panel-create {
  border-radius: 26px;
  background: rgba(206,189,188,0.24);
  border: 1px solid rgba(255,255,255,0.24);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 14px;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

.assigned-training-card {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.14);
}

.assigned-training-title {
  color: #ffffff;
}

.assigned-training-meta {
  color: rgba(255,255,255,0.78);
}

.assigned-training-start {
  background: rgba(90,48,48,0.72);
  color: #ffffff;
}

.training-own-section-label {
  margin: 18px 0 18px;
}

.training-own-section-label h2,
.training-section-title-row h2,
.test-section-block h2,
.compact-header-row h2 {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.training-create-style-container .ios-segment-shell,
.training-create-style-container .ios-stepper-shell {
  border-radius: 24px;
  padding: 8px;
  background: rgba(236,234,234,0.86);
}

.training-create-style-container .ios-segment-toggle .test-mode-button {
  min-height: 48px;
}

.training-create-style-container .ios-stepper-value {
  min-height: 50px;
}

.training-create-style-container .ios-stepper-button {
  width: 58px;
  height: 50px;
}

.training-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.training-section-title-row h2 {
  margin: 0;
}

.training-select-all-button {
  border: 0;
  border-radius: 999px;
  min-height: 38px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.14);
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
}

.training-category-grid {
  margin-top: 0;
}

.training-category-card {
  border: 0;
  color: inherit;
  cursor: pointer;
  position: relative;
}

.training-category-card.selected {
  background: rgba(255,255,255,0.17) !important;
  box-shadow:
    0 14px 32px rgba(0,0,0,0.28),
    inset 0 0 0 2px rgba(255,255,255,0.28);
}

.training-category-selected-label {
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  color: rgba(255,255,255,0.62);
}

.training-category-card.selected .training-category-selected-label {
  color: rgba(255,255,255,0.92);
}

.training-playlist-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.training-playlist-card {
  width: 100%;
  border: 0;
  border-radius: 22px;
  padding: 12px;
  display: grid;
  grid-template-columns: 82px 1fr auto;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
}

.training-playlist-card.selected {
  background: rgba(255,255,255,0.18);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18);
}

.training-playlist-thumb {
  width: 82px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
}

.training-playlist-title {
  font-weight: 900;
  margin-bottom: 4px;
}

.training-playlist-meta {
  color: rgba(255,255,255,0.72);
  font-size: 0.9rem;
}

.training-playlist-check {
  min-width: 76px;
  text-align: center;
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(90,48,48,0.52);
  font-weight: 800;
}

@media (max-width: 640px) {
  .training-create-results-row {
    justify-content: stretch;
  }

  .training-hub-result-button {
    width: 100%;
  }

  .training-section-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .training-select-all-button {
    width: 100%;
  }

  .training-playlist-card {
    grid-template-columns: 72px 1fr;
  }

  .training-playlist-check {
    grid-column: 1 / -1;
    width: 100%;
  }
}


/* =========================================
   TRAINING SETUP UI IMPROVEMENTS
   ========================================= */

/* --- ASSIGNED TRAINING CLEANUP --- */
.assigned-training-card {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

.assigned-training-copy {
  flex: 1;
  min-width: 0;
}

.assigned-training-title {
  color: #ffffff !important;
  font-weight: 900;
}

.assigned-training-meta {
  color: rgba(255,255,255,0.78) !important;
}

.assigned-training-start {
  min-width: 104px;
  min-height: 42px;
  background: #7a1918 !important;
  color: #ffffff !important;
  border: none;
  border-radius: 999px !important;
  padding: 8px 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: none !important;
}

.assigned-training-start:hover {
  opacity: 0.92;
}

/* --- CATEGORY SELECT STATE --- */
.training-category-selected-label {
  font-size: 12px;
  opacity: 0.65;
}

.training-category-card.selected .training-category-selected-label {
  color: #7a1918 !important;
  opacity: 1;
  font-weight: 900;
}

/* --- START TRAINING BUTTON --- */
#start-test-button {
  background: #7a1918 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 900;
  letter-spacing: 0.4px;
}

#start-test-button:disabled {
  background: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.42) !important;
}

/* --- FOOTER VISIBILITY --- */
.sticky-test-footer {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.38) 32%,
    rgba(0,0,0,0.68) 100%
  ) !important;
}

.sticky-test-footer-inner {
  box-shadow: none !important;
  background: rgba(0,0,0,0.14) !important;
}

/* Mobile: stack assigned card nicely */
@media (max-width: 640px) {
  .assigned-training-card {
    flex-direction: column;
    align-items: stretch;
  }

  .assigned-training-start {
    width: 100%;
  }
}


/* =========================================
   RESULTS PAGE POLISH V2
   ========================================= */

.results-polish-body {
  padding-bottom: 60px;
}

.results-polish-container {
  max-width: 900px;
  padding-top: 18px;
}

.results-polish-container .share-panel {
  display: none !important;
}

.results-polish-container .results-ios-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

.result-progress-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 28px;
  background: rgba(206,189,188,0.24);
  border: 1px solid rgba(255,255,255,0.24);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

.result-progress-main {
  min-width: 0;
}

.result-progress-kicker {
  margin-bottom: 5px;
  font-size: 0.76rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.64);
  font-weight: 900;
}

.result-progress-title {
  margin-bottom: 6px;
  color: #ffffff;
  font-size: 1.12rem;
  line-height: 1.15;
  font-weight: 900;
}

.result-progress-meta {
  color: rgba(255,255,255,0.78);
  font-size: 0.94rem;
  line-height: 1.35;
}

.result-progress-score {
  min-width: 92px;
  padding: 12px 14px;
  border-radius: 22px;
  background: rgba(90,48,48,0.48);
  text-align: center;
}

.result-progress-score-label {
  margin-bottom: 3px;
  color: rgba(255,255,255,0.68);
  font-size: 0.72rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 900;
}

.result-progress-score-value {
  color: #ffffff;
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 900;
}

.assigned-result-card {
  box-shadow:
    0 16px 34px rgba(0,0,0,0.24),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

.practice-result-card {
  opacity: 0.92;
}

#results-empty-state {
  text-align: center;
  max-width: 620px;
  margin: 30px auto 0;
}

@media (max-width: 640px) {
  .results-polish-container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .result-progress-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
    border-radius: 24px;
  }

  .result-progress-score {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .result-progress-score-value {
    font-size: 1.25rem;
  }
}


/* =========================================
   RESULTS CARD CONTENT POLISH V3
   ========================================= */

.result-progress-meta + .result-progress-meta {
  margin-top: 3px;
}

.assigned-result-card .result-progress-title {
  font-size: 1.18rem;
}

.assigned-result-card .result-progress-score {
  background: rgba(122,25,24,0.52);
}

.practice-result-card .result-progress-score {
  background: rgba(90,48,48,0.36);
}


/* =========================================
   ORGANIZATION CREATE ASSIGNMENT UI
   ========================================= */

.organization-create-assignment-panel {
  position: relative;
}

.organization-assignment-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.organization-form-label {
  display: block;
  margin-bottom: -4px;
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
  font-weight: 800;
}

.organization-form-input {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 0;
  outline: none;
  border-radius: 18px;
  background: rgba(255,255,255,0.12);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.organization-form-input::placeholder {
  color: rgba(255,255,255,0.48);
}

.organization-form-input option {
  color: #111111;
}

.organization-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.organization-mode-button {
  min-height: 52px;
  padding: 12px 14px;
  border: 0;
  border-radius: 18px;
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  font-weight: 900;
  cursor: pointer;
}

.organization-mode-button.active {
  background: #7a1918;
  color: #ffffff;
}

.organization-form-row-between {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 4px;
}

.organization-small-button {
  min-height: 40px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
}

.organization-small-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.organization-student-picker-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.organization-student-picker-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 0;
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

.organization-student-picker-row.selected {
  background: rgba(122,25,24,0.40);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14);
}

.organization-student-picker-copy {
  min-width: 0;
}

.organization-student-picker-check {
  min-width: 80px;
  text-align: center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.86);
  font-weight: 900;
  font-size: 0.86rem;
}

.organization-student-picker-row.selected .organization-student-picker-check {
  background: rgba(255,255,255,0.20);
  color: #ffffff;
}

.organization-create-assignment-button {
  width: 100%;
  margin-top: 6px;
}

.organization-assignment-results-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.organization-assignment-result-row {
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.organization-assignment-student-manage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.organization-assignment-student-actions {
  flex: 0 0 auto;
}

.organization-small-inline-button {
  min-height: 38px;
  padding: 9px 12px;
}

.organization-assignment-manage-section {
  margin-top: 18px;
}

@media (max-width: 640px) {
  .organization-form-row-between {
    align-items: stretch;
    flex-direction: column;
  }

  .organization-small-button {
    width: 100%;
  }

  .organization-mode-toggle,
  .organization-student-picker-row {
    grid-template-columns: 1fr;
  }

  .organization-student-picker-check {
    width: 100%;
  }

  .organization-assignment-student-manage-row {
    align-items: stretch;
    flex-direction: column;
  }

  .organization-assignment-student-actions,
  .organization-small-inline-button {
    width: 100%;
  }
}


/* ===== ASSIGN TRAINING FLOW ===== */

.four-up-toggle {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.four-up-toggle .test-mode-button {
  font-size: 0.9rem;
  padding-left: 6px;
  padding-right: 6px;
}

.assign-training-container {
  padding-bottom: 150px;
}

.assign-training-summary {
  padding: 20px;
}

.assign-summary-label {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  font-weight: 800;
  margin-bottom: 8px;
}

.assign-summary-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
}

.assign-summary-meta {
  margin-top: 6px;
  color: rgba(255,255,255,0.78);
  font-size: 0.96rem;
}

.assign-training-input {
  width: 100%;
  min-height: 58px;
  border: 0;
  outline: none;
  border-radius: 24px;
  padding: 0 18px;
  background: rgba(255,255,255,0.16);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
}

.assign-training-input::placeholder {
  color: rgba(255,255,255,0.48);
}

.assignment-students-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.assign-student-row {
  width: 100%;
  border: 0;
  border-radius: 22px;
  padding: 14px;
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  cursor: pointer;
}

.assign-student-row.selected {
  background: rgba(122,25,24,0.42);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}

.assign-student-copy {
  min-width: 0;
}

.assign-student-name {
  font-weight: 800;
  margin-bottom: 4px;
}

.assign-student-email {
  color: rgba(255,255,255,0.72);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.assign-student-check {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  font-weight: 800;
  font-size: 0.86rem;
}

@media (max-width: 640px) {
  .four-up-toggle .test-mode-button {
    font-size: 0.72rem;
    min-height: 48px;
  }

  .assign-student-row {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* ===== TRAINING TYPE: HIDE ASSIGNMENT + RECENTER 3 BUTTONS ===== */

.test-mode-toggle .test-mode-button.hidden {
  display: none !important;
}

.test-mode-toggle.four-mode {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.test-mode-toggle.three-mode {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.training-create-style-container .test-mode-toggle.three-mode .test-mode-button {
  max-width: none;
  margin: 0;
}


/* ===== CREATE PLAYLIST CATEGORY: SLIMMER VIDEO ROWS ===== */

.playlist-video-picker-row {
  grid-template-columns: 1fr 48px;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.playlist-video-main-link {
  grid-template-columns: minmax(150px, 32%) 1fr;
  gap: 14px;
}

.playlist-video-picker-thumb {
  border-radius: 14px;
}

.playlist-video-picker-index {
  font-size: 0.9rem;
  margin-bottom: 4px;
  opacity: 0.8;
}

.playlist-video-picker-title {
  font-size: 0.95rem;
  line-height: 1.2;
  -webkit-line-clamp: 2;
}

.playlist-select-circle {
  width: 36px;
  height: 36px;
}

.playlist-select-circle.selected::after {
  inset: 5px;
}

@media (min-width: 1024px) {
  .playlist-video-picker-row {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 640px) {
  .playlist-video-picker-row {
    grid-template-columns: 1fr 44px;
    padding: 10px;
    border-radius: 18px;
  }

  .playlist-video-main-link {
    grid-template-columns: 120px 1fr;
    gap: 10px;
  }

  .playlist-select-circle {
    width: 34px;
    height: 34px;
  }
}


/* ===== CREATE PLAYLIST PREVIEW: CLEANER LAYOUT ===== */

.playlist-ios-container:has(#playlist-preview-player) {
  max-width: 860px;
  padding-top: 10px;
}

#playlist-preview-category-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  font-size: 0.9rem;
  margin: 4px 0 18px;
}

.playlist-preview-player-wrapper {
  width: min(100%, 620px);
  max-width: 620px;
  margin: 0 auto 18px;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  box-shadow:
    0 18px 38px rgba(0,0,0,0.26),
    inset 0 0 0 1px rgba(255,255,255,0.08);
}

#playlist-preview-player {
  width: 100%;
  border-radius: 24px;
  display: block;
  background: #111;
}

.playlist-preview-title {
  max-width: 760px;
  margin: 18px auto 16px;
  color: #ffffff;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.15;
  font-weight: 900;
  text-align: left;
}

.playlist-preview-description {
  max-width: 760px;
  margin: 0 auto 16px;
  color: rgba(255,255,255,0.76);
  font-size: 0.98rem;
  line-height: 1.45;
}

.playlist-preview-controls {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.playlist-preview-controls .playlist-ios-primary-button {
  min-height: 54px;
  border-radius: 18px;
  background: rgba(90,48,48,0.82) !important;
  box-shadow: none;
}

.playlist-preview-controls .playlist-ios-primary-button:disabled {
  background: rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.45) !important;
}

#playlist-preview-select-button.is-selected {
  background: rgba(72,96,62,0.86) !important;
}

.playlist-preview-meta {
  max-width: 760px;
  margin: 14px auto 0;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.86);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 700;
}

.playlist-preview-position {
  color: #ffffff;
}

.playlist-preview-next-label {
  color: rgba(255,255,255,0.62);
}

@media (min-width: 760px) {
  .playlist-preview-controls {
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 12px;
  }

  .playlist-preview-title,
  .playlist-preview-description {
    text-align: left;
  }

  .playlist-preview-meta {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

@media (max-width: 640px) {
  .playlist-ios-container:has(#playlist-preview-player) {
    padding-left: 18px;
    padding-right: 18px;
  }

  .playlist-preview-player-wrapper {
    border-radius: 18px;
  }

  #playlist-preview-player {
    border-radius: 18px;
  }

  .playlist-preview-title {
    font-size: 1.35rem;
  }
}


/* ===== PLAYLIST PLAYER: CLEANER LAYOUT ===== */

body.player-body .player-container {
  max-width: 1180px;
  padding-top: 12px;
  padding-bottom: 70px;
}

body.player-body .player-container .dvoc-split {
  gap: 18px;
}

body.player-body .playlist-player-frame-wrap {
  border-radius: 26px;
  background: rgba(255,255,255,0.10);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.10);
}

body.player-body #playlist-video-player {
  border-radius: 26px;
  object-fit: contain;
  background: #ffffff;
}

body.player-body .player-info-section {
  margin-top: 14px;
  padding: 14px 16px !important;
  border-radius: 18px;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: none !important;
}

body.player-body .player-video-title {
  margin: 0;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  line-height: 1.12;
  font-weight: 900;
}

body.player-body .player-video-description {
  margin-top: 8px;
  color: rgba(255,255,255,0.74);
}

body.player-body .player-controls-section {
  margin-top: 12px;
  padding: 14px !important;
  border-radius: 20px;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: none !important;
}

body.player-body .player-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}

body.player-body .player-nav-button {
  min-width: 0;
  min-height: 50px;
  padding: 12px 16px;
  border-radius: 18px;
  background: rgba(90,48,48,0.58);
  color: #ffffff;
  box-shadow: none;
}

body.player-body .player-nav-button:not(:disabled):hover {
  background: rgba(90,48,48,0.74);
}

body.player-body .player-nav-button:disabled {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.38);
  opacity: 1;
}

body.player-body .player-position {
  min-width: 64px;
  color: rgba(255,255,255,0.88);
  font-weight: 900;
}

body.player-body .player-up-next-center {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

body.player-body .player-side-label {
  color: rgba(255,255,255,0.48);
  font-weight: 900;
}

body.player-body .player-side-title {
  color: rgba(255,255,255,0.72);
  font-weight: 700;
}

body.player-body .player-category-list-section {
  margin-top: 12px;
  padding: 16px !important;
  border-radius: 22px;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: none !important;
}

body.player-body .player-category-video-list {
  gap: 4px;
}

body.player-body .player-category-video-item {
  padding: 11px 12px;
  border-radius: 12px;
  color: rgba(255,255,255,0.74);
  opacity: 1;
}

body.player-body .player-category-video-item:hover {
  background: rgba(255,255,255,0.10);
  color: #ffffff;
}

body.player-body .player-category-video-item.is-active {
  background: rgba(255,255,255,0.18);
  color: #ffffff;
  font-weight: 900;
}

@media (min-width: 860px) {
  body.player-body .player-container .dvoc-split {
    grid-template-columns: minmax(0, 1.55fr) minmax(310px, 380px);
    align-items: start;
  }

  body.player-body .player-info-section {
    margin-top: 0;
  }

  body.player-body .playlist-player-frame-wrap {
    position: sticky;
    top: 92px;
  }
}

@media (min-width: 1280px) {
  body.player-body .player-container {
    max-width: 1260px;
  }

  body.player-body .player-container .dvoc-split {
    grid-template-columns: minmax(0, 1.7fr) minmax(340px, 400px);
    gap: 22px;
  }
}

@media (max-width: 640px) {
  body.player-body .player-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  body.player-body .playlist-player-frame-wrap,
  body.player-body #playlist-video-player {
    border-radius: 18px;
  }

  body.player-body .player-controls {
    grid-template-columns: 1fr;
  }

  body.player-body .player-position {
    order: -1;
    text-align: center;
  }

  body.player-body .player-nav-button {
    width: 100%;
  }
}
.org-step-card,
.org-feature-list,
.org-two-col .org-section {
  text-align: left;
}


/* ===== CREATE PLAYLIST SEARCH RESULT BUTTON FIX ===== */
.playlist-search-row {
  grid-template-columns: minmax(0, 1fr) 86px;
  padding: 10px 16px;
  min-height: 132px;
}

.playlist-search-row .playlist-search-main-link {
  grid-template-columns: minmax(180px, 31%) 1fr;
}

.playlist-search-add-button {
  width: 76px;
  min-width: 76px;
  min-height: 46px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
  border-radius: 18px;
  font-size: 0.95rem;
  font-weight: 800;
}

.playlist-search-add-button.selected {
  width: 76px;
  min-width: 76px;
  background: rgba(255,255,255,0.18);
}

@media (max-width: 640px) {
  .playlist-search-row {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .playlist-search-add-button {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }
}


/* ===== CREATE PLAYLIST CATEGORY: EXACT SEARCH-RESULT ROW MATCH ===== */

/* Only category video rows: reuse the same compact visual language as create-playlist search results */
#category-video-list .playlist-category-search-style-row {
  grid-template-columns: minmax(0, 1fr) 86px;
  height: 80px;
  background: rgba(255, 255, 255, 0.06);
  max-height: 80px;
  min-height: 0;
  padding: 6px 12px;
  overflow: hidden;
  border-radius: 20px;
  margin-bottom: 10px;
  align-items: center;
}

#category-video-list .playlist-category-search-style-row .playlist-search-main-link {
  grid-template-columns: minmax(180px, 31%) 1fr;
  gap: 14px;
  align-items: center;
}

#category-video-list .playlist-category-search-style-row .playlist-video-picker-thumb {
  height: 60px;
  width: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
}

#category-video-list .playlist-category-search-style-row .playlist-video-picker-title {
  -webkit-line-clamp: 1;
}

#category-video-list .playlist-category-search-style-row .playlist-search-add-button {
  align-self: center;
  justify-self: end;
}

@media (max-width: 640px) {
  #category-video-list .playlist-category-search-style-row {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
  }

  #category-video-list .playlist-category-search-style-row .playlist-search-main-link {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  #category-video-list .playlist-category-search-style-row .playlist-video-picker-thumb {
    height: auto;
    max-height: none;
    width: 100%;
  }

  #category-video-list .playlist-category-search-style-row .playlist-search-add-button {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }
}


/* ===== CREATE PLAYLIST SEARCH RESULTS: 80PX FINAL OVERRIDE ===== */
/* Keeps search result rows compact and thumbnails in correct 16:9 ratio */
#playlist-search-results .playlist-search-row {
  grid-template-columns: minmax(0, 1fr) 86px;
  margin-top: 20px;
  height: 80px;
  background: rgba(255, 255, 255, 0.06);
  max-height: 80px;
  min-height: 0;
  padding: 6px 12px;
  overflow: hidden;
  align-items: center;
}

#playlist-search-results .playlist-search-row .playlist-search-main-link {
  grid-template-columns: minmax(180px, 31%) 1fr;
  gap: 14px;
  align-items: center;
}

#playlist-search-results .playlist-search-row .playlist-video-picker-thumb {
  height: 60px;
  width: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
}

#playlist-search-results .playlist-search-row .playlist-video-picker-title {
  -webkit-line-clamp: 1;
}

#playlist-search-results .playlist-search-row .playlist-search-add-button {
  align-self: center;
  justify-self: end;
}

@media (max-width: 640px) {
  #playlist-search-results .playlist-search-row {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
  }

  #playlist-search-results .playlist-search-row .playlist-search-main-link {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  #playlist-search-results .playlist-search-row .playlist-video-picker-thumb {
    height: auto;
    max-height: none;
    width: 100%;
  }

  #playlist-search-results .playlist-search-row .playlist-search-add-button {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }
}


/* ===== ORGANIZATION ASSIGNMENT LAYOUT PATCH ===== */
/* Keep assignment details above the result/add-student list at every screen size. */
.organization-assignment-row.organization-member-row {
  flex-direction: column;
  align-items: stretch;
}

.organization-assignment-row .organization-assignment-main {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.organization-assignment-row .organization-member-copy {
  flex: 1;
  min-width: 0;
}

.organization-assignment-row .organization-member-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  min-width: 260px;
}

.organization-assignment-row .organization-assignment-inline-results {
  width: 100%;
}

@media (max-width: 640px) {
  .organization-assignment-row .organization-assignment-main {
    flex-direction: column;
    align-items: stretch;
  }

  .organization-assignment-row .organization-member-actions {
    min-width: 0;
    width: 100%;
  }

  .organization-assignment-row .organization-action-button {
    flex: 1;
  }
}


/* ===== ORGANIZATION INVITE MODAL + QR ===== */
.organization-invite-modal-card {
  width: min(92vw, 520px);
  text-align: center;
}

.organization-invite-modal-title {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
}

.organization-invite-modal-copy {
  margin: 0 0 18px;
  color: rgba(255,255,255,0.78);
  line-height: 1.4;
}

.organization-invite-qr-wrap {
  width: 240px;
  height: 240px;
  max-width: 100%;
  margin: 0 auto 18px;
  padding: 10px;
  border-radius: 24px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.organization-invite-qr {
  width: 220px;
  height: 220px;
  max-width: 100%;
  display: block;
}

.organization-invite-modal-link-wrap {
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.10);
  text-align: left;
}

.organization-invite-modal-link {
  color: #ffffff;
  font-weight: 700;
  word-break: break-all;
}

.organization-invite-modal-meta {
  margin: 12px 0 0;
  color: rgba(255,255,255,0.72);
  font-size: 0.92rem;
}

.organization-invite-modal-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

@media (max-width: 640px) {
  .organization-invite-modal-actions {
    grid-template-columns: 1fr;
  }

  .organization-invite-qr-wrap {
    width: 220px;
    height: 220px;
  }

  .organization-invite-qr {
    width: 200px;
    height: 200px;
  }
}


/* ===== ORGANIZATION INVITE IN JOINED USERS FINAL ===== */
.organization-members-head-with-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.organization-members-head-with-action > div {
  flex: 1;
}

.organization-members-head-with-action #organization-create-invite {
  flex: 0 0 auto;
}

#organization-invite-output {
  margin-bottom: 12px;
}

#organization-status {
  margin-bottom: 10px;
}

@media (max-width: 640px) {
  .organization-members-head-with-action {
    flex-direction: column;
    align-items: stretch;
  }

  .organization-members-head-with-action #organization-create-invite {
    width: 100%;
  }
}


/* ===== ORGANIZATION INVITE MODAL CREATE ANOTHER ===== */
#organization-create-another-invite {
  background: rgba(255,255,255,0.12);
}

#organization-create-another-invite:hover {
  background: rgba(255,255,255,0.18);
}

.organization-invite-modal-actions .organization-action-button {
  min-width: 0;
  white-space: nowrap;
}


/* ===== ORGANIZATION INVITE COMPACT CARD + QR BUTTONS ===== */
.organization-invite-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  color: rgba(255,255,255,0.78);
  font-size: 0.92rem;
  line-height: 1.35;
}

.organization-invite-card-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.organization-invite-card-actions .organization-action-button {
  min-width: 130px;
}

.organization-invite-modal-info {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.10);
  text-align: left;
}

.organization-invite-modal-meta-line {
  color: rgba(255,255,255,0.82);
  font-size: 0.94rem;
  line-height: 1.45;
}

.organization-invite-modal-meta-line + .organization-invite-modal-meta-line {
  margin-top: 4px;
}

@media (max-width: 640px) {
  .organization-invite-card-actions {
    flex-direction: column;
  }

  .organization-invite-card-actions .organization-action-button {
    width: 100%;
  }
}


/* ===== ORGANIZATION INVITE CARD ONE ROW + DELETE ===== */
.organization-invite-card-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.organization-invite-copy {
  flex: 1;
  min-width: 0;
}

.organization-invite-card-compact .organization-invite-title {
  margin-bottom: 6px;
}

.organization-invite-card-compact .organization-invite-dates {
  margin: 0;
}

.organization-invite-card-compact .organization-invite-card-actions {
  flex: 0 0 auto;
  margin-top: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.organization-invite-card-compact .organization-action-button {
  min-width: 118px;
}

@media (max-width: 760px) {
  .organization-invite-card-compact {
    flex-direction: column;
    align-items: stretch;
  }

  .organization-invite-card-compact .organization-invite-card-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .organization-invite-card-compact .organization-action-button {
    width: 100%;
  }
}


/* ===== EXPLORER DEMO TRAINING RESULTS ===== */
.practice-result-card .result-progress-kicker {
  color: rgba(255,255,255,0.72);
}

.practice-result-card .result-progress-title {
  word-break: break-word;
}


/* ===== EXPLORER TRAINING DEMO INFO POLISH ===== */
#explorer-training-demo-info {
  position: relative;
  overflow: hidden;
  padding: 24px 26px;
  border-radius: 30px;
  background: rgba(206, 189, 188, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow:
    0 18px 38px rgba(0,0,0,0.24),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

#explorer-training-demo-info::before {
  content: "Demo mode";
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 12px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(122, 25, 24, 0.42);
  color: rgba(255,255,255,0.92);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#explorer-training-demo-info .test-section-header-row {
  margin-bottom: 10px;
}

#explorer-training-demo-info h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

#explorer-training-demo-info .test-help-text {
  max-width: 760px;
  margin-top: 8px;
  color: rgba(255,255,255,0.82);
  font-size: 1rem;
  line-height: 1.45;
}

#explorer-training-demo-info .test-help-text:nth-of-type(3),
#explorer-training-demo-info .test-help-text:nth-of-type(4) {
  display: inline-block;
  width: calc(50% - 8px);
  min-height: 96px;
  margin-top: 16px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,0.10);
  vertical-align: top;
}

#explorer-training-demo-info .test-help-text:nth-of-type(3) {
  margin-right: 12px;
}

#explorer-training-demo-info strong {
  display: block;
  margin-bottom: 6px;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 900;
}

#explorer-training-demo-info .test-help-text:last-child {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.68);
  font-size: 0.94rem;
}

@media (max-width: 640px) {
  #explorer-training-demo-info {
    padding: 20px;
    border-radius: 26px;
  }

  #explorer-training-demo-info .test-help-text:nth-of-type(3),
  #explorer-training-demo-info .test-help-text:nth-of-type(4) {
    display: block;
    width: 100%;
    min-height: 0;
    margin-right: 0;
  }
}



/* ===== D-VOC HELP CENTER ===== */
.help-body {
  background:
    linear-gradient(rgba(38, 30, 30, 0.92), rgba(38, 30, 30, 0.92)),
    url("assets/home_background/home_background.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.help-layout {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: 26px 0 70px;
  display: grid;
  gap: 22px;
}

.help-sidebar {
  display: none;
}

.help-content {
  display: grid;
  gap: 22px;
}

.help-hero,
.help-card {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 32px;
  box-shadow: 0 22px 65px rgba(0,0,0,0.28);
}

.help-hero {
  padding: clamp(28px, 6vw, 64px);
  background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.055));
}

.help-hero h1 {
  margin: 0;
  max-width: 790px;
  font-size: clamp(2.1rem, 6vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.help-hero p,
.help-card p {
  color: rgba(255,255,255,0.76);
  line-height: 1.55;
}

.help-hero p {
  max-width: 720px;
  margin: 22px 0 0;
  font-size: clamp(1.02rem, 2vw, 1.22rem);
}

.help-kicker {
  width: fit-content;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(122, 25, 24, 0.34);
  color: rgba(255,255,255,0.86);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.help-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.help-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 18px;
  border-radius: 18px;
  font-weight: 900;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}

.help-button:hover {
  transform: translateY(-1px);
}

.help-button.primary {
  background: #ffffff;
  color: #211818;
}

.help-button.secondary {
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: #ffffff;
}

.help-card {
  scroll-margin-top: 110px;
  padding: clamp(22px, 4vw, 38px);
}

.help-card h2 {
  margin: 0 0 14px;
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.help-card h3 {
  margin: 0 0 8px;
  font-size: 1.06rem;
}

.help-steps,
.help-grid {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.help-steps > div,
.help-grid article {
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  background: rgba(38, 30, 30, 0.62);
}

.help-steps span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.11);
  color: rgba(255,255,255,0.72);
  font-size: 1.35rem;
  font-weight: 900;
}

.help-steps strong {
  display: block;
  font-size: 1.08rem;
}

.help-steps p,
.help-grid p {
  margin-bottom: 0;
  font-size: 0.96rem;
}

.help-list {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.help-list li {
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  background: rgba(38, 30, 30, 0.62);
  color: rgba(255,255,255,0.78);
}

.dvoc-nav-link.active {
  background: rgba(255,255,255,0.12);
}

@media (min-width: 760px) {
  .help-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .help-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .help-layout {
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
  }

  .help-sidebar {
    position: sticky;
    top: 112px;
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 28px;
    background: rgba(255,255,255,0.075);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 22px 55px rgba(0,0,0,0.24);
  }

  .help-sidebar-title {
    margin: 4px 4px 8px;
    color: rgba(255,255,255,0.5);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .help-sidebar a {
    padding: 13px 14px;
    border-radius: 16px;
    color: rgba(255,255,255,0.84);
    text-decoration: none;
    font-weight: 800;
    font-size: 0.94rem;
    background: rgba(255,255,255,0.045);
  }

  .help-sidebar a:hover {
    background: rgba(255,255,255,0.1);
  }
}

@media (max-width: 640px) {
  .help-layout {
    width: min(100% - 20px, 1180px);
    padding-top: 18px;
  }

  .help-hero,
  .help-card {
    border-radius: 26px;
  }

  .help-button {
    width: 100%;
  }
}


/* ===== D-VOC DYNAMIC HELP CENTER V1 ===== */
.dynamic-help-body.help-body,
body.dynamic-help-body {
  background:
    linear-gradient(rgba(109, 102, 102, 0.80), rgba(38, 30, 30, 0.80)),
    url("assets/home_background/home_background.jpg") center / cover fixed no-repeat !important;
}
.dynamic-help-layout { gap: 20px; }
.dynamic-help-hero,
.dynamic-help-content .help-card,
.dynamic-help-sidebar,
.help-article-card,
.help-empty-state {
  background: rgba(206,189,188,0.24) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.03) !important;
}
.dynamic-help-hero { padding: clamp(24px, 4vw, 44px) !important; }
.dynamic-help-hero h1 {
  max-width: 720px;
  font-size: clamp(1.8rem, 4.2vw, 3.15rem) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.035em !important;
}
.help-search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 26px; }
.help-search-input {
  min-height: 56px; border: 1px solid rgba(255,255,255,0.22); border-radius: 20px; padding: 0 18px;
  background: rgba(255,255,255,0.16); color: #ffffff; outline: none; font-size: 1rem; font-weight: 700;
}
.help-search-input::placeholder { color: rgba(255,255,255,0.55); }
.help-search-clear,.help-role-button,.help-sidebar-link,.help-article-card { font: inherit; cursor: pointer; }
.help-search-clear { min-height: 56px; border: 0; border-radius: 20px; padding: 0 18px; background: rgba(90,48,48,0.62); color: #ffffff; font-weight: 900; }
.help-role-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.help-role-button { border: 0; border-radius: 999px; padding: 8px 10px; background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.78); font-size: 0.82rem; font-weight: 900; }
.help-role-button.active { background: rgba(122,25,24,0.52); color: #ffffff; }
.help-sidebar-links { display: grid; gap: 8px; }
.help-sidebar-link { width: 100%; display: grid; gap: 3px; text-align: left; border: 0; padding: 13px 14px; border-radius: 16px; background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.86); }
.help-sidebar-link.active,.help-sidebar-link:hover { background: rgba(255,255,255,0.15); }
.help-sidebar-link span { font-weight: 900; }
.help-sidebar-link small { color: rgba(255,255,255,0.58); font-weight: 800; }
.help-dynamic-shell { display: grid; grid-template-columns: 1fr; gap: 18px; }
.help-article-list { display: grid; gap: 12px; }
.help-article-card { display: grid; gap: 7px; width: 100%; text-align: left; border-radius: 24px; padding: 16px 18px; color: #ffffff; }
.help-article-card.active,.help-article-card:hover { background: rgba(255,255,255,0.18) !important; }
.help-card-kicker-mini { color: rgba(255,255,255,0.62); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.help-article-card strong { font-size: 1.06rem; }
.help-article-card p,.help-empty-state p { margin: 0; color: rgba(255,255,255,0.72); line-height: 1.42; font-size: 0.94rem; }
.help-article-view { min-height: 380px; }
.dynamic-help-steps > div,.dynamic-help-grid article,.help-list li { background: rgba(255,255,255,0.10) !important; border: 1px solid rgba(255,255,255,0.16) !important; }
.help-empty-state { padding: 22px; border-radius: 24px; }
@media (min-width: 900px) { .help-dynamic-shell { grid-template-columns: minmax(240px, 310px) minmax(0, 1fr); align-items: start; } .help-article-list { position: sticky; top: 112px; } }
@media (max-width: 640px) { .help-search-form { grid-template-columns: 1fr; } .help-search-clear { width: 100%; } }
@media (min-width: 1024px) { .dvoc-nav-center > a[href="./help.html"] { margin-left: auto; } }


/* ===== NAVBAR HELP CIRCLE + CENTERED MENU PATCH ===== */
/* Keeps the main navigation centered while Help lives as a small ? button on the right. */
.dvoc-help-circle {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.14);
  color: #ffffff;
  text-decoration: none;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.dvoc-help-circle:hover,
.dvoc-help-circle.active {
  background: rgba(255,255,255,0.24);
}

.dvoc-nav-right {
  gap: 12px;
}

/* Undo the earlier Help-as-center-item alignment rule. */
.dvoc-nav-center > a[href="./help.html"] {
  margin-left: 0 !important;
}

@media (min-width: 1024px) {
  .dvoc-navbar {
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) auto;
    align-items: center;
  }

  .dvoc-nav-center {
    justify-content: center !important;
  }

  .dvoc-nav-right {
    justify-content: flex-end !important;
  }
}

@media (max-width: 767px) {
  .dvoc-navbar {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .dvoc-nav-center {
    display: none !important;
  }

  .dvoc-nav-right {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center;
  }

  .dvoc-help-circle {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
}


/* ===== NAVBAR CONSOLIDATED DROPDOWN PATCH ===== */
.dvoc-navbar .dvoc-nav-center-collapsed {
  display: none !important;
}

.dvoc-navbar {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

.dvoc-navbar .dvoc-nav-right {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.dvoc-navbar .dvoc-user-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(52vw, 280px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.dvoc-main-menu-dropdown {
  right: 0;
  left: auto;
  min-width: 230px;
  padding: 10px;
}

.dvoc-main-menu-dropdown a {
  font-weight: 800;
}

.dvoc-main-menu-dropdown a.active {
  background: rgba(255,255,255,0.16);
}

.dvoc-dropdown-divider {
  height: 1px;
  margin: 8px 6px;
  background: rgba(255,255,255,0.16);
}

@media (max-width: 767px) {
  .dvoc-navbar {
    grid-template-columns: auto 1fr auto;
  }

  .dvoc-navbar .dvoc-nav-right {
    display: flex !important;
  }

  .dvoc-navbar .dvoc-user-pill {
    max-width: 58vw;
    font-size: 0.95rem;
  }

  .dvoc-main-menu-dropdown {
    min-width: min(260px, calc(100vw - 24px));
  }
}



/* ===== EXPLORER TRAINING DEMO: COMPACT MODE CARDS ===== */
#explorer-training-demo-info .test-help-text:nth-of-type(3),
#explorer-training-demo-info .test-help-text:nth-of-type(4) {
  width: calc(50% - 6px);
  min-height: 0;
  padding: 12px 14px;
  border-radius: 18px;
  font-size: 0.9rem;
  line-height: 1.32;
}

#explorer-training-demo-info .test-help-text:nth-of-type(3) {
  margin-right: 8px;
}

#explorer-training-demo-info .test-help-text:nth-of-type(3) strong,
#explorer-training-demo-info .test-help-text:nth-of-type(4) strong {
  margin-bottom: 4px;
  font-size: 0.96rem;
}

@media (max-width: 640px) {
  #explorer-training-demo-info .test-help-text:nth-of-type(3),
  #explorer-training-demo-info .test-help-text:nth-of-type(4) {
    display: inline-block;
    width: calc(50% - 6px);
    margin-top: 14px;
    vertical-align: top;
  }

  #explorer-training-demo-info .test-help-text:nth-of-type(3) {
    margin-right: 8px;
  }
}

@media (max-width: 380px) {
  #explorer-training-demo-info .test-help-text:nth-of-type(3),
  #explorer-training-demo-info .test-help-text:nth-of-type(4) {
    display: block;
    width: 100%;
    margin-right: 0;
  }
}



/* ===== LEGAL ACCEPTANCE CHECKBOX ===== */
.dvoc-legal-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 6px 0 14px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.88);
  font-size: 0.92rem;
  line-height: 1.35;
  text-align: left;
}

.dvoc-legal-check input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: #7a1918;
}

.dvoc-legal-check a {
  color: #ffffff;
  font-weight: 900;
}

.org-legal-check {
  margin-top: 4px;
}

#auth-modal .dvoc-legal-check {
  margin-top: 2px;
}



/* ===== INDEX AUTH BUTTON SPLIT ===== */
.explore-auth-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.explore-auth-buttons .explore-login-button {
  min-width: 180px;
  text-align: center;
}

button.explore-login-button {
  font-family: inherit;
  cursor: pointer;
}

@media (max-width: 640px) {
  .explore-auth-buttons {
    flex-direction: column;
    width: 100%;
  }

  .explore-auth-buttons .explore-login-button {
    width: 100%;
    max-width: 320px;
  }
}


/* ===== EXPLORER VIDEO PREVIEW LOCKS ===== */
.video-list-thumb-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
}

.video-list-card.is-explorer-locked .video-list-thumb {
  filter: grayscale(0.35) brightness(0.62);
}

.explorer-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  text-align: center;
  background: rgba(20, 12, 12, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.explorer-lock-overlay span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(38, 30, 30, 0.84);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}




.playlist-create-container {
  padding-bottom: 140px;
}

.playlist-name-modal-card h2 {
  margin: 0 0 10px;
  color: #ffffff;
}

.playlist-modal-save-button {
  margin-top: 18px;
  margin-bottom: 0;
}


/* Create playlist topbar: no glass blur on this page */
.playlist-topbar,
.playlist-topbar .back-button {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* Playlist page heading below topbar */
.playlist-page-heading {
  margin: 22px auto 12px;
  padding: 0 16px;
  max-width: 920px;
  text-align: center;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  line-height: 1.2;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.96);
}

/* ===== EXPLORER TRAINING DEMO TEXT ONLY PATCH ===== */
#explorer-training-demo-info {
  padding: 20px 24px !important;
}

#explorer-training-demo-info::before {
  content: none !important;
  display: none !important;
}

#explorer-training-demo-info .test-section-header-row {
  margin-bottom: 8px !important;
}

#explorer-training-demo-info h2 {
  margin: 0 0 10px !important;
  font-size: clamp(1.05rem, 2vw, 1.35rem) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
}

#explorer-training-demo-info .test-help-text {
  max-width: 760px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  display: block !important;
  width: auto !important;
  min-height: 0 !important;
  color: rgba(255,255,255,0.84) !important;
  font-size: 0.98rem !important;
  line-height: 1.45 !important;
}

#explorer-training-demo-info .explorer-demo-sub {
  margin-top: 8px !important;
  color: rgba(255,255,255,0.72) !important;
  font-size: 0.9rem !important;
}

#explorer-training-demo-info .explorer-demo-sub strong {
  display: inline !important;
  margin: 0 !important;
  color: rgba(255,255,255,0.92) !important;
  font-size: inherit !important;
  font-weight: 900 !important;
}

#explorer-training-demo-info .test-help-text:last-child {
  border-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 640px) {
  #explorer-training-demo-info {
    padding: 18px 20px !important;
  }
}


/* ===== TESTS FOOTER: USE SAME STYLE AS CREATE PLAYLIST SAVE BAR ===== */
body.test-body .sticky-test-footer,
body.training-create-style-body .sticky-test-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 120 !important;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom)) !important;
  background: linear-gradient(
    180deg,
    rgba(37, 25, 23, 0) 0%,
    rgb(37 25 23 / 28%) 28%,
    rgb(37 25 23 / 56%) 100%
  ) !important;
  box-shadow: none !important;
  border-top: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.test-body .sticky-test-footer-inner,
body.training-create-style-body .sticky-test-footer-inner {
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.test-body #start-test-button,
body.training-create-style-body #start-test-button {
  width: 100% !important;
  min-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 18px !important;
  margin: 0 0 20px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: rgba(90, 48, 48, 1) !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24) !important;
}

body.test-body #start-test-button:disabled,
body.training-create-style-body #start-test-button:disabled {
  background: rgba(255, 255, 255, 0.24) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  cursor: not-allowed !important;
}

/* ===== ORGANIZATION ADD-SEATS LAYOUT TIDY ===== */
.organization-summary-head .organization-small-button {
  flex: 0 0 auto;
  align-self: flex-start;
}

.organization-seat-helper {
  margin-top: 10px;
}

.organization-seat-status {
  min-height: 0;
  margin-top: 10px;
}

.organization-seat-status:empty {
  display: none;
}

@media (min-width: 860px) {
  .organization-summary-head .organization-small-button {
    align-self: center;
  }
}

@media (max-width: 859px) {
  .organization-summary-head .organization-small-button {
    width: auto;
  }
}

/* ===== ORGANIZATION MANAGE SEATS ===== */
.organization-seat-reduction-summary {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.88);
  font-size: 0.94rem;
  font-weight: 700;
}

.organization-seat-manage-modal-card {
  width: min(94vw, 620px);
  max-height: min(88vh, 820px);
  overflow-y: auto;
  text-align: left;
}

.organization-seat-manage-modal-card .organization-invite-modal-title,
.organization-seat-manage-modal-card .organization-invite-modal-copy {
  text-align: center;
}

.organization-seat-manage-section {
  margin-top: 18px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,0.08);
}

.organization-seat-manage-section h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 1.08rem;
}

.organization-seat-manage-section .org-checkout-field {
  margin-top: 16px;
}

.organization-seat-manage-section .organization-action-button {
  width: 100%;
  margin-top: 14px;
}

.organization-seat-manage-divider {
  height: 1px;
  margin: 20px 0 0;
  background: rgba(255,255,255,0.16);
}

.organization-seat-pending {
  margin-top: 16px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.10);
}

.organization-seat-pending .organization-action-button {
  width: 100%;
  margin-top: 12px;
}

.organization-seat-manage-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.organization-seat-manage-footer .organization-action-button {
  min-width: 120px;
}

@media (max-width: 640px) {
  .organization-seat-manage-modal-card {
    width: min(96vw, 620px);
  }

  .organization-seat-manage-section {
    padding: 15px;
  }

  .organization-seat-manage-footer .organization-action-button {
    width: 100%;
  }
}



/* ===== TRAINING ASSIGNMENT ARCHIVE ===== */
.organization-archive-section {
  margin-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 16px;
}

.organization-archive-section > summary {
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.01em;
  list-style-position: inside;
}

.organization-archive-section > summary span {
  display: inline-flex;
  min-width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.82em;
}

.organization-archive-help {
  margin-top: 10px;
  margin-bottom: 12px;
}

.organization-archive-section .organization-members-list {
  margin-top: 8px;
}