/* ================================================
   OferTube - YouTube-Like Dark Theme
   ================================================ */

/* CSS Custom Properties */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f9f9f9;
  --bg-tertiary: #f2f2f2;
  --bg-hover: #ebebeb;
  --bg-active: #e0e0e0;
  --bg-chip: #f2f2f2;
  --bg-chip-active: #0f0f0f;
  --text-primary: #0f0f0f;
  --text-secondary: #606060;
  --text-chip-active: #ffffff;
  --accent: #ff0000;
  --accent-hover: #cc0000;
  --border-color: #e5e5e5;
  --header-height: 62px;
  /* iOS safe area insets — filled by the browser on notched iPhones */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
  /* Full header height = visual height + status-bar safe area */
  --header-full: calc(var(--header-height) + var(--safe-top));
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 72px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 12px;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

body {
  font-family: 'Roboto', Arial, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Disable accidental text selection on mobile touch — allow only in editable fields */
@media (max-width: 900px) {
  body {
    -webkit-user-select: none;
    user-select: none;
  }
  input, textarea, [contenteditable], [contenteditable] * {
    -webkit-user-select: text;
    user-select: text;
  }
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input {
  font-family: inherit;
  color: inherit;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #c8c8c8;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

/* ================================================
   Header
   ================================================ */
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-full);
  background-color: var(--bg-primary);
  display: flex;
  align-items: flex-end; /* align items to bottom so they sit below the notch */
  justify-content: space-between;
  padding: 6px 16px;
  padding-top: max(6px, calc(var(--safe-top) + 6px));
  padding-left: max(16px, calc(var(--safe-left) + 16px));
  padding-right: max(16px, calc(var(--safe-right) + 16px));
  z-index: 1000;
  border-bottom: 1px solid var(--border-color);
}

.header-start {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 200px;
}

.menu-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.menu-btn:hover {
  background: var(--bg-tertiary);
}

.menu-btn svg {
  width: 24px;
  height: 24px;
  fill: var(--text-primary);
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.logo-image {
  height: 34px;
  width: auto;
  display: block;
}

/* Search */
.header-center {
  display: flex;
  align-items: center;
  flex: 0 1 728px;
  max-width: 728px;
}

.search-form {
  display: flex;
  flex: 1;
  height: 40px;
  border: 1px solid var(--border-color);
  border-radius: 40px;
  overflow: hidden;
  background: var(--bg-primary);
  transition: border-color var(--transition-fast);
}

.search-form:focus-within {
  border-color: #065fd4;
}

.search-input {
  flex: 1;
  height: 100%;
  background: transparent;
  border: none;
  padding: 0 16px;
  font-size: 15px;
  color: var(--text-primary);
  outline: none;
  direction: rtl;
}

.search-input::placeholder {
  color: var(--text-secondary);
}

.search-clear-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1;
  padding: 0 6px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.15s, color 0.15s;
}
.search-clear-btn.visible { display: flex; }
.search-clear-btn:hover { opacity: 1; color: var(--text-primary); }

.search-btn {
  width: 48px;
  height: 100%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast);
  border-radius: 0 40px 40px 0;
}

.search-btn:hover {
  background: var(--bg-tertiary);
}

.search-btn svg {
  width: 20px;
  height: 20px;
  fill: var(--text-secondary);
}

.header-end {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  justify-content: flex-end;
}

.session-timer {
  font-size: 12px;
  font-weight: 500;
  font-family: 'Roboto Mono', 'Courier New', monospace;
  letter-spacing: 0.5px;
  padding: 3px 7px;
  border-radius: 6px;
  border: none;
  transition: color 0.6s, background 0.6s;
  white-space: nowrap;
  opacity: 0.75;
}

.session-timer.status-good {
  color: #1a7a3a;
  background: rgba(34, 197, 94, 0.08);
}

.session-timer.status-medium {
  color: #b45309;
  background: rgba(251, 146, 60, 0.10);
}

.session-timer.status-severe {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.10);
}

@media (max-width: 900px) {
  .session-timer {
    font-size: 12px;
    padding: 3px 7px;
    border-radius: 6px;
    opacity: 0.85;
  }
}

/* ================================================
   Main Layout
   ================================================ */
#main-layout {
  display: flex;
  padding-top: var(--header-full);
  min-height: 100dvh;
  min-height: 100vh; /* fallback for older browsers */
  min-height: 100dvh;
}

/* ================================================
   Sidebar
   ================================================ */
#sidebar {
  position: fixed;
  top: var(--header-full);
  right: 0;
  width: var(--sidebar-width);
  height: calc(100dvh - var(--header-full));
  /* Fallback for older browsers */
  height: calc(100vh - var(--header-full));
  height: calc(100dvh - var(--header-full));
  background: var(--bg-primary);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 12px 0 0;
  z-index: 900;
  transition: transform var(--transition-normal), width var(--transition-normal);
  border-left: 1px solid var(--border-color);
}

#sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

#sidebar.collapsed .sidebar-item-text {
  display: none;
}

#sidebar.collapsed .sidebar-item {
  flex-direction: column;
  padding: 12px 0;
  gap: 4px;
}

.sidebar-section {
  padding: 0 12px;
  margin-bottom: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-section-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 8px 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background var(--transition-fast);
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}

.sidebar-item:hover {
  background: var(--bg-tertiary);
}

.sidebar-item.active {
  background: var(--bg-tertiary);
  font-weight: 500;
}

.sidebar-item svg {
  width: 24px;
  height: 24px;
  fill: var(--text-primary);
  flex-shrink: 0;
}

/* ================================================
   Content Area
   ================================================ */
#content {
  flex: 1;
  margin-right: var(--sidebar-width);
  padding: 24px;
  min-height: calc(100dvh - var(--header-full));
  transition: margin-right var(--transition-normal);
  /* prevent any child from causing horizontal overflow */
  overflow-x: hidden;
}

#content.sidebar-collapsed {
  margin-right: var(--sidebar-collapsed-width);
}

/* ================================================
   Category Chips (Filter Bar)
   ================================================ */
.chips-bar {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: sticky;
  top: var(--header-full);
  background: var(--bg-primary);
  z-index: 100;
}

.chips-bar::-webkit-scrollbar {
  display: none;
}

.chip {
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--bg-chip);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  flex-shrink: 0;
}

.chip:hover {
  background: var(--bg-hover);
}

.chip.active {
  background: var(--bg-chip-active);
  color: var(--text-chip-active);
}

/* ================================================
   Video Grid
   ================================================ */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px 16px;
}

.video-card {
  cursor: pointer;
  border-radius: var(--radius-xl);
  overflow: visible;
  transition: transform var(--transition-fast);
}

.video-card:hover {
  transform: translateY(-2px);
}

.video-card:hover .video-thumbnail img {
  transform: scale(1.04);
}

.video-card:hover .video-thumbnail {
  box-shadow: var(--shadow-md);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: var(--bg-secondary);
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.video-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.video-duration {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.video-info {
  display: flex;
  gap: 12px;
  padding: 12px 4px;
}

.video-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.video-details {
  flex: 1;
  min-width: 0;
}

.video-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}

.video-channel {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.video-meta {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ================================================
   Video Player Page
   ================================================ */
.player-page {
  display: flex;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.player-main {
  flex: 1;
  min-width: 0;
}

.player-container {
  position: relative;
  /* Limit width so height never exceeds viewport (leave room for header + title + padding).
     Multiplied by 1.1 to make the player ~10% larger. */
  width: 100%;
  max-width: calc((100vh - var(--header-height) - 200px) * 16 / 9 * 1.1);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.player-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.player-info {
  /* Align title text to the video frame edges */
  width: 100%;
  max-width: calc((100vh - var(--header-height) - 200px) * 16 / 9 * 1.1);
  margin: 0 auto;
  padding: 16px 0;
}

.player-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 12px;
}

.player-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.player-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--bg-tertiary);
  font-size: 14px;
  font-weight: 500;
  transition: background var(--transition-fast);
}

.player-action-btn:hover {
  background: var(--bg-hover);
}

.player-action-btn svg {
  width: 20px;
  height: 20px;
  fill: var(--text-primary);
}

/* Up Next Sidebar */
.up-next {
  width: 400px;
  flex-shrink: 0;
}

.up-next-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
  padding: 8px 0;
}

.up-next-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.up-next-item {
  display: flex;
  gap: 8px;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.up-next-item:hover {
  background: var(--bg-tertiary);
}

.up-next-item.playing {
  background: var(--bg-tertiary);
}

.up-next-thumb {
  width: 168px;
  height: 94px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-secondary);
}

.up-next-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.up-next-info {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}

.up-next-info .video-title {
  font-size: 14px;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.up-next-info .video-channel {
  font-size: 12px;
  margin-top: 4px;
}

/* ================================================
   Admin Panel
   ================================================ */
.admin-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.admin-panel {
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  width: 90%;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.3s ease;
  position: relative;
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.admin-header h2 {
  font-size: 18px;
  font-weight: 600;
}

.admin-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: background var(--transition-fast);
}

.admin-close-btn:hover {
  background: var(--bg-tertiary);
}

.admin-body {
  padding: 20px;
}

/* PIN Entry */
.pin-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 40px 20px;
}

.pin-entry h3 {
  font-size: 20px;
  font-weight: 500;
}

.pin-dots {
  display: flex;
  gap: 16px;
}

.pin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--text-secondary);
  transition: all var(--transition-fast);
}

.pin-dot.filled {
  background: var(--text-primary);
  border-color: var(--text-primary);
  transform: scale(1.1);
}

.pin-dot.error {
  border-color: var(--accent);
  background: var(--accent);
  animation: shake 0.3s ease;
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 280px;
}

.pin-key {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  font-size: 24px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  user-select: none;
}

.pin-key:hover {
  background: var(--bg-hover);
}

.pin-key:active {
  transform: scale(0.95);
  background: var(--bg-active);
}

.pin-key.backspace {
  font-size: 18px;
}

.pin-key.empty {
  visibility: hidden;
}

/* Add Video Form */
.add-video-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.add-video-form label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-input {
  width: 100%;
  height: 44px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0 14px;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--transition-fast);
}

.form-input:focus {
  border-color: #065fd4;
}

.form-select {
  width: 100%;
  height: 44px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0 14px;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  appearance: none;
  cursor: pointer;
}

.btn-primary {
  width: 100%;
  height: 44px;
  background: #065fd4;
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-primary:hover {
  background: #0551b5;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-danger {
  background: var(--accent);
}

.btn-danger:hover {
  background: var(--accent-hover);
}

/* Video List in Admin */
.admin-video-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-video-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--radius-md);
  background: var(--bg-primary);
}

.admin-video-thumb {
  width: 100px;
  height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-tertiary);
}

.admin-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-video-info {
  flex: 1;
  min-width: 0;
}

.admin-video-title {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-video-lang {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.admin-video-delete {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.admin-video-delete:hover {
  background: rgba(255, 0, 0, 0.2);
  color: var(--accent);
}

/* Admin section divider */
.admin-divider {
  height: 1px;
  background: var(--border-color);
  margin: 16px 0;
}

.admin-section-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-secondary);
}

/* Category editor in admin */
.admin-category-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.admin-cat-move {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.admin-cat-move:hover:not(:disabled) {
  background: var(--bg-hover);
}

.admin-cat-move:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Browse YouTube button */
#browse-youtube-btn {
  width: 100%;
  padding: 10px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast);
  margin-bottom: 8px;
}

#browse-youtube-btn:hover {
  background: var(--bg-hover);
}

.url-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-align: center;
}

/* Category chip toggles (admin video list) */
.category-chips-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.cat-chip {
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid var(--border-color);
  transition: all var(--transition-fast);
  line-height: 1.4;
}

.cat-chip:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.cat-chip.active {
  background: var(--bg-chip-active);
  color: var(--text-chip-active);
  border-color: transparent;
}

/* Category add/delete controls */
.delete-cat-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border-color);
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
  color: var(--text-secondary);
}

.delete-cat-btn:hover {
  background: rgba(255, 0, 0, 0.15);
  border-color: transparent;
}

.add-category-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}

#new-category-input {
  flex: 1;
  height: 32px;
  font-size: 13px;
}

#add-category-btn {
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 13px;
  height: 32px;
  display: flex;
  align-items: center;
}

/* Emoji picker popup */
.emoji-picker {
  position: absolute;
  display: none;
  flex-direction: column;
  background: var(--bg-card, var(--bg-secondary));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 8px;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  width: 280px;
  max-height: 300px;
}

