/* ================================================
   SafeList - 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: #f1f3f4;
  --bg-chip-active: #1a73e8;
  --text-primary: #0f0f0f;
  --text-secondary: #606060;
  --text-chip-active: #ffffff;
  /* SafeList brand blue (logo color — Facebook-current #1877F2).
     Every button, switch, focus ring, scroll accent etc. that
     referenced var(--accent) follows the brand. */
  --accent: #1877F2;
  --accent-hover: #1465D8;
  --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;
  /* Visible viewport height — set in JS from window.visualViewport so it
     shrinks when the soft keyboard is open. Used by every modal as a cap
     on max-height so action buttons aren't hidden behind the keyboard. */
  --vvh: 100dvh;
  --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;
  /* Reserve scrollbar space at document level — prevents layout shift when
     scrollbar appears/disappears without creating a new scroll container */
  scrollbar-gutter: stable;
}

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;
}

/* Background scroll lock — when any full-page overlay/modal is open, freeze
   the page behind it so wheel/touch only scrolls the modal's own content
   instead of the blurred site underneath. studio-open is set by admin.js
   on the studio overlay; the rest are detected by their presence in the
   DOM via :has(). */
html:has(body.studio-open),
html:has(.qim-overlay),
html:has(#paywall-modal-overlay),
html:has(#paywall-checkout-overlay),
html:has(#messages-modal-overlay),
html:has(#studio-pin-gate),
html:has(.video-modal-overlay),
html:has(.cat-picker-overlay),
html:has(.thumb-picker-overlay),
html:has(.report-overlay),
html:has(.import-name-overlay),
html:has(.admin-preview-overlay),
html:has(.app-loading-overlay) {
  overflow: hidden;
}
body.studio-open,
body:has(.qim-overlay),
body:has(#paywall-modal-overlay),
body:has(#paywall-checkout-overlay),
body:has(#messages-modal-overlay),
body:has(#studio-pin-gate),
body:has(.video-modal-overlay),
body:has(.cat-picker-overlay),
body:has(.thumb-picker-overlay),
body:has(.report-overlay),
body:has(.import-name-overlay),
body:has(.admin-preview-overlay),
body:has(.app-loading-overlay) {
  overflow: hidden;
  overscroll-behavior: contain;
}

/* 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;
  /* Tightened from 16px so the menu icon hugs the logo. */
  gap: 8px;
  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 {
  /* Bumped from 34px so the wordmark reads at a confident size,
     not lost next to the 40px menu button. At the logo's 2.72:1
     aspect this renders at ~120px wide. */
  height: 44px;
  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(24, 119, 242, 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: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(48px);
  -webkit-backdrop-filter: blur(48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 4px 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;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sidebar-section::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#sidebar:hover .sidebar-section {
  scrollbar-width: thin;
  -ms-overflow-style: auto;
}

#sidebar:hover .sidebar-section::-webkit-scrollbar {
  width: 8px;
}

.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: 11px 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: 0 24px 24px;
  min-height: calc(100dvh - var(--header-full));
  transition: margin-right var(--transition-normal);
  overflow-x: clip;
}

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

/* ================================================
   Category Chips (Filter Bar)
   ================================================ */
/* chips-bar total visible height = 6px top + ~32px chip + 10px row-pb + 12px bar-pb = ~60px
   Use padding-bottom (not margin) so sticky children can reference this height correctly */
.chips-bar {
  display: flex;
  flex-direction: column;
  padding: 6px 0 12px;
  position: sticky;
  top: var(--header-full);
  background: var(--bg-primary);
  z-index: 100;
}

:root { --chips-bar-h: 0px; }

/* Scrollable chips row inside the sticky bar */
.chips-row {
  display: flex;
  gap: 12px;
  padding: 0 0 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

/* ── Inline category header — sticky at top of content ────── */
.cat-inline-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 32px 10px;
  margin-inline: -24px;
  border-bottom: 1px solid rgba(229, 229, 229, 0.6);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.08);
  direction: rtl;
  position: sticky;
  top: var(--header-full);
  z-index: 100;
  animation: catHeaderIn 0.22s ease;
}

@keyframes catHeaderIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cat-inline-emoji {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}

.cat-inline-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.cat-inline-edit-btn,
.cat-inline-delete-view-btn {
  background: none;
  border: 1.5px solid #d4d4d4;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px 6px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
  flex-shrink: 0;
  opacity: 0.45;
}

.cat-inline-edit-btn {
  margin-inline-start: 30px;
}

.cat-inline-edit-btn:hover {
  background: #e8f0fe;
  color: #1a73e8;
  border-color: #1a73e8;
  opacity: 1;
}

.cat-inline-delete-view-btn:hover {
  background: #e7f0ff;
  color: #1877F2;
  border-color: #1877F2;
  opacity: 1;
}

.cat-inline-edit-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1px;
}

/* Same edit icon inside home grouped view section headers */
.home-cat-edit-btn,
.home-cat-delete-btn {
  background: none;
  border: 1.5px solid #d4d4d4;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 3px 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
  flex-shrink: 0;
  opacity: 0.45;
}

.home-cat-edit-btn {
  margin-inline-start: 30px;
}

.home-cat-edit-btn:hover {
  background: #e8f0fe;
  color: #1a73e8;
  border-color: #1a73e8;
  opacity: 1;
}

.home-cat-delete-btn:hover {
  background: #e7f0ff;
  color: #1877F2;
  border-color: #1877F2;
  opacity: 1;
}

.cat-inline-share-btn,
.cat-inline-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.cat-inline-share-btn:hover { background: #e7f0ff; }
.cat-inline-delete-btn:hover { background: #e7f0ff; color: #1877F2; }

.cat-inline-sep {
  width: 1px;
  height: 20px;
  background: var(--border-color);
  flex-shrink: 0;
}

/* Edit mode header */
/* Edit mode header — desktop: compact, mobile: wraps to 2 rows */
.cat-inline-header--edit {
  flex-wrap: wrap;
  gap: 8px;
}

.cat-inline-emoji-btn {
  background: none;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  padding: 3px 6px;
  line-height: 1.2;
  transition: border-color 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
  overflow: hidden;
}

@keyframes thumbBorderFlash {
  0%, 100% { border-color: var(--border-color); box-shadow: none; }
  50%       { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.18); }
}
.thumb-anim-flash {
  animation: thumbBorderFlash 0.55s ease-in-out infinite;
}

.cat-inline-emoji-btn:hover {
  border-color: var(--accent);
}

.cat-inline-name-input {
  width: 150px;
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--accent);
  border-radius: 7px;
  padding: 4px 10px;
  background: var(--bg-primary);
  color: var(--text-primary);
  direction: rtl;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cat-inline-name-input:focus {
  outline: none;
  border-color: #1557b0;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);
}

.cat-inline-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Icon size on share/delete icon buttons */
.cat-inline-share-btn svg,
.cat-inline-delete-btn svg {
  width: 16px;
  height: 16px;
}

.cat-inline-save-btn {
  background: #1a73e8;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, transform 0.15s;
}

.cat-inline-save-btn:hover { background: #1557b0; }

.cat-inline-cancel-btn {
  background: none;
  border: 1.5px solid var(--border-color);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, transform 0.15s;
}

/* Flash hint animation — shown after user edits something */
@keyframes cat-btn-flash {
  0%   { background: #1a73e8; color: #fff; transform: scale(1); }
  25%  { background: #0d47a1; transform: scale(1.08); }
  60%  { background: #1a73e8; transform: scale(1.04); }
  100% { background: #1a73e8; transform: scale(1); }
}
.cat-inline-save-btn.cat-btn-flash {
  animation: cat-btn-flash 0.55s ease-out;
}

/* Video card action buttons (edit mode) */
.video-card-delete-btn,
.video-card-move-btn {
  position: absolute;
  top: 6px;
  z-index: 10;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.18s, transform 0.14s, border-color 0.18s;
}

.video-card-delete-btn {
  left: 8px;
  background: rgba(24, 119, 242, 0.72);
}
.video-card-delete-btn:hover {
  background: rgba(20, 101, 216, 0.92);
  border-color: rgba(255,255,255,0.45);
  transform: scale(1.08);
}

.video-card-move-btn {
  right: 8px;
  background: rgba(26, 115, 232, 0.72);
}
.video-card-move-btn:hover {
  background: rgba(21, 87, 176, 0.92);
  border-color: rgba(255,255,255,0.45);
  transform: scale(1.08);
}

.video-card.edit-mode { position: relative; }

.chip {
  padding: 6px 16px;
  border-radius: 20px;
  background: var(--bg-chip);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1.5px solid transparent;
  flex-shrink: 0;
}

.chip:hover {
  background: #e8eaed;
  color: var(--text-primary);
}

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

/* Category slide-in transition */
@keyframes catSlideIn {
  from { opacity: 0.01; transform: translateX(-14px); }
  to   { opacity: 1;    transform: translateX(0); }
}
#content.cat-slide-in .video-grid,
#content.cat-slide-in .home-grouped-view,
#content.cat-slide-in .empty-state {
  animation: catSlideIn 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  will-change: transform, opacity;
}

/* Home chip — visually distinct from category chips */
.chip-home {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #e8f0fe;
  color: #1a73e8;
  font-weight: 600;
  border-color: #d2e3fc;
}
.chip-home:hover { background: #d2e3fc; color: #1557b0; }
.chip-home.active { background: #1a73e8; color: #fff; border-color: transparent; }

/* Home grouped view — category sections */
.home-grouped-view { display: flex; flex-direction: column; gap: 20px; }

.home-cat-section {}

.home-cat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  margin-inline: -24px;
  padding: 8px 38px;
  border-bottom: 1px solid rgba(229, 229, 229, 0.6);
  direction: rtl;
  position: relative;
  /* Sticky: briefly holds position while scrolling past each section */
  position: sticky;
  top: calc(var(--header-full) - 2px);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 12px -6px rgba(0,0,0,0.08);
  z-index: 50;
}

/* Cover any sub-pixel gap — same frosted glass */
.home-cat-header::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: -8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.home-cat-icon { font-size: 17px; line-height: 1; display: flex; align-items: center; }
.home-cat-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.home-cat-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1.5px solid #d4d4d4;
  border-radius: 20px;
  padding: 3px 10px 3px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Push share button + everything after (count + delete) to the opposite
   end of the header. When the share button isn't rendered (category
   doesn't meet the publish criteria, or is the bonus library, etc.),
   the count badge takes the pivot role so the count+delete still anchor
   to the far edge — keeping the header layout consistent regardless of
   whether the share button is present. */
.home-cat-header .home-cat-share-btn,
.cat-inline-header .home-cat-share-btn,
.home-cat-header > .home-cat-count,
.cat-inline-header > .home-cat-count {
  margin-inline-start: auto;
}
/* When the share button IS rendered it already owns the auto-margin —
   reset the count's auto-margin so we don't end up with two competing
   pivots splitting the gap awkwardly between them. */
.home-cat-header > .home-cat-share-btn ~ .home-cat-count,
.cat-inline-header > .home-cat-share-btn ~ .home-cat-count {
  margin-inline-start: 0;
}

.home-cat-share-btn:hover {
  background: #e7f0ff;
  color: #1877F2;
  border-color: #1877F2;
}

.home-cat-share-btn.shared {
  color: #1877F2;
  border-color: #1877F2;
  background: #e7f0ff;
}

.home-cat-share-btn.shared:hover {
  background: #e7f0ff;
}

.home-cat-count {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border-radius: 99px;
  padding: 1px 8px;
  flex-shrink: 0;
}

/* ── Sidebar-only: subtle "linked" hint next to category label ───
   Tiny, near-text-color icon that just whispers "this is a shared
   list" without competing with the update badge. */
.sidebar-imported-hint {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 4px;
  color: var(--text-primary);
  opacity: 0.15;
  flex-shrink: 0;
  pointer-events: none;
}
.sidebar-item:hover .sidebar-imported-hint { opacity: 0.3; }
#sidebar.collapsed .sidebar-imported-hint { display: none; }

/* ── Imported category badge (home header) ──────────────────
   Base state mirrors the sidebar hint: tiny and faint, just a
   whisper that the category is linked. Only .has-updates lights
   up as a prominent, clickable blue pill. */
.cat-imported-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  margin-inline-start: 4px;
  color: var(--text-primary);
  opacity: 0.15;
  padding: 2px;
  border-radius: 6px;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.cat-imported-icon svg {
  width: 14px;
  height: 14px;
}

.cat-imported-icon.has-updates {
  opacity: 1;
  cursor: pointer;
  color: #1a73e8;
  background: #e8f0fe;
  padding: 3px;
}
.cat-imported-icon.has-updates svg {
  width: 14px;
  height: 14px;
}
.cat-imported-icon.has-updates:hover {
  background: #d2e3fc;
}

.cat-imported-icon-count {
  position: absolute;
  top: -6px;
  inset-inline-end: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #1877F2;
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(24, 119, 242, 0.45);
  pointer-events: none;
  white-space: nowrap;
}

/* ── Duplicate-category repair banner & modal ──────────────── */
.manage-cats-dup-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: start;
  transition: background 0.15s;
}
.manage-cats-dup-banner:hover {
  background: #fde68a;
}

.dup-group {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
  background: #fafafa;
}
.dup-group-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}
.dup-group-hint {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 10px;
}
.dup-group-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.dup-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.dup-cat-row:hover {
  border-color: #93c5fd;
}
.dup-cat-row.is-keeper {
  border-color: #1a73e8;
  background: #eff6ff;
}
.dup-cat-row-body {
  flex: 1;
  min-width: 0;
}
.dup-cat-row-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.dup-cat-row-label {
  font-weight: 600;
  font-size: 14px;
}
.dup-cat-row-meta {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}
.dup-group-merge-btn {
  width: 100%;
  padding: 9px;
  font-size: 14px;
}

.home-cat-update-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  margin-inline-start: 6px;
  background: #1877F2;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(24, 119, 242, 0.35);
  animation: fadeIn 0.2s ease;
}
.home-cat-update-badge:hover { background: #1877F2; }

.home-cat-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1.5px solid #1a73e8;
  border-radius: 20px;
  padding: 3px 10px 3px 7px;
  font-size: 11px;
  font-weight: 600;
  color: #1a73e8;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  animation: fadeIn 0.2s ease;
}

.home-cat-refresh-btn:hover {
  background: #e8f0fe;
}

.sidebar-cat-sync {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 1px;
  cursor: pointer;
  flex-shrink: 0;
  margin-inline-start: 3px;
  color: var(--text-secondary);
  opacity: 0.3;
  border-radius: 4px;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.sidebar-cat-sync:hover { opacity: 1; background: var(--bg-hover); }
.sidebar-cat-sync.has-updates {
  color: #f59e0b;
  opacity: 0.9;
  gap: 3px;
  animation: syncPulse 2.5s ease-in-out infinite;
}
.sidebar-cat-sync.has-updates:hover { color: #d97706; opacity: 1; }
@keyframes syncPulse {
  0%, 100% { opacity: 0.9; }
  50%       { opacity: 0.55; }
}
.sidebar-sync-new-count {
  background: #f59e0b;
  color: #fff;
  border-radius: 99px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  min-width: 15px;
  text-align: center;
  flex-shrink: 0;
}
.sidebar-sync-new-label {
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}
.sidebar.collapsed .sidebar-sync-new-label { display: none; }

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

.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: min(85vh, calc(var(--vvh, 100dvh) - 24px));
  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(24, 119, 242, 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(24, 119, 242, 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);
}

.toast.toast--success {
  background: #16a34a;
  color: #fff;
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.35);
}

@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;
}

/* Rich empty-state variant (with CTAs). Used when the library or a category
   is empty but the user is signed in — gives them an obvious next step
   instead of a dead-end "no videos" message. */
.empty-state--rich {
  padding: 56px 20px 64px;
  gap: 14px;
}
.empty-state--rich h3 {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary);
}
.empty-state--rich p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.empty-state-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.empty-state-btn {
  padding: 9px 22px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.empty-state-btn:hover {
  background: var(--hover);
  border-color: var(--text-secondary);
}
.empty-state-btn--primary {
  background: #065fd4;
  border-color: transparent;
  color: #fff;
}
.empty-state-btn--primary:hover {
  background: #0551b5;
  border-color: transparent;
}

/* ── Welcome screen (first-login onboarding) ──────────────────────── */
.welcome-screen {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 16px 48px;
  direction: rtl;
}
.welcome-header {
  text-align: center;
  margin-bottom: 28px;
}
.welcome-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.welcome-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}
.welcome-store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.welcome-store-card { cursor: pointer; }
.welcome-import-btn {
  width: calc(100% - 24px);
  margin: 0 12px 12px;
  justify-content: center;
}
.welcome-add-own-btn {
  display: block;
  margin: 0 auto;
  padding: 10px 28px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border-color);
  background: none;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.welcome-add-own-btn:hover { background: var(--hover); color: var(--text-primary); }
.welcome-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
  padding: 40px;
}
.welcome-loading.welcome-loading-error {
  color: #1877F2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
@media (max-width: 600px) {
  .welcome-store-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .welcome-title { font-size: 18px; }
}

/* ================================================
   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) {
  :root { --chips-bar-h: 0px; }

  .chips-bar {
    display: none;
  }

  /* Show chips-bar in edit mode — only the edit header, not the chips row */
  .chips-bar:has(.cat-inline-header--edit) {
    display: flex;
  }
  .chips-bar:has(.cat-inline-header--edit) .chips-row {
    display: none;
  }

  /* Mobile: wrap so actions go to second row if needed */
  .cat-inline-header--edit {
    gap: 6px;
    padding: 6px 10px;
    flex-wrap: wrap;
  }
  /* Let the name input flex-fill so buttons don't overflow */
  .cat-inline-header--edit .cat-inline-name-input {
    flex: 1 1 120px;
    width: auto;
    min-width: 0;
  }
  /* Keep action buttons together as one group — wraps cleanly on narrow screens */
  .cat-inline-header--edit .cat-inline-actions {
    flex-wrap: nowrap;
    gap: 5px;
  }
  .cat-inline-save-btn {
    padding: 4px 12px;
    font-size: 12px;
  }
  .cat-inline-cancel-btn {
    padding: 4px 10px;
    font-size: 12px;
  }

  #sidebar {
    transform: translateX(100%);
    width: var(--sidebar-width);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(48px);
    -webkit-backdrop-filter: blur(48px);
    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;
  }

  /* Layout guard rails (mobile only).
     With the center search hidden, only `.header-start` and `.header-end`
     remain in the header row. Pre-fix, both had `min-width: 200px` reset
     to 0 but every CHILD inside `.header-end` (bell, time-chip, profile)
     was `flex-shrink: 0`, so when the time-chip text grew (e.g. "4:32
     שע'" or English "1h 30m") the end section couldn't actually shrink
     and its right edge would visually run over the logo in the start
     section. Reported as "the bell icon runs over the logo".

     Fix: keep the start side rigid (logo + menu always crisp), let the
     end side and the chip's text shrink with ellipsis as a release
     valve, and put a small inline gap on the header itself so the two
     sections can never share a pixel. Together this guarantees the bell
     stops at least 8 px shy of the logo regardless of chip content. */
  .header-start {
    min-width: 0;
    flex-shrink: 0;
  }
  .header-end {
    min-width: 0;
    flex-shrink: 1;
    /* Cap the end side so a wide time-chip can't push past the gap into
       the logo. 180 px ≈ menu (40) + gap (8) + logo (~120, height 44 ×
       2.72 aspect) + breathing room; the safety subtraction here is
       the hard backstop. */
    max-width: calc(100% - 180px);
  }
  #header {
    /* Hard gap between the two sections — guarantees a visible gutter
       even if both sides max out their allocated width. */
    column-gap: 8px;
    align-items: center;
    padding-bottom: 8px;
  }
  /* The shrink/ellipsize overrides for .time-chip and .profile-btn live
     at the end of this file (after the base rules) so source-order
     specificity actually wins. If you move them here they'll be silently
     overridden by `.time-chip { flex-shrink: 0; }` at line ~12565. */

  .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: clip;
  }

  /* Mobile: unify category header look across home page and category page */
  .cat-inline-header,
  .home-cat-header {
    margin-inline: max(-16px, calc(-1 * var(--safe-right) - 8px));
    padding-inline: max(14px, calc(var(--safe-right) + 10px));
    padding-top: 3px;
    padding-bottom: 3px;
    gap: 5px;
    box-shadow: 0 2px 6px -4px rgba(0,0,0,0.06);
    border-bottom-color: rgba(229,229,229,0.45);
  }

  .home-cat-header {
    margin-bottom: 10px;
  }

  /* Mobile: hide category thumbnail — name + icons only */
  .home-cat-header .home-cat-icon,
  .cat-inline-header .cat-inline-emoji {
    display: none;
  }

  .home-cat-header .home-cat-name,
  .cat-inline-header .cat-inline-label {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
  }

  .home-cat-refresh-btn span {
    display: none;
  }

  .home-cat-refresh-btn {
    padding: 3px 6px;
    gap: 0;
  }

  .home-cat-edit-btn,
  .home-cat-delete-btn,
  .cat-inline-edit-btn,
  .cat-inline-delete-view-btn {
    padding: 2px 5px;
    border-radius: 5px;
    opacity: 0.35;
    border-width: 1px;
  }
  .home-cat-edit-btn,
  .cat-inline-edit-btn { margin-inline-start: 8px; }
  .home-cat-edit-btn .cat-inline-edit-label,
  .home-cat-delete-btn .cat-inline-edit-label,
  .cat-inline-edit-btn .cat-inline-edit-label,
  .cat-inline-delete-view-btn .cat-inline-edit-label { display: none; }

  .home-cat-share-btn {
    padding: 2px 7px;
    font-size: 11px;
    gap: 3px;
    border-width: 1px;
  }
  .home-cat-share-btn span { display: none; }

  .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: min(90vh, calc(var(--vvh, 100dvh) - 24px));
  }

  .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 popup (auth-locked overlay) ─────────────────────────────────── */
/* The app shell renders normally behind this popup so users can preview
   SafeList before signing in. The shell is faded to 50% opacity and made
   non-interactive ("blocked but visible") and the popup floats centered on
   top. Same treatment is reused for the YouTube-connect popup that's
   triggered from inside the studio. */

body.auth-locked #app,
body.yt-locked #app {
  pointer-events: none;
  user-select: none;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

/* Prevent the locked shell from scrolling under the popup. */
body.auth-locked,
body.yt-locked {
  overflow: hidden;
}

#login-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 16px;
  pointer-events: none; /* the sheet inside re-enables pointer-events */
}

.login-sheet {
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.10);
  padding: 24px 22px;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: login-popup-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: auto;
}

@keyframes login-popup-in {
  from { transform: translateY(12px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

.login-sheet-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.login-sheet-head svg {
  width: 28px;
  height: 28px;
}

.login-sheet-eyebrow {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.login-sheet-title {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  color: var(--text-primary);
}

.login-sheet-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  text-align: center;
}

.login-sheet-legal {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  text-align: center;
  opacity: 0.85;
}
.login-sheet-legal a {
  color: #1a73e8;
  text-decoration: none;
  font-weight: 500;
}
.login-sheet-legal a:hover { text-decoration: underline; }

.login-sheet-user {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f1f3f4;
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 4px;
}

.login-sheet-user-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.login-sheet-user-name {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.login-sheet-user-email {
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.login-sheet-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.login-sheet-user-avatar-fallback {
  background: #1a73e8;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
}

.login-sheet-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #1a73e8;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  margin-top: 6px;
  transition: background 0.15s, box-shadow 0.15s;
}
.login-sheet-cta:hover { background: #1765d0; }
.login-sheet-cta:active { background: #1457b8; }
.login-sheet-cta:disabled { opacity: 0.6; cursor: default; }

/* First-time variant — Google-styled white pill with the colored G mark.
   The personalized "Continue as <name>" CTA uses the blue solid above. */
.login-sheet-cta-google {
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
}
.login-sheet-cta-google:hover { background: #f7f8fa; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.login-sheet-cta-google:active { background: #eef0f3; }


/* ── Sidebar Top (pinned add-videos button) ───────────────────────────── */
.sidebar-top {
  padding: 8px 12px 4px;
  flex-shrink: 0;
}

/* ── Sidebar Footer (user info) ────────────────────────────────────────── */
/* ── Sidebar action buttons (add / bonus) ─────────────────────────────── */
.sidebar-add-videos-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  background: none;
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  direction: rtl;
  margin-bottom: 6px;
  border: none;
}

/* ── Add videos button — solid red ──────────────────────────────────── */
#sidebar-add-videos-btn {
  background: var(--accent);
  color: #ffffff;
  font-weight: 500;
  border: none;
  margin-bottom: 4px;
}
#sidebar-add-videos-btn:hover {
  background: var(--accent-hover);
  box-shadow: 0 2px 8px rgba(180, 0, 0, 0.3);
  color: #ffffff;
}
#sidebar-add-videos-btn .sidebar-add-videos-icon {
  fill: #ffffff;
  stroke: none;
}

/* ── Bonus category row in sidebar ───────────────────────────────────── */
.sidebar-bonus-cat .sidebar-icon {
  font-size: 16px; line-height: 1; flex-shrink: 0; width: 22px; text-align: center;
}
.sidebar-bonus-pending {
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: #1a73e8;
  border-radius: 99px;
  padding: 1px 5px;
  min-width: 14px;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
}
.sidebar-bonus-import-btn {
  display: flex; align-items: center; gap: 5px;
  margin-inline-start: 28px;
  padding: 3px 9px 3px 7px;
  border-radius: 99px;
  border: 1.5px solid rgba(26, 115, 232, 0.45);
  background: rgba(26, 115, 232, 0.06);
  color: #1a73e8;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
  margin-top: 2px;
  margin-bottom: 4px;
}
.sidebar-bonus-import-btn:hover {
  background: rgba(26, 115, 232, 0.15);
  border-color: #1a73e8;
}
/* ── Bonus pinned footer section ─────────────────────────────────────── */
.sidebar-bonus-footer {
  border-top: 1px solid var(--border-color);
  padding-top: 4px;
  margin-bottom: 6px;
  direction: rtl;
}
#sidebar.collapsed .sidebar-bonus-footer { display: none; }
#sidebar.collapsed .sidebar-bonus-pending { display: none; }
#sidebar.collapsed .sidebar-bonus-import-btn { display: none; }

.sidebar-add-videos-icon {
  fill: var(--accent);
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

#sidebar.collapsed .sidebar-add-videos-label { display: none; }
#sidebar.collapsed .sidebar-add-videos-btn {
  gap: 0;
  padding: 12px 0;
  justify-content: center;
}

.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.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  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));
}

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

/* Wrapper holds the container + floating close button together */
.studio-wrapper {
  position: relative;
  width: min(1380px, 100%);
  height: min(86dvh, 860px);
  height: min(86vh, 860px); /* fallback */
  height: min(86dvh, 860px);
}

.studio-container {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  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 — floats outside the panel, top-right corner */
.studio-close-floating {
  position: absolute;
  top: -13px;
  right: -13px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.92);
  background: #1877F2;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 1px 3px rgba(24,119,242,0.4);
  transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
}
.studio-close-floating:hover {
  background: #1465D8;
  box-shadow: 0 3px 12px rgba(0,0,0,0.28), 0 2px 6px rgba(24,119,242,0.5);
  transform: scale(1.08);
}

/* ── Elegant scrollbars inside studio ── */
.studio-content,
.studio-nav,
.approval-cats-panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(26,115,232,0.25) transparent;
}
.studio-content::-webkit-scrollbar,
.studio-nav::-webkit-scrollbar,
.approval-cats-panel::-webkit-scrollbar { width: 3px; }
.studio-content::-webkit-scrollbar-track,
.studio-nav::-webkit-scrollbar-track,
.approval-cats-panel::-webkit-scrollbar-track { background: transparent; }
.studio-content::-webkit-scrollbar-thumb,
.studio-nav::-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-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, sits inside studio-nav-header below logo */
.studio-pin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s;
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.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: 4px;
  padding: 8px 10px;
}