.emoji-picker.open {
  display: flex;
}

.emoji-picker button {
  font-size: 20px;
  padding: 5px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
  transition: background var(--transition-fast);
}

.emoji-picker button:hover {
  background: var(--bg-hover);
}

/* Emoji icon for category (sidebar + chips) */
.cat-emoji {
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.emoji-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
  position: relative;
}

.emoji-btn:hover {
  background: var(--bg-hover);
}

/* PIN Change */
.pin-change-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Loading spinner */
.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--bg-tertiary);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Toast Notification */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #ffffff;
  color: #1a1a2e;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  z-index: 9100;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.07);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 900px) {
  body.studio-open .toast {
    bottom: auto;
    top: 16px;
    transform: translateX(-50%) translateY(-80px);
  }
  body.studio-open .toast.show {
    transform: translateX(-50%) translateY(0);
  }
}

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  gap: 10px;
}

.empty-state h3 {
  font-size: 17px;
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  margin: 0;
}

.empty-state p {
  font-size: 13px;
  color: #b0b4ba;
  max-width: 340px;
  margin: 0;
  font-weight: 300;
  letter-spacing: 0.01em;
}

/* ================================================
   Responsive
   ================================================ */
@media (max-width: 1200px) {
  .up-next {
    width: 350px;
  }
}

@media (max-width: 1000px) {
  .player-page {
    flex-direction: column;
  }

  .up-next {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .chips-bar {
    display: none;
  }

  #sidebar {
    transform: translateX(100%);
    width: var(--sidebar-width);
    background: var(--bg-primary);
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transition: transform var(--transition-normal), opacity var(--transition-normal), visibility 0s linear 0.25s, box-shadow 0s linear 0.25s;
  }

  #sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
    opacity: 1;
    visibility: visible;
    transition: transform var(--transition-normal), opacity var(--transition-normal), visibility 0s linear, box-shadow 0s linear;
  }

  #content {
    margin-right: 0;
  }

  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 600px) {
  .header-center {
    display: none;
  }

  .header-start,
  .header-end {
    min-width: 0;
    flex-shrink: 1;
  }

  /* Ensure header children align properly at the bottom of the taller header */
  #header {
    align-items: center;
    padding-bottom: 8px;
  }

  .video-grid {
    grid-template-columns: 1fr;
    gap: 16px 0;
  }

  .video-card {
    max-width: 100%;
    overflow: hidden;
  }

  .video-card {
    border-radius: var(--radius-md);
  }

  .video-thumbnail {
    border-radius: var(--radius-md);
  }

  .video-info {
    padding: 8px 0;
  }

  #content {
    padding: 8px max(16px, calc(var(--safe-right) + 8px));
    padding-left: max(16px, calc(var(--safe-left) + 8px));
    overflow-x: hidden;
  }

  .player-title {
    font-size: 16px;
  }

  .video-title {
    font-size: 15px;
    /* slightly larger for mobile readability */
    font-weight: 500;
  }

  .up-next-thumb {
    width: 120px;
    height: 68px;
  }

  .admin-panel {
    width: 95%;
    max-height: 90vh;
  }

  .pin-key {
    width: 60px;
    height: 60px;
    font-size: 20px;
  }
}

/* Mobile search toggle */
.mobile-search-btn {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.mobile-search-btn:hover {
  background: var(--bg-tertiary);
}

.mobile-search-btn svg {
  width: 24px;
  height: 24px;
  fill: var(--text-primary);
}

@media (max-width: 600px) {
  .mobile-search-btn {
    display: flex;
  }
}

/* Mobile search overlay */
.mobile-search-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-full);
  background: var(--bg-primary);
  z-index: 1100;
  align-items: flex-end;
  padding: 0 8px 8px;
  padding-top: max(8px, calc(var(--safe-top) + 8px));
  gap: 8px;
}

.mobile-search-overlay.active {
  display: flex;
}

.mobile-search-overlay .search-form {
  flex: 1;
}

.mobile-search-back {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-search-back svg {
  width: 24px;
  height: 24px;
  fill: var(--text-primary);
}

/* Preview card in admin */
.video-preview-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  margin-top: 12px;
  animation: fadeIn 0.3s ease;
}

.video-preview-card img {
  width: 120px;
  height: 68px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.video-preview-info {
  flex: 1;
}

.video-preview-info h4 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.video-preview-info p {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Watched video */
.video-card.watched {
  opacity: 0.5;
}

.video-card.watched .video-thumbnail::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  background: rgba(0, 0, 0, 0.72);
  color: white;
  font-size: 14px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 26px;
  text-align: center;
}

/* ================================================
   Admin – Tabs
   ================================================ */
.admin-tabs {
  display: flex;
  gap: 2px;
  padding: 0 8px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
  overflow-x: auto;
  scrollbar-width: none;
}

.admin-tabs::-webkit-scrollbar {
  display: none;
}

.admin-tab {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast);
  border-bottom: 2px solid transparent;
}

.admin-tab:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.admin-tab.active {
  color: #065fd4;
  border-bottom-color: #065fd4;
}

/* ================================================
   Admin – YouTube Search
   ================================================ */
.yt-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.yt-search-row .form-input {
  flex: 1;
}

.yt-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.yt-result-card {
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  overflow: hidden;
  transition: border-color var(--transition-fast);
  background: var(--bg-primary);
}

.yt-result-card:has(.yt-result-checkbox:checked) {
  border-color: #065fd4;
}

.yt-result-label {
  display: block;
  cursor: pointer;
}

.yt-result-label input[type="checkbox"] {
  display: none;
}

.yt-result-thumb {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: var(--bg-tertiary);
  overflow: hidden;
}

.yt-result-thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.yt-result-card:hover .yt-result-thumb img {
  transform: scale(1.05);
}

.yt-result-add-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
  cursor: pointer;
  z-index: 2;
}

.yt-result-card:hover .yt-result-add-btn {
  opacity: 1;
}

.yt-result-info {
  padding: 6px 8px;
}

.yt-result-title {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 2px;
}

.yt-result-channel {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================================================
   Admin – Category Cards
   ================================================ */
.admin-category-card {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 6px 8px;
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  transition: box-shadow var(--transition-fast);
}

.admin-category-card:hover {
  box-shadow: var(--shadow-sm);
}

.cat-video-count {
  font-size: 11px;
  font-weight: 600;
  color: white;
  background: var(--text-secondary);
  border-radius: 10px;
  padding: 1px 7px;
  flex-shrink: 0;
  min-width: 22px;
  text-align: center;
}

/* ================================================
   Admin – Video Manager (bulk)
   ================================================ */
.video-manager-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.btn-secondary {
  padding: 0 14px;
  height: 36px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
  display: inline-flex;
  align-items: center;
}

.btn-secondary:hover {
  background: var(--bg-hover);
}

.video-checkbox {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #065fd4;
}

.admin-video-item.selected {
  background: #e8f0fe;
  border-radius: var(--radius-md);
}

/* Floating toolbar */
.floating-toolbar {
  position: sticky;
  bottom: 8px;
  left: 0;
  right: 0;
  background: var(--bg-chip-active);
  color: var(--text-chip-active);
  border-radius: var(--radius-lg);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  margin-top: 12px;
}

.floating-toolbar-count {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.btn-danger {
  background: var(--accent) !important;
}

.btn-danger:hover {
  background: var(--accent-hover) !important;
}

/* ================================================
   Admin – Expanded Emoji Picker
   ================================================ */
.emoji-picker-tabs {
  display: flex;
  gap: 2px;
  padding: 4px 4px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 6px;
}

.emoji-group-tab {
  padding: 4px 8px;
  font-size: 16px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}

.emoji-group-tab:hover {
  opacity: 0.8;
  background: var(--bg-tertiary);
}

.emoji-group-tab.active {
  opacity: 1;
  background: var(--bg-hover);
}

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  max-height: 160px;
  overflow-y: auto;
}

.emoji-option {
  font-size: 18px;
  padding: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
  transition: background var(--transition-fast);
}

.emoji-option:hover {
  background: var(--bg-hover);
}

/* (emoji-picker width now set in main definition) */

/* Video Ended Overlay */
.video-ended-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 10;
  animation: fadeIn 0.3s ease;
}

.video-ended-content {
  text-align: center;
  padding: 20px;
}

.video-ended-content h2 {
  font-size: 24px;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.video-ended-content p {
  color: var(--text-secondary);
  font-size: 16px;
}
/* ── Auth Bar ──────────────────────────────────────────────────────────── */
#auth-bar {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 900;
}

.auth-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 6px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.auth-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.auth-username {
  font-size: 13px;
  color: var(--text-primary);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-signout-btn {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.auth-signout-btn:hover { background: var(--hover); }

/* ── Login Screen ──────────────────────────────────────────────────────── */
#login-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 9999;
}

.login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 48px 40px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
  max-width: 360px;
  width: 90%;
  text-align: center;
}

.login-logo img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  margin-bottom: 4px;
}

.login-logo h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.login-logo p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.login-btn-wrap {
  display: flex;
  justify-content: center;
}

.login-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
}

/* ── Sidebar Footer (user info) ────────────────────────────────────────── */
.sidebar-footer {
  margin-top: auto;
  padding: 12px 8px;
  border-top: 1px solid var(--border);
}

.sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 12px;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
}

.sidebar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.sidebar-username {
  font-size: 12px;
  color: var(--text-secondary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-signout-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 14px;
  cursor: pointer;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.sidebar-signout-btn:hover { background: var(--hover); }

/* Make #app flex so sidebar footer pushes to bottom */
#sidebar {
  display: flex !important;
  flex-direction: column;
}

/* ================================================
   User Studio — full-page overlay
   ================================================ */

#studio-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.58);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* iPhone: padding respects safe areas so the card isn't hidden under notch */
  padding-top: max(20px, calc(var(--safe-top) + 12px));
  padding-bottom: max(20px, calc(var(--safe-bottom) + 12px));
  padding-left: max(20px, calc(var(--safe-left) + 12px));
  padding-right: max(20px, calc(var(--safe-right) + 12px));
  overflow: hidden;
}

@keyframes studio-modal-in {
  from { opacity: 0; transform: scale(0.97) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.studio-container {
  display: flex;
  position: relative;
  width: min(1380px, 100%);
  height: min(86dvh, 860px);
  height: min(86vh, 860px); /* fallback */
  height: min(86dvh, 860px);
  background: var(--bg-primary);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 64px rgba(0,0,0,0.5);
  animation: studio-modal-in 0.2s ease-out;
}

/* Close button — top-right corner of the card (nav side in RTL) */
.studio-close-floating {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  transition: background 0.15s, color 0.15s;
}
.studio-close-floating:hover {
  background: rgba(0,0,0,0.08);
  color: var(--text-primary);
}

/* ── Elegant scrollbars inside studio ── */
.studio-content,
.studio-nav,
.approval-results-scroll,
.approval-cats-panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(26,115,232,0.25) transparent;
}
.studio-content::-webkit-scrollbar,
.studio-nav::-webkit-scrollbar,
.approval-results-scroll::-webkit-scrollbar,
.approval-cats-panel::-webkit-scrollbar { width: 3px; }
.studio-content::-webkit-scrollbar-track,
.studio-nav::-webkit-scrollbar-track,
.approval-results-scroll::-webkit-scrollbar-track,
.approval-cats-panel::-webkit-scrollbar-track { background: transparent; }
.studio-content::-webkit-scrollbar-thumb,
.studio-nav::-webkit-scrollbar-thumb,
.approval-results-scroll::-webkit-scrollbar-thumb,
.approval-cats-panel::-webkit-scrollbar-thumb {
  background: rgba(26,115,232,0.3);
  border-radius: 99px;
}
.studio-content::-webkit-scrollbar-thumb:hover,
.studio-nav::-webkit-scrollbar-thumb:hover,
.approval-results-scroll::-webkit-scrollbar-thumb:hover,
.approval-cats-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(26,115,232,0.55);
}

/* ── Studio nav (left sidebar) ── */
.studio-nav {
  width: 210px;
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  padding: 0 0 16px;
  overflow-y: auto;
}

.studio-nav-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 48px 16px 20px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 8px;
  gap: 10px;
}

/* PIN toggle row — desktop sidebar */
.studio-pin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border-top: 1px solid var(--border-color);
  padding: 9px 16px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s;
  box-sizing: border-box;
}
.studio-pin-row:active { background: var(--hover); }
.pin-row-label { flex: 1; }

/* iOS-style toggle switch */
.pin-toggle-switch {
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: #ccc;
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s;
  pointer-events: none;
}
.pin-toggle-switch.pin-toggle-on { background: #4caf50; }
.pin-toggle-knob {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.25s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.pin-toggle-switch.pin-toggle-on .pin-toggle-knob { left: 16px; }
[data-theme="dark"] .pin-toggle-switch { background: #555; }
[data-theme="dark"] .pin-toggle-switch.pin-toggle-on { background: #4caf50; }

/* Gear button — manage PIN (change / remove) — desktop only */
.pin-manage-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 14px;
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
}
.pin-manage-btn:hover { background: var(--hover); color: var(--text-primary); }

/* Mobile PIN icon — small lock in bottom nav, hidden on desktop */
.studio-pin-mobile-btn {
  display: none;
}

.studio-nav-logo {
  width: calc(100% - 32px);
  max-width: 160px;
  height: auto;
  object-fit: contain;
}

.studio-nav-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.studio-nav-items {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px;
}

.studio-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: right;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.studio-nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.studio-nav-item.active {
  background: #e8f0fe;
  color: #1a73e8;
  border-right: 3px solid #1a73e8;
  padding-right: 9px; /* compensate for border */
}

.studio-nav-item svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
}

.studio-close-btn {
  display: none; /* hidden on desktop — floating × handles it */
}

.studio-close-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* ── Studio content area ── */
.studio-content {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-primary);
}

.studio-tab {
  padding: 24px 28px 48px;
  max-width: 900px;
}

.studio-tab-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.studio-tab-header h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.studio-tab-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.studio-section {
  margin-bottom: 28px;
}

.studio-section-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

/* ── Studio video list ── */
.studio-video-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  margin-bottom: 4px;
}

.studio-video-row:hover {
  background: var(--bg-secondary);
}

.studio-video-row.selected {
  background: #e8f0fe;
  border-color: #1a73e8;
}

.studio-vid-thumb {
  width: 80px;
  height: 45px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.studio-vid-info {
  flex: 1;
  min-width: 0;
}

.studio-vid-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.studio-vid-meta {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.studio-vid-delete-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast);
  flex-shrink: 0;
}

.studio-video-row:hover .studio-vid-delete-btn {
  opacity: 1;
}

.studio-vid-delete-btn:hover {
  background: #fce8e6;
}

/* ── Studio category rows ── */
.studio-cat-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  background: var(--bg-primary);
  transition: box-shadow var(--transition-fast);
}

.studio-cat-row:hover {
  box-shadow: var(--shadow-sm);
}

.studio-cat-name-input {
  height: 36px;
  margin-bottom: 0;
}

/* ── Emoji picker ── */
.studio-emoji-picker {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 8px;
  margin-top: 8px;
  box-shadow: var(--shadow-md);
}

.studio-emoji-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  background: var(--bg-primary);
  user-select: none;
}

.studio-emoji-btn:hover {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

/* ── PIN dialog ── */
#studio-pin-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
}

.studio-pin-card {
  background: var(--bg-primary);
  border-radius: 20px;
  padding: 40px 36px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 320px;
  max-width: 90vw;
  animation: studioFadeIn 0.25s ease;
}

@keyframes studioFadeIn {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.studio-pin-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.studio-pin-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  text-align: center;
}

.studio-pin-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  text-align: center;
}

.studio-pin-inputs {
  display: flex;
  gap: 10px;
  direction: ltr;
}

.studio-pin-digit {
  width: 52px;
  height: 60px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

.studio-pin-digit:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
  background: var(--bg-primary);
}

.studio-pin-error {
  font-size: 13px;
  color: var(--accent);
  min-height: 18px;
  text-align: center;
  margin: 0;
}


.studio-pin-forgot-btn {
  font-size: 12px;
  color: #1a73e8;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.studio-pin-forgot-btn:hover {
  color: #1558b0;
}

/* ── Responsive: bottom tab bar on mobile ── */
@media (max-width: 600px) {
  /* Full-screen on mobile */
  #studio-overlay {
    padding: 0;
    background: var(--bg-primary);
    gap: 0;
  }

  .studio-container {
    width: 100%;
    height: 100vh;   /* fallback */
    height: 100dvh;  /* respects iOS dynamic toolbar */
    border-radius: 0;
    box-shadow: none;
    animation: none;
    flex-direction: column;
    overflow: hidden;
  }

  /* Content fills space above nav */
  .studio-content {
    order: 1;
    flex: 1;
    min-height: 0;
  }

  /* ── Bottom tab bar ── */
  .studio-nav {
    order: 2;
    width: 100%;
    flex-direction: row;
    /* 60px visual + iPhone home indicator safe area */
    height: calc(60px + var(--safe-bottom));
    min-height: calc(60px + var(--safe-bottom));
    padding: 0 0 var(--safe-bottom);
    border-right: none;
    border-bottom: none;
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
    align-items: stretch;
    flex-shrink: 0;
    background: var(--bg-primary);
  }

  .studio-nav-header { display: none; }

  .studio-nav-items {
    flex-direction: row;
    flex: 1;
    padding: 0;
    gap: 0;
  }

  .studio-nav-item {
    flex-direction: column;
    gap: 4px;
    padding: 8px 4px 6px;
    flex: 1;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    border-right: none !important;
    padding-right: 4px !important;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    transition: color 0.2s, background 0.2s;
    position: relative;
  }

  .studio-nav-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: transparent;
    transition: background 0.2s;
  }

  .studio-nav-item.active {
    background: transparent;
    color: #1a73e8;
    border-right: none;
  }

  .studio-nav-item.active::after {
    background: #1a73e8;
  }

  .studio-nav-item:hover:not(.active) { background: var(--bg-secondary); }

  .studio-nav-item span {
    display: block !important;
    font-size: 10px;
    white-space: nowrap;
  }

  .studio-nav-item svg {
    width: 22px;
    height: 22px;
  }

  /* Hide desktop PIN row; show mobile lock icon instead */
  .studio-pin-row { display: none; }

  .studio-pin-mobile-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px 6px;
    width: 48px;
    flex-shrink: 0;
    border: none;
    border-left: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }
  .studio-pin-mobile-btn svg { width: 20px; height: 20px; }
  .studio-pin-mobile-btn::after {
    content: 'ססמה';
    display: block;
    font-size: 10px;
    font-weight: 500;
  }
  .studio-pin-mobile-btn:hover { background: var(--bg-secondary); }
  .studio-pin-mobile-btn.pin-mobile-active { color: #4caf50; }

  /* Single close button in nav — floating one hidden */
  .studio-close-floating { display: none; }

  .studio-close-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px 6px;
    width: 60px;
    flex-shrink: 0;
    border-radius: 0;
    border: none;
    border-right: none;
    border-left: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
  }

  .studio-close-btn:hover { background: var(--bg-secondary); color: var(--accent); }

  .studio-close-btn svg { width: 22px; height: 22px; }

  .studio-close-btn::after {
    content: 'סגור';
    display: block;
    font-size: 10px;
    font-weight: 500;
  }

  .studio-tab { padding: 16px 14px 20px; }
}

/* ================================================
   Approval Tab ("אישור סרטונים")
   ================================================ */

.approval-layout {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
}

/* ── Left: categories panel ── */

.approval-cats-panel {
  width: 290px;
  flex-shrink: 0;
  border-right: 2px solid var(--border-color);
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  padding: 16px 16px 16px 20px;
  gap: 6px;
  overflow-y: auto;
}

.approval-cats-panel--right {
  border-right: none;
  border-left: 2px solid var(--border-color);
}

.approval-cats-panel-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
  padding: 0 4px 8px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  margin-bottom: 2px;
}

.approval-cats-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  width: 100%;
}

.approval-add-cat-btn {
  margin-top: 4px;
  padding: 7px 10px;
  border-radius: 20px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
  text-align: center;
  width: 100%;
  align-self: stretch;
}

.approval-add-cat-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

/* ── Category pills ── */

.approval-cat-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 20px;
  border: 2px solid var(--border-color);
  background: var(--bg-secondary);
  cursor: pointer;
  font-size: 13px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  user-select: none;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.approval-cat-pill:hover {
  border-color: #1a73e8;
  background: var(--bg-hover);
}

.approval-cat-pill.selected {
  border-color: #0f9d58;
  background: #e6f4ed;
  color: #0b7a44;
}

.approval-cat-icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1;
}

/* ── Category emoji button (the icon itself is clickable) ── */
.cat-icon-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 3px;
  border-radius: 5px;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
/* On pill hover: subtle hint that the icon is clickable */
.approval-cat-pill:hover .cat-icon-btn {
  background: rgba(26,115,232,0.08);
  transform: scale(1.08);
  outline: 1px dashed rgba(26,115,232,0.5);
  outline-offset: 1px;
}
.cat-icon-btn:hover {
  background: rgba(26,115,232,0.15);
  transform: scale(1.1);
}

/* ── Custom Confirm Dialog ── */
@keyframes confirmPop {
  0%   { opacity: 0; transform: scale(0.88) translateY(8px); }
  100% { opacity: 1; transform: scale(1)    translateY(0);   }
}