.studio-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  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: 11px; /* 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);
  /* Positioning context for floating overlays (e.g. .studio-scroll-down)
     so they anchor to the content column, not the whole studio panel. */
  position: relative;
}

.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: #e7f0ff;
}

/* ── 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-wrapper {
    width: 100%;
    height: 100vh;   /* fallback */
    height: 100dvh;
  }

  .studio-container {
    width: 100%;
    height: 100%;
    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;
  }

  /* On mobile the studio's PIN panel is hidden — the header lock toggle replaces it. */
  .studio-pin-row { display: none; }

  /* 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-panel-hint {
  font-size: 11px;
  color: var(--text-secondary);
  padding: 4px 4px 0;
  opacity: 0.7;
  direction: rtl;
  flex-shrink: 0;
}

.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: #1a73e8;
  background: #e8f0fe;
  color: #1557b0;
  font-weight: 600;
  border-right: 4px solid #1a73e8;
}

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

/* ── Category thumbnail button (the icon itself is clickable) ── */
.cat-icon-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s;
}
.cat-icon-btn .cat-thumb,
.cat-icon-btn .cat-thumb-empty {
  border-radius: 0 !important;
  pointer-events: none;
  display: block;
}
/* Hover: lift + pencil overlay */
.cat-icon-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 3px 10px rgba(0,0,0,0.22);
}
.cat-icon-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='white'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm17.71-10.21a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") no-repeat center center;
  background-color: transparent;
  opacity: 0;
  transition: opacity 0.15s, background-color 0.15s;
  border-radius: 8px;
}
.cat-icon-btn:hover::after {
  background-color: rgba(0,0,0,0.35);
  opacity: 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);
  /* Cap to the visible viewport (visualViewport tracker sets --vvh in JS),
     so when the soft keyboard pops up on mobile the dialog stays inside
     the visible area and the action buttons aren't hidden behind it. */
  max-height: calc(var(--vvh, 100dvh) - 24px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
  background: var(--surface, #fff);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: confirmPop 0.18s ease-out forwards;
}
dialog.studio-confirm-dlg .studio-confirm-icon,
dialog.studio-confirm-dlg .studio-publish-heart-icon {
  flex-shrink: 0;
}
dialog.studio-confirm-dlg .studio-confirm-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
dialog.studio-confirm-dlg .studio-confirm-actions {
  flex-shrink: 0;
}
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: #1877F2;
  border-left: 1px solid var(--border-color, #e0e0e0);
}
.studio-confirm-ok:hover   { background: rgba(24,119,242,0.07); }
.studio-confirm-ok--danger { background: #1877F2 !important; color: #fff !important; border-color: #1877F2 !important; }
.studio-confirm-ok--danger:hover { background: #1465D8 !important; }
.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;
  min-width: 0;
  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: #e7f0ff;
  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;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px 24px 16px;
  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;
  padding: 8px 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  transition: box-shadow 0.18s, border-color 0.18s;
}
.approval-search-bar:focus-within {
  border-color: rgba(24,119,242,0.4);
  box-shadow: 0 4px 16px rgba(24,119,242,0.12), 0 2px 6px rgba(0,0,0,0.06);
}
.approval-search-bar .approval-search-input-wrap .form-input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 12px 0 28px !important;
}
.approval-search-bar .approval-search-input-wrap .form-input:focus {
  border: none !important;
  box-shadow: none !important;
}
.approval-search-btn-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 24px;
  height: 40px;
  white-space: nowrap;
  width: auto;
  flex-shrink: 0;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  border-radius: 999px !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(180,0,0,0.25) !important;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s !important;
}
.approval-search-btn-inner:hover:not(:disabled) {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  box-shadow: 0 4px 14px rgba(180,0,0,0.35) !important;
}
.approval-search-btn-inner:active:not(:disabled) {
  transform: scale(0.97);
}

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

.yt-autocomplete-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 999;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16), 0 2px 6px rgba(0,0,0,0.08);
  overflow: hidden;
  display: none;
}
.yt-autocomplete-list.open { display: block; }
.yt-autocomplete-item {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  text-align: right;
  direction: rtl;
}
.yt-autocomplete-item:hover,
.yt-autocomplete-item.active {
  background: var(--bg-secondary);
}
.yt-autocomplete-item svg { flex-shrink: 0; opacity: 0.5; }

.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;
}

/* ── Left: featured/recommended panel (desktop) ── */

.approval-featured-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 2px solid var(--border-color);
}

/* ── Inner content (header + scrollable cards) ── */
.approval-featured-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-secondary);
}

.approval-featured-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px 12px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-color);
}

.approval-featured-maximize-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.approval-featured-maximize-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.approval-featured-panel-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 7px;
}

.approval-featured-panel-wrap {
  flex: 1;
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.approval-featured-panel-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 14px;
  scrollbar-width: none;
}
.approval-featured-panel-body::-webkit-scrollbar {
  display: none;
}

/* Scroll-down arrow for featured panel */
.approval-featured-scroll-arrow {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #d0d7e3;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #5f6b7a;
  transition: background 0.15s, box-shadow 0.15s, color 0.15s;
  z-index: 5;
  animation: arrowBounce 1.6s ease-in-out infinite;
}
.approval-featured-scroll-arrow:hover {
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  color: #1a73e8;
  animation: none;
}

/* Vertical grid for desktop side panel cards */
.afc4-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.afc4-panel-grid .afc4-store-card {
  flex: none;
  min-width: 0;
  width: 100%;
}

/* ── Fullscreen featured overlay ── */
.approval-featured-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.approval-featured-fullscreen-panel {
  background: var(--bg-secondary);
  border-radius: 16px;
  box-shadow: 0 8px 48px rgba(0,0,0,0.32);
  width: min(860px, 90%);
  max-height: min(82%, calc(var(--vvh, 100dvh) - 32px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

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

.approval-featured-fullscreen-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 7px;
}

.approval-featured-fullscreen-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.approval-featured-fullscreen-close:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.approval-featured-fullscreen-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  scrollbar-width: thin;
}

/* Mobile carousel inside search panel (only visible on mobile) */
#approval-featured-carousel-mobile {
  display: none;
}

.approval-results-wrap {
  flex: 1;
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.approval-results-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 4px;
  background: #fff;
  scrollbar-width: none;
}
.approval-results-scroll::-webkit-scrollbar {
  display: none;
}

/* Scroll-down arrow — always above content, not part of scroll */
.approval-scroll-arrow {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #d0d7e3;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #5f6b7a;
  transition: background 0.15s, box-shadow 0.15s, color 0.15s, transform 0.15s;
  z-index: 5;
  animation: arrowBounce 1.6s ease-in-out infinite;
}
.approval-scroll-arrow:hover {
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  color: #1a73e8;
  transform: translateX(-50%) translateY(-1px);
  animation: none;
}

@keyframes arrowBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(4px); }
}

/* ── Result rows (card-style) ── */

#approval-results-list {
  max-width: 680px;
  margin: 0 auto;
}

.approval-result-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid #e2e5ea;
  background: #fff;
  margin-bottom: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.18s ease,
              border-color 0.15s ease,
              background 0.15s ease;
  cursor: default;
  /* Inherit page direction — DOM order is circle / thumb / info / Watch,
     which renders correctly both as RTL (Hebrew: circle right, Watch left)
     and LTR (English: circle left, Watch right). Hardcoding RTL here used
     to flip the English layout the wrong way around. */
}

.approval-result-row:hover {
  transform: translateY(-1px) scale(1.008);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  border-color: #c5d8fd;
  background: #fafcff;
  z-index: 1;
}

.approval-result-row.is-selected {
  background: #eef4ff;
  border-color: #1a73e8;
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.15);
}

.approval-result-row.is-selected:hover {
  background: #e4edff;
  box-shadow: 0 4px 14px rgba(26, 115, 232, 0.22);
}

.approval-result-row.is-categorized {
  background: #f4f6f9;
  border-color: #dde1e8;
}

.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: 72px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.approval-result-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.approval-result-title {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.approval-result-meta {
  display: flex;
  gap: 6px;
  font-size: 10.5px;
  color: var(--text-secondary);
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── Selection circle ── */

.approval-result-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #9aa4b2;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
  padding: 0;
  position: relative;
  box-shadow: inset 0 0 0 1px #fff;
}

.approval-result-circle:hover {
  border-color: #1a73e8;
  background: #e8f0fe;
  transform: scale(1.1);
}

.approval-result-circle.filled {
  background: #1a73e8;
  border-color: #1a73e8;
}

.approval-result-circle.filled::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 4px;
  height: 7px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

.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-color, #cad1db);
  background: transparent;
  opacity: 0.3;
}

.approval-result-circle.in-cat:hover {
  opacity: 0.6;
  border-color: #1a73e8;
  background: rgba(26,115,232,0.05);
}

/* When an already-categorized circle is selected, show full filled state */
.approval-result-circle.in-cat.filled {
  opacity: 1;
  background: #1a73e8;
  border-color: #1a73e8;
}
.approval-result-circle.in-cat.filled:hover {
  background-color: #1557b0;
  border-color: #1557b0;
}

/* ── Featured playlists carousel ── */
.approval-featured-carousel { padding: 2px 0 4px; }

.approval-featured-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 40px 0; color: var(--text-secondary); font-size: 13px;
}
.approval-featured-loading {
  display: flex; align-items: center; justify-content: center; padding: 32px 0;
}

/* ── 4-up featured carousel ── */
.afc4-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-secondary); display: flex; align-items: center; gap: 4px;
  margin-bottom: 8px;
}

.afc4-row {
  display: flex;
  align-items: stretch;
  gap: 5px;
}

.afc4-track {
  flex: 1;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.afc4-track::-webkit-scrollbar { display: none; }

/* Each card is always 1/4 of the track width */
.afc4-card {
  flex: 0 0 calc(25% - 6px);
  min-width: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid var(--border-color);
  background: var(--bg-primary);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.afc4-card:hover {
  border-color: #1a73e8;
  box-shadow: 0 4px 12px rgba(26,115,232,0.18);
  transform: translateY(-2px);
}

.afc4-thumb {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #1a1a2e;
  flex-shrink: 0;
}
.afc4-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.afc4-thumb-ph {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #1a73e8 0%, #7c4dff 100%);
}

.afc4-body { padding: 5px 5px 3px; flex: 1; min-width: 0; }
.afc4-name {
  font-size: 10px; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text-primary);
}
.afc4-count { font-size: 9px; color: var(--text-secondary); }

.afc4-open-btn {
  display: block; width: 100%;
  padding: 5px 2px;
  background: #1a73e8; color: #fff;
  border: none; font-size: 10px; font-weight: 700;
  cursor: pointer; text-align: center;
  transition: background 0.15s;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}
.afc4-open-btn:hover { background: #1557b0; }

/* Nav arrows (shown only when > 4 playlists) */
.afc4-nav {
  width: 26px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  align-self: stretch;
}
.afc4-nav:hover:not(:disabled) { background: #e8f0fe; border-color: #1a73e8; color: #1a73e8; }
.afc4-nav:disabled { opacity: 0.3; cursor: default; }

/* Store-card overrides for carousel context */
.afc4-store-card {
  flex: 0 0 calc(25% - 6px);
  min-width: 120px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}

/* Quick-import / sync / done button at bottom of carousel card */
.afc4-quick-btn {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin: 0 8px 8px; padding: 5px 0;
  border-radius: 6px; border: none; cursor: pointer;
  font-size: 10px; font-weight: 600;
  background: #e8f0fe; color: #1a73e8;
  transition: background 0.15s;
  flex-shrink: 0;
}
.afc4-quick-btn:hover:not(:disabled) { background: #d2e3fc; }
.afc4-quick-sync { background: #fff3e0; color: #f57c00; }
.afc4-quick-sync:hover { background: #ffe0b2; }
.afc4-quick-done { background: #e8f5e9; color: #388e3c; cursor: default; opacity: 0.8; }
.afc4-quick-restore { background: #e8f5e9; color: #2e7d32; }
.afc4-quick-restore:hover:not(:disabled) { background: #c8e6c9; }
.afc4-dual-wrap {
  display: flex; gap: 4px;
  margin: 0 8px 8px;
}
.afc4-dual-wrap .afc4-quick-btn {
  flex: 1 1 0;
  margin: 0;
  min-width: 0;
}
.afc4-owner-manage-btn {
  background: rgba(106,27,154,0.10);
  color: #6a1b9a;
  border: 1px solid rgba(106,27,154,0.25) !important;
}
.afc4-owner-manage-btn:hover:not(:disabled) {
  background: rgba(106,27,154,0.20);
}
.afc4-done-wrap {
  display: flex; align-items: center; gap: 6px;
  margin: 0 8px 8px;
  flex-wrap: wrap;
}
.afc4-done-label {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 10px;
  font-size: 11px; font-weight: 600; color: #2e7d32;
  background: rgba(46,125,50,0.10);
  border: 1px solid rgba(46,125,50,0.25);
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.afc4-quick-remove {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 10px;
  border: 1px solid rgba(24,119,242,0.30);
  border-radius: 999px;
  background: rgba(24,119,242,0.07);
  color: #1465D8;
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.afc4-quick-remove:hover {
  background: rgba(24,119,242,0.15);
  border-color: rgba(24,119,242,0.55);
}

/* ── Quick-import modal (qim) ── */
.qim-overlay {
  position: fixed; inset: 0; z-index: 9600;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.qim-card {
  background: var(--bg-primary);
  border-radius: 16px;
  width: 100%; max-width: 440px;
  /* Cap to the visible viewport so the soft keyboard never hides the
     action footer. --vvh is set in JS from window.visualViewport. */
  max-height: min(82vh, calc(var(--vvh, 100dvh) - 24px));
  display: flex; flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.28);
  overflow: hidden;
}
.qim-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 0; flex-shrink: 0;
}
.qim-title { font-size: 14px; font-weight: 700; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qim-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none; cursor: pointer;
  background: none;
  color: var(--text-secondary);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}
.qim-close:hover { background: var(--bg-tertiary); }
.qim-subtitle {
  padding: 6px 16px 10px; font-size: 11px; color: var(--text-secondary);
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.qim-select-all { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.qim-video-list { overflow-y: auto; flex: 1; padding: 0 8px 8px; min-height: 0; }
/* Description expand/collapse */
.qim-desc-wrap {
  padding: 0 16px 10px; flex-shrink: 0;
}
.qim-desc-text {
  font-size: 12px; color: var(--text-secondary); line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.qim-desc-truncated {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal;
}
.qim-desc-toggle {
  background: none; border: none; cursor: pointer;
  font-size: 11px; color: #1a73e8; padding: 2px 0; margin-top: 2px;
}
.qim-desc-toggle:hover { text-decoration: underline; }

.qim-video-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 8px; cursor: pointer;
  transition: background 0.1s;
}
.qim-video-row:hover { background: var(--bg-secondary); }
.qim-thumb { width: 72px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.qim-thumb-ph { width: 72px; height: 40px; border-radius: 4px; flex-shrink: 0; background: var(--bg-secondary); }
.qim-video-title {
  font-size: 12px; color: var(--text-primary); line-height: 1.3; flex: 1; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.qim-preview-btn {
  display: inline-flex; align-items: center; gap: 3px;
  background: none; border: 1px solid var(--border-color); border-radius: 6px;
  padding: 3px 7px; font-size: 10px; color: var(--text-secondary);
  cursor: pointer; flex-shrink: 0; white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.qim-preview-btn:hover { background: #e8f0fe; color: #1a73e8; border-color: #1a73e8; }

.qim-video-missing { opacity: 0.75; }
.qim-video-missing .qim-thumb,
.qim-video-missing .qim-thumb-ph { filter: grayscale(0.6); }
.qim-video-missing .qim-video-title { text-decoration: line-through; text-decoration-color: rgba(0,0,0,0.3); }

.qim-reimport-btn {
  display: inline-flex; align-items: center; gap: 3px;
  background: #10b981; color: #fff; border: none; border-radius: 6px;
  padding: 4px 8px; font-size: 11px; font-weight: 600;
  cursor: pointer; flex-shrink: 0; white-space: nowrap;
  transition: background 0.12s, transform 0.08s;
}
.qim-reimport-btn:hover { background: #059669; }
.qim-reimport-btn:active { transform: scale(0.96); }
.qim-reimport-btn:disabled { opacity: 0.6; cursor: wait; }
/* Comments section inside qim modal */
#qim-comments-section {
  flex-shrink: 0;
  border-top: 1px solid var(--border-color);
}
#qim-comments-section .store-comments-toggle {
  padding: 10px 16px;
}

.qim-footer {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 20px 18px; border-top: 1px solid var(--border-color);
  gap: 8px; flex-shrink: 0;
}
.qim-count-label { font-size: 12px; color: var(--text-secondary); }
.qim-confirm-btn {
  width: 100% !important;
  height: 40px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px;
  background: linear-gradient(135deg, #1a73e8 0%, #0d5ecc 100%) !important;
  box-shadow: 0 2px 8px rgba(26,115,232,0.3) !important;
  transition: box-shadow 0.2s, transform 0.1s !important;
}
.qim-confirm-btn:hover:not(:disabled) {
  box-shadow: 0 5px 18px rgba(26,115,232,0.5) !important;
  transform: translateY(-1px);
}
.qim-confirm-btn:active:not(:disabled) { transform: translateY(0); }

/* ── Mini video preview overlay (from qim) ── */
.qim-video-preview-overlay {
  position: fixed; inset: 0; z-index: 9700;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.qim-video-preview-inner {
  position: relative; width: 100%; max-width: 640px; aspect-ratio: 16/9;
  background: #000; border-radius: 10px; overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.qim-video-preview-inner iframe { width: 100%; height: 100%; border: none; display: block; }
.qim-video-preview-close {
  position: absolute; top: -36px; right: 0;
  background: rgba(255,255,255,0.15); border: none; border-radius: 6px;
  color: #fff; font-size: 18px; cursor: pointer;
  padding: 4px 10px; line-height: 1;
}
.qim-video-preview-close:hover { background: rgba(255,255,255,0.3); }

/* ── Quick-Add floating panel ──────────────────────────────────────────────
   Lightweight alternative to the full parent studio, opened from
   "הוספת סרטונים" in the sidebar. Wraps the existing studio panels
   (approval search, featured carousel, store community) inside a
   compact floating card that shares the qim-overlay aesthetic. The
   child panels are rendered verbatim by the same Admin methods the
   studio uses, so changes to the source panels flow in automatically.
*/
.quick-add-overlay {
  padding: 20px;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.quick-add-card {
  max-width: 760px;
  width: 100%;
  height: 82vh;
  max-height: min(640px, calc(var(--vvh, 100dvh) - 32px));
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  /* overflow:visible so the floating close X and the pulsing search
     icon's box-shadow ring don't get clipped at the card edge. The
     body has its own overflow:hidden, so rounded corners still hold. */
  overflow: visible;
  position: relative;
}
.quick-add-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-primary);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  flex-shrink: 0;
  /* Allow the inline magnifier's pulse glow to bleed past the row
     edges instead of being clipped by overflow. */
  position: relative;
  overflow: visible;
}
.quick-add-tabs {
  display: flex;
  gap: 6px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
  /* Vertical breathing room so the pulse ring around the magnifier
     isn't clipped by the row's own bounds. */
  padding: 4px 0;
}
.quick-add-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.quick-add-tab svg { width: 17px; height: 17px; }
.quick-add-tab:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.quick-add-tab.active {
  background: #1877F2;
  border-color: #1877F2;
  color: #fff;
  box-shadow: 0 2px 8px rgba(24,119,242,0.28);
}
.quick-add-tab.active svg { fill: currentColor !important; }
.quick-add-tab svg { flex-shrink: 0; }
/* Red-circle close X — mirrors .studio-close-floating so it reads as
   the same "close" affordance the parents panel uses. Floated over
   the top-right corner of the card so it overlaps the rounded edge. */
.quick-add-close {
  position: absolute;
  top: -13px;
  right: -13px;
  z-index: 30;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.92);
  background: #1877F2;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 1px 3px rgba(24,119,242,0.4);
  transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
}
.quick-add-close:hover {
  background: #1465D8;
  box-shadow: 0 3px 12px rgba(0,0,0,0.28), 0 2px 6px rgba(24,119,242,0.5);
  transform: scale(1.08);
}
.quick-add-close:active { transform: scale(0.95); }
.quick-add-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary);
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

/* Search tab — reuses _renderApprovalTab verbatim; hide pieces that
   belong to their own tabs in this lightweight wrapper. */
.quick-add-card[data-tab="search"] .quick-add-body > .approval-layout {
  flex: 1;
  min-height: 0;
}
.quick-add-card[data-tab="search"] .approval-featured-panel {
  display: none !important;
}
.quick-add-card[data-tab="search"] #approval-featured-carousel-mobile {
  display: none !important;
}
.quick-add-card[data-tab="search"] .approval-search-panel {
  padding: 12px 16px 12px;
}

/* Featured tab — stand-alone recommended panel. */
.quick-add-card[data-tab="featured"] .quick-add-featured {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.quick-add-card[data-tab="featured"] .approval-featured-inner {
  flex: 1;
  min-height: 0;
}
.quick-add-card[data-tab="featured"] #approval-featured-carousel-mobile {
  display: none;
}

/* Community tab — _renderStoreTab fills the body; trim the padding
   since we're already inside a modal. The community sub-tab toggle
   (קהילה/מומלצים/שלי) is hidden because the quick-add panel already
   has its own top-level tabs. The action bar (share + search) is also
   hidden because the quick-add header carries its own inline search,
   and "שיתוף קטגוריה" belongs in the studio, not in the quick-add. */
.quick-add-card[data-tab="community"] .store-single-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.quick-add-card[data-tab="community"] .store-topbar-tabs {
  display: none !important;
}
.quick-add-card .store-topbar-actions { display: none !important; }
.quick-add-card[data-tab="community"] .store-topbar {
  justify-content: flex-start;
  padding: 10px 16px 8px;
  border-bottom: none;
}

/* Hint line under the tabs — kept deliberately quiet so it informs
   without competing with the tabs/search. No background, no border,
   muted color, smaller size. */
.quick-add-hint {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  opacity: 0.75;
  padding: 6px 16px 4px;
  text-align: center;
  flex-shrink: 0;
  direction: rtl;
}
.quick-add-hint:empty { display: none; }

/* Inline category search inside the tabs row. JS moves it after the
   active tab so it visually pairs with קהילה/מומלצים, and hides it on
   the חיפוש tab where it isn't relevant. */
.quick-add-search {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #bfd6ff;
  border-radius: 999px;
  background: var(--bg-primary);
  overflow: hidden;
  width: 38px;
  height: 36px;
  transition: width 0.25s ease, border-color 0.15s, background 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}
.quick-add-search[hidden] { display: none !important; }
.quick-add-search.expanded {
  width: 220px;
  background: var(--bg-secondary);
  border-color: #1877F2;
}
.quick-add-search-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: #1877F2;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.quick-add-search-icon:hover { color: #1465D8; }

/* First-visit pulse — draws the eye to the magnifier the first time
   the user lands on קהילה/מומלצים. JS adds .pulse for ~3s, then
   removes. Kills itself if the user opens the search input. */
@keyframes quickAddSearchPulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(24,119,242,0.55); }
  50%  { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(24,119,242,0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(24,119,242,0); }
}
.quick-add-search.pulse {
  animation: quickAddSearchPulse 1.05s ease-out 3;
  border-color: #1877F2;
}
@media (prefers-reduced-motion: reduce) {
  .quick-add-search.pulse { animation: none; }
}
.quick-add-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--text-primary);
  padding: 0 8px 0 0;
  width: 0;
  opacity: 0;
  transition: opacity 0.2s;
  direction: rtl;
}
.quick-add-search.expanded .quick-add-search-input {
  width: auto;
  opacity: 1;
}
.quick-add-search-clear {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-inline-start: 2px;
  margin-inline-end: 4px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-add-search-clear[hidden] { display: none !important; }
.quick-add-search-clear:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Mobile-only search bar that opens below the tabs row, in the same
   strip as the per-tab hint. Hidden by default and on desktop — the
   desktop UX still uses the inline expanding magnifier in the tabs
   row. The bar is shown by JS when the user taps the magnifier on a
   small screen, and torn down by its own close X. */
.quick-add-mobile-search { display: none; }

@media (max-width: 600px) {
  /* Sheet-style on mobile: keep a visible blurred/dimmed backdrop on
     all sides so the modal reads as a layer floating above the page,
     not a separate fullscreen view. */
  .quick-add-overlay { padding: 16px; }
  .quick-add-card {
    height: 88vh;
    height: 88dvh;
    max-height: calc(100dvh - 32px);
  }
  /* X floats over the card's top-right corner — half on the white
     card, half on the blurred backdrop. It does NOT reserve any row
     space (no header padding-top, no padding-inline-start on tabs),
     so all three category pills + the inline search circle have the
     full header width to fit on one line. The white ring around the
     button keeps it readable against both the card and the backdrop. */
  .quick-add-close {
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
  .quick-add-header { padding: 12px 12px 10px; }
  /* Tabs row: all three category pills must stay visible at once. We
     pack them tightly (compact padding/font/gap), keep the row a
     single line, and let the row scroll horizontally only when the
     inline search is *expanded* (where the user has consciously
     opted into a wider input). When the search is collapsed the row
     fits even on 360px-wide screens with room to spare. */
  .quick-add-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 4px;
    /* Keep the tab group centered in the header so adding/removing the
       inline search circle (which is injected next to the active tab)
       doesn't shift the row left or right. */
    justify-content: center;
  }
  .quick-add-tabs::-webkit-scrollbar { display: none; }
  .quick-add-tab span { display: inline; }
  .quick-add-tab {
    padding: 8px 11px;
    font-size: 12.5px;
    gap: 6px;
  }
  .quick-add-tab svg { width: 14px; height: 14px; }
  .quick-add-hint { font-size: 12px; padding: 6px 16px 8px; }
  /* Inline magnifier stays as a circular icon — tapping it opens the
     dedicated mobile search bar below the tabs row instead of
     expanding inline. Disabling the inline expansion is what stops
     the bar from pushing a category pill off the row. */
  .quick-add-search { width: 30px; height: 30px; }
  .quick-add-search-icon { width: 28px; height: 28px; }
  .quick-add-search.expanded { width: 30px; }
  .quick-add-search.expanded .quick-add-search-input,
  .quick-add-search.expanded .quick-add-search-clear { display: none; }
  /* Mobile search bar — sits in the hint slot, full width of the
     card minus a little side padding, with its own close X. */
  .quick-add-mobile-search:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 10px;
    flex-shrink: 0;
  }
  .quick-add-mobile-search-input {
    flex: 1;
    min-width: 0;
    border: 1.5px solid #1877F2;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    outline: none;
    direction: rtl;
    background: var(--bg-secondary);
    color: var(--text-primary);
  }
  .quick-add-mobile-search-input:focus { background: var(--bg-primary); }
  .quick-add-mobile-search-close {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
  }
  .quick-add-mobile-search-close:hover {
    background: rgba(0,0,0,0.12);
    color: var(--text-primary);
  }
  /* Drop the redundant "מומלצים ❤" label inside the carousel — the
     active tab pill above already says מומלצים, repeating it here
     just duplicates the heading in a cramped layout. */
  .quick-add-card .afc4-label { display: none; }
  /* Inner breathing room from the card edges so playlist cards and
     search results don't hug the modal's rounded walls. */
  .quick-add-card .store-list { padding: 10px 14px 16px; }
  .quick-add-card .afc4-wrap { padding: 0 6px; }
  .quick-add-card[data-tab="featured"] #approval-featured-carousel-mobile {
    display: block;
  }
  .quick-add-card[data-tab="featured"] .approval-featured-panel-wrap,
  .quick-add-card[data-tab="featured"] .approval-featured-inner {
    display: none;
  }
}

/* ── Sidebar sync modal (ssm) ── */
.sidebar-sync-modal-overlay {
  position: fixed; inset: 0; z-index: 9600;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.sidebar-sync-modal {
  background: var(--bg-primary);
  border-radius: 16px;
  width: 100%; max-width: 400px;
  max-height: min(75vh, calc(var(--vvh, 100dvh) - 24px));
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
}
.ssm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
}
.ssm-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.ssm-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-secondary); font-size: 16px; padding: 2px 6px; border-radius: 4px;
}
.ssm-close:hover { background: var(--bg-hover); }
.ssm-video-list { overflow-y: auto; flex: 1; padding: 0 8px 8px; }
.ssm-video-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  transition: background 0.1s;
  min-width: 0;
}
.ssm-video-row + .ssm-video-row { margin-top: 2px; }
.ssm-video-row:hover { background: var(--bg-secondary); }
.ssm-video-row.ssm-new { background: rgba(34,197,94,0.07); border-inline-end: 3px solid #22c55e; }
.ssm-video-row.ssm-new:hover { background: rgba(34,197,94,0.13); }
.ssm-video-row .ssm-check { flex-shrink: 0; margin: 0; width: 16px; height: 16px; cursor: pointer; }
.ssm-thumb { width: 72px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.ssm-thumb-ph { width: 72px; height: 40px; border-radius: 4px; flex-shrink: 0; background: var(--bg-secondary); }
.ssm-video-title {
  flex: 1; min-width: 0;
  font-size: 13px; color: var(--text-primary); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  word-break: break-word;
  text-align: start;
}
.ssm-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-top: 1px solid var(--border-color);
}
.ssm-count { font-size: 11px; color: var(--text-secondary); }
.ssm-confirm-btn { flex-shrink: 0; }

/* ── "הכל מעודכן" floating toast ── */
.sidebar-sync-toast {
  position: fixed; z-index: 4000;
  background: #1a1a1a; color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 8px;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  opacity: 0; transition: opacity 0.15s, transform 0.15s;
  white-space: nowrap;
}
.sidebar-sync-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── "Back to recommendations" pill (shown during search) ── */
.approval-carousel-return {
  display: flex; align-items: center; gap: 6px;
  background: #e7f0ff; border: 1.5px solid #5b9bff; border-radius: 20px;
  padding: 5px 14px 5px 10px; font-size: 12px; font-weight: 600; color: #1465D8;
  cursor: pointer; flex-shrink: 0; margin-bottom: 8px; align-self: flex-start;
  transition: background 0.15s;
}
.approval-carousel-return:hover { background: #e7f0ff; }
.approval-carousel-return svg { fill: #1877F2; }

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

.approval-action-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 12px;
  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: #1877F2; background: rgba(24,119,242,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, #1877F2);
}
.approval-add-bubble.fly {
  animation: addBubbleFly 2.2s ease forwards;
}

.approval-add-videos-btn {
  padding: 0 48px;
  height: 44px;
  background: #1877F2;
  color: white;
  border: none;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 220px;
}

.approval-add-videos-btn:hover {
  background: #1465D8;
}

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

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

.approval-result-cattag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px 1px 5px;
  background: #fffbeb;
  border: 1px solid #f59e0b;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 500;
  color: #92400e;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
}

.approval-result-cattag-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.approval-result-catremove {
  background: none;
  border: none;
  padding: 0 1px;
  margin: 0;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  color: #92400e;
  opacity: 0.7;
  flex-shrink: 0;
}

.approval-result-catremove:hover {
  color: #78350f;
  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: 10px;
  padding: 12px 16px;
  background: #fff;
  border: 1.5px solid #1a73e8;
  border-radius: 10px;
  color: #1a73e8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.approval-load-more-btn:hover {
  background: #eef4ff;
  color: #1557c0;
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.18);
}

.approval-load-more-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

/* ── 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: #e7f0ff; border-color: var(--accent); }
  65%  { background: #e7f0ff; 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: 900px) {
  .afc4-panel-grid { grid-template-columns: 1fr; }
}

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

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

  /* Show mobile carousel inside search panel */
  #approval-featured-carousel-mobile { display: block !important; }

  /* 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-wrap       { 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: 5px 6px;
    gap: 6px;
  }

  /* Preview btn: icon only on mobile */
  .admin-preview-label {
    display: none;
  }
  .admin-preview-btn {
    width: 26px;
    padding: 0;
    border: none;
    margin-inline: 0;
  }

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

  /* Standalone pill button on mobile */
  .approval-add-videos-btn {
    width: 100%;
    border-radius: 24px;
    text-align: center;
    justify-content: center;
    background: #1877F2;
    color: #fff;
    height: 52px;
    font-weight: 700;
    font-size: 16px;
    box-shadow: none;
    letter-spacing: 0.2px;
  }
  .approval-add-videos-btn:hover { background: #0b8048; }
  .approval-add-videos-btn:active { transform: scale(0.97); }

  /* 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: #1877F2; }
    50%  { background: #1877F2; }
    70%  { background: #1a73e8; }
    85%  { background: #1877F2; }
    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: #e7f0ff; 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;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Name + count in parentheses sit together, truncating as one unit */
.sidebar-label-group {
  display: flex;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

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

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

@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 #5b9bff;
  border-radius: 10px;
  overflow: hidden;
}
.manage-uncat-header {
  background: rgba(24, 119, 242, 0.1);
  color: #1465D8;
  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(24, 119, 242, 0.12);
  color: #1877F2;
}

/* ── Admin preview eye button ── */
.admin-preview-btn {
  flex-shrink: 0;
  align-self: center;
  width: auto;
  height: 28px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 8px;
  border-radius: 6px;
  margin-left: 4px;
  margin-right: 4px;
  opacity: 0.85;
  transition: opacity 0.15s, background 0.15s;
  white-space: nowrap;
}
.admin-preview-btn svg { display: block; flex-shrink: 0; }
.admin-preview-label { font-size: 12px; font-weight: 500; }
.admin-preview-btn:hover { opacity: 1; background: rgba(26,115,232,0.07); }

/* In search results, use QIM-style preview button (gray, not red) */
#approval-results-list .admin-preview-btn {
  border-color: var(--border-color);
  color: var(--text-secondary);
  opacity: 1;
  font-size: 10px;
  height: auto;
  padding: 3px 7px;
  margin-left: 0;
  margin-right: 0;
}
#approval-results-list .admin-preview-btn:hover {
  background: #e8f0fe;
  color: #1a73e8;
  border-color: #1a73e8;
  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: 9700;
  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);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  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;
  position: relative;
}

#yt-player-modal {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
/* Video modal close — pinned to top-right per Windows/Chrome convention,
   the same physical corner in both Hebrew and English. */
.video-modal-close {
  position: absolute;
  top: 8px;
  right: 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: #1877F2;
  background: rgba(24,119,242,0.08);
  color: #1877F2;
}
.manage-cat-shared-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: #1877F2;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, opacity 0.15s;
}
.manage-cat-shared-icon:hover {
  background: rgba(24, 119, 242, 0.1);
  opacity: 0.8;
}

/* 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;
}

.manage-fav-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #d1d5db;
  background: none;
  border: none;
  padding: 0;
  cursor: default;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
.manage-fav-icon.fav {
  color: #1877F2;
  cursor: pointer;
}
.manage-fav-icon.fav:hover {
  background: rgba(24,119,242,0.1);
  color: #1465D8;
}

/* 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: 10px;
  border: 1.5px solid #c7d2dc;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}
.manage-mob-header:hover { border-color: #1a73e8; }
.manage-mob-header.open { border-radius: 10px 10px 0 0; border-color: #1a73e8; }

/* Main section: category name (right side in RTL) — title only, not clickable */
.manage-mob-curr {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  background: transparent;
  padding: 0 14px;
  cursor: pointer;
}
.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 { display: none; }

/* Chevron trigger: opens dropdown (left side in RTL) */
.manage-mob-dots {
  width: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s;
  pointer-events: none;
}
.manage-mob-header.open .manage-mob-dots { color: #1a73e8; }

/* 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: #e7f0ff; color: #1877F2; }
.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);    }
}

/* ── Import Name Dialog ────────────────────────────────────────────────────── */
.import-name-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s;
  direction: rtl;
}
.import-name-overlay.open { opacity: 1; }

.import-name-card {
  background: var(--bg-primary);
  border-radius: 18px;
  padding: 28px 24px 20px;
  width: min(360px, 92vw);
  box-shadow: 0 12px 48px rgba(0,0,0,0.22);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: scale(0.96) translateY(8px);
  transition: transform 0.18s, opacity 0.18s;
}
.import-name-overlay.open .import-name-card {
  transform: scale(1) translateY(0);
}

.import-name-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.import-name-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}
.import-name-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 13px;
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-secondary);
  transition: border-color 0.15s;
}
.import-name-input:focus { outline: none; border-color: var(--accent); }
.import-name-input--err { border-color: #1877F2; }

.import-name-actions {
  display: flex;
  gap: 8px;
}
.import-name-use-original {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border-color);
  background: transparent;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.import-name-use-original:hover { background: var(--bg-secondary); color: var(--text-primary); }

.import-name-confirm {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}
.import-name-cancel {
  width: 100%;
  padding: 8px;
  border: none;
  background: none;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
}
.import-name-cancel:hover { color: var(--text-primary); }

/* ── Category Picker Modal ─────────────────────────────────────────────────── */
.cat-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 10100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  padding: 16px;
  box-sizing: border-box;
}
.cat-picker-overlay.open { opacity: 1; }

.cat-picker-modal {
  background: var(--bg-primary);
  border-radius: 18px;
  width: 520px;
  max-width: 100%;
  max-height: min(78vh, calc(var(--vvh, 100dvh) - 24px));
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 60px rgba(0,0,0,0.32), 0 2px 8px rgba(0,0,0,0.12);
  transform: scale(0.94) translateY(14px);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s ease;
  opacity: 0;
  overflow: hidden;
  direction: rtl;
}
.cat-picker-overlay.open .cat-picker-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.cat-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.cat-picker-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.cat-picker-close {
  background: var(--bg-secondary);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.cat-picker-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.cat-picker-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
.cat-picker-body::-webkit-scrollbar { width: 4px; }
.cat-picker-body::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

.cat-picker-list {
  display: flex;
  flex-direction: column;
  padding: 4px 12px;
  gap: 3px;
}
.cat-picker-empty {
  color: var(--text-secondary);
  font-size: 13px;
  text-align: center;
  padding: 20px 8px 8px;
  direction: rtl;
}
.cat-picker-new-row {
  margin-top: 4px;
}
.cat-picker-new-input-row {
  padding: 6px 4px;
  direction: rtl;
}

/* ── Card grid layout ─────────────────────────────────────────────── */
.cat-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px;
  padding: 14px 16px;
  direction: rtl;
}

.cat-picker-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 34px;
  border-radius: 12px;
  border: 1.5px solid var(--border-color, #e5e5e5);
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.18s ease,
              border-color 0.15s ease,
              background 0.15s ease;
  min-height: 96px;
  box-sizing: border-box;
  user-select: none;
}

.cat-picker-card:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  border-color: #1a73e8;
  z-index: 1;
}