dialog.studio-confirm-dlg {
  position: fixed;
  inset: 0;
  margin: auto;
  border: none;
  border-radius: 16px;
  padding: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
  background: var(--surface, #fff);
  overflow: hidden;
  animation: confirmPop 0.18s ease-out forwards;
}
dialog.studio-confirm-dlg::backdrop {
  background: rgba(0,0,0,0.38);
  backdrop-filter: blur(2px);
}
.studio-confirm-icon {
  display: flex;
  justify-content: center;
  padding: 28px 24px 12px;
  color: #e67e22;
}
.studio-confirm-body {
  padding: 0 24px 20px;
  text-align: center;
  direction: rtl;
}
.studio-confirm-body p {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary, #202124);
}
.studio-confirm-body p:last-child { margin-bottom: 0; }
.studio-confirm-actions {
  display: flex;
  border-top: 1px solid var(--border-color, #e0e0e0);
}
.studio-confirm-actions button {
  flex: 1;
  height: 46px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.studio-confirm-ok {
  color: #d93025;
  border-left: 1px solid var(--border-color, #e0e0e0);
}
.studio-confirm-ok:hover   { background: rgba(217,48,37,0.07); }
.studio-confirm-cancel     { color: var(--text-secondary, #5f6368); }
.studio-confirm-cancel:hover { background: rgba(0,0,0,0.04); }

/* Prompt dialog — ok button is blue (save action, not destructive) */
.studio-confirm-dlg:has(.studio-prompt-input) .studio-confirm-ok {
  color: #1a73e8;
}
.studio-confirm-dlg:has(.studio-prompt-input) .studio-confirm-ok:hover {
  background: rgba(26,115,232,0.07);
}
.studio-prompt-input {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1.5px solid #c7d2dc;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text-primary, #202124);
  background: var(--bg-primary, #fff);
  box-sizing: border-box;
  text-align: right;
  direction: rtl;
  outline: none;
  transition: border-color 0.15s;
}
.studio-prompt-input:focus { border-color: #1a73e8; }

/* ── Emoji Dialog (native <dialog> — always above everything) ── */
dialog.emoji-dlg {
  border: none;
  border-radius: 16px;
  padding: 0;
  width: 480px;
  max-width: calc(100vw - 20px);
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: 0 16px 56px rgba(0,0,0,0.45);
  direction: rtl;
}
dialog.emoji-dlg::backdrop { background: rgba(0,0,0,0.5); }
.emoji-dlg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
}
.emoji-dlg-title { font-size: 14px; font-weight: 600; }
.emoji-dlg-x {
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 1;
}
.emoji-dlg-x:hover { background: var(--hover); }
.emoji-dlg-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 12px 16px 8px;
}
.emoji-dlg-tab {
  font-size: 13px;
  padding: 5px 13px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.emoji-dlg-tab:hover { background: var(--hover); color: var(--text-primary); }
.emoji-dlg-tab.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.emoji-dlg-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 10px 16px 18px;
  max-height: 340px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.emoji-dlg-em {
  font-size: 30px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  padding: 7px 3px;
  text-align: center;
  line-height: 1;
  transition: background 0.1s, transform 0.1s;
}
.emoji-dlg-em:hover { background: var(--hover); transform: scale(1.2); }
@media (max-width: 520px) {
  dialog.emoji-dlg { width: calc(100vw - 16px); border-radius: 18px 18px 0 0; }
  .emoji-dlg-grid { grid-template-columns: repeat(7, 1fr); max-height: 55vh; }
  .emoji-dlg-em { font-size: 28px; }
}

.approval-cat-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.approval-cat-edit {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
  padding: 0;
}

.approval-cat-edit:hover {
  background: #e8f0fe;
  color: #1a73e8;
}

.approval-cat-delete {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
  padding: 0;
}

.approval-cat-delete:hover {
  background: #fce8e6;
  color: var(--accent);
}

.approval-cat-rename-input {
  flex: 1;
  height: 24px;
  border: 1px solid #1a73e8;
  border-radius: 4px;
  padding: 0 6px;
  font-size: 13px;
  outline: none;
  min-width: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  direction: rtl;
}
.cat-rename-wrap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.cat-rename-confirm {
  background: #34a853;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  min-width: 18px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.cat-rename-confirm:hover { background: #2d9249; }

.approval-cat-new-row {
  padding: 2px 0;
  display: flex;
  gap: 6px;
  align-items: center;
}

.approval-cat-new-row .approval-cat-rename-input {
  flex: 1;
  height: 32px;
  border-radius: 20px;
  padding: 0 12px;
}

.cat-new-confirm-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #1a73e8;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.cat-new-confirm-btn:hover  { background: #1765cc; }
.cat-new-confirm-btn:active { background: #1558b0; }

/* ── Mobile category select (hidden on desktop) ── */

.approval-cat-mobile-select {
  display: none;
}

/* ── Right: search panel ── */

.approval-search-panel {
  flex: 1;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px 16px 12px;
  gap: 10px;
  min-width: 0;
  background: var(--bg-primary);
}

.approval-search-panel-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
  padding: 0 2px 8px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  margin-bottom: 2px;
}

.approval-search-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.approval-search-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
}

.approval-search-input-wrap .form-input {
  flex: 1;
  padding-left: 28px; /* room for clear btn (RTL: left side) */
}

.approval-search-input-wrap .search-clear-btn {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
}

@keyframes searchPulse {
  0%   { box-shadow: 0 0 0 0   rgba(26,115,232,0);    border-color: var(--border-color); }
  20%  { box-shadow: 0 0 0 4px rgba(26,115,232,0.35); border-color: #1a73e8; }
  45%  { box-shadow: 0 0 0 0   rgba(26,115,232,0);    border-color: var(--border-color); }
  65%  { box-shadow: 0 0 0 4px rgba(26,115,232,0.25); border-color: #1a73e8; }
  85%  { box-shadow: 0 0 0 0   rgba(26,115,232,0);    border-color: var(--border-color); }
  100% { box-shadow: 0 0 0 0   rgba(26,115,232,0);    border-color: var(--border-color); }
}

.search-pulse {
  animation: searchPulse 1.6s ease-out forwards;
}

.approval-results-scroll {
  flex: 1;
  overflow-y: auto;
}

/* ── Result rows (list layout) ── */

.approval-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  margin-bottom: 3px;
  transition: background var(--transition-fast);
  cursor: default;
  direction: rtl;
}

.approval-result-row:hover {
  background: var(--bg-secondary);
}

.approval-result-row.is-selected {
  background: #e8f0fe;
  border-color: #1a73e8;
}

.approval-result-row.is-categorized .approval-result-thumb,
.approval-result-row.is-categorized .approval-result-title,
.approval-result-row.is-categorized .approval-result-meta {
  opacity: 0.42;
}

.approval-result-thumb {
  width: 96px;
  height: 54px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.approval-result-info {
  flex: 1;
  min-width: 0;
}

.approval-result-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.approval-result-meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

/* ── Selection circle ── */

.approval-result-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #1a73e8;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  padding: 0;
  box-shadow: 0 0 0 1px rgba(26,115,232,0.15);
}

.approval-result-circle:hover {
  background: #e8f0fe;
  box-shadow: 0 0 0 3px rgba(26,115,232,0.25);
}

.approval-result-circle.filled {
  background: #1a73e8;
  border-color: #1a73e8;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 2px 6px rgba(26,115,232,0.5);
}

.approval-result-circle.filled:hover {
  background-color: #1557b0;
  border-color: #1557b0;
}

/* Already-in-category circle: very subtle, still clickable */
.approval-result-circle.in-cat {
  border-color: var(--border);
  background: transparent;
  opacity: 0.22;
  box-shadow: none;
}

.approval-result-circle.in-cat:hover {
  opacity: 0.5;
  background: rgba(26,115,232,0.05);
  box-shadow: 0 0 0 2px rgba(26,115,232,0.1);
}

/* When an already-categorized circle is selected, show full filled state */
.approval-result-circle.in-cat.filled {
  opacity: 1;
  background: #1a73e8;
  border-color: #1a73e8;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: 65%;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 2px 6px rgba(26,115,232,0.5);
}
.approval-result-circle.in-cat.filled:hover {
  background-color: #1557b0;
  border-color: #1557b0;
}

/* ── Action bar at bottom ── */

.approval-action-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
  direction: rtl;
}

/* Split button wrapper — transparent on desktop, split on mobile */
.approval-split-wrap {
  display: contents; /* invisible wrapper on desktop */
}
.approval-split-sep  { display: none; }
.approval-split-pick { display: none; }

/* Category chips row */
.approval-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  direction: rtl;
}
.approval-cat-chips:empty { display: none; }

.approval-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 6px;
  border-radius: 20px;
  background: #e6f4ea;
  border: 1px solid #a8d5b5;
  color: #1e7e34;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  direction: rtl;
}

.approval-cat-chip-x {
  background: none;
  border: none;
  cursor: pointer;
  color: #4caf7d;
  font-size: 10px;
  line-height: 1;
  padding: 1px 2px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.approval-cat-chip-x:hover { color: #d93025; background: rgba(217,48,37,0.08); }

/* ── Floating bubble that floats up from the add button ── */
@keyframes addBubbleFly {
  0%   { opacity: 0;   transform: translate(-50%, 0)     scale(0.85); }
  15%  { opacity: 1;   transform: translate(-50%, -8px)  scale(1);    }
  70%  { opacity: 1;   transform: translate(-50%, -28px) scale(1);    }
  100% { opacity: 0;   transform: translate(-50%, -52px) scale(0.9);  }
}

.approval-add-bubble {
  position: fixed;
  z-index: 99999;
  transform: translate(-50%, 0);
  background: #0f9d58;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 20px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 3px 12px rgba(0,0,0,0.18);
}
.approval-add-bubble.error {
  background: var(--accent, #d93025);
}
.approval-add-bubble.fly {
  animation: addBubbleFly 2.2s ease forwards;
}

.approval-add-videos-btn {
  padding: 0 20px;
  height: 42px;
  background: #0f9d58;
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.approval-add-videos-btn:hover {
  background: #0b8048;
}

.approval-add-videos-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.approval-result-cattags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.approval-result-cattag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px 2px 5px;
  background: #fce8e6;
  border: 1.5px solid #f28b82;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: #c5221f;
}

.approval-result-catremove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #c5221f;
  opacity: 0.7;
}

.approval-result-catremove:hover {
  color: #a50e0e;
  opacity: 1;
}

.approval-cat-count {
  font-size: 11px;
  color: var(--text-secondary);
  margin-right: 2px;
  flex-shrink: 0;
}

.approval-load-more-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  text-align: center;
}

.approval-load-more-btn:hover {
  background: var(--bg-chip);
  color: var(--text-primary);
}

.approval-load-more-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Duration tooltip ── */

.approval-duration-tooltip {
  position: fixed;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease;
  max-width: 180px;
}

.approval-duration-tooltip.visible {
  opacity: 1;
}

/* ── Flash animation for "choose a category" reminder ── */

@keyframes approvalCatFlash {
  0%   { background: var(--bg-secondary); border-color: var(--border-color); }
  35%  { background: #fce8e6; border-color: var(--accent); }
  65%  { background: #fce8e6; border-color: var(--accent); }
  100% { background: var(--bg-secondary); border-color: var(--border-color); }
}

.approval-cat-pill.flash-attention {
  animation: approvalCatFlash 0.4s ease forwards;
}

/* ── Responsive ── */

@media (max-width: 600px) {
  .approval-layout {
    flex-direction: column;
    gap: 0;
  }

  /* Hide desktop cats panel on mobile */
  .approval-cats-panel { display: none; }

  /* Order within search panel flex-column:
     1. title  2. search bar  3. results  4. mobile cat row  5. action bar */
  .approval-search-panel-title { order: 1; }
  .approval-search-bar         { order: 2; }
  .approval-results-scroll     { order: 3; }
  .approval-cat-mob-row        { order: 4; }
  .approval-action-bar         { order: 5; }

  /* Tidy results list */
  .approval-results-scroll {
    scrollbar-width: none;
  }

  .approval-results-scroll::-webkit-scrollbar {
    display: none;
  }

  .approval-result-row {
    padding: 6px 8px;
    gap: 8px;
  }

  .approval-result-thumb {
    width: 80px;
    height: 45px;
  }

  /* Action bar: split button + chips on mobile */
  .approval-action-bar {
    gap: 8px;
    padding-top: 10px;
    align-items: stretch;
  }

  /* Split button active on mobile */
  .approval-split-wrap {
    display: flex;
    direction: rtl;
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid #c7d2dc;
  }

  /* Main action side — clear and solid */
  .approval-add-videos-btn {
    flex: 1;
    border-radius: 0;
    text-align: center;
    background: #e8f0fe;
    color: #1a73e8;
    height: 48px;
    font-weight: 700;
    font-size: 15px;
  }
  .approval-add-videos-btn:hover { background: #d2e3fc; }

  .approval-split-sep {
    display: block;
    width: 1.5px;
    background: #1a73e8;
    opacity: 0.3;
    flex-shrink: 0;
  }

  /* Picker side — strong solid blue, visually heavier = invites first tap */
  .approval-split-pick {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    flex-shrink: 0;
    background: #1a73e8;
    color: #fff;
    border: none;
    cursor: pointer;
    position: relative;
    transition: background 0.15s;
  }
  .approval-split-pick:hover  { background: #1765cc; }
  .approval-split-pick:active { background: #1558b0; }

  /* Badge showing count of selected categories */
  .approval-split-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    min-width: 17px;
    height: 17px;
    background: #1a73e8;
    color: #fff;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
  }
  .approval-split-badge:empty { display: none; }

  /* Load pulse */
  @keyframes splitPickPulse {
    0%   { box-shadow: inset 0 0 0 0 rgba(255,255,255,0.5); }
    40%  { box-shadow: inset 0 0 0 5px rgba(255,255,255,0.3); }
    100% { box-shadow: inset 0 0 0 0 rgba(255,255,255,0); }
  }
  .split-pick-pulse { animation: splitPickPulse 0.8s ease-out; }

  /* Error flash — when add is pressed without a category selected */
  @keyframes splitPickFlash {
    0%   { background: #1a73e8; }
    20%  { background: #d93025; }
    50%  { background: #d93025; }
    70%  { background: #1a73e8; }
    85%  { background: #d93025; }
    100% { background: #1a73e8; }
  }
  .split-pick-flash { animation: splitPickFlash 0.75s ease-out; }

  /* Chips visible on mobile below the split button */
  .approval-cat-chips { display: flex; }

  /* Duration tooltip: smaller on mobile */
  .approval-duration-tooltip {
    font-size: 11px;
    padding: 4px 8px;
  }
}

/* ── Mobile category dropdown row ── */
.approval-cat-mob-row {
  display: none; /* shown only inside @media 600px */
}

/* ── Per-option emoji/edit/del buttons (shared by both dropdowns) ── */
.cat-mob-opt-emoji {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  transition: background 0.15s, transform 0.15s;
}
.cat-mob-opt-emoji:hover {
  background: rgba(26,115,232,0.1);
  transform: scale(1.15);
}
.cat-mob-opt-edit,
.cat-mob-opt-del {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}
.cat-mob-opt-edit:hover { background: #e8f0fe; color: #1a73e8; }
.cat-mob-opt-del:hover  { background: #fce8e6; color: var(--accent); }

@media (max-width: 600px) {
  .approval-cat-mob-row {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    position: relative;
    gap: 8px;
  }

  /* Hide the old row-level del/edit — actions live inside each option now */
  .approval-cat-mob-action { display: none; }

  /* Dropdown wrapper fills the row */
  .approval-cat-mob-wrap {
    flex: 1;
    position: relative;
  }

  /* Trigger — clean pill, blue by default */
  .approval-cat-mob-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 24px;
    border: 1.5px solid #1a73e8;
    background: #e8f0fe;
    cursor: pointer;
    direction: rtl;
    gap: 8px;
    min-height: 44px;
    position: relative;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    user-select: none;
  }
  .approval-cat-mob-trigger:active { transform: scale(0.97); }

  /* Placeholder text — centered */
  .cat-mob-trigger-placeholder {
    font-size: 14px;
    font-weight: 600;
    color: #1a73e8;
    text-align: center;
  }
  .approval-cat-mob-trigger svg { flex-shrink: 0; color: #1a73e8; }

  /* Floating reminder hint */
  @keyframes cat-mob-hint-float {
    0%   { opacity: 0; transform: translateX(-50%) translateY(3px); }
    18%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    72%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-7px); }
  }
  .cat-mob-trigger-hint {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 700;
    color: #1a73e8;
    background: #e8f0fe;
    border: 1.5px solid #1a73e8;
    border-radius: 12px;
    padding: 3px 11px;
    white-space: nowrap;
    pointer-events: none;
    animation: cat-mob-hint-float 1.4s ease-out forwards;
    z-index: 10;
  }

  /* Has-selection state */
  .approval-cat-mob-trigger.has-selection {
    border-color: #1a73e8;
    background: #e8f0fe;
  }

  /* Chip tags container */
  .cat-mob-trigger-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex: 1;
  }
  .cat-mob-trigger-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    border-radius: 20px;
    background: #1a73e8;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* Pulse animation on update */
  @keyframes cat-mob-trigger-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(26,115,232,0.55); }
    50%  { box-shadow: 0 0 0 7px rgba(26,115,232,0.15); }
    100% { box-shadow: 0 0 0 0 rgba(26,115,232,0); }
  }
  .cat-mob-trigger-pulse {
    animation: cat-mob-trigger-pulse 0.5s ease-out;
  }

  /* Options panel — opens upward, slides in */
  @keyframes mobOptsIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .approval-cat-mob-options {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.12);
    overflow: hidden;
    overflow-y: auto;
    max-height: 240px;
    z-index: 200;
    direction: rtl;
  }
  .approval-cat-mob-options.open {
    display: block;
    animation: mobOptsIn 0.18s ease-out;
  }

  /* Individual option */
  .approval-cat-mob-opt {
    display: flex;
    align-items: center;
    padding: 6px 10px 6px 6px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    gap: 4px;
    min-height: 48px;
    transition: background 0.12s;
  }
  .approval-cat-mob-opt:last-child { border-bottom: none; }
  .approval-cat-mob-opt:hover { background: var(--bg-secondary); }
  .approval-cat-mob-opt.selected { background: #e6f4ed; }
  .approval-cat-mob-opt.selected .approval-cat-mob-opt-label { color: #0b7a45; font-weight: 600; }

  .approval-cat-mob-opt-label {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
  }
  .approval-cat-mob-opt-count {
    font-size: 12px;
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-left: 4px;
  }

  .approval-cat-mob-opt-new .approval-cat-mob-opt-label {
    color: #1a73e8;
    font-weight: 600;
    padding-right: 8px;
  }
  .approval-cat-mob-opt-new { min-height: 48px; justify-content: center; }
  .approval-cat-mob-opt-new:hover { background: #e8f0fe; }
}
/* sidebar-section uses flex:1 + overflow-y:auto from its main rule — do not override with flex-shrink:0 */

/* ── Sidebar category count + label layout ── */
.sidebar-item-text {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sidebar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-cat-count {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 400;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .sidebar-item { gap: 12px; }
}

/* ── Manage Tab ─────────────────────────────────────────────────────────── */
.manage-cat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  width: 100%;
}
.manage-cat-row .approval-cat-pill {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.manage-video-row { cursor: default; }

.manage-uncat-section {
  margin-bottom: 16px;
  border: 1px solid #e57373;
  border-radius: 10px;
  overflow: hidden;
}
.manage-uncat-header {
  background: rgba(211, 47, 47, 0.1);
  color: #c62828;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
}

.manage-video-delete {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.manage-video-delete:hover {
  background: rgba(211, 47, 47, 0.12);
  color: #d32f2f;
}

/* ── Admin preview eye button ── */
.admin-preview-btn {
  flex-shrink: 0;
  align-self: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 4px;
  margin-right: 4px;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.admin-preview-btn svg {
  display: block;
}
.admin-preview-btn:hover {
  opacity: 1;
}

/* ── Admin preview flash after watching ── */
@keyframes admin-preview-flash {
  0%   { background: transparent; }
  20%  { background: rgba(26,115,232,0.15); }
  60%  { background: rgba(26,115,232,0.08); }
  100% { background: transparent; }
}
.admin-preview-watched {
  animation: admin-preview-flash 1.2s ease-out 3;
}

/* ── Admin preview floating modal ── */
.admin-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-preview-modal {
  position: relative;
  width: min(760px, 94vw);
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
}
.admin-preview-modal iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
}
.admin-preview-close {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: background 0.15s;
}
.admin-preview-close:hover { background: rgba(200,0,0,0.85); }

/* ── User video modal ── */
.video-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-modal {
  position: relative;
  width: min(820px, 94vw);
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
}
.video-modal-player-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
}
#yt-player-modal {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.video-modal-close {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: background 0.15s;
}
.video-modal-close:hover { background: rgba(200,0,0,0.85); }

.manage-cat-share {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.manage-cat-share:hover {
  border-color: #2e7d32;
  background: #e8f5e9;
  color: #2e7d32;
}

/* Push-to-store button (only for published categories) */
.manage-cat-store-push {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.manage-cat-store-push:hover {
  border-color: #1a73e8;
  background: #e8f0fe;
  color: #1a73e8;
}

/* Sync icon for imported categories */
.manage-cat-sync-icon {
  border: none;
  background: transparent;
  padding: 3px;
  cursor: pointer;
  color: #b0bec5;
  flex-shrink: 0;
  align-self: center;
  border-radius: 50%;
  transition: background 0.12s, color 0.12s;
  display: flex;
  align-items: center;
}
.manage-cat-sync-icon:hover { background: var(--bg-secondary); }
.manage-cat-sync-icon.has-updates {
  color: #34a853;
  animation: storeUpdatePulse 2s ease-in-out infinite;
}
.manage-cat-sync-icon.has-updates:hover { background: #e6f4ea; }
@keyframes storeUpdatePulse {
  0%, 100% { filter: drop-shadow(0 0 0px #34a853); }
  50%       { filter: drop-shadow(0 0 4px rgba(52,168,83,0.6)); }
}

.manage-video-removing {
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Move-to-category button */
.manage-move-btn {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: #9ca3af;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.manage-move-btn:hover {
  background: rgba(26,115,232,0.1);
  color: #1a73e8;
}

/* Move-to-category slide-out animation */
@keyframes manageVideoOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-40px); }
}
.manage-video-moving {
  animation: manageVideoOut 0.3s ease-out forwards;
  pointer-events: none;
}

/* Move dropdown */
.manage-move-dd {
  position: absolute;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.13);
  z-index: 9999;
  min-width: 160px;
  overflow: hidden;
  direction: rtl;
}
.manage-move-dd-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #5f6368);
  padding: 8px 12px 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.manage-move-dd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary, #202124);
  transition: background 0.12s;
}
.manage-move-dd-row:hover { background: var(--bg-secondary, #f8f9fa); }
.manage-move-dd-icon { font-size: 15px; flex-shrink: 0; }

/* Category pill bump animation when video moves in */
@keyframes catPillBump {
  0%   { transform: scale(1);    background: inherit; }
  30%  { transform: scale(1.08); background: rgba(26,115,232,0.18); }
  60%  { transform: scale(1.03); background: rgba(26,115,232,0.1); }
  100% { transform: scale(1);    background: inherit; }
}
.cat-pill-bump {
  animation: catPillBump 0.6s ease-out forwards;
}

.manage-empty-hint {
  color: var(--text-secondary);
  font-size: 14px;
  text-align: center;
  padding: 48px 20px;
}

/* ── Manage Tab – Mobile category header + dropdown ── */

.manage-mob-section {
  display: none;
  flex-direction: column;
  position: relative;
  border-bottom: 1px solid var(--border-color);
  z-index: 50;
}

/* Header row — styled as split button matching approval tab */
.manage-mob-header {
  display: flex;
  direction: rtl;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid #c7d2dc;
  user-select: none;
}
.manage-mob-header.open { border-radius: 12px 12px 0 0; }

/* Main section: category name (right side in RTL) — title only, not clickable */
.manage-mob-curr {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 48px;
  background: #e8f0fe;
  padding: 0 14px;
  cursor: default;
}
.manage-mob-curr-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.manage-mob-curr-label {
  font-size: 15px;
  font-weight: 700;
  color: #1a73e8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  direction: rtl;
}

/* Video count — pushed to left end */
.manage-mob-curr-count {
  margin-inline-start: auto;
  font-size: 12px;
  font-weight: 400;
  color: rgba(26,115,232,0.55);
  flex-shrink: 0;
}
.manage-mob-curr-count:empty { display: none; }

/* Separator */
.manage-mob-sep {
  width: 1.5px;
  background: #1a73e8;
  opacity: 0.3;
  flex-shrink: 0;
}

/* Hamburger trigger: opens dropdown (left side in RTL) */
.manage-mob-dots {
  width: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  background: #1a73e8;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.manage-mob-dots:hover  { background: #1765cc; }
.manage-mob-dots:active { background: #1558b0; }
.manage-mob-header.open .manage-mob-dots { background: #1765cc; }

/* Dropdown panel — slides down from header */
@keyframes manageDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.manage-mob-dd {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  overflow: hidden;
  direction: rtl;
  animation: manageDropIn 0.18s ease-out;
  overflow: hidden;
}

.manage-mob-dd-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.12s;
}
.manage-mob-dd-row:hover { background: var(--bg-secondary); }
.manage-mob-dd-row.active { background: #e8f0fe; }
.manage-mob-dd-row.active .manage-mob-dd-label { color: #1a73e8; font-weight: 700; }
.manage-mob-dd-row.mob-dd-new { animation: mobDdNewFlash 2.4s ease forwards; }
@keyframes mobDdNewFlash {
  0%   { background: rgba(52,168,83,0.35); }
  40%  { background: rgba(52,168,83,0.22); }
  100% { background: transparent; }
}

.manage-mob-dd-icon  {
  font-size: 22px;
  flex-shrink: 0;
  background: rgba(0,0,0,0.04);
  border: 1.5px solid #c7d2dc;
  padding: 4px 6px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.12s, border-color 0.12s;
}
.manage-mob-dd-icon:hover { background: #e8f0fe; border-color: #1a73e8; }
.manage-mob-dd-label { flex: 1; font-size: 14px; color: var(--text-primary); }
.manage-mob-dd-count { color: var(--text-secondary); font-size: 12px; font-weight: 400; }

.manage-mob-dd-edit,
.manage-mob-dd-del,
.manage-mob-dd-sync,
.manage-mob-dd-share {
  background: none; border: none;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; color: #9ca3af;
  transition: background 0.12s, color 0.12s;
}
.manage-mob-dd-edit:hover  { background: #e8f0fe; color: #1a73e8; }
.manage-mob-dd-del:hover   { background: #fce8e6; color: #d93025; }
.manage-mob-dd-sync        { color: #b0bec5; }
.manage-mob-dd-sync.has-updates { color: #34a853; animation: storeUpdatePulse 2s infinite; }
.manage-mob-dd-sync:hover  { background: rgba(52,168,83,0.1); color: #34a853; }
.manage-mob-dd-share       { color: #b0bec5; }
.manage-mob-dd-share:hover { background: #e8f0fe; color: #1a73e8; }

.manage-mob-dd-new {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px 14px;
  font-size: 14px; font-weight: 600; color: #1a73e8;
  cursor: pointer; border-top: 1px solid var(--border-color);
  transition: background 0.12s;
}
.manage-mob-dd-new:hover { background: #e8f0fe; }

/* Dropdown header bar + close button */
.manage-mob-dd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border-color);
  direction: rtl;
}
.manage-mob-dd-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.manage-mob-dd-close {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 50%;
  line-height: 1;
  transition: background 0.12s;
}
.manage-mob-dd-close:hover { background: var(--bg-secondary); }

/* Scrollable rows container */
.manage-mob-dd-rows {
  overflow-y: auto;
  max-height: calc(60vh - 48px);
}

@media (max-width: 900px) {
  .manage-mob-section {
    display: flex;
    margin: -16px -8px 0;
    padding: 10px 8px 0;
  }
  .manage-mob-header {
    border-radius: 12px;
    border: 1.5px solid #c7d2dc;
    flex: 1;
  }
  .manage-mob-header.open { border-radius: 12px 12px 0 0; }
  .manage-mob-dd {
    left: 0;
    right: 0;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.14);
  }
}

/* ══════════════════════════════════════════════
   Category Bottom Sheet  (mobile)
   ══════════════════════════════════════════════ */

@keyframes csbSheetIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0);    }
}

.csb-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 9000;
  transition: background 0.26s;
}
.csb-backdrop.open { background: rgba(0,0,0,0.42); }

.csb-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-primary);
  border-radius: 20px 20px 0 0;
  z-index: 9001;
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.26s cubic-bezier(0.32, 1, 0.60, 1);
  box-shadow: 0 -6px 30px rgba(0,0,0,0.14);
  overflow: hidden;
}
.csb-sheet.open { transform: translateY(0); }

.csb-handle {
  width: 40px; height: 4px;
  background: var(--border-color);
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}

.csb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 12px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  direction: rtl;
}
.csb-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.csb-header-close {
  background: none; border: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: 16px; color: var(--text-secondary);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.csb-header-close:hover { background: var(--bg-secondary); }

.csb-list {
  overflow-y: auto;
  flex: 1;
  direction: rtl;
  -webkit-overflow-scrolling: touch;
}

/* ── Each row ── */
.csb-row {
  position: relative;
  height: 58px;
  overflow: hidden;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.15s;
}
.csb-row:last-child { border-bottom: none; }
.csb-row.active { background: rgba(26,115,232,0.05); }
.csb-row.csb-row-new { animation: mobDdNewFlash 2.4s ease forwards; }

/* Both faces share the same space */
.csb-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1), opacity 0.22s;
}
/* Main face: default */
.csb-main { direction: rtl; }
.csb-row.actions-open .csb-main {
  transform: translateX(24px);
  opacity: 0;
  pointer-events: none;
}
/* Actions face: hidden by default, slides from the left */
.csb-actions {
  transform: translateX(-24px);
  opacity: 0;
  pointer-events: none;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  direction: rtl;
}
.csb-row.actions-open .csb-actions {
  transform: translateX(0);
  opacity: 1;
  pointer-events: all;
}

/* Emoji button — visually separated from the rest */
.csb-emoji {
  flex-shrink: 0;
  font-size: 24px;
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-secondary);
  border: none;
  border-left: 1px solid var(--border-color);
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
}
.csb-emoji::after {
  content: '✎';
  position: absolute;
  bottom: 6px; left: 6px;
  font-size: 9px;
  color: var(--text-secondary);
  opacity: 0.6;
}
.csb-emoji:active { background: rgba(26,115,232,0.1); }

/* Body: name + count */
.csb-body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  min-width: 0;
  cursor: pointer;
}
.csb-name {
  font-size: 15px; font-weight: 500;
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.csb-count { font-size: 12px; color: var(--text-secondary); flex-shrink: 0; }
.csb-row.active .csb-name { color: #1a73e8; font-weight: 600; }

/* End: check circle + more button */
.csb-end {
  display: flex; align-items: center;
  gap: 6px; padding: 0 14px 0 8px;
  flex-shrink: 0;
  cursor: pointer;
}
.csb-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  flex-shrink: 0;
  transition: all 0.15s;
}
.csb-check.filled {
  background: #1a73e8; border-color: #1a73e8;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: 13px; background-repeat: no-repeat; background-position: center;
}
.csb-more-btn {
  background: none; border: none;
  font-size: 14px; color: var(--text-secondary);
  cursor: pointer; width: 28px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: -1px; line-height: 1;
  transition: background 0.15s;
}
.csb-more-btn:hover { background: var(--bg-secondary); }

/* Action buttons */
.csb-edit-btn, .csb-del-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  border: none; border-radius: 12px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.csb-edit-btn { background: #e8f0fe; color: #1a73e8; }
.csb-edit-btn:active { background: #d2e3fc; }
.csb-del-btn  { background: #fce8e6; color: var(--accent, #d93025); }
.csb-del-btn:active  { background: #f5c6c2; }
.csb-close-btn {
  background: none; border: none;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 14px; color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s;
  flex-shrink: 0;
}
.csb-close-btn:hover { background: var(--bg-secondary); }

/* Inline action buttons (manage tab — edit/delete visible directly on row) */
.csb-edit-inline-btn, .csb-del-inline-btn {
  background: none; border: none;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background 0.15s;
}
.csb-edit-inline-btn { color: #9ca3af; }
.csb-edit-inline-btn:hover { background: #e8f0fe; color: #1a73e8; }
.csb-del-inline-btn  { color: #9ca3af; }
.csb-del-inline-btn:hover  { background: #fce8e6; color: var(--accent, #d93025); }

/* New category row */
.csb-new-row {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 16px;
  font-size: 14px; font-weight: 600; color: #1a73e8;
  cursor: pointer; direction: rtl;
  transition: background 0.15s;
}
.csb-new-row:hover, .csb-new-row:active { background: #e8f0fe; }

/* ══════════════════════════════════════════════════════
   STORE TAB
   ══════════════════════════════════════════════════════ */

.store-layout {
  display: flex;
  height: 100%;
  direction: rtl;
  gap: 0;
}

/* ── Left: playlist list ── */
.store-list-panel {
  width: 260px;
  flex-shrink: 0;
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.store-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.store-refresh-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
}
.store-refresh-btn:hover { background: var(--bg-secondary); color: var(--text-primary); }

.store-search-wrap {
  padding: 0 10px 8px;
  position: relative;
  display: flex;
  align-items: center;
}
.store-search-wrap .store-search-clear {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-60%);
}
.store-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  padding-left: 28px; /* room for clear btn */
  font-size: 13px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  outline: none;
  direction: rtl;
}
.store-search-input:focus {
  border-color: #1a73e8;
  background: var(--bg-primary);
}

.store-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(26,115,232,0.25) transparent;
}
.store-list::-webkit-scrollbar { width: 3px; }
.store-list::-webkit-scrollbar-thumb { background: rgba(26,115,232,0.3); border-radius: 99px; }

.store-card {
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.13s;
  margin-bottom: 4px;
  border: 1.5px solid transparent;
}
.store-card:hover { background: var(--bg-secondary); }
.store-card.selected { background: #e8f0fe; border-color: #c5d8fb; }

.store-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 3px;
}
.store-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.store-card-mine {
  font-size: 10px;
  background: #e8f5e9;
  color: #2e7d32;
  border-radius: 6px;
  padding: 1px 6px;
  flex-shrink: 0;
  font-weight: 600;
}
/* Mine section in store list */
.store-mine-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}
.store-mine-header:hover { background: #e8f0fe; color: #1a73e8; }
.store-mine-arrow { font-size: 10px; }
.store-mine-list {
  background: #f1f3f4;
  border-bottom: 1px solid var(--border-color);
}
.store-mine-list .store-card {
  background: #f1f3f4;
}
.store-mine-list .store-card:hover {
  background: #e8eaed;
}
.store-mine-list .store-card.selected {
  background: #e3eafd;
}
.store-section-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 0;
}
.store-card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.store-card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.store-card-imported {
  font-size: 10px;
  background: #e8f0fe;
  color: #1a73e8;
  border-radius: 6px;
  padding: 1px 6px;
}
.store-card-new {
  background: #1a73e8;
  color: #fff;
  border-radius: 4px;
  padding: 0 4px;
  font-size: 9px;
}
.store-star-on { color: #f9a825; font-size: 13px; }
.store-star-off { color: #ddd; font-size: 13px; }
.store-stars-empty { color: #ddd; font-size: 13px; letter-spacing: 1px; }
.store-card-rcount { font-size: 11px; color: var(--text-secondary); }

.store-loading, .store-empty, .store-error { padding: 20px; text-align: center; color: var(--text-secondary); font-size: 13px; }
.store-error { color: #d32f2f; }

/* ── Right: detail panel ── */
.store-detail-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.store-detail-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-secondary);
  font-size: 14px;
}

.store-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.store-detail-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.store-detail-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.store-detail-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.store-detail-edit-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: 5px;
}
.store-detail-edit-btn:hover { background: var(--bg-secondary); color: var(--text-primary); }

.store-detail-by { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }

.store-detail-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 6px 0 0;
  line-height: 1.6;
  white-space: pre-wrap;
}
.store-desc-empty { font-style: italic; }
.store-desc-edit-wrap {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
}
.store-desc-edit-wrap .store-detail-desc { flex: 1; margin: 0; }
.store-desc-edit-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  color: #90a4ae;
  padding: 2px 3px;
  border-radius: 3px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  line-height: 1;
}
.store-desc-edit-btn:hover { color: #546e7a; background: #f1f3f4; }
.store-desc-add-btn {
  font-size: 11px;
  color: #90a4ae;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px dashed #cfd8dc;
  background: transparent;
  cursor: pointer;
}
.store-desc-add-btn:hover { color: #546e7a; border-color: #90a4ae; background: #f5f7f8; }
.store-desc-edit-wrap.desc-empty { justify-content: flex-end; }
.store-desc-textarea {
  width: 100%;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  resize: vertical;
  font-family: inherit;
  direction: rtl;
  background: var(--bg-primary);
  color: var(--text-primary);
}
.store-desc-btns {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  justify-content: flex-end;
}
.store-desc-save-btn {
  background: #1a73e8;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
}
.store-desc-save-btn:hover { background: #1557b0; }
.store-desc-cancel-btn {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
}
.store-desc-cancel-btn:hover { background: var(--bg-secondary); }

.store-desc-edit {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid #c7d2dc;
  border-radius: 8px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  direction: rtl;
  margin-top: 6px;
}
.store-desc-edit:focus { border-color: #1a73e8; outline: none; }
.store-desc-save-btn {
  margin-top: 6px;
  padding: 4px 14px;
  background: #1a73e8;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}

/* Rating — inline with title */
.store-rating-inline {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-right: auto;
  flex-shrink: 0;
  padding: 2px 6px;
}
.store-rate-star {
  border: none;
  background: transparent;
  font-size: 17px;
  color: #d0d0d0;
  cursor: pointer;
  padding: 1px;
  transition: color 0.15s, transform 0.15s;
}
.store-rate-star.on { color: #f9a825; }
.store-rate-star:hover { transform: scale(1.25); color: #f9a825; }
.store-rating-avg { font-size: 11px; color: var(--text-secondary); margin-right: 5px; font-weight: 600; }
.store-rating-hint { font-size: 11px; color: var(--text-secondary); margin-right: 5px; }

@keyframes storeStar {
  0%   { transform: scale(1);    }
  50%  { transform: scale(1.5); color: #f9a825; }
  100% { transform: scale(1);   }
}
.store-rating-animate .store-rate-star {
  animation: storeStar 0.45s ease both;
}

/* Publisher own-label */
.store-own-label {
  font-size: 13px;
  color: #1a73e8;
  background: #e8f0fe;
  border: 1.5px solid #c5d8f8;
  border-radius: 10px;
  padding: 6px 14px;
  font-weight: 500;
}

/* Name change banner */
.store-name-changed-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: #fff8e1;
  border-bottom: 1px solid #ffe082;
  font-size: 13px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.store-accept-name-btn, .store-reject-name-btn {
  padding: 3px 12px;
  border-radius: 8px;
  border: 1.5px solid #c7d2dc;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}
.store-accept-name-btn.chosen { background: #e8f0fe; border-color: #1a73e8; color: #1a73e8; }
.store-reject-name-btn.chosen { background: #f1f3f4; border-color: #80868b; }

/* Actions row */
.store-detail-actions {
  display: flex;
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.store-import-btn, .store-sync-btn, .store-sync-confirm-btn {
  padding: 8px 18px;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.store-import-btn, .store-sync-confirm-btn {
  background: #1a73e8;
  color: #fff;
}
.store-import-btn:hover, .store-sync-confirm-btn:hover { background: #1765cc; }
.store-sync-btn {
  background: #e8f0fe;
  color: #1a73e8;
}
.store-sync-btn:hover { background: #d2e3fc; }
.store-manage-btn {
  padding: 8px 18px;
  border: 1.5px solid #c7d2dc;
  border-radius: 10px;
  background: var(--bg-primary);
  font-size: 13px;
  cursor: pointer;
}
.store-manage-btn:hover { background: var(--bg-secondary); }
.store-restore-btn {
  padding: 8px 18px;
  border: 1.5px solid #34a853;
  border-radius: 10px;
  background: var(--bg-primary);
  color: #34a853;
  font-size: 13px;
  cursor: pointer;
}
.store-restore-btn:hover { background: #e6f4ea; }
.store-unpublish-btn {
  padding: 8px 18px;
  border: 1.5px solid #fca5a5;
  border-radius: 10px;
  background: var(--bg-primary);
  color: #d32f2f;
  font-size: 13px;
  cursor: pointer;
}
.store-unpublish-btn:hover { background: #fff1f0; }
.store-cancel-mode-btn, .store-select-mode-btn {
  padding: 8px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-primary);
  font-size: 13px;
  cursor: pointer;
  color: var(--text-secondary);
}
.store-cancel-mode-btn:hover, .store-select-mode-btn:hover { background: var(--bg-secondary); }

/* Already-imported status row in store detail */
.store-imported-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.store-imported-check {
  font-size: 13px;
  color: #2e7d32;
  font-weight: 600;
}
.store-up-to-date {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 3px 10px;
}

/* Publish category dialog */
.studio-publish-dlg { min-width: 420px; max-width: 540px; }
.studio-publish-dlg-title {
  font-size: 16px;
  font-weight: 600;
  direction: rtl;
  margin-bottom: 8px;
}
.studio-publish-dlg-hint {
  font-size: 12px;
  color: var(--text-secondary);
  direction: rtl;
  margin: 0 0 10px;
}
.studio-publish-desc {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid #c7d2dc;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  direction: rtl;
  min-height: 120px;
  line-height: 1.6;
}
.studio-publish-desc:focus { border-color: #1a73e8; outline: none; }
@media (max-width: 600px) {
  .studio-publish-dlg { min-width: 90vw; max-width: 95vw; }
}

/* Videos section */
.store-videos-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.store-videos-header {
  padding: 10px 20px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.store-toggle-hint {
  font-size: 11px;
  color: #1a73e8;
  font-weight: 400;
  text-transform: none;
}
.store-videos-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(26,115,232,0.25) transparent;
}
.store-videos-list::-webkit-scrollbar { width: 3px; }
.store-videos-list::-webkit-scrollbar-thumb { background: rgba(26,115,232,0.3); border-radius: 99px; }
.store-no-new { padding: 20px; text-align: center; color: var(--text-secondary); font-size: 13px; }

.store-video-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  transition: opacity 0.15s;
}
.store-video-row.store-vid-deselected { opacity: 0.38; }

/* Selection circle on store video rows */
.store-vid-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #1a73e8;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.13s, box-shadow 0.13s;
  box-shadow: 0 0 0 1px rgba(26,115,232,0.15);
}
.store-vid-circle:hover {
  background: #e8f0fe;
  box-shadow: 0 0 0 3px rgba(26,115,232,0.2);
}
.store-vid-circle.filled {
  background: #1a73e8;
  border-color: #1a73e8;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 2px 5px rgba(26,115,232,0.4);
}
.store-vid-circle.filled:hover {
  background-color: #1557b0;
  border-color: #1557b0;
}
.store-video-thumb {
  width: 80px;
  height: 45px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.store-video-info { flex: 1; min-width: 0; }
.store-video-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.store-video-author { font-size: 11px; color: var(--text-secondary); }

/* New video highlight */
.store-video-row.store-vid-new {
  background: linear-gradient(90deg, rgba(52,168,83,0.08) 0%, transparent 100%);
  border-right: 3px solid #34a853;
}
.store-vid-new-badge {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #34a853;
  border-radius: 6px;
  padding: 2px 7px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Category tags inside store video rows */
.store-vid-cattags {
  margin-top: 3px;
}

/* Red eye preview button on store video rows */
.store-preview-btn {
  flex-shrink: 0;
  align-self: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: #e53935;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-right: 2px;
  opacity: 0.8;
  transition: opacity 0.15s, transform 0.15s;
}
.store-preview-btn:hover {
  opacity: 1;
  transform: scale(1.15);
}

/* Already-imported toggle */
.store-imported-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  margin-top: 4px;
  border: 1.5px dashed var(--border-color);
  border-radius: 8px;
  background: var(--bg-secondary);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s;
}
.store-imported-toggle:hover { background: #e8f0fe; color: #1a73e8; border-color: #1a73e8; }

/* Already-imported mini list */
.store-imported-mini-list {
  margin-top: 4px;
  opacity: 0.55;
}
.store-video-row.store-vid-imported {
  padding: 4px 8px;
  border-radius: 6px;
}
.store-video-row.store-vid-imported .store-video-thumb {
  width: 56px;
  height: 32px;
}
.store-vid-imported-check {
  font-size: 13px;
  color: #34a853;
  flex-shrink: 0;
  margin-right: 4px;
}


.store-video-x {
  font-size: 10px;
  color: #d32f2f;
  background: #fff1f0;
  border-radius: 6px;
  padding: 2px 7px;
  flex-shrink: 0;
}

/* Publisher section */
.store-publisher-section {
  border-top: 1px solid var(--border-color);
  padding: 12px 20px;
  flex-shrink: 0;
}
.store-pub-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.store-pub-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.store-pub-cat-btn {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-primary);
  font-size: 12px;
  cursor: pointer;
}
.store-pub-cat-btn.active { background: #e8f0fe; border-color: #1a73e8; color: #1a73e8; }
.store-pub-list { max-height: 180px; overflow-y: auto; margin-bottom: 10px; }
.store-pub-video {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s;
}
.store-pub-video:hover { background: var(--bg-secondary); }
.store-pub-video.chosen { background: #e8f0fe; }
.store-pub-check { font-size: 16px; color: #1a73e8; flex-shrink: 0; width: 20px; text-align: center; }
.store-pub-empty { font-size: 12px; color: var(--text-secondary); padding: 8px 0; }
.store-pub-save-btn {
  padding: 8px 20px;
  background: #1a73e8;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
}
.store-pub-save-btn:hover { background: #1765cc; }

/* Comments — carousel */
.store-comments-section {
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding-bottom: 6px;
  background: #f7f8fa;
}
.store-comments-section.comments-collapsed {
  padding-bottom: 0;
}
.store-comments-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 16px;
  text-align: right;
  gap: 8px;
  color: var(--text-secondary);
}
.store-comments-toggle:hover { background: var(--bg-secondary); }
.store-comments-toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  overflow: hidden;
}
.store-comments-count-badge {
  font-size: 11px;
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 1px 6px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.store-comments-preview {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.75;
}
.store-comments-arrow {
  flex-shrink: 0;
  color: #2979ff;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(41, 121, 255, 0.1);
  transition: background 0.15s;
}
.store-comments-toggle:hover .store-comments-arrow {
  background: rgba(41, 121, 255, 0.18);
}
.store-comments-body {
  display: flex;
  flex-direction: column;
}
.store-comments-carousel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 16px 4px;
}
.store-comments-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.store-comments-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.store-comment-prev, .store-comment-next {
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-primary);
  transition: background 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.store-comment-prev:hover:not(:disabled), .store-comment-next:hover:not(:disabled) { background: #e8f0fe; color: #1a73e8; }
.store-comment-prev:disabled, .store-comment-next:disabled { opacity: 0.3; cursor: default; }
.store-comment-counter { font-size: 11px; color: var(--text-secondary); min-width: 32px; text-align: center; }
.store-comments-carousel {
  padding: 0 12px;
  min-height: 54px;
}
.store-no-comments {
  font-size: 11px;
  color: var(--text-secondary);
  padding: 6px 4px;
  font-style: italic;
}
.store-comment-card {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 6px 4px;
  border-radius: 8px;
}
.store-comment-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1a73e8;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.store-comment-body { flex: 1; min-width: 0; }
.store-comment-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}
.store-comment-name { font-size: 11px; font-weight: 600; color: var(--text-primary); }
.store-comment-time { font-size: 10px; color: var(--text-secondary); }
.store-comment-text {
  font-size: 11px;
  color: var(--text-primary);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 48px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.store-comment-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
}
.store-comment-vote {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 7px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--bg-primary);
  font-size: 11px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  color: var(--text-secondary);
}
.store-comment-vote:hover { background: var(--bg-secondary); }
.store-comment-vote.voted-like { background: #e8f0fe; border-color: #1a73e8; color: #1a73e8; }
.store-comment-vote.voted-dislike { background: #fff1f0; border-color: #d32f2f; color: #d32f2f; }
.store-comment-del {
  margin-right: auto;
  padding: 2px 7px;
  border: none;
  border-radius: 20px;
  background: transparent;
  font-size: 10px;
  color: var(--text-secondary);
  cursor: pointer;
}
.store-comment-del:hover { background: #fff1f0; color: #d32f2f; }
.store-comment-compose {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 12px 2px;
  border-top: 1px solid var(--border-color);
  margin-top: 4px;
}
.store-comment-input {
  flex: 1;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 5px 10px;
  font-family: inherit;
  font-size: 11px;
  resize: none;
  direction: rtl;
  height: 30px;
  transition: border-color 0.15s;
}
.store-comment-input:focus { border-color: #1a73e8; outline: none; }
.store-comment-submit {
  padding: 8px 16px;
  background: #1a73e8;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.store-comment-submit:hover { background: #1765cc; }
.store-comment-submit:disabled { background: #c7d2dc; cursor: default; }

/* Name-overridden indicator in manage tab category pills */
.cat-name-overridden-dot {
  width: 6px;
  height: 6px;
  background: #f59e0b;
  border-radius: 50%;
  display: inline-block;
  margin-right: 3px;
  flex-shrink: 0;
}

/* Mobile: store layout stacks */
@media (max-width: 600px) {
  .store-layout { flex-direction: column; }
  .store-list-panel { width: 100%; max-height: 45vh; border-left: none; border-bottom: 1px solid var(--border-color); }
  .store-detail-panel { flex: 1; }
}

/* ── Paywall & Subscription ───────────────────────────────────────────────── */

/* Locked video card */
.video-card.locked {
  opacity: 0.8;
  cursor: pointer;
}
.video-card.locked:hover { opacity: 1; }
.video-card.locked .video-thumbnail {
  position: relative;
}
.video-card.locked .video-thumbnail::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  border-radius: inherit;
}
.video-lock-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

/* Paywall banner (home page, above chips) */
.paywall-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  font-size: 14px;
  direction: rtl;
  flex-wrap: wrap;
}
.paywall-banner-btn {
  background: #065fd4;
  color: #fff;
  border: none;
  border-radius: 99px;
  padding: 5px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.paywall-banner-btn:hover { background: #1565c0; }

/* Sidebar lock badge */
.sidebar-lock-badge {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: #fce8e6;
  color: #c5221f;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  text-align: right;
  margin-bottom: 8px;
  transition: background 0.15s;
}
.sidebar-lock-badge:hover { background: #f5c6c3; }

/* Paywall upsell modal overlay */
#paywall-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9200;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.paywall-modal {
  border: none;
  border-radius: 20px;
  padding: 0;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  background: var(--bg-primary);
  direction: rtl;
  /* Override native <dialog> positioning so flex-centering works */
  position: static;
  margin: 0;
}
.paywall-modal-body {
  padding: 36px 28px 28px;
  text-align: center;
}
.paywall-modal-icon { margin-bottom: 16px; }
.paywall-modal-logo {
  width: 220px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.paywall-modal-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.paywall-modal-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}
.paywall-modal-features {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
  text-align: right;
  padding: 0 8px;
}
.paywall-modal-feature {
  font-size: 14px;
  color: var(--text-primary);
}
.paywall-modal-price {
  font-size: 32px;
  font-weight: 700;
  color: #065fd4;
  margin-bottom: 20px;
}
.paywall-modal-price span {
  font-size: 15px;
  font-weight: 400;
  color: var(--text-secondary);
}
.paywall-modal-cta {
  display: block;
  width: 100%;
  padding: 14px;
  background: #065fd4;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 12px;
}
.paywall-modal-cta:hover { background: #1565c0; }
.paywall-modal-skip {
  display: inline-block;
  background: #1976d2;
  border: none;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  padding: 9px 28px;
  transition: background 0.15s;
}
.paywall-modal-skip:hover { background: #1565c0; }
.paywall-modal-parent-note {
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 4px 0 16px;
  line-height: 1.5;
  text-align: center;
}

/* PayPal checkout overlay */
#paywall-checkout-overlay {
  position: fixed;
  inset: 0;
  z-index: 9300;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.paywall-checkout-card {
  background: var(--bg-primary);
  border-radius: 20px;
  width: min(400px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px 28px 24px;
  position: relative;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  text-align: center;
}
.paywall-checkout-close {
  position: absolute;
  top: 14px;
  left: 14px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-secondary);
  z-index: 1;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 50%;
  transition: background 0.15s;
}
.paywall-checkout-close:hover { background: var(--hover); }
.paywall-checkout-header {
  margin-bottom: 20px;
}
.paywall-checkout-logo {
  width: 160px;
  height: auto;
  object-fit: contain;
  margin-bottom: 10px;
}
.paywall-checkout-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text-primary);
}
.paywall-checkout-price {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}
.paywall-paypal-wrap {
  margin: 0 auto;
  max-width: 320px;
}
.paywall-paypal-loading {
  color: var(--text-secondary);
  font-size: 14px;
  padding: 20px 0;
}
.paywall-checkout-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary);
  margin: 14px 0 0;
  opacity: 0.75;
}

/* ── Studio PIN gate & PIN management ───────────────────────────────────────── */
#studio-pin-gate {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pin-gate-card {
  background: var(--bg-primary);
  border-radius: 20px;
  padding: 32px 28px 24px;
  width: min(340px, 100%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.pin-gate-logo { width: 120px; height: auto; margin-bottom: 4px; }
.pin-gate-title { font-size: 18px; font-weight: 700; margin: 0; }
.pin-gate-sub { font-size: 13px; color: var(--text-secondary); margin: 0; }
.pin-gate-input {
  width: 100%;
  padding: 12px;
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  font-size: 18px;
  letter-spacing: 6px;
  text-align: center;
  background: var(--bg-secondary);
  color: var(--text-primary);
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}
.pin-gate-input:focus { border-color: var(--accent); }
.pin-gate-error { font-size: 12px; color: #e53935; margin: 0; }
.pin-gate-submit {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.pin-gate-submit:hover { opacity: 0.88; }
.pin-gate-submit.pin-mgmt-danger { background: #e53935; }
.pin-gate-forgot {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pin-gate-forgot:hover { color: var(--text-primary); }

/* PIN management & enable overlays */
#pin-mgmt-overlay,
#pin-enable-overlay,
#pin-forgot-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pin-mgmt-card {
  background: var(--bg-primary);
  border-radius: 16px;
  padding: 24px;
  width: min(320px, 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.22);
}
.pin-mgmt-close {
  position: absolute;
  top: 12px;
  left: 12px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-secondary);
  line-height: 1;
  padding: 4px 6px;
  border-radius: 50%;
  transition: background 0.15s;
}
.pin-mgmt-close:hover { background: var(--hover); }
.pin-mgmt-title { font-size: 15px; font-weight: 700; margin: 0; }
.pin-mgmt-sub { font-size: 12px; color: var(--text-secondary); margin: 0; line-height: 1.5; }
.pin-mgmt-actions { display: flex; gap: 8px; }
.pin-mgmt-action-btn {
  flex: 1;
  padding: 9px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.pin-mgmt-action-btn:hover { background: var(--hover); }
.pin-mgmt-action-btn.pin-mgmt-danger { color: #e53935; border-color: #e5393540; }
.pin-mgmt-action-btn.pin-mgmt-danger:hover { background: #e5393514; }

/* ── Subscription tab in Studio ─────────────────────────────────────────────── */
.sub-tab {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 24px;
  direction: rtl;
  min-height: 100%;
  box-sizing: border-box;
}
.sub-tab-loading { color: var(--text-secondary); font-size: 14px; }

/* Main card */
.sub-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 28px;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  text-align: center;
}

/* Current plan status chip — small, subtle, at top of card */
.sub-current-plan {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px 4px 14px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  align-self: center;
}
.sub-plan-label {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.sub-plan-name-free {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.sub-plan-name-premium {
  font-size: 11px;
  font-weight: 700;
  background: linear-gradient(90deg, #b8860b, #e6b800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.01em;
}

/* Logo */
.sub-logo {
  width: 200px;
  max-width: 100%;
  object-fit: contain;
}

/* Free tier hero */
.sub-upgrade-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.sub-upgrade-tagline {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.35;
}

/* Progress */
.sub-progress-section { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.sub-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
}
.sub-progress-at-limit { color: #d93025; font-weight: 600; }
.sub-progress-bar {
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 99px;
  overflow: hidden;
}
.sub-progress-fill {
  height: 100%;
  background: #065fd4;
  border-radius: 99px;
  transition: width 0.4s ease;
}
.sub-progress-fill.at-limit { background: #d93025; }
.sub-locked-hint { font-size: 13px; color: #c5221f; text-align: center; }

/* Features list */
.sub-features-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 16px 20px;
}
.sub-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}
.sub-feature-check {
  color: #137333;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

/* Price */
.sub-price-tag {
  font-size: 34px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
.sub-price-tag span {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
}

/* Actions */
.sub-actions { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.sub-cta-btn {
  width: 100%;
  padding: 15px;
  background: #065fd4;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.sub-cta-btn:hover { background: #1565c0; transform: translateY(-1px); }
.sub-cta-btn:active { transform: none; }
.sub-cancel-btn {
  background: none;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.sub-cancel-btn:hover { color: #c5221f; border-color: #c5221f; }
.sub-renew-btn {
  width: 100%;
  padding: 14px;
  background: #e6f4ea;
  color: #137333;
  border: 1px solid #a8d5b5;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.sub-renew-btn:hover { background: #ceead6; }

/* Premium billing section */
.sub-premium-billing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 12px;
  width: 100%;
}
.sub-billing-row { font-size: 12px; color: var(--text-secondary); letter-spacing: 0.04em; }
.sub-billing-date { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.sub-billing-amount { font-size: 13px; color: var(--text-secondary); }

/* Canceled notice */
.sub-canceled-note {
  font-size: 14px;
  color: #b06000;
  background: #fef7e0;
  padding: 12px 16px;
  border-radius: 10px;
  line-height: 1.6;
  width: 100%;
  box-sizing: border-box;
}
.sub-pastdue-alert {
  font-size: 14px;
  color: #c5221f;
  background: #fce8e6;
  padding: 12px 16px;
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
}

/* ── Parental controls button in header ─────────────────────────────────────── */
.parental-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px 11px;
  border-radius: var(--radius-md);
  border: none;
  background: #e53935;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(229,57,53,0.35);
}
.parental-btn:hover { background: #c62828; box-shadow: 0 4px 12px rgba(229,57,53,0.45); }
.parental-btn:active { background: #b71c1c; }
.parental-btn svg { width: 16px; height: 16px; fill: currentColor; }
.parental-btn-label { font-size: 10px; font-weight: 700; letter-spacing: 0.3px; }

/* Mobile — show label so parents know this button is for them */
@media (max-width: 600px) {
  .parental-btn { padding: 5px 8px; }
  .parental-btn svg { width: 14px; height: 14px; }
  .parental-btn-label { font-size: 9px; }
}

/* ── Messages button (legacy header — kept for backward compat) ──────────── */
.messages-btn { display: none; } /* hidden — moved to studio FAB */
.messages-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ── Studio floating messages button (FAB) ───────────────────────────────── */
.studio-msg-fab {
  position: absolute;
  bottom: 24px;
  left: 20px;       /* left = far from nav in RTL layout */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  z-index: 10;
}
.studio-msg-fab:hover {
  background: #e8f0fe;
  color: #1a73e8;
  box-shadow: 0 4px 16px rgba(26,115,232,0.18);
}
.studio-msg-fab svg { width: 20px; height: 20px; }
.studio-msg-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
/* On mobile, FAB sits above the bottom tab bar */
@media (max-width: 600px) {
  .studio-msg-fab {
    bottom: calc(60px + var(--safe-bottom) + 12px);
    left: 12px;
  }
}

/* ── Messages modal ─────────────────────────────────────────────────────────── */
#messages-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9300;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.messages-modal {
  background: var(--bg-primary);
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.messages-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 0;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.messages-tabs {
  display: flex;
  gap: 4px;
}
.messages-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  border-radius: 4px 4px 0 0;
  transition: color 0.15s;
  white-space: nowrap;
}
.messages-tab.active {
  color: #065fd4;
  border-bottom-color: #065fd4;
  font-weight: 600;
}
.messages-tab:hover:not(.active) { color: var(--text-primary); }
.msg-tab-badge {
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
}
.messages-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.messages-modal-close:hover { background: var(--bg-hover); }

/* Panels */
.messages-panel {
  flex: 1;
  overflow-y: auto;
  flex-direction: column;
}
.msg-list { display: flex; flex-direction: column; gap: 1px; }
.msg-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}
.msg-item {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
  cursor: default;
}
.msg-item.msg-unread { background: var(--bg-secondary); }
.msg-item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.msg-item-subject {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.msg-item-time {
  font-size: 11px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.msg-item-body {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Compose */
.msg-compose-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  flex: 1;
}
.msg-compose-subject {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  box-sizing: border-box;
}
.msg-compose-body {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
  box-sizing: border-box;
}
.msg-compose-send {
  align-self: flex-start;
  padding: 10px 24px;
  background: #065fd4;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.msg-compose-send:hover { background: #1565c0; }
.msg-compose-send:disabled { opacity: 0.6; cursor: default; }

/* ── Store report button ─────────────────────────────────────────────────────── */
.store-card-report {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0.4;
  transition: opacity 0.15s;
  line-height: 1;
  flex-shrink: 0;
}
.store-card-report:hover { opacity: 1; }

/* ── Report dialog ───────────────────────────────────────────────────────────── */
.report-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9300;
  padding: 16px;
}
.report-dialog {
  background: var(--bg-primary);
  border-radius: 14px;
  padding: 24px 20px 20px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.report-header {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.report-playlist-name {
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 6px 10px;
  border-radius: 6px;
  word-break: break-word;
}
.report-reason {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  resize: none;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  outline: none;
}
.report-reason:focus { border-color: var(--accent); }
.report-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.report-cancel-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-secondary);
}
.report-cancel-btn:hover { background: var(--bg-secondary); }
.report-submit-btn {
  background: #e53935;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.report-submit-btn:hover { background: #c62828; }
.report-submit-btn:disabled { opacity: 0.6; cursor: default; }

/* Open-in-store button inside inbox report messages */
.msg-open-playlist-btn {
  margin-top: 6px;
  background: none;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
  display: inline-block;
}
.msg-open-playlist-btn:hover { background: var(--accent); color: #fff; }

/* ================================================
   iPhone / iOS — Comprehensive mobile fixes
   ================================================ */

/* Prevent horizontal page scroll on all iOS browsers */
html, body {
  max-width: 100vw;
  overflow-x: clip;
}

/* Better tap behavior — remove 300ms delay */
* {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
input, textarea, select, button {
  touch-action: auto; /* restore normal touch on interactive elements */
}

/* Scrollable containers — smooth momentum on iOS */
.sidebar-section,
.studio-content,
.studio-nav,
#content,
.store-grid,
.studio-tab {
  -webkit-overflow-scrolling: touch;
}

/* Fix any fixed/sticky element that stacks on top of iPhone notch */
.toast {
  bottom: max(20px, calc(var(--safe-bottom) + 16px));
}

/* Studio PIN overlays — ensure they appear above keyboard and notch */
#studio-pin-overlay,
#pin-mgmt-overlay,
#pin-forgot-overlay,
#pin-enable-overlay {
  padding-top: max(0px, var(--safe-top));
  padding-bottom: max(0px, var(--safe-bottom));
}

/* Studio on mobile — safe area padding for studio-tab content */
@media (max-width: 600px) {
  /* studio-content is flex item above the tab-bar — no extra padding needed */
  .studio-content { padding-bottom: 0; }
  .studio-tab { padding-bottom: 16px; }

  /* Approval layout stacks on mobile */
  .approval-layout {
    flex-direction: column;
  }
  .approval-cats-panel {
    width: 100%;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid var(--border-color);
    max-height: 180px;
    padding: 10px 16px;
  }
  .approval-cats-panel--right {
    border-left: none;
  }

  /* Studio search results grid — 2 columns on small phone */
  .yt-results-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Bottom sidebar padding for sidebar footer */
  #sidebar {
    padding-bottom: var(--safe-bottom);
  }
}