.cat-picker-card.selected {
  background: #eef4ff;
  border-color: #1a73e8;
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.18);
}

.cat-picker-card.selected:hover {
  box-shadow: 0 6px 16px rgba(26, 115, 232, 0.28);
}

.cat-picker-card-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cat-picker-card-thumb .cat-thumb {
  border-radius: 10px;
  width: 56px !important;
  height: 56px !important;
  object-fit: cover;
}
.cat-picker-card-thumb .cat-thumb-empty {
  width: 56px !important;
  height: 56px !important;
  border-radius: 10px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cat-picker-card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.cat-picker-card-count {
  font-size: 10.5px;
  color: var(--text-secondary);
  line-height: 1;
}

/* Corner checkmark — appears on selected cards */
.cat-picker-card-check {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #cad1db;
  background: #fff;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.cat-picker-card.selected .cat-picker-card-check {
  background: #1a73e8;
  border-color: #1a73e8;
}
.cat-picker-card.selected .cat-picker-card-check::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 4px;
  height: 7px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

/* ── Per-card edit/delete actions ─────────────────────────────────── */
.cat-picker-card-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 4px 5px;
  background: rgba(255, 255, 255, 0.93);
  border-top: 1px solid #eef0f3;
  border-radius: 0 0 10px 10px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.cat-picker-card:hover .cat-picker-card-actions {
  opacity: 1;
  pointer-events: all;
}
.cat-picker-card-rename,
.cat-picker-card-del {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  background: transparent;
  flex-shrink: 0;
}
.cat-picker-card-rename { color: #5f6b7a; }
.cat-picker-card-rename:hover { background: #e8f0fe; color: #1a73e8; }
.cat-picker-card-del { color: #5f6b7a; }
.cat-picker-card-del:hover { background: #e7f0ff; color: #1877F2; }

/* ── "ספרייה חדשה" card (always first) ──────────────────────────────
   This used to be a quiet gray dashed card and users walked right past
   it. It's now the most visible cell in the grid: solid blue gradient,
   white "+" and label, a small "חדש" badge in the corner, and a pulse
   that re-fires whenever the card scrolls back into view (see the
   IntersectionObserver in _openApprovalCatModal).
   ────────────────────────────────────────────────────────────────── */
.cat-picker-card-new {
  background: linear-gradient(135deg, #1a73e8 0%, #4285f4 60%, #5b9bff 100%);
  border: 2px solid #1a73e8;
  padding-bottom: 10px;
  box-shadow: 0 4px 14px rgba(26, 115, 232, 0.28);
  color: #fff;
}
.cat-picker-card-new .cat-picker-card-actions {
  display: none;
}
.cat-picker-card-new:hover {
  background: linear-gradient(135deg, #1565c0 0%, #1a73e8 60%, #4285f4 100%);
  border-color: #1565c0;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 22px rgba(26, 115, 232, 0.45);
}
.cat-picker-card-plus {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  width: 60px;
  height: 60px;
}
.cat-picker-card-new .cat-picker-card-label {
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.cat-picker-card-new-badge {
  position: absolute;
  top: 6px;
  inset-inline-start: 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  background: #fff;
  color: #1a73e8;
  padding: 2px 7px;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  z-index: 2;
}

/* Pulse — strong attention-getter; runs once on entry and re-runs
   every time the card scrolls back into view. Two layered shadows
   so the glow reads against the blue background and against the
   white modal behind it. */
@keyframes catPickerCardNewPulse {
  0%   { box-shadow: 0 4px 14px rgba(26,115,232,0.28),
                     0 0 0 0   rgba(26,115,232,0.6); }
  50%  { box-shadow: 0 4px 14px rgba(26,115,232,0.28),
                     0 0 0 14px rgba(26,115,232,0); }
  100% { box-shadow: 0 4px 14px rgba(26,115,232,0.28),
                     0 0 0 0   rgba(26,115,232,0); }
}
.cat-picker-card-new.pulse {
  animation: catPickerCardNewPulse 0.95s ease-out 2;
}
@media (prefers-reduced-motion: reduce) {
  .cat-picker-card-new.pulse { animation: none; }
}

/* Inline new-category input card */
.cat-picker-new-input-card {
  border: 1.5px solid #1a73e8;
  background: #fff;
  justify-content: center;
  padding: 10px;
}
.cat-picker-new-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 13px;
  text-align: center;
  font-family: inherit;
  color: var(--text-primary);
  background: transparent;
}

/* New-card flash animation */
@keyframes catPickerCardFlash {
  0%   { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.55); }
  60%  { box-shadow: 0 0 0 8px rgba(26, 115, 232, 0); }
  100% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0); }
}
.cat-picker-card-new-flash {
  animation: catPickerCardFlash 1.2s ease-out;
}

.cat-picker-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
  background: var(--bg-secondary);
  direction: rtl;
}
.cat-picker-cancel {
  background: none;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  padding: 9px 20px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.cat-picker-cancel:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--text-secondary); }
.cat-picker-confirm {
  flex: 1;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  transition: opacity 0.15s;
  background: #1877F2 !important;
  color: #fff !important;
  border: none !important;
}
.cat-picker-confirm:not(:disabled):hover { background: #1465D8 !important; }
.cat-picker-confirm:disabled { opacity: 0.4; cursor: default; }

/* ── csb-backdrop ─────────────────────────────────────────────────────────── */

.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; }
.cat-picker-modal .csb-row:not(.approval-cat-new-row):hover { background: rgba(26,115,232,0.07); cursor: pointer; }
.cat-picker-modal .csb-row.active:hover { background: rgba(26,115,232,0.12); }

/* 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;
}

/* Thumbnail button — replaces emoji in category rows */
.csb-emoji {
  flex-shrink: 0;
  width: 60px; height: 60px;
  padding: 0;
  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;
  overflow: hidden;
  transition: filter 0.15s;
}
.csb-emoji .cat-thumb,
.csb-emoji .cat-thumb-empty {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px;
  border-radius: 0 !important;
  pointer-events: none;
  display: block;
  object-fit: cover;
}
.csb-emoji::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='white'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm17.71-10.21a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") no-repeat center center;
  background-color: transparent;
  opacity: 0;
  transition: opacity 0.15s, background-color 0.15s;
}
.csb-emoji:hover::after {
  background-color: rgba(0,0,0,0.35);
  opacity: 1;
}
.csb-emoji:active { filter: brightness(0.9); }

/* 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;
  flex: 1; min-width: 0;
}
.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 #c5d5f0;
  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: #e7f0ff; color: var(--accent, #1877F2); }
.csb-del-btn:active  { background: #bfd6ff; }
.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: #e7f0ff; color: var(--accent, #1877F2); }

/* 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
   ══════════════════════════════════════════════════════ */

/* ── Single-panel layout (replaces split store-layout) ── */
.store-single-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  direction: rtl;
  overflow: hidden;
}

.store-single-panel .store-list-header {
  flex-shrink: 0;
}

.store-single-panel .store-search-wrap {
  flex-shrink: 0;
}

/* ── Card grid ── */
.store-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.store-grid-card {
  flex: none;
  width: auto;
  margin-bottom: 0;
  cursor: pointer;
}

.store-mine-card {
  cursor: pointer;
}

/* Restore button — amber style matching afc4-quick-sync */
.store-card-restore-btn {
  background: #fff3e0 !important;
  color: #f57c00 !important;
}
.store-card-restore-btn:hover:not(:disabled) {
  background: #ffe0b2 !important;
}

/* ── Owner store modal extras ── */
.osm-desc-view {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.osm-desc-inline-edit {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 2px 4px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 1px;
}
.osm-desc-inline-edit:hover {
  background: var(--bg-hover);
  color: #1a73e8;
}

.osm-desc-edit-wrap {
  padding: 0 16px 10px;
}

.osm-desc-textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-size: 13px;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  direction: rtl;
  font-family: inherit;
}

.osm-restore-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 16px 8px;
  padding: 8px 12px;
  background: #fff3e0;
  border-radius: 8px;
  font-size: 12px;
  color: #e65100;
  flex-shrink: 0;
}

.osm-restore-btn {
  margin-right: auto;
  background: #e65100;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.osm-restore-btn:hover:not(:disabled) {
  background: #bf360c;
}

.osm-action-row {
  display: flex;
  justify-content: flex-start;
  padding: 4px 16px 8px;
  border-bottom: 1px solid var(--border-color);
}
.osm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.osm-footer .qim-confirm-btn {
  width: auto !important;
  padding-left: 24px;
  padding-right: 24px;
}

.osm-unpublish-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid #1877F2;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #1877F2;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.12s;
}
.osm-unpublish-btn:hover {
  background: #e7f0ff;
}

/* OSM inline rename — input sits in the title row when editing */
.osm-header-edit {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px 6px;
}
.osm-name-input {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  padding: 6px 10px;
  border: 1px solid var(--border, #ddd);
  border-radius: 6px;
  direction: rtl;
}
.osm-name-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  margin-inline-start: 6px;
  color: var(--text-secondary, #666);
  border-radius: 4px;
}
.osm-name-edit-btn:hover {
  background: rgba(0,0,0,0.06);
  color: #1976d2;
}

/* Blue pill edit button in OSM — sits next to "הסר משיתוף",
   same shape/size but primary/action coloring. */
.osm-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #1e88e5;
  border: 1px solid #1976d2;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  margin-inline-start: 8px;
  transition: background 0.12s, transform 0.08s;
}
.osm-edit-btn:hover {
  background: #1976d2;
}
.osm-edit-btn:active {
  transform: scale(0.97);
}

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

/* ── Store topbar: primary nav (3 tabs) + share + expandable search ── */
.store-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.store-topbar-tabs {
  display: flex;
  gap: 6px;
  background: var(--bg-secondary);
  padding: 4px;
  border-radius: 999px;
  flex-shrink: 0;
}
.store-topbar-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.12s;
  white-space: nowrap;
}
.store-topbar-tab:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}
.store-topbar-tab.active {
  background: #1877F2;
  color: #fff;
  box-shadow: 0 2px 8px rgba(24,119,242,0.25);
}
.store-topbar-tab.active:hover { background: #1465D8; }
.store-topbar-tab svg { flex-shrink: 0; }

.store-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.store-topbar-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid #1a73e8;
  border-radius: 999px;
  background: #1a73e8;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.25);
}
.store-topbar-share:hover {
  background: #1565c0;
  border-color: #1565c0;
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.32);
}
.store-topbar-share:active { transform: scale(0.97); }
.store-topbar-share svg { flex-shrink: 0; }

.store-topbar-search {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-primary);
  overflow: hidden;
  transition: width 0.25s ease, border-color 0.15s, background 0.15s;
  width: 38px;
  height: 36px;
}
.store-topbar-search.expanded {
  width: 240px;
  background: var(--bg-secondary);
  border-color: #93bbf7;
}
.store-topbar-search-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.store-topbar-search-icon:hover { color: var(--text-primary); }
.store-topbar-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--text-primary);
  padding: 0 8px 0 0;
  width: 0;
  opacity: 0;
  transition: opacity 0.2s;
  direction: rtl;
}
.store-topbar-search.expanded .store-topbar-search-input {
  width: auto;
  opacity: 1;
}
.store-topbar-search-clear {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-inline-start: 2px;
  margin-inline-end: 4px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.store-topbar-search-clear:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

@media (max-width: 700px) {
  .store-topbar {
    gap: 8px;
    padding: 12px 12px 10px;
  }
  .store-topbar-tab { padding: 6px 12px; font-size: 13px; }
  .store-topbar-tab span { display: inline; }
  /* Keep the "שתף קטגוריה" label visible on mobile — a lone "+" gave no
     hint about what the button does. Slightly tighter padding so the pill
     plus the search affordance still fit on a 360px-ish topbar. */
  .store-topbar-share { padding: 7px 12px; font-size: 12px; }
  .store-topbar-search.expanded { width: 180px; }
}

/* ── Left: playlist list ── */
.store-list-panel {
  width: 360px;
  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: 22px 16px 10px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  gap: 8px;
}
.store-list-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.store-list-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  white-space: nowrap;
}
.store-list-header .store-view-toggle {
  margin: 0;
  flex-shrink: 0;
}

.store-add-fav-row {
  display: flex;
  justify-content: flex-start;
  padding: 8px 14px 6px;
}

.store-add-fav-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: none;
  border-radius: 8px;
  background: #1a73e8;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.store-add-fav-btn:hover { background: #1557b0; }

.store-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.store-my-lists-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1.5px solid #bfd6ff;
  border-radius: 20px;
  background: #e7f0ff;
  color: #1465D8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.store-my-lists-btn:hover { background: #e7f0ff; border-color: #1877F2; }
.store-my-lists-btn.has-mine::after {
  content: attr(data-my-count);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1877F2;
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-right: 2px;
}

.store-community-hint {
  display: none;
}

.store-view-toggle {
  display: flex;
  margin: 6px 12px 8px;
  background: var(--bg-secondary);
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}

.store-toggle-btn {
  flex: 1;
  padding: 5px 10px;
  border: none;
  border-radius: 18px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.store-toggle-btn.active {
  background: #1877F2;
  color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.store-search-icon-btn {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}

.store-mine-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border-color);
}
.store-mine-share-btn {
  width: auto !important;
  background: transparent !important;
  color: #1a73e8 !important;
  border: 1.5px solid #c5d9f8 !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 7px 20px !important;
  box-shadow: none !important;
}
.store-mine-share-btn:hover {
  background: #f0f6ff !important;
  border-color: #1a73e8 !important;
}

.store-mine-empty {
  text-align: center;
  line-height: 1.8;
  color: var(--text-secondary);
}
.store-share-first-btn {
  margin-top: 6px;
  padding: 6px 16px;
  border: none;
  border-radius: 8px;
  background: #1877F2;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.store-my-panel { max-width: 360px; }

.store-my-add-btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 12px;
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 10px;
}

.store-my-list-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.store-my-item {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg-secondary);
  cursor: pointer;
  transition: background 0.12s;
  direction: rtl;
}
.store-my-item:hover { background: var(--bg-tertiary); }
.store-my-item-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.store-my-item-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

.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); }

.fav-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  transition: background 0.12s;
}
.fav-picker-row:hover { background: var(--bg-tertiary); }

.store-search-wrap {
  padding: 24px 10px 10px;
  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 36px 6px 28px; /* right: room for search icon, left: 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: 12px;
  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: thumbnail-first design ── */
.store-card {
  padding: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  margin-bottom: 10px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-primary);
  overflow: hidden;
  position: relative;
}
.store-card:hover {
  border-color: #93bbf7;
  box-shadow: 0 4px 16px rgba(26,115,232,0.13);
  transform: translateY(-1px);
}
.store-card.selected {
  border-color: #1a73e8;
  box-shadow: 0 4px 18px rgba(26,115,232,0.2);
}

/* Thumbnail mosaic */
.store-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg-secondary);
  display: grid;
}
.store-card-thumb--single { grid-template-columns: 1fr; }
.store-card-thumb--two    { grid-template-columns: 1fr 1fr; gap: 1px; }
.store-card-thumb--grid   { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; }
.store-thumb-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.store-thumb-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1a73e8, #0d47a1);
  color: #fff;
  font-size: 42px;
  font-weight: 700;
}

/* Video count badge on the thumbnail */
.store-card-video-badge {
  position: absolute;
  bottom: 7px;
  left: 8px;
  background: rgba(0,0,0,0.68);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 99px;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  backdrop-filter: blur(4px);
  letter-spacing: 0.3px;
}

/* Report button — floats on thumbnail top-right */
.store-card > .store-card-report {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  background: rgba(0,0,0,0.45);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 3px 7px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.15s;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.store-card:hover > .store-card-report { opacity: 1; }

/* Card info area */
.store-card-info {
  padding: 11px 13px 12px;
}
.store-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}
.store-card-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.store-card-publisher {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-secondary);
  min-width: 0;
  overflow: hidden;
}
.store-card-publisher-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.store-card-avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #1a73e8;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.store-card-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.store-card-importer-count {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.store-card-imported {
  font-size: 10px;
  background: #e8f0fe;
  color: #1a73e8;
  border-radius: 6px;
  padding: 2px 7px;
  font-weight: 600;
  white-space: nowrap;
}
.store-card-new {
  color: #1877F2;
  font-weight: 700;
  font-size: 10px;
}
/* Mine section label */
.store-card-mine {
  font-size: 10px;
  background: #e8f5e9;
  color: #2e7d32;
  border-radius: 6px;
  padding: 1px 6px;
  flex-shrink: 0;
  font-weight: 600;
}
.store-section-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 0;
}
/* Legacy — kept for safety */
.store-card-meta { display: none; }
.store-card-footer { display: none; }
.store-detail-importer-count { font-size: 13px; color: var(--text-secondary); font-weight: 500; }

.store-loading, .store-empty, .store-error { padding: 20px; text-align: center; color: var(--text-secondary); font-size: 13px; }
.store-error { color: #1877F2; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.store-error-retry { background: #1877F2; color: #fff; border: none; border-radius: 6px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.store-error-retry:hover { background: #1465D8; }

/* ── 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 {
  background: #1877F2;
  color: #fff;
}
.store-import-btn:hover { background: #1465D8; }
.store-sync-confirm-btn {
  background: #1a73e8;
  color: #fff;
}
.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 #bfd6ff;
  border-radius: 10px;
  background: var(--bg-primary);
  color: #1877F2;
  font-size: 13px;
  cursor: pointer;
}
.store-unpublish-btn:hover { background: #e7f0ff; }
.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 .studio-confirm-body { padding: 4px 28px 24px; text-align: right; }
.studio-publish-heart-icon {
  display: flex;
  justify-content: center;
  padding: 28px 0 0;
}
.studio-publish-dlg-title {
  font-size: 19px;
  font-weight: 700;
  direction: rtl;
  margin-bottom: 10px;
  line-height: 1.35;
  letter-spacing: -0.2px;
  color: var(--text-primary);
}
.studio-publish-community-msg {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  direction: rtl;
  margin: 0 0 14px;
  line-height: 1.65;
  background: #e7f0ff;
  border-right: 3px solid #1877F2;
  padding: 10px 12px;
  border-radius: 6px;
}
.studio-publish-dlg-hint {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  direction: rtl;
  margin: 0 0 12px;
  line-height: 1.55;
}
.studio-publish-desc {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--border-color, #e0e0e0);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  direction: rtl;
  min-height: 100px;
  line-height: 1.7;
  color: var(--text-primary);
  background: var(--bg-primary, #fff);
}
.studio-publish-desc:focus { border-color: #1877F2; outline: none; box-shadow: 0 0 0 3px rgba(24,119,242,0.1); }
.studio-publish-dlg .studio-confirm-ok { color: #1877F2; font-weight: 700; }
.studio-publish-dlg .studio-confirm-ok:hover { background: rgba(24,119,242,0.07); }
@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: #1877F2;
  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: #1877F2;
  background: #e7f0ff;
  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: #e7f0ff; border-color: #1877F2; color: #1877F2; }
.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: #e7f0ff; color: #1877F2; }
.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: #e7f0ff;
  color: #1877F2;
  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: #bfd6ff; }

/* 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%;
  max-height: calc(var(--vvh, 100dvh) - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  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;
}
/* Pinned to top-right in both directions — matches the video-modal close
   and the rest of the X-close affordances per Windows convention. */
.paywall-checkout-close {
  position: absolute;
  top: 14px;
  right: 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%);
  max-height: calc(var(--vvh, 100dvh) - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  position: relative;
}
.pin-gate-close {
  position: absolute;
  top: 12px;
  right: 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-gate-close:hover { background: var(--bg-hover, rgba(0,0,0,0.06)); }
.pin-gate-logo { width: 120px; height: auto; margin-bottom: 4px; }
.pin-gate-emoji { font-size: 38px; line-height: 1; margin-bottom: 4px; text-align: center; }
.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: #1877F2; margin: 0; }
/* ── Pin boxes (OTP style, 4 individual digit inputs) ───────────────────── */
.pin-boxes {
  display: flex;
  gap: 10px;
  justify-content: center;
  direction: ltr;
}
.pin-box {
  width: 54px;
  height: 60px;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  border: 2px solid #d4d4d4;
  border-radius: 14px;
  background: #f8f8f8;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  cursor: text;
  caret-color: transparent;
}
.pin-box:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(26,115,232,0.15);
}
.pin-box:not(:placeholder-shown) {
  border-color: #1a73e8;
  background: #fff;
}

/* ── 4-box PIN input ───────────────────────────────────────────────────────── */
.pin4-wrap {
  display: flex;
  gap: 10px;
  justify-content: center;
  direction: ltr;
}

.pin4-box {
  width: 54px;
  height: 60px;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  border: 2px solid #d4d4d4;
  border-radius: 14px;
  background: #f8f8f8;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  cursor: text;
}

.pin4-box:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(26,115,232,0.15);
}

.pin4-box.pin4-filled {
  border-color: #1a73e8;
  background: #fff;
}

.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: #1877F2; }
.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-gate-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.pin-gate-link-sep {
  color: var(--text-secondary);
  font-size: 12px;
  opacity: 0.5;
  user-select: none;
}

/* PIN management & enable overlays */
#pin-mgmt-overlay,
#pin-enable-overlay,
#pin-forgot-overlay,
#pin-change-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%);
  max-height: calc(var(--vvh, 100dvh) - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  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;
  /* Pin the close button to the *end* of the inline direction so it sits
     opposite the title in both RTL (Hebrew, end=left) and LTR (English,
     end=right). The previous `left: 12px` collided with the LTR title. */
  inset-inline-end: 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: #1877F2; border-color: #1877F240; }
.pin-mgmt-action-btn.pin-mgmt-danger:hover { background: #1877F214; }

/* ── Subscription tab in Studio ─────────────────────────────────────────────── */
.sub-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Vertically center when content fits; fall back to top when too tall
     so the first row never gets clipped above the scroll start. */
  justify-content: safe center;
  padding: 24px 18px 18px;
  direction: rtl;
  width: 100%;
  /* Fill the parent so vertical centering has room to work. Content can
     still grow taller — .studio-content scrolls when it does. */
  min-height: 100%;
  box-sizing: border-box;
  gap: 14px;
}
/* If content barely fits on a very short viewport, prefer the top half of
   the card to be visible (the price + CTA sit at the bottom but the title
   and value-prop matter more). */
@media (max-height: 720px) {
  .sub-tab { padding: 14px 18px 12px; gap: 10px; }
  .sub-card { padding: 14px 20px; gap: 10px; }
  .sub-logo { width: 110px; }
  .sub-premium-header .sub-logo { width: 130px; }
  .sub-features-list { padding: 8px 12px; gap: 4px; }
  .sub-feature-item { font-size: 12px; }
  .sub-price-tag { font-size: 22px; }
  .sub-cta-btn { padding: 10px; font-size: 14px; }
  .sub-free-grant-note { padding: 12px 14px; }
}

/* Mobile (narrow phones): tighten paddings so the card fills the
   panel cleanly without dwarfing inside the tab area. */
@media (max-width: 600px) {
  .sub-tab { padding: 18px 14px 14px; gap: 14px; }
  .sub-card { padding: 18px 18px 16px; max-width: 100%; }
}
.sub-tab-loading { color: var(--text-secondary); font-size: 14px; }

/* Legal links footer — minimal, inline, dot-separated. Reused inside the
   PayPal checkout card too, hence the standalone class. */
.sub-legal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.sub-legal-footer a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.sub-legal-footer a:hover { color: var(--text-primary); text-decoration: underline; }
.sub-legal-footer span { opacity: 0.5; }
/* Bit more breathing room when nested inside the PayPal checkout card,
   where there's no flex-gap parent providing separation. */
.paywall-checkout-card .sub-legal-footer { margin-top: 12px; }

/* Main card */
.sub-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 22px 22px 20px;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
  text-align: center;
}

/* Premium card variant — gold-accent border + soft gradient header */
.sub-card:has(.sub-plan-name-premium) {
  border-color: rgba(184, 134, 11, 0.3);
  background:
    linear-gradient(180deg, #fffbef 0%, #fff 90px),
    var(--bg-primary);
}

/* Header block: logo + status pill side-by-side, replacing the old
   stacked label-then-logo layout. Gives the premium status more weight
   without doubling vertical space. */
.sub-premium-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.sub-premium-header .sub-logo { width: 150px; margin-bottom: 2px; }
.sub-premium-header .sub-current-plan { padding: 5px 14px; }
.sub-premium-header .sub-plan-name-premium { font-size: 12.5px; }

/* 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-color);
  background: var(--bg-secondary);
  align-self: center;
}
.sub-current-plan.premium-plan {
  background: linear-gradient(135deg, #fff8e1 0%, #fdebb0 100%);
  border-color: rgba(184, 134, 11, 0.45);
  box-shadow: 0 1px 3px rgba(184, 134, 11, 0.18);
}
.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: 130px;
  max-width: 100%;
  object-fit: contain;
}

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

/* Progress */
.sub-progress-section { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.sub-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
}
.sub-progress-at-limit { color: #1877F2; 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: #1877F2; }
.sub-locked-hint { font-size: 13px; color: #1877F2; text-align: center; }

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

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

/* Actions */
.sub-actions { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.sub-cta-btn {
  width: 100%;
  padding: 12px;
  background: #065fd4;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  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: #1877F2; border-color: #1877F2; }
.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: 6px;
  padding: 16px 18px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  width: 100%;
  box-sizing: border-box;
}
.sub-billing-row {
  font-size: 11.5px;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.sub-billing-date {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}
.sub-billing-amount { font-size: 13px; color: var(--text-secondary); }

/* Free-grant note (coupon-redeemed premium) — celebratory, no billing */
.sub-free-grant-note {
  width: 100%;
  background: linear-gradient(135deg, #fffbef 0%, #fff5d6 100%);
  border: 1px solid rgba(184, 134, 11, 0.25);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: center;
  box-sizing: border-box;
}
.sub-free-grant-title {
  font-size: 16px;
  font-weight: 700;
  color: #8a6d1f;
  margin-bottom: 4px;
  letter-spacing: -0.1px;
}
.sub-free-grant-desc {
  font-size: 13px;
  color: #6b5c2e;
  line-height: 1.55;
}
.sub-features-compact { gap: 4px; padding: 10px 14px; }
.sub-features-compact .sub-feature-item { font-size: 12.5px; }

/* 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: #1877F2;
  background: #e7f0ff;
  padding: 12px 16px;
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
}

/* ── Add videos row at top of home page ─────────────────────────────────────── */
.home-add-videos-row {
  display: flex;
  direction: rtl;
  padding: 12px 12px 4px;
}
.home-add-videos-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1.5px dashed var(--border-color);
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  direction: rtl;
  width: 100%;
}
.home-add-videos-btn svg { color: var(--accent); fill: var(--accent); flex-shrink: 0; }
.home-add-videos-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(24, 119, 242, 0.04);
}

/* ── Parental controls button in header ─────────────────────────────────────── */
.parental-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 20px;
  border: none;
  background: #1877F2;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(24,119,242,0.4);
}
.parental-btn:hover { background: #1465D8; box-shadow: 0 4px 14px rgba(24,119,242,0.5); }
.parental-btn:active { background: #1465D8; }
.parental-btn svg { width: 18px; height: 18px; fill: currentColor; }
.parental-btn-label { font-size: 13px; font-weight: 700; letter-spacing: 0.2px; }

/* 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; }
}

/* ── Parental lock toggle (right of the parents button in RTL) ─────────────── */
/* Intentionally larger and tinted than the bell so parents can spot the
   two-state (red closed / green open) indicator at a glance. */
.parental-lock-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  color: #1877F2;
  transition: background var(--transition-fast), color var(--transition-fast),
              box-shadow var(--transition-fast), transform var(--transition-fast);
  padding: 0;
}
.parental-lock-btn svg { display: block; width: 22px; height: 22px; }
.parental-lock-btn.locked {
  color: #1877F2;
  background: rgba(24, 119, 242, 0.10);
  box-shadow: 0 2px 10px rgba(24, 119, 242, 0.25);
}
.parental-lock-btn.unlocked {
  color: #2e7d32;
  background: rgba(46, 125, 50, 0.12);
  box-shadow: 0 2px 10px rgba(46, 125, 50, 0.25);
}
.parental-lock-btn.locked:hover   { background: rgba(24, 119, 242, 0.18); box-shadow: 0 3px 14px rgba(24, 119, 242, 0.35); }
.parental-lock-btn.unlocked:hover { background: rgba(46, 125, 50, 0.20); box-shadow: 0 3px 14px rgba(46, 125, 50, 0.35); }
.parental-lock-btn:active { transform: scale(0.92); }

@media (max-width: 600px) {
  .parental-lock-btn { width: 32px; height: 32px; border-width: 1.5px; }
  .parental-lock-btn svg { width: 18px; height: 18px; }
}

/* ── Bell notification button in header ─────────────────────────────────────── */
.bell-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
}
.bell-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.bell-btn svg { display: block; width: 18px; height: 18px; }

/* ── Paywall lock chip in header ──────────────────────────────────────────── */
/* ── Plan badge — permanent plan/tier indicator in header ────────────────── */
.header-plan-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
  line-height: 1;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.header-plan-badge.premium {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  color: #92400e;
  border-color: #fcd34d;
}
.header-plan-badge.free {
  background: #fffbeb;
  color: #92400e;
  border-color: #f59e0b;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.header-plan-badge.free:hover {
  background: #fef3c7;
  border-color: #d97706;
}
.header-plan-lock-count {
  opacity: 0.75;
  font-weight: 600;
}
@media (max-width: 500px) { .header-plan-badge { display: none; } }


/* ── 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: #1877F2;
  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: #1877F2;
  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 {
  position: relative;
  background: var(--bg-primary);
  border-radius: 14px;
  width: 100%;
  max-width: 420px;
  max-height: min(85vh, calc(var(--vvh, 100dvh) - 24px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 36px 14px 14px;
  box-sizing: border-box;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
/* Pinned to top-right in both directions — same Windows convention as
   .video-modal-close and .paywall-checkout-close. */
.messages-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity 0.15s, background 0.15s;
}
.messages-modal-close:hover { background: var(--bg-hover); opacity: 1; }

/* Window — arrows + 4 visible cards */
.msg-window {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.msg-arrow {
  align-self: center;
  width: 28px;
  height: 18px;
  border: none;
  background: none;
  color: var(--text-secondary);
  opacity: 0.45;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: opacity 0.15s;
  padding: 0;
}
.msg-arrow:hover { opacity: 1; }
.msg-arrow-hidden { visibility: hidden; }

.msg-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.msg-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}
.msg-card {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: 10px;
  transition: background 0.15s;
}
.msg-card-unread {
  background: var(--bg-hover);
  box-shadow: inset 3px 0 0 #065fd4;
}
.msg-card-main {
  flex: 1;
  min-width: 0;
}
.msg-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.msg-card-subject {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-card-time {
  font-size: 10px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.msg-card-body {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 3.6em;
  overflow: hidden;
}
.msg-card-delete {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: var(--text-secondary);
  opacity: 0.4;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
  padding: 0;
}
.msg-card-delete:hover { opacity: 1; color: #1877F2; background: var(--bg-hover); }
.msg-card-delete:disabled { opacity: 0.2; cursor: default; }

/* Compose card (collapsed + expanded) */
.msg-compose-card {
  margin-top: 2px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-primary);
  transition: background 0.15s;
}
.msg-compose-collapsed {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  border-radius: 10px;
  transition: background 0.15s, color 0.15s;
}
.msg-compose-collapsed:hover { background: var(--bg-secondary); color: var(--text-primary); }
.msg-compose-expanded {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}
.msg-compose-body {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  resize: vertical;
  font-family: inherit;
  line-height: 1.45;
  box-sizing: border-box;
  min-height: 70px;
}
.msg-compose-body:focus { outline: none; border-color: #065fd4; }
.msg-compose-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.msg-compose-send {
  padding: 6px 16px;
  background: #065fd4;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.msg-compose-send:hover { background: #1565c0; }
.msg-compose-send:disabled { opacity: 0.6; cursor: default; }
.msg-compose-cancel {
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: none;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.msg-compose-cancel:hover { background: var(--bg-secondary); }

/* ── Store report button ─────────────────────────────────────────────────────── */
.store-card-report {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0.55;
  transition: opacity 0.15s;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff;
}
.store-card-report-label {
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}
.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: #1877F2;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.report-submit-btn:hover { background: #1465D8; }
.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; }

/* ── Message reply UI ────────────────────────────────────────────────────────── */
.msg-reply-wrap { margin-top: 8px; }
.msg-reply-btn {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.msg-reply-btn:hover { background: var(--bg-secondary); color: var(--text-primary); }
.msg-reply-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.msg-reply-textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  resize: vertical;
  background: var(--bg-primary);
  color: var(--text-primary);
  box-sizing: border-box;
  font-family: inherit;
}
.msg-reply-textarea:focus { outline: none; border-color: var(--accent); }
.msg-reply-actions { display: flex; gap: 6px; }
.msg-reply-send {
  padding: 5px 14px;
  font-size: 13px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s;
}
.msg-reply-send:hover { background: #1565c0; }
.msg-reply-send:disabled { opacity: 0.6; cursor: default; }
.msg-reply-cancel {
  padding: 5px 10px;
  font-size: 13px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
}
.msg-reply-cancel:hover { background: var(--bg-secondary); }

/* ── Superadmin allow-reply checkbox label ──────────────────────────────────── */
.sa-allow-reply-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

/* ================================================
   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,
#pin-change-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);
  }
}


/* ================================================
   Admin Studio — UI Redesign (2026)
   Focused improvements: nav, cards, controls
   ================================================ */

/* ── Studio container: crisper shadow ── */
.studio-container {
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38), 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* ── Studio nav: tighter header, softer background ── */
.studio-nav {
  background: #f7f8fa;
  border-right: 1px solid #e9eaec;
  width: 216px;
}

.studio-nav-header {
  padding: 20px 14px 14px;
  gap: 10px;
  border-bottom: 1px solid #eaecee;
}

.studio-nav-logo {
  max-width: 130px;
}

/* ── Nav items: pill shape, richer active state ── */
.studio-nav-items {
  padding: 10px 8px;
}

.studio-nav-item {
  border-radius: 10px;
  font-size: 13.5px;
  padding: 11px 13px;
  gap: 10px;
  font-weight: 500;
}

.studio-nav-item svg {
  width: 19px;
  height: 19px;
  opacity: 0.75;
}

.studio-nav-item.active svg {
  opacity: 1;
}

.studio-nav-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}

.studio-nav-item.active {
  background: linear-gradient(135deg, #e8f0fe 0%, #deeafa 100%);
  color: #1557c0;
  border-right: none;
  border-left: 3px solid #1a73e8;
  padding-left: 10px;
  padding-right: 13px;
  font-weight: 600;
}

/* ── PIN row: less prominent ── */
.studio-pin-row {
  font-size: 11.5px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 9px;
  border: 1px solid #e0e2e6;
  padding: 6px 10px;
}


/* ── Approval search panel: cleaner structure ── */
.approval-search-panel-title {
  padding: 14px 18px 10px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #9aa3b0;
  background: #fafbfc;
  border-bottom: 1px solid #eef0f3;
}

.approval-search-bar {
  padding: 10px 14px;
  gap: 8px;
  background: #fafbfc;
  border-bottom: 1px solid #eef0f3;
}


/* ── Add-to-category button: blue, not red ── */
.approval-add-videos-btn {
  background: #1a73e8;
  color: #fff;
  border-radius: 10px;
  height: 44px;
  padding: 0 32px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  transition: background 0.15s, transform 0.1s;
}

.approval-add-videos-btn:hover {
  background: #1557c0;
  transform: translateY(-1px);
}

.approval-add-videos-btn:active {
  transform: translateY(0);
}

.approval-add-videos-btn:disabled {
  background: #94a3b8;
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Mobile override — keep consistent */
@media (max-width: 600px) {
  .approval-add-videos-btn {
    background: #1a73e8;
    border-radius: 12px;
  }
  .approval-add-videos-btn:hover { background: #1557c0; }
  .approval-add-videos-btn:active { transform: scale(0.98); }
}

/* ── Action bar: floating shadow ── */
.approval-action-bar {
  border-top: 1px solid #eef0f3;
  background: #fff;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.06);
  padding-bottom: calc(10px + var(--safe-bottom, 0px));
}

/* ── Category pills: cleaner selected state ── */
.approval-cat-pill {
  border: 1.5px solid #dde1e8;
  background: #fff;
  border-radius: 12px;
  gap: 8px;
  padding: 4px 11px 4px 4px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  font-size: 13px;
}

.approval-cat-pill:hover {
  border-color: #93bbf7;
  background: #f0f6ff;
}

.approval-cat-pill.selected {
  border-color: #1a73e8;
  background: #eef4ff;
  color: #1557c0;
  font-weight: 600;
}

/* ── Category picker modal: more polished ── */
.cat-picker-modal {
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.cat-picker-header {
  padding: 20px 22px 16px;
  background: #fafbfc;
  border-bottom: 1px solid #eef0f3;
}

.cat-picker-title {
  font-size: 16px;
  font-weight: 700;
  color: #14213d;
  gap: 10px;
}

.cat-picker-footer {
  padding: 14px 20px;
  background: #fafbfc;
  border-top: 1px solid #eef0f3;
  gap: 10px;
}

.cat-picker-confirm {
  background: #1a73e8 !important;
  border-radius: 10px !important;
  font-weight: 600;
  font-size: 14px;
}

.cat-picker-confirm:not(:disabled):hover {
  background: #1557c0 !important;
}

.cat-picker-cancel {
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
}

/* ── Mobile bottom nav: refined active indicator ── */
@media (max-width: 600px) {
  .studio-nav-item.active::after {
    left: 20%;
    right: 20%;
    height: 3px;
    border-radius: 2px;
  }

  .studio-nav {
    background: #fff;
    border-top: 1px solid #e9eaec;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.07);
  }

  .studio-nav-item {
    font-size: 10px;
  }

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

/* ── Mobile: clear desktop left-border active indicator ── */
@media (max-width: 600px) {
  .studio-nav-item.active {
    border-left: none;
    padding-left: 4px;
    padding-right: 4px;
    background: transparent;
    font-weight: 500;
    color: #1a73e8;
  }
}

/* ── Mobile: fix redesign overrides that broke 600px bottom-nav layout ── */
@media (max-width: 600px) {
  /* Studio container: no shadow on mobile (full-screen mode) */
  .studio-container {
    box-shadow: none;
  }

  /* Nav: must be full-width bottom bar, not 216px sidebar */
  .studio-nav {
    width: 100%;
    border-right: none;
  }

  /* Nav items list: no padding, no gap — each item gets flex: 1 */
  .studio-nav-items {
    padding: 0;
    gap: 0;
  }

  /* Nav item: restore correct bottom-nav sizing */
  .studio-nav-item {
    border-radius: 0;
    gap: 4px;
    padding: 8px 4px 6px;
    font-size: 10px;
  }

  /* Home cat-header: hide share button text on mobile — icon only */
  .home-cat-header .home-cat-share-btn span {
    display: none;
  }

  .home-cat-header .home-cat-share-btn {
    padding: 4px 6px;
    gap: 0;
  }
}

/* ── Category Thumbnail ──────────────────────────────────────────────────── */
.cat-thumb {
  display: inline-block;
  border-radius: 6px;
  object-fit: cover;
  vertical-align: middle;
  flex-shrink: 0;
  pointer-events: none;
}
.cat-thumb-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  pointer-events: none;
}

/* ── Thumbnail Picker ────────────────────────────────────────────────────── */
.thumb-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.18s;
}
.thumb-picker-overlay.open { opacity: 1; }

.thumb-picker-card {
  background: var(--bg-primary);
  border-radius: 18px;
  padding: 20px;
  width: 100%;
  max-width: 420px;
  max-height: 70vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  transform: scale(0.96) translateY(8px);
  transition: transform 0.18s, opacity 0.18s;
}
.thumb-picker-overlay.open .thumb-picker-card {
  transform: scale(1) translateY(0);
}

.thumb-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.thumb-picker-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.thumb-picker-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thumb-picker-close:hover { background: var(--hover); }

.thumb-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.thumb-picker-item {
  aspect-ratio: 16/9;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: var(--bg-secondary);
  transition: border-color 0.15s, transform 0.1s;
}
.thumb-picker-item:hover {
  border-color: var(--accent);
  transform: scale(1.03);
}
.thumb-picker-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.thumb-picker-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 24px 0;
  font-size: 14px;
  line-height: 1.6;
}

/* cat-inline-emoji-btn — standalone thumbnail button in edit mode */
.cat-inline-emoji-btn {
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--border-color);
  transition: border-color 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
  display: block;
  position: relative;
}
.cat-inline-emoji-btn:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(26,115,232,0.2);
}
.cat-inline-emoji-btn .cat-thumb,
.cat-inline-emoji-btn .cat-thumb-empty {
  border-radius: 0 !important;
  display: block;
  pointer-events: none;
}

/* cat-inline-emoji (view mode) */
.cat-inline-emoji {
  display: flex;
  align-items: center;
}
.cat-inline-emoji .cat-thumb,
.cat-inline-emoji .cat-thumb-empty {
  border-radius: 8px;
}

/* home-cat-icon thumbnail */
.home-cat-icon .cat-thumb,
.home-cat-icon .cat-thumb-empty {
  border-radius: 7px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* Sidebar item thumbnail */
.sidebar-item .cat-thumb,
.sidebar-item .cat-thumb-empty {
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* Chips bar thumbnail */
.chip .cat-thumb,
.chip .cat-thumb-empty {
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 4px;
  flex-shrink: 0;
}

/* manage-move-dd-icon thumbnail */
.manage-move-dd-icon {
  display: flex;
  align-items: center;
}
.manage-move-dd-icon .cat-thumb,
.manage-move-dd-icon .cat-thumb-empty {
  border-radius: 5px;
}

/* manage-mob-dd-icon — thumbnail button in mobile dropdown */
.manage-mob-dd-icon {
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 7px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.manage-mob-dd-icon:hover { transform: scale(1.08); }
.manage-mob-dd-icon .cat-thumb,
.manage-mob-dd-icon .cat-thumb-empty {
  border-radius: 0 !important;
  display: block;
}

/* store-pub-cat-btn thumbnail alignment */
.store-pub-cat-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.store-pub-cat-btn .cat-thumb,
.store-pub-cat-btn .cat-thumb-empty {
  border-radius: 5px;
  flex-shrink: 0;
}

@media (max-width: 520px) {
  .thumb-picker-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Superadmin Panel ──────────────────────────────────────────────────────── */

/* Header icon */
.sa-icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast);
  color: var(--accent); flex-shrink: 0;
}
.sa-icon-btn:hover { background: var(--bg-tertiary); }

/* Overlay */
#sa-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--bg-primary);
  display: none; overflow: hidden;
}
#sa-overlay.open { display: flex; }
body.sa-open { overflow: hidden; }

/* Layout */
.sa-wrapper { display: flex; width: 100%; height: 100%; overflow: hidden; }

/* Nav sidebar */
.sa-nav {
  width: 220px; flex-shrink: 0;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
  display: flex; flex-direction: column;
  padding: 12px 0; overflow-y: auto;
}
.sa-nav-title {
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  padding: 0 16px 12px; letter-spacing: 0.5px; text-transform: uppercase;
  border-bottom: 1px solid var(--border-color); margin-bottom: 6px;
}

/* Superadmin nav logo */
.sa-nav-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 4px;
}
.sa-nav-logo svg { fill: var(--accent); flex-shrink: 0; }
.sa-nav-logo-text { font-size: 15px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.sa-nav-logo-sub { font-size: 10px; color: var(--text-secondary); font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; }

/* Playlist row thumbnail */
.sa-playlist-thumb {
  width: 64px; height: 36px;
  object-fit: cover; border-radius: 4px; flex-shrink: 0;
}
.sa-playlist-header {
  display: flex; align-items: center; gap: 10px;
}
.sa-playlist-actions {
  display: flex; gap: 6px; margin-inline-start: auto; flex-shrink: 0;
}

/* Tooltip */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.8); color: #fff;
  font-size: 11px; padding: 4px 8px; border-radius: 5px;
  white-space: nowrap; pointer-events: none; z-index: 9999;
}

/* Playlist edit modal */
.sa-pl-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
  animation: fadeIn 0.15s ease;
}
.sa-pl-modal-card {
  background: var(--bg-primary); border-radius: 12px;
  padding: 24px; width: min(480px, 92vw);
  max-height: min(80vh, calc(var(--vvh, 100dvh) - 24px)); overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  direction: rtl;
}
.sa-pl-modal-title { font-size: 16px; font-weight: 700; margin: 0 0 16px; }
.sa-pl-modal label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; margin-top: 12px; }
.sa-pl-modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.sa-pl-video-list { max-height: 200px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 6px; margin-top: 4px; }
.sa-pl-video-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border-color); font-size: 12px; }
.sa-pl-video-item:last-child { border-bottom: none; }
.sa-pl-video-del { margin-inline-start: auto; background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 14px; }
.sa-pl-video-del:hover { color: var(--accent); }

/* Small button variant */
.sa-btn-sm { font-size: 11px; padding: 4px 10px; }

.sa-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; font-size: 14px; font-weight: 400;
  cursor: pointer; transition: background var(--transition-fast);
  border-radius: var(--radius-md); margin: 1px 8px;
  background: transparent; border: none; text-align: right; width: calc(100% - 16px);
  color: var(--text-primary);
}
.sa-nav-item svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
.sa-nav-item:hover { background: var(--bg-hover); }
.sa-nav-item.active { background: var(--bg-tertiary); font-weight: 500; color: var(--bg-chip-active); }
.sa-nav-spacer { flex: 1; }
.sa-close-btn {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 8px; padding: 11px 16px; font-size: 14px;
  color: var(--text-secondary); border-radius: var(--radius-md);
  cursor: pointer; background: transparent; border: none; width: calc(100% - 16px);
  transition: background var(--transition-fast);
}
.sa-close-btn:hover { background: var(--bg-hover); }

/* Main content */
.sa-main { flex: 1; overflow-y: auto; padding: 28px 24px; min-width: 0; }
.sa-section-title { font-size: 20px; font-weight: 700; margin: 0 0 20px; color: var(--text-primary); }
.sa-subsection-title {
  font-size: 15px; font-weight: 600; margin: 24px 0 12px;
  color: var(--text-primary); display: flex; align-items: center; gap: 8px;
}
.sa-hint { font-size: 13px; color: var(--text-secondary); margin: 0 0 10px; }
.sa-empty { font-size: 14px; color: var(--text-secondary); padding: 12px 0; }
.sa-loading { padding: 40px; text-align: center; color: var(--text-secondary); }
.sa-loading-sm { padding: 12px 0; color: var(--text-secondary); font-size: 13px; }
.sa-error { padding: 16px; color: var(--accent); font-size: 14px; }
.sa-btn-retry { background: none; border: none; color: var(--bg-chip-active); cursor: pointer; font-size: 14px; text-decoration: underline; }

/* Stats grid */
.sa-stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px;
}
.sa-stat-card {
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 18px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.sa-stat-icon { font-size: 20px; margin-bottom: 4px; }
.sa-stat-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.sa-stat-value { font-size: 26px; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.sa-stat-sub { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.sa-unread-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 10px; min-width: 18px; height: 18px; padding: 0 5px;
}

/* Search */
.sa-search-wrap { margin-bottom: 14px; }
.sa-search-bar {
  width: 100%; max-width: 380px; padding: 9px 14px;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  font-size: 14px; font-family: inherit; background: var(--bg-primary);
  color: var(--text-primary);
}
.sa-search-bar:focus { outline: none; border-color: var(--bg-chip-active); }

/* User list */
.sa-user-list { display: flex; flex-direction: column; gap: 6px; }
.sa-user-row {
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast);
  overflow: hidden;
}
.sa-user-row:hover { background: var(--bg-secondary); }
.sa-user-row.expanded { border-color: var(--bg-chip-active); }
.sa-user-row-header {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
}
.sa-user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-chip-active); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.sa-user-info { flex: 1; min-width: 0; }
.sa-user-name { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-user-email { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-user-badges { display: flex; gap: 4px; flex-shrink: 0; }
.sa-user-join { font-size: 12px; color: var(--text-secondary); flex-shrink: 0; }
.sa-expand-icon { fill: var(--text-secondary); transition: transform 0.2s ease; flex-shrink: 0; }
.sa-expand-icon.rotated { transform: rotate(180deg); }

/* Badges */
.sa-badge {
  padding: 3px 8px; border-radius: 20px; font-size: 11px; font-weight: 600;
  white-space: nowrap; display: inline-block;
}
.sa-badge-premium { background: #fef3c7; color: #92400e; }
.sa-badge-free { background: var(--bg-tertiary); color: var(--text-secondary); }
.sa-badge-admin-granted { background: #d1fae5; color: #065f46; }
.sa-badge-pastdue { background: #e7f0ff; color: #1465D8; }

/* User detail */
.sa-user-detail {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}
.sa-detail-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px;
}
.sa-detail-item { font-size: 13px; color: var(--text-secondary); }
.sa-detail-item strong { color: var(--text-primary); display: block; font-weight: 600; font-size: 12px; margin-bottom: 2px; }
.sa-login-history { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
.sa-login-history strong { color: var(--text-primary); }
.sa-login-entry { display: block; margin-top: 2px; font-family: monospace; font-size: 11px; }

/* Action row & buttons */
.sa-action-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sa-btn {
  padding: 7px 14px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500;
  border: 1px solid var(--border-color); background: var(--bg-primary); cursor: pointer;
  transition: background var(--transition-fast); font-family: inherit; white-space: nowrap;
  color: var(--text-primary);
}
.sa-btn:hover { background: var(--bg-hover); }
.sa-btn-primary { background: var(--bg-chip-active); color: #fff; border-color: var(--bg-chip-active); }
.sa-btn-primary:hover { background: #1557b0; border-color: #1557b0; }
.sa-btn-danger { color: var(--accent); border-color: #bfd6ff; }
.sa-btn-danger:hover { background: #e7f0ff; }
.sa-btn-sm { padding: 4px 10px; font-size: 12px; }
.sa-btn-link { background: none; border: none; color: var(--bg-chip-active); cursor: pointer; font-size: 13px; padding: 4px 0; }

/* Inline inputs */
.sa-inline-input {
  padding: 7px 10px; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  font-size: 13px; font-family: inherit; background: var(--bg-primary); color: var(--text-primary);
}
.sa-inline-input:focus { outline: none; border-color: var(--bg-chip-active); }
.sa-inline-textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  font-size: 13px; font-family: inherit; resize: vertical; min-height: 80px;
  background: var(--bg-primary); color: var(--text-primary);
}
.sa-inline-textarea:focus { outline: none; border-color: var(--bg-chip-active); }
.sa-inline-form { display: flex; gap: 8px; align-items: center; }
.sa-inline-compose { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color); }

/* Tabs */
.sa-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border-color); margin-bottom: 16px; }
.sa-tab {
  padding: 10px 18px; font-size: 14px; font-weight: 500; cursor: pointer;
  border: none; background: transparent; color: var(--text-secondary);
  border-bottom: 2px solid transparent; margin-bottom: -2px; font-family: inherit;
  display: flex; align-items: center; gap: 6px;
  transition: color var(--transition-fast);
}
.sa-tab:hover { color: var(--text-primary); }
.sa-tab.active { color: var(--bg-chip-active); border-bottom-color: var(--bg-chip-active); }

/* Messages */
.sa-msg-row {
  padding: 12px 14px; border-bottom: 1px solid var(--border-color); cursor: pointer;
  transition: background var(--transition-fast);
}
.sa-msg-row:hover { background: var(--bg-secondary); }
.sa-msg-row.unread { background: #f0f7ff; }
.sa-msg-header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sa-msg-subject { font-weight: 500; font-size: 14px; }
.sa-msg-meta { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.sa-msg-body {
  font-size: 13px; color: var(--text-primary); padding: 10px 0 4px;
  line-height: 1.6; border-top: 1px solid var(--border-color); margin-top: 8px;
}

/* Compose */
.sa-compose-form { max-width: 600px; }
.sa-compose-field { margin-bottom: 14px; }
.sa-compose-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-primary); }
.sa-field-hint { font-size: 12px; color: var(--text-secondary); display: block; margin-top: 4px; }

/* Store */
.sa-store-list { display: flex; flex-direction: column; gap: 6px; }
.sa-playlist-row {
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  cursor: pointer; overflow: hidden;
  transition: border-color var(--transition-fast);
}
.sa-playlist-row:hover { background: var(--bg-secondary); }
.sa-playlist-row.expanded { border-color: var(--bg-chip-active); }
.sa-playlist-header { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.sa-playlist-info { flex: 1; min-width: 0; }
.sa-playlist-name { font-weight: 500; font-size: 14px; }
.sa-playlist-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.sa-playlist-detail { padding: 14px 16px 16px; border-top: 1px solid var(--border-color); background: var(--bg-secondary); }
.sa-edit-field { margin-bottom: 10px; }
.sa-edit-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }

/* Superadmin: featured heart button */
.sa-featured-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 1.5px solid #e0e0e0; border-radius: 20px;
  padding: 4px 10px 4px 8px; font-size: 12px; cursor: pointer;
  color: var(--text-secondary); transition: border-color 0.15s, color 0.15s, background 0.15s;
  flex-shrink: 0; white-space: nowrap;
}
.sa-featured-btn:hover { border-color: #1877F2; color: #1877F2; }
.sa-featured-btn.active { background: #e7f0ff; border-color: #1877F2; color: #1465D8; }

/* Analytics */
.sa-range-btns { display: flex; gap: 8px; margin-bottom: 24px; }
.sa-chart { margin-bottom: 32px; }
.sa-chart-title { font-size: 15px; font-weight: 600; margin-bottom: 10px; color: var(--text-primary); }
.sa-chart-bars {
  display: flex; align-items: flex-end; gap: 2px;
  height: 90px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 2px;
}
.sa-bar-col { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }
.sa-bar {
  width: 100%; background: var(--bg-chip-active); border-radius: 2px 2px 0 0;
  transition: height 0.3s ease; min-height: 0;
}
.sa-bar-col:hover .sa-bar { background: #1557b0; }
.sa-bar-label { font-size: 9px; color: var(--text-secondary); margin-top: 3px; white-space: nowrap; overflow: hidden; }
.sa-chart-desc { font-size: 13px; color: var(--text-secondary); font-style: italic; line-height: 1.5; }

/* Settings sections */
.sa-settings-section {
  border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  padding: 20px; margin-bottom: 20px;
}
.sa-settings-section .sa-subsection-title { margin-top: 0; }
.sa-create-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.sa-create-row .sa-inline-input { flex-shrink: 0; }

/* Coupons */
.sa-coupon-list { display: flex; flex-direction: column; gap: 6px; }
.sa-coupon-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); background: var(--bg-primary);
}
.sa-coupon-row.sa-coupon-inactive { opacity: 0.5; }
.sa-coupon-code { font-family: monospace; font-weight: 700; font-size: 14px; color: var(--text-primary); }
.sa-coupon-meta { flex: 1; font-size: 12px; color: var(--text-secondary); }

/* Global videos */
.sa-global-video-list { display: flex; flex-direction: column; gap: 8px; }
.sa-gv-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); background: var(--bg-primary);
}
.sa-gv-thumb { width: 80px; height: 45px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.sa-gv-info { flex: 1; min-width: 0; }
.sa-gv-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-gv-author { font-size: 12px; color: var(--text-secondary); }

/* Webhook log */
.sa-log-list { max-height: 400px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.sa-log-row {
  display: flex; gap: 12px; padding: 8px 12px;
  border-bottom: 1px solid var(--border-color); font-size: 12px;
  align-items: center;
}
.sa-log-row:last-child { border-bottom: none; }
.sa-log-time { color: var(--text-secondary); flex-shrink: 0; font-family: monospace; }
.sa-log-event { font-weight: 600; flex-shrink: 0; color: var(--text-primary); font-family: monospace; font-size: 11px; }
.sa-log-id { color: var(--text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; font-family: monospace; font-size: 11px; }
.sa-log-status { color: #065f46; font-size: 11px; flex-shrink: 0; }

/* Recent msgs on dashboard */
.sa-recent-msgs { border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; }

/* ── Limits tab ────────────────────────────────────────────────────── */
.sa-limit-global-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    margin-bottom: 18px;
}
.sa-limit-global-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sa-limit-global-info { flex: 1; min-width: 200px; }
.sa-limit-global-label { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.sa-limit-global-hint { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.sa-limit-global-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.sa-limit-summary {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-bottom: 14px;
}
.sa-limit-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.sa-limit-pill:hover { background: var(--bg-secondary); }
.sa-limit-pill.active { background: var(--bg-tertiary); border-color: var(--bg-chip-active); }
.sa-limit-pill-num {
    font-weight: 700; font-size: 14px;
    min-width: 24px; text-align: center;
    padding: 1px 6px; border-radius: 8px;
    background: var(--bg-tertiary);
}
.sa-limit-pill-over .sa-limit-pill-num { background: #e7f0ff; color: #1465D8; }
.sa-limit-pill-close .sa-limit-pill-num { background: #fef3c7; color: #92400e; }
.sa-limit-pill-safe .sa-limit-pill-num { background: #d1fae5; color: #065f46; }
.sa-limit-pill.active.sa-limit-pill-over { border-color: #bfd6ff; }
.sa-limit-pill.active.sa-limit-pill-close { border-color: #fcd34d; }
.sa-limit-pill.active.sa-limit-pill-safe { border-color: #6ee7b7; }
.sa-limit-meta { font-size: 12px; color: var(--text-secondary); margin-inline-start: 6px; }

.sa-limit-list { display: flex; flex-direction: column; gap: 6px; }
.sa-limit-row {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    flex-wrap: wrap;
}
.sa-limit-row.has-override { border-inline-start: 3px solid var(--bg-chip-active); }
.sa-limit-row-over { background: linear-gradient(to left, transparent, #e7f0ff 60%); }
.sa-limit-row-close { background: linear-gradient(to left, transparent, #fffbeb 60%); }
.sa-limit-row-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.sa-limit-user-info { min-width: 140px; max-width: 220px; flex-shrink: 0; }
.sa-limit-progress-wrap { flex: 1; min-width: 180px; }
.sa-limit-progress {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 4px;
}
.sa-limit-progress-bar {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}
.sa-limit-bar-safe { background: #10b981; }
.sa-limit-bar-close { background: #f59e0b; }
.sa-limit-bar-over { background: #1877F2; }
.sa-limit-progress-text {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 12px; color: var(--text-secondary);
}
.sa-limit-count { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.sa-limit-tag {
    padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 500;
}
.sa-limit-tag-safe { background: #d1fae5; color: #065f46; }
.sa-limit-tag-close { background: #fef3c7; color: #92400e; }
.sa-limit-tag-over { background: #e7f0ff; color: #1465D8; }
.sa-limit-tag-bonus { background: #ede9fe; color: #5b21b6; padding: 1px 8px; border-radius: 999px; font-size: 11px; }
.sa-limit-tag-locked { background: var(--bg-tertiary); color: var(--text-primary); padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; }

.sa-limit-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sa-limit-input { width: 80px; text-align: center; font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
    .sa-limit-global-row { gap: 10px; }
    .sa-limit-row { gap: 8px; }
    .sa-limit-row-main { width: 100%; }
    .sa-limit-row-actions { width: 100%; justify-content: flex-end; }
    .sa-limit-user-info { min-width: 0; max-width: none; flex: 1; }
    .sa-limit-progress-wrap { width: 100%; min-width: 0; flex-basis: 100%; }
}

/* ── Mobile (900px) ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sa-wrapper { flex-direction: column; }

  .sa-nav {
    width: 100%; height: 56px; min-height: 56px; flex-direction: row;
    position: fixed; bottom: 0; right: 0; left: 0;
    border-left: none; border-top: 1px solid var(--border-color);
    padding: 0; overflow-x: auto; overflow-y: hidden;
    justify-content: flex-start; z-index: 10;
  }
  .sa-nav-title { display: none; }
  .sa-nav-spacer { display: none; }
  .sa-nav-item {
    flex-direction: column; gap: 2px; padding: 6px 10px;
    font-size: 10px; border-radius: 0; margin: 0; height: 100%;
    white-space: nowrap; min-width: 60px; justify-content: center;
    width: auto;
  }
  .sa-nav-item svg { width: 20px; height: 20px; }
  .sa-close-btn { flex-direction: column; gap: 2px; font-size: 10px; padding: 6px 10px; height: 100%; justify-content: center; min-width: 50px; width: auto; }
  .sa-close-btn svg { width: 20px; height: 20px; }

  .sa-main { padding: 16px; padding-bottom: 72px; }
  .sa-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sa-detail-grid { grid-template-columns: repeat(2, 1fr); }
  .sa-action-row { gap: 6px; }
  .sa-create-row { gap: 6px; }
  .sa-create-row .sa-inline-input { flex: 1 1 120px; }
  .sa-msg-header { flex-direction: column; gap: 2px; align-items: flex-start; }
  .sa-user-join { display: none; }
}

@media (max-width: 520px) {
  .sa-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sa-stat-value { font-size: 22px; }
  .sa-gv-thumb { width: 60px; height: 34px; }
}

/* ── qim-check: circular checkbox matching store-import design ────── */
.qim-check {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border-color);
  background: var(--bg-secondary);
  cursor: pointer;
  position: relative;
  transition: background .12s, border-color .12s;
}
.qim-check:checked {
  background: #1a73e8;
  border-color: #1a73e8;
}
.qim-check:checked::after {
  content: '';
  position: absolute; top: 2px; left: 3px;
  width: 8px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* SafeList logo avatar on video cards */
.video-avatar--logo {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}

/* YouTube channel avatar on video cards */
.video-avatar--channel {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  background: transparent;
}

/* ── Move-to-category picker (bcp classes shared with move picker) ──── */
.bcp-list {
  padding: 6px 4px 12px;
  overflow-y: auto;
  max-height: 55vh;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bcp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary); color: var(--text-primary);
  font-size: 14px; cursor: pointer; direction: rtl;
  transition: background 0.12s, border-color 0.12s;
}
.bcp-row:hover { background: var(--bg-tertiary); border-color: var(--accent, #6c63ff); }
.bcp-icon { font-size: 18px; flex-shrink: 0; line-height: 1; }
.bcp-label { flex: 1; }

/* ── Bonus import modal — grayed-out already-added rows ─────────────── */
.qim-video-row--disabled {
  opacity: 0.42;
  pointer-events: none;
  user-select: none;
}
.qim-added-badge {
  font-size: 11px;
  font-weight: 600;
  color: #1a73e8;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Small green pill ticker: sits inline after the count in the sidebar.
   Indicates new videos available in an imported category or bonus pool. */
.cat-update-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  background: #16a34a;
  color: #fff;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(22, 163, 74, 0.3);
  flex-shrink: 0;
  opacity: 0.88;
  animation: catUpdateDotPulse 2.8s ease-in-out infinite;
}
@keyframes catUpdateDotPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 1px 2px rgba(22, 163, 74, 0.3); }
  50%      { transform: scale(1.07); box-shadow: 0 1px 5px rgba(22, 163, 74, 0.5); }
}
.home-cat-update-badge.cat-update-dot {
  cursor: pointer;
}
#sidebar.collapsed .cat-update-dot { display: none; }

/* Small subtle display of the source playlist name when the user renamed
 * an imported category or library. Keeps the new name primary while still
 * letting parents see the original label. */
.sidebar-orig-name,
.cat-orig-name {
  margin-inline-start: 6px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
  flex-shrink: 1;
}
#sidebar.collapsed .sidebar-orig-name { display: none; }

/* ================================================================
   Mobile: parent studio renders as a centered floating card —
   same shell pattern as the quick-add panel. The three top-level
   tabs sit as pills along the top, the close X floats in the
   corner so it never crowds the tab row, and the body has padding
   so content doesn't hug the rounded edges. Desktop is unchanged.
   ================================================================ */
@media (max-width: 600px) {
  /* Backdrop: dim + blur with breathing room around the card so
     it reads as a layer floating over the page. Overrides the
     earlier mobile rule that made the overlay full-screen flat. */
  #studio-overlay {
    padding: 16px;
    padding-top: max(16px, calc(var(--safe-top) + 12px));
    padding-bottom: max(16px, calc(var(--safe-bottom) + 12px));
    padding-left: max(16px, calc(var(--safe-left) + 12px));
    padding-right: max(16px, calc(var(--safe-right) + 12px));
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  /* Card sized like the quick-add modal — never fills the screen. */
  .studio-wrapper {
    width: 100%;
    max-width: 760px;
    height: 88vh;
    height: 88dvh;
    max-height: calc(100dvh - 32px);
    flex: 0 0 auto;
  }

  .studio-container {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    overflow: visible;
    box-shadow: 0 16px 48px rgba(0,0,0,0.4);
    flex-direction: column;
    background: var(--bg-primary);
  }

  /* Tabs at the TOP — pill row like quick-add. Reset every
     bottom-nav property the earlier mobile blocks established. */
  .studio-nav {
    order: 0;
    width: 100%;
    flex-direction: row;
    height: auto;
    min-height: 0;
    padding: 12px 14px 10px;
    border-top: none;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    box-shadow: none;
    background: var(--bg-primary);
    align-items: center;
    justify-content: center;
    overflow: visible;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
  }

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

  .studio-nav-items {
    flex-direction: row;
    flex: 0 1 auto;
    padding: 0;
    gap: 6px;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: auto;
  }
  .studio-nav-items::-webkit-scrollbar { display: none; }

  .studio-nav-item {
    flex-direction: row;
    flex: 0 0 auto;
    width: auto;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  }

  .studio-nav-item::after { display: none !important; }

  .studio-nav-item span {
    display: inline !important;
    font-size: 12.5px;
    font-weight: 600;
  }

  .studio-nav-item svg {
    width: 15px;
    height: 15px;
    opacity: 1;
  }

  .studio-nav-item.active {
    background: #1877F2;
    border-color: #1877F2;
    color: #fff;
    border-left: none;
    border-right: none;
    padding-left: 14px;
    padding-right: 14px;
    box-shadow: 0 2px 8px rgba(24,119,242,0.28);
  }
  .studio-nav-item.active svg { fill: currentColor !important; opacity: 1; }
  .studio-nav-item.active::after { display: none !important; }

  /* In-nav close button is replaced by the corner-floating X. */
  .studio-close-btn { display: none !important; }

  /* Floating X — corner-floating like the quick-add close. The
     white ring keeps it readable against both the card and the
     blurred backdrop. */
  .studio-close-floating {
    display: flex !important;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    z-index: 30;
  }
  .studio-close-floating svg { width: 14px; height: 14px; }

  /* Body fills the rest of the card. Bottom corners rounded so
     content doesn't visually escape the card. */
  .studio-content {
    order: 1;
    flex: 1;
    min-height: 0;
    padding-bottom: 0;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Inner tab content: tighter padding so it breathes inside the
     modal instead of inheriting the desktop full-page padding. */
  .studio-tab { padding: 14px 16px 18px; }

  /* Messages FAB — back near the bottom of the card now that the
     nav is at the top instead of the bottom. */
  .studio-msg-fab {
    bottom: calc(12px + var(--safe-bottom));
    left: 12px;
    width: 36px;
    height: 36px;
  }
  .studio-msg-fab svg { width: 16px; height: 16px; }

  /* ── Density: shrink padding so more content fits on one screen ── */
  .approval-search-panel {
    padding: 8px 12px 8px;
    gap: 6px;
  }
  .approval-search-panel-title { display: none; }
  .approval-search-bar { padding: 6px 8px; gap: 6px; }
  .approval-search-btn-inner { padding: 0 18px; height: 36px; font-size: 13px; }
  .approval-search-input-wrap .form-input { height: 36px; font-size: 13px; }

  /* Mobile carousel — tighter gutters and smaller cards so 4-up
     fits with breathing room and more rows fit above the fold. */
  .afc4-label { font-size: 9px; margin-bottom: 4px; }
  .afc4-row { gap: 4px; }
  .afc4-track { gap: 5px; }
  .afc4-card { border-radius: 8px; }
  .afc4-body { padding: 4px 5px 3px; }
  .afc4-name { font-size: 9.5px; }
  .afc4-count { font-size: 8.5px; }

  /* Approval results: tighter row padding so more results show */
  .approval-result-row { padding: 4px 6px; gap: 6px; }

  /* Action bar slimmer */
  .approval-action-bar { padding: 8px 12px calc(8px + var(--safe-bottom, 0px)); }
  .approval-add-videos-btn { height: 38px; padding: 0 22px; font-size: 13px; }
}


/* ───────────────────────────────────────────────────────────────────────
   User's YouTube playlists in the quick-add search tab.
   The section is hidden by default and only visible inside the quick-add
   overlay (the approval tab is shared with the studio, where this row
   would be redundant). It also hides itself once the user starts typing
   into the search input — see _updateYtPlaylistsVisibility.
   ─────────────────────────────────────────────────────────────────────── */
.approval-yt-playlists { display: none; padding: 6px 0 4px; }
.quick-add-card .approval-yt-playlists {
    display: block;
    margin: 12px 0 4px;
    padding: 14px 16px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04);
}

.approval-yt-playlists .ayp-header {
    font-size: 14px; font-weight: 600; color: var(--text-primary);
    margin: 0 0 10px; direction: rtl;
}
.approval-yt-playlists .ayp-loading {
    display: flex; align-items: center; justify-content: center;
    padding: 18px 0;
}
.approval-yt-playlists .ayp-empty {
    text-align: center; padding: 8px 8px 4px; color: var(--text-secondary);
    font-size: 13px; line-height: 1.55;
}
.approval-yt-playlists .ayp-empty p {
    margin: 10px auto 0; font-size: 11.5px; max-width: 360px; opacity: 0.85;
}
.approval-yt-playlists .ayp-empty #ayp-connect-btn {
    width: auto;
    height: 36px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    background: #1a73e8;
    box-shadow: 0 2px 8px rgba(26,115,232,0.25);
    margin: 0 auto;
}
.approval-yt-playlists .ayp-empty #ayp-connect-btn:hover {
    background: #1565c0;
    box-shadow: 0 4px 12px rgba(26,115,232,0.32);
}
.approval-yt-playlists .ayp-source { color: var(--text-secondary); font-size: 11.5px; margin-inline-start: 4px; }
.approval-yt-playlists .ayp-import-btn {
    flex-shrink: 0;
    width: auto;
    height: auto;
    padding: 6px 14px;
    font-size: 12.5px;
    border-radius: 999px;
}
.approval-yt-playlists .ayp-loadmore {
    display: flex; align-items: center; justify-content: center;
    margin: 8px auto 4px; padding: 4px 14px;
    border: 1px solid var(--border-color); border-radius: 999px;
    background: var(--bg-primary); color: var(--text-primary);
    cursor: pointer; opacity: 0.85;
}
.approval-yt-playlists .ayp-loadmore:hover { opacity: 1; }
.approval-yt-playlists .ayp-loadmore[disabled] { opacity: 0.5; cursor: default; }

@media (max-width: 600px) {
    .approval-yt-playlists .ayp-import-btn { width: auto; height: auto; padding: 5px 10px; font-size: 11.5px; }
    .approval-yt-playlists .ayp-header { font-size: 12.5px; margin: 6px 6px 4px; }
}

/* ── "Video unavailable on YouTube" dialog ────────────────────────────── */
dialog.video-unavailable-dlg {
    position: fixed;
    inset: 0;
    margin: auto;
    border: none;
    border-radius: 16px;
    padding: 0;
    width: 360px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    background: var(--surface, #fff);
    overflow: hidden;
    direction: rtl;
    animation: confirmPop 0.18s ease-out forwards;
    z-index: 10000;
}
dialog.video-unavailable-dlg::backdrop {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
}
.video-unavailable-icon {
    display: flex;
    justify-content: center;
    padding: 26px 24px 8px;
    color: #e67e22;
}
.video-unavailable-body {
    padding: 0 24px 20px;
    text-align: center;
}
.video-unavailable-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary, #202124);
}
.video-unavailable-text {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-primary, #202124);
}
.video-unavailable-hint {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-secondary, #5f6368);
}
.video-unavailable-actions {
    display: flex;
    border-top: 1px solid var(--border-color, #e0e0e0);
}
.video-unavailable-actions button {
    flex: 1;
    height: 48px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.video-unavailable-actions button:disabled {
    opacity: 0.55;
    cursor: default;
}
.video-unavailable-ok {
    color: #1877F2;
    border-left: 1px solid var(--border-color, #e0e0e0);
}
.video-unavailable-ok:hover:not(:disabled) { background: rgba(24, 119, 242, 0.07); }
.video-unavailable-cancel { color: var(--text-secondary, #5f6368); }
.video-unavailable-cancel:hover:not(:disabled) { background: rgba(0, 0, 0, 0.04); }

/* ─────────────────────────────────────────────────────────────────────────────
   Profile / Parental controls — header chip + 4-tab panel
   ─────────────────────────────────────────────────────────────────────────── */

/* Profile / parental-controls pill — avatar + small label inside one
   rounded button. The pill shape makes the affordance obvious (reads as
   a clickable control instead of a bare avatar) and the label tells
   parents this is their door into the controls panel.
   Logical padding keeps RTL correct: the avatar hugs the start (right
   in RTL) edge, the label gets breathing room on the end (left). */
.profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding-block: 1px;
    padding-inline-start: 1px;
    padding-inline-end: 13px;
    border-radius: 999px;
    border: 1.5px solid var(--border-color, #e0e0e0);
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #5f6368);
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast), box-shadow var(--transition-fast),
                transform var(--transition-fast);
}
.profile-btn:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
    color: var(--text-primary, #202124);
    border-color: var(--text-primary, #202124);
}
.profile-btn:active { transform: scale(0.96); }
/* Avatar (or fallback icon) is sized to fill the pill height almost
   exactly so it reads as a single seal — no nested-circle illusion. */
.profile-btn-avatar,
.profile-btn svg {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    box-sizing: border-box;
}
.profile-btn-avatar {
    object-fit: cover;
}
.profile-btn svg {
    padding: 5px;
    fill: currentColor;
}
.profile-btn-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .profile-btn {
        height: 30px;
        padding-inline-end: 11px;
        gap: 6px;
    }
    .profile-btn-avatar,
    .profile-btn svg {
        width: 26px;
        height: 26px;
    }
    .profile-btn svg { padding: 4px; }
    .profile-btn-label { font-size: 11px; }
}

/* On very narrow phones (sub-iPhone-SE-1) the profile label
   disappears entirely so the pill collapses to just the avatar. Final
   safety net on top of the shrink/ellipsis rules in the mobile header
   block — guarantees the end section still fits even on a 360 px
   Android with a wide time-chip. Triggers below the 380 px viewport
   only, so the typical 412–430 px Samsung / Pixel still shows the
   "פרופיל" / "Profile" label like before. */
@media (max-width: 380px) {
    .profile-btn-label {
        display: none;
    }
    .profile-btn {
        padding-inline-end: 1px;
        gap: 0;
    }
}

/* Tiny remaining-time chip next to the profile icon */
.time-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast), transform var(--transition-fast);
    direction: ltr;
}
.time-chip svg { flex-shrink: 0; }
.time-chip:hover { transform: translateY(-1px); }
.time-chip.tone-good {
    background: rgba(46, 125, 50, 0.12);
    color: #2e7d32;
    border-color: rgba(46, 125, 50, 0.3);
}
.time-chip.tone-medium {
    background: rgba(245, 124, 0, 0.14);
    color: #ef6c00;
    border-color: rgba(245, 124, 0, 0.32);
}
.time-chip.tone-severe {
    background: rgba(24, 119, 242, 0.14);
    color: #1465D8;
    border-color: rgba(24, 119, 242, 0.34);
    animation: time-chip-pulse 1.6s ease-in-out infinite;
}
.time-chip.tone-paused {
    background: rgba(33, 33, 33, 0.86);
    color: #fff;
    border-color: rgba(0, 0, 0, 0.45);
    animation: time-chip-pulse 1.6s ease-in-out infinite;
}
@keyframes time-chip-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}
@media (max-width: 600px) {
    .time-chip { padding: 3px 7px; font-size: 10px; }
    .time-chip svg { width: 11px; height: 11px; }
}

/* Studio nav title (replaces the old PIN-toggle row in the sidebar header) */
.studio-nav-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary, #5f6368);
    letter-spacing: 0.4px;
    text-transform: none;
    text-align: center;
    margin-top: 6px;
    opacity: 0.85;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Time-limits tab + Password tab — shared "tl" namespace
   ─────────────────────────────────────────────────────────────────────────── */

.tl-tab, .pw-tab {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: var(--bg-secondary, #f5f5f5);
}
.tl-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 28px 22px 80px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tl-page-header {
    margin-bottom: 4px;
}
.tl-page-header h2 {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary, #202124);
}
.tl-page-header .tl-sub {
    margin: 0;
    color: var(--text-secondary, #5f6368);
    font-size: 14px;
    line-height: 1.6;
}
/* Inline header row: title + master enable switch side-by-side */
.tl-page-header-row {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
}
.tl-page-header-row .tl-header-text { flex: 1; min-width: 0; }
.tl-page-header-row .tl-switch { flex-shrink: 0; }
.tl-loading, .tl-error, .tl-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary, #5f6368);
    font-size: 14px;
}
.tl-error { color: #1465D8; }

.tl-card {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 14px;
    padding: 18px 20px;
    transition: opacity var(--transition-fast);
}
.tl-card.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}
.tl-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.tl-card-head:last-child { margin-bottom: 0; }
.tl-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #202124);
}
.tl-card-sub {
    font-size: 13px;
    color: var(--text-secondary, #5f6368);
    line-height: 1.55;
    margin: 0;
}
.tl-card-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary, #5f6368);
    background: var(--bg-secondary, #f5f5f5);
    padding: 4px 12px;
    border-radius: 8px;
    flex-shrink: 0;
}
.tl-card-hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary, #5f6368);
}
.tl-card-danger { border-color: rgba(24, 119, 242, 0.35); }
.tl-card-danger .tl-card-title { color: #1465D8; }

/* Status card — today's running usage with axis */
.tl-status .tl-status-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.tl-status-label {
    font-size: 13px;
    color: var(--text-secondary, #606060);
    font-weight: 600;
}
.tl-status-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary, #0f0f0f);
    font-family: inherit;
    direction: rtl;
}
.tl-status-hint {
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-secondary, #606060);
    text-align: center;
}
.tl-status-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
}
.tl-status-remaining {
    color: var(--text-primary, #0f0f0f);
    font-weight: 600;
}
.tl-status-bonus-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(24, 119, 242, 0.08);
    color: var(--accent, #1877F2);
    font-size: 12px;
    font-weight: 700;
}

/* Visual axis — used / limit / +bonus on a single track */
.tl-axis-wrap {
    margin-top: 8px;
}
.tl-axis {
    position: relative;
    height: 14px;
    background: var(--bg-tertiary, #f2f2f2);
    border-radius: 999px;
    overflow: hidden;
    direction: ltr;
}
.tl-axis-fill {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, #43a047, #66bb6a);
    border-radius: 999px;
    transition: width 600ms cubic-bezier(.2,.7,.3,1), background 240ms ease-out;
}
.tl-status.tone-medium .tl-axis-fill { background: linear-gradient(90deg, #ef6c00, #ffa726); }
.tl-status.tone-severe .tl-axis-fill { background: linear-gradient(90deg, var(--accent, #1877F2), var(--accent-hover, #1465D8)); }
.tl-status.tone-off .tl-axis-fill    { background: var(--border-color, #e5e5e5); }
.tl-axis-bonus-band {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    background: repeating-linear-gradient(
        45deg,
        rgba(24, 119, 242, 0.10) 0 4px,
        rgba(24, 119, 242, 0.18) 4px 8px
    );
    pointer-events: none;
}
.tl-axis-divider {
    position: absolute;
    top: -2px; bottom: -2px;
    width: 2px;
    background: var(--text-primary, #0f0f0f);
    opacity: 0.55;
}
.tl-axis-labels {
    position: relative;
    height: 16px;
    margin-top: 6px;
    direction: ltr;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #606060);
}
.tl-axis-label-start { position: absolute; left: 0; }
.tl-axis-label-end   { position: absolute; right: 0; }
.tl-axis-label-mid   {
    position: absolute;
    transform: translateX(50%);
    color: var(--text-primary, #0f0f0f);
}

/* Master toggle card */
.tl-toggle-card .tl-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.tl-toggle-card .tl-toggle-text { flex: 1; min-width: 0; }
.tl-toggle-card { font-family: inherit; }
.tl-toggle-card * { font-family: inherit; }
.tl-switch {
    position: relative;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: var(--border-color, #e0e0e0);
    cursor: pointer;
    transition: background var(--transition-fast);
    flex-shrink: 0;
}
.tl-switch.on { background: var(--accent, #1877F2); }
.tl-switch-knob {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition-fast);
}
[dir="rtl"] .tl-switch.on .tl-switch-knob { transform: translateX(-18px); }
[dir="ltr"] .tl-switch.on .tl-switch-knob { transform: translateX(18px); right: auto; left: 3px; }

/* Chips — daily/weekly/bonus quick-set buttons */
.tl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0;
}
.tl-chip {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--border-color, #e5e5e5);
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #0f0f0f);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.tl-chip:hover { background: var(--bg-hover, #ebebeb); }
.tl-chip.active {
    background: var(--accent, #1877F2);
    color: #fff;
    border-color: var(--accent, #1877F2);
    box-shadow: 0 2px 8px rgba(24, 119, 242, 0.25);
}
.tl-chip-bonus {
    border-color: rgba(24, 119, 242, 0.35);
    color: var(--accent, #1877F2);
    background: rgba(24, 119, 242, 0.06);
}
.tl-chip-bonus:hover {
    background: rgba(24, 119, 242, 0.14);
    border-color: rgba(24, 119, 242, 0.55);
}
.tl-chip-bonus:disabled { opacity: 0.5; cursor: wait; }
.tl-bonus-pill {
    background: rgba(24, 119, 242, 0.10);
    color: var(--accent, #1877F2);
}

.tl-slider {
    width: 100%;
    margin-top: 12px;
    accent-color: var(--accent, #1877F2);
}

/* Blocked-hours rows */
.tl-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1.5px dashed rgba(24, 119, 242, 0.40);
    background: transparent;
    color: var(--accent, #1877F2);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.tl-add-btn:hover {
    border-color: var(--accent, #1877F2);
    background: rgba(24, 119, 242, 0.06);
}
.tl-windows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tl-window {
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 10px;
    padding: 12px 14px;
    display: grid;
    /* `minmax(0, 1fr)` is the magic that lets the days column actually shrink
       below its content width on narrow screens — without it the grid would
       grow past the card, dragging the delete X off the right edge and
       triggering horizontal scroll on the whole tab. */
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
}
.tl-window-times {
    display: flex;
    align-items: center;
    gap: 6px;
    direction: ltr;
    flex-wrap: wrap;
}
.tl-window-sep { color: var(--text-secondary, #5f6368); }
.tl-time-input {
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 13px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #202124);
    font-family: inherit;
}
.tl-window-days {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    direction: rtl;
}
.tl-day-pill {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color, #e5e5e5);
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #606060);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    transition: all var(--transition-fast);
}
.tl-day-pill:hover {
    border-color: var(--accent, #1877F2);
    color: var(--accent, #1877F2);
    background: rgba(24, 119, 242, 0.06);
}
.tl-day-pill.on {
    background: var(--accent, #1877F2);
    color: #fff;
    border-color: var(--accent, #1877F2);
    box-shadow: 0 2px 6px rgba(24, 119, 242, 0.30);
}
.tl-window-days-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tl-window-warning {
    font-size: 11px;
    color: var(--accent, #1877F2);
    font-weight: 600;
}
.tl-window.no-days .tl-day-pill {
    border-style: dashed;
    border-color: rgba(24, 119, 242, 0.45);
}
.tl-window-del {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-secondary, #5f6368);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), color var(--transition-fast);
    padding: 0;
    flex-shrink: 0;
}
.tl-window-del:hover { background: rgba(24, 119, 242, 0.1); color: #1465D8; }

/* Action footer — sticky save button */
.tl-actions {
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, var(--bg-secondary, #f5f5f5) 60%, transparent);
    padding: 16px 0 0;
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.tl-save-btn {
    flex: 1;
    padding: 12px 20px;
    border-radius: 10px;
    border: none;
    background: var(--accent, #1877F2);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tl-save-btn:hover:not(:disabled) {
    background: var(--accent-hover, #1465D8);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(24, 119, 242, 0.30);
}
.tl-save-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--text-secondary, #606060);
}
.tl-revert-btn {
    padding: 12px 18px;
    border-radius: 10px;
    border: 1.5px solid var(--border-color, #e0e0e0);
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #5f6368);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.tl-revert-btn:hover { border-color: var(--text-primary, #202124); color: var(--text-primary, #202124); }
.tl-secondary-btn {
    padding: 10px 18px;
    border-radius: 10px;
    border: 1.5px solid var(--border-color, #e0e0e0);
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #202124);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.tl-secondary-btn:hover { background: var(--bg-hover, rgba(0,0,0,0.04)); }
.tl-secondary-btn:disabled { opacity: 0.5; cursor: wait; }
.tl-danger-btn {
    padding: 10px 18px;
    border-radius: 10px;
    border: none;
    background: #1465D8;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.tl-danger-btn:hover { background: #1465D8; }

/* Parent kill-switch card — first card on the time-limits tab, deliberately
   loud so any parent can find it without scrolling. Two visual states:
   resting (red CTA) and active/paused (filled red card). */
.tl-pause-card {
    border-color: rgba(24, 119, 242, 0.30);
    background: linear-gradient(180deg, #fff 0%, rgba(24, 119, 242, 0.04) 100%);
    font-family: inherit;
}
.tl-pause-card * { font-family: inherit; }
.tl-pause-card.is-paused {
    background: linear-gradient(180deg, #1465D8 0%, #1465D8 100%);
    border-color: #1465D8;
    color: #fff;
    box-shadow: 0 8px 28px rgba(20, 101, 216, 0.30);
}
.tl-pause-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.tl-pause-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(24, 119, 242, 0.10);
    color: var(--accent, #1877F2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tl-pause-card.is-paused .tl-pause-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.tl-pause-text { flex: 1; min-width: 0; }
.tl-pause-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #202124);
    margin-bottom: 4px;
}
.tl-pause-card.is-paused .tl-pause-title { color: #fff; }
.tl-pause-sub {
    font-size: 13px;
    color: var(--text-secondary, #5f6368);
    line-height: 1.5;
}
.tl-pause-card.is-paused .tl-pause-sub { color: rgba(255, 255, 255, 0.92); }
.tl-pause-btn {
    flex-shrink: 0;
    padding: 11px 22px;
    border-radius: 999px;
    border: none;
    background: var(--accent, #1877F2);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 14px rgba(24, 119, 242, 0.30);
}
.tl-pause-btn:hover:not(:disabled) {
    background: var(--accent-hover, #1465D8);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(24, 119, 242, 0.40);
}
.tl-pause-btn.is-paused {
    background: #fff;
    color: #1465D8;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20);
}
.tl-pause-btn.is-paused:hover:not(:disabled) {
    background: #fff;
    color: #1465D8;
    transform: translateY(-1px);
}
.tl-pause-btn:disabled { opacity: 0.6; cursor: wait; }
@media (max-width: 540px) {
    .tl-pause-row { flex-wrap: wrap; }
    .tl-pause-btn { flex: 1 0 100%; }
}

/* "Cancel bonus" chip — sits next to the +N min chips. */
.tl-chip-bonus-clear {
    margin-inline-start: 4px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--border-color, #e5e5e5);
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #606060);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.tl-chip-bonus-clear:hover {
    border-color: #1465D8;
    color: #1465D8;
    background: rgba(20, 101, 216, 0.06);
}
.tl-chip-bonus-clear:disabled { opacity: 0.5; cursor: wait; }

/* Per-day daily-frame customization */
.tl-perday-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color, #ececec);
}
.tl-perday-toggle-text { flex: 1; min-width: 0; }
.tl-perday-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    background: var(--bg-secondary, #f7f7f7);
    border-radius: 10px;
    padding: 10px 12px;
}
.tl-perday-row-day {
    display: grid;
    grid-template-columns: 90px 1fr 90px;
    gap: 12px;
    align-items: center;
}
.tl-perday-day-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary, #202124);
}
.tl-perday-day-value {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary, #5f6368);
    text-align: end;
    direction: rtl;
}
.tl-perday-slider {
    margin: 0;
    width: 100%;
}
@media (max-width: 540px) {
    .tl-perday-row-day {
        grid-template-columns: 70px 1fr 80px;
        gap: 8px;
    }
}

/* Floating "scroll down" hint. Anchored to .studio-content (which has
   position: relative below) — that way it stays centered over the actual
   card column on desktop instead of the whole studio panel (the left nav
   is 210px wide on RTL right, so viewport-centered arrows look off). */
.studio-scroll-down {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--scroll-down-border, rgba(24, 119, 242, 0.30));
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    color: var(--scroll-down-color, var(--accent, #1877F2));
    cursor: pointer;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease-out;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}
.studio-scroll-down.tone-red {
    --scroll-down-color: var(--accent, #1877F2);
    --scroll-down-border: rgba(24, 119, 242, 0.30);
    --scroll-down-shadow: rgba(24, 119, 242, 0.22);
}
.studio-scroll-down.tone-blue {
    --scroll-down-color: #1a73e8;
    --scroll-down-border: rgba(26, 115, 232, 0.32);
    --scroll-down-shadow: rgba(26, 115, 232, 0.22);
}
.studio-scroll-down.visible {
    opacity: 1;
    pointer-events: auto;
    animation: studio-scroll-bounce 1.6s ease-in-out infinite;
}
.studio-scroll-down:hover {
    background: #fff;
    box-shadow: 0 8px 22px var(--scroll-down-shadow, rgba(0, 0, 0, 0.18));
}
@keyframes studio-scroll-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-5px); }
}
@media (max-width: 600px) {
    .studio-scroll-down { bottom: 18px; width: 36px; height: 36px; }
}

/* Small switch — used inline for "per-day" sub-toggle */
.tl-switch-sm {
    width: 36px;
    height: 22px;
}
.tl-switch-sm .tl-switch-knob {
    width: 16px;
    height: 16px;
    top: 3px;
    right: 3px;
}
[dir="rtl"] .tl-switch-sm.on .tl-switch-knob { transform: translateX(-14px); }
[dir="ltr"] .tl-switch-sm.on .tl-switch-knob { transform: translateX(14px); right: auto; left: 3px; }

/* Password tab */
.pw-label {
    margin: 12px 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #5f6368);
}
.pw-out { margin-top: 12px; }
.pw-success { color: #2e7d32; font-size: 13px; }
.pw-error { color: #1465D8; font-size: 13px; }
.pw-reset-link p { margin: 0 0 10px; font-size: 13px; color: var(--text-secondary, #5f6368); }
.pw-reset-link a { display: block; text-align: center; text-decoration: none; }

/* My-shares tab — slim store */
.store-single-panel.mine-only .store-topbar {
    padding-bottom: 12px;
}
.mine-topbar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #202124);
}
.mine-topbar-title svg { color: var(--text-secondary, #5f6368); }

/* ─────────────────────────────────────────────────────────────────────────────
   Screen-time block overlay (appears when daily/weekly limit hits or in
   blocked-hours window). Sits above the player.
   ─────────────────────────────────────────────────────────────────────────── */

#screen-block-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 20, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 200ms ease-out;
    padding: 20px;
}
#screen-block-overlay.open { opacity: 1; }
#screen-block-overlay .sb-card {
    background: var(--bg-primary, #fff);
    border-radius: 18px;
    padding: 28px 26px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    transform: translateY(8px);
    transition: transform 200ms ease-out;
    font-family: inherit;
}
#screen-block-overlay .sb-card * { font-family: inherit; }
#screen-block-overlay.open .sb-card { transform: translateY(0); }
.sb-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(24, 119, 242, 0.12);
    color: #1465D8;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sb-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #202124);
}
.sb-sub {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary, #5f6368);
}
.sb-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sb-bonus-btn {
    padding: 12px 20px;
    border-radius: 10px;
    border: none;
    background: #43a047;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.sb-bonus-btn:hover { background: #2e7d32; }
.sb-bonus-btn:active { transform: scale(0.97); }
.sb-close-btn {
    padding: 11px 20px;
    border-radius: 10px;
    border: 1.5px solid var(--border-color, #e0e0e0);
    background: transparent;
    color: var(--text-secondary, #5f6368);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.sb-close-btn:hover { background: var(--bg-hover, rgba(0,0,0,0.04)); }
.sb-ok-btn {
    padding: 12px 28px;
    border-radius: 10px;
    border: none;
    background: var(--accent, #1877F2);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.sb-ok-btn:hover  { background: var(--accent-hover, #1465D8); }
.sb-ok-btn:active { transform: scale(0.97); }

/* Time-limits tab — mobile tweaks */
@media (max-width: 600px) {
    .tl-page { padding: 18px 14px 80px; }
    .tl-page-header h2 { font-size: 20px; }
    .tl-card { padding: 16px 14px; }
    .tl-status-value { font-size: 20px; }
    /* Stack the blocked-hours row on narrow screens. The grid child for the
       day pills is .tl-window-days-wrap (not .tl-window-days, which is one
       level deeper) — getting that wrong was leaving 7 day pills + a 28px
       delete X on a single row, blowing past the card width and dragging
       the page into horizontal scroll. */
    .tl-window {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 10px;
    }
    .tl-window-times       { grid-column: 1; grid-row: 1; }
    .tl-window-del         { grid-column: 2; grid-row: 1; align-self: start; }
    .tl-window-days-wrap   { grid-column: 1 / span 2; grid-row: 2; }
    .tl-window-days        { justify-content: flex-start; }
    /* Native <input type="time"> on Android renders wider than the
       remaining row space, which made the inputs wrap onto separate
       lines and pushed the "—" separator into a stranded position
       between them. Force the row to stay single-line and let the two
       inputs share the space evenly. */
    .tl-window-times {
        flex-wrap: nowrap;
        gap: 6px;
    }
    .tl-window-times .tl-time-input {
        flex: 1 1 0;
        min-width: 0;
        text-align: center;
    }
    .tl-window-sep { flex-shrink: 0; }
}
/* Belt-and-suspenders: never let the time-limits tab itself scroll
   horizontally, no matter what a child decides to overflow with. */
.tl-tab { overflow-x: hidden; }

/* ================================================
   i18n — LTR overrides (step 2: sidebar)
   ================================================

   These rules apply ONLY when html[dir="ltr"]. They are additive — every
   default rule above stays untouched, so Hebrew (the default) renders
   byte-for-byte identically to before this section was added.

   Strategy: every existing physical-left/right property the sidebar relies
   on gets paired with a `[dir="ltr"]` mirror image that resets the
   original and sets the opposite side. We only target the sidebar in this
   step; other modules will get their own block as they migrate.
   ================================================ */

/* Desktop — sidebar moves from right edge to left edge */
[dir="ltr"] #sidebar {
  right: auto;
  left: 0;
  border-left: 0;
  border-right: 1px solid var(--border-color);
}

/* Desktop — content margin flips so the page stays clear of the sidebar */
[dir="ltr"] #content {
  margin-right: 0;
  margin-left: var(--sidebar-width);
  transition: margin-left var(--transition-normal);
}
[dir="ltr"] #content.sidebar-collapsed {
  margin-right: 0;
  margin-left: var(--sidebar-collapsed-width);
}

/* The bonus-footer wrapper hardcodes `direction: rtl` so the row contents
   stay right-aligned even inside an LTR parent. Override it for English. */
[dir="ltr"] .sidebar-bonus-footer {
  direction: ltr;
}

/* The "Add Videos" CTA hardcodes `direction: rtl` too — same fix. Without
   this override the icon ends up on the right of the label even when the
   page is LTR, which looks visually wrong (text shoved to the right edge,
   icon detached on the left). */
[dir="ltr"] .sidebar-add-videos-btn {
  direction: ltr;
}

/* Mobile (<=900px) — sidebar slides in from the LEFT instead of the right */
@media (max-width: 900px) {
  [dir="ltr"] #sidebar {
    transform: translateX(-100%);
  }
  [dir="ltr"] #sidebar.open {
    transform: translateX(0);
  }
  [dir="ltr"] #content {
    margin-left: 0;
  }
}

/* (step-4 .video-modal-close LTR override removed — the base rule now
    pins the X to the top-right corner in both directions per Windows
    convention, so no override is needed.) */

/* ================================================
   i18n — LTR overrides (step 5: paywall)
   ================================================
   .paywall-banner has a hardcoded `direction: rtl` — override for LTR.
   .sidebar-lock-badge has `text-align: right` — flip for LTR.
   The checkout-close X is already pinned to top-right in both
   directions (see the base rule), so it needs no override. */
[dir="ltr"] .paywall-banner {
  direction: ltr;
}
[dir="ltr"] .sidebar-lock-badge {
  text-align: left;
}

/* ================================================
   i18n — LTR overrides (post-9e: bug fixes)
   ================================================
   Two hardcoded `direction: rtl` declarations that broke English mode:

   1. `.tl-window-days` (Blocked-hours day pills, Studio → Time limits) —
      the pills are emitted in calendar order 0..6 (Sun..Sat), so the RTL
      direction reversed them into Sat..Sun. In English we want the
      natural Sun..Sat reading flow, left to right.

   2. `.home-cat-header` and `.cat-inline-header` (category section headers
      on the home page) — they pinned the action buttons (edit, share,
      count, delete) to the LEFT of the row in Hebrew. In English the
      buttons need to flow to the RIGHT of the category name, matching the
      natural LTR header layout (label first, controls trailing). The
      `margin-inline-start: auto` pivot already does the right thing once
      `direction` flips, so just resetting the direction is enough. */
[dir="ltr"] .tl-window-days {
  direction: ltr;
}
[dir="ltr"] .home-cat-header,
[dir="ltr"] .cat-inline-header {
  direction: ltr;
}

/* ================================================
   i18n — LTR overrides (bidi punctuation fix)
   ================================================
   Several dialog/modal text containers and inputs hardcode `direction: rtl`
   so the Hebrew layout stays right-to-left even when an ancestor accidentally
   resets it. Side-effect in English mode: the Unicode bidi algorithm sees
   LTR text inside an RTL container and reorders trailing punctuation
   (`.`, `?`, `!`) to the LEFT side of the line — producing visibly wrong
   strings like `.You have unsaved changes` or `?Save before closing`.

   Fix: reset `direction: ltr` on each text-bearing container under
   `[dir="ltr"]`. Hebrew is untouched (the base rules still apply when the
   page is `dir="rtl"`). Inputs also get `text-align: start` so the caret
   sits where it belongs and placeholders read naturally.

   If you add a new dialog/modal in the future: prefer NOT hardcoding
   `direction` at all — let it inherit from `<html>` — and use logical
   properties (`text-align: start/end`, `border-inline-start`, etc.) for
   any side-specific styling. */
[dir="ltr"] .studio-confirm-body,
[dir="ltr"] .studio-publish-dlg-title,
[dir="ltr"] .studio-publish-community-msg,
[dir="ltr"] .studio-publish-dlg-hint,
[dir="ltr"] .studio-publish-desc,
[dir="ltr"] .studio-prompt-input,
[dir="ltr"] .cat-inline-name-input,
[dir="ltr"] .approval-cat-rename-input,
[dir="ltr"] .welcome-screen {
  direction: ltr;
}

/* Right-aligned text in the publish dialog body — flip to start so the
   English text aligns left like every other LTR paragraph would. */
[dir="ltr"] .studio-publish-dlg .studio-confirm-body,
[dir="ltr"] .studio-prompt-input {
  text-align: start;
}

/* Community-message info box — Hebrew design pins the accent stripe to
   the RIGHT edge (the leading edge for RTL readers) via `border-right`.
   Mirror it to the LEFT in English so the stripe stays on the leading
   edge for LTR readers. */
[dir="ltr"] .studio-publish-community-msg {
  border-right: 0;
  border-left: 3px solid #1877F2;
}

/* ================================================
   Mobile header — priority-shrink order
   ================================================
   User feedback after #210: when the time-chip is wide, the chip text
   started to ellipsize. They'd rather keep the time fully readable and
   give up the "Profile" / "פרופיל" label first — explicit OK to collapse
   the profile pill to just the avatar circle on mobile.

   So the priority on mobile is:
     1. Bell (rigid, fixed circle)               — never shrinks
     2. Time-chip (full content)                 — never shrinks
     3. Profile avatar (small circle)            — never shrinks
     4. Profile label ("פרופיל" / "Profile")     — shrinks to 0 first

   With this order, the chip's text stays fully visible until the label is
   completely gone; only after that, if room is STILL tight, the chip
   would clip. In practice the chip is ~50–80 px so this fits easily on
   any phone ≥ 360 px once the label is hidden.

   `overflow: hidden` on `.header-end` is kept so even in the impossible
   case where every shrinkable element is at its minimum and the parent
   is still too narrow, content gets clipped at the column boundary
   instead of running over the logo. */
@media (max-width: 600px) {
  /* Time-chip — rigid. User explicitly wants the full remaining-time
     string ("4:32 שע'" / "1h 30m" / "Paused" / etc.) to always be
     readable; the cost of that is collapsing the profile pill (below).
     Overrides the base `flex-shrink: 0` (already this value, but stated
     here for intent) and any earlier ellipsize rule. */
  .time-chip {
    flex-shrink: 0;
  }
  .time-chip .time-chip-text {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }
  /* Profile pill — the WHOLE button can shrink. The avatar circle stays
     rigid (it has its own `flex-shrink: 0` on `.profile-btn-avatar`),
     so what actually shrinks is the label. Clip rather than ellipsis so
     when there's no room the label vanishes cleanly instead of leaving
     a tell-tale "..." sticking out. */
  .profile-btn {
    min-width: 0;
    flex-shrink: 1;
  }
  .profile-btn-label {
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }
  /* Final safety net: clip at the column boundary instead of letting any
     stray content escape into the logo's half. With the priority order
     above, the chip stays whole; if the parent is so narrow that even
     after the label collapses there's still no room (sub-340 px ish),
     this clips the leftmost edge of `.header-end` instead of the bell
     punching through into the logo. */
  .header-end {
    overflow: hidden;
  }
}