/* ============================================================================
   Unified Collection Editor - Canvas-based layout
   ============================================================================ */

.collection-unified-editor {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 60px);
}

/* ============================================================================
   Main Layout
   ============================================================================ */

.editor-main-layout {
  display: flex;
  position: relative;
}

/* Override sidebar sticky positioning for unified editor */
.collection-unified-editor .canva-sidebar {
  position: relative;
  height: auto;
  min-height: 100%;
}

/* Subtler sidebar borders - override base canva-sidebar.css */
.collection-unified-editor .canva-sidebar-rail {
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.collection-unified-editor .canva-sidebar-panel {
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  background: transparent;
}

.collection-unified-editor .canva-rail-btn {
  border-radius: 0;
}

/* Login to Save button - normalize button element to match anchor styling */
.collection-unified-editor button.login-to-save-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  margin: 0;
  box-sizing: border-box;
}

/* ============================================================================
   Canvas Area
   ============================================================================ */

.collection-unified-editor .canvas-main-area {
  flex: 1;
  position: relative;
  background: transparent;
}

.collection-unified-editor .canvas-scroll-container {
  width: 100%;
  padding: 40px 40px 200px 40px;
  /* Center content horizontally */
  display: flex;
  justify-content: center;
}

.collection-unified-editor .canvas-wrapper {
  position: relative;
  flex-shrink: 0;
  /* Minimalist grid border style */
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  transform-origin: top center;
}

.collection-unified-editor .canvas {
  position: relative;
  /* Match portfolio page content width: max-width 1400px - 64px padding = 1336px */
  width: 1336px;
  /* Fixed max height of 4000px - canvas shows full available space */
  height: 4000px;
  min-height: 4000px;
}

.collection-unified-editor .canvas-grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0.3;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Page boundary indicator at bottom of canvas */
.collection-unified-editor .canvas::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 100, 100, 0.3), transparent);
  pointer-events: none;
}

.collection-unified-editor .canvas-empty-state {
  position: absolute;
  left: 50%;
  top: 80px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  text-align: center;
}

.collection-unified-editor .canvas-empty-state svg {
  margin-bottom: 16px;
  opacity: 0.5;
}

.collection-unified-editor .canvas-empty-state p {
  font-size: 14px;
  margin: 0;
}

.collection-unified-editor .canvas.has-elements .canvas-empty-state {
  display: none;
}

/* ============================================================================
   Canvas Elements
   ============================================================================ */

.canvas-element {
  position: absolute;
  cursor: move;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: border-color 0.15s ease;
}

.canvas-element:hover {
  border-color: rgba(0, 168, 255, 0.3);
}

.canvas-element.selected {
  border-color: #00a8ff;
}

.canvas-element.dragging {
  opacity: 0.8;
  z-index: 1000;
  /* Allow mouse events to pass through to document during drag */
  pointer-events: none;
}

.canvas-element.dragging *,
.canvas-element.resizing * {
  /* Ensure all children also don't capture events during drag/resize */
  pointer-events: none !important;
}

.canvas-element.resizing {
  /* Allow mouse events to pass through to document during resize */
  pointer-events: none;
}

.canvas-element .element-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2px;
}

/* Resize Handles */
.canvas-element .resize-handles {
  display: none;
}

.canvas-element.selected .resize-handles {
  display: block;
}

.resize-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #00a8ff;
  border: 2px solid #fff;
  border-radius: 2px;
}

.resize-handle.nw { top: -5px; left: -5px; cursor: nw-resize; }
.resize-handle.n { top: -5px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
.resize-handle.ne { top: -5px; right: -5px; cursor: ne-resize; }
.resize-handle.e { top: 50%; right: -5px; transform: translateY(-50%); cursor: e-resize; }
.resize-handle.se { bottom: -5px; right: -5px; cursor: se-resize; }
.resize-handle.s { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
.resize-handle.sw { bottom: -5px; left: -5px; cursor: sw-resize; }
.resize-handle.w { top: 50%; left: -5px; transform: translateY(-50%); cursor: w-resize; }

/* ============================================================================
   Element Type Styles
   ============================================================================ */

/* Heading */
.canvas-element[data-type="heading"] .element-content {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: transparent;
}

.canvas-element[data-type="heading"] h1,
.canvas-element[data-type="heading"] h2,
.canvas-element[data-type="heading"] h3 {
  margin: 0;
  color: #fff;
  font-weight: 600;
}

.canvas-element[data-type="heading"] h1 { font-size: 28px; }
.canvas-element[data-type="heading"] h2 { font-size: 22px; }
.canvas-element[data-type="heading"] h3 { font-size: 18px; }

/* Text Box */
.canvas-element[data-type="text_box"] .element-content {
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.5;
}

.canvas-element[data-type="text_box"] .element-content[contenteditable="true"] {
  outline: none;
  cursor: text;
}

/* Divider */
.canvas-element[data-type="divider"] .element-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}

.canvas-element[data-type="divider"] hr {
  width: 100%;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: 0;
}

/* Image */
.canvas-element[data-type="image"] .element-content {
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.canvas-element[data-type="image"] .element-content img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.canvas-element[data-type="image"] .element-content .image-placeholder {
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
}

/* Shape */
.canvas-element[data-type="shape"] .element-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.canvas-element[data-type="shape"] .shape-rect {
  width: 100%;
  height: 100%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

/* Post */
.canvas-element[data-type="post"] .element-content {
  background: transparent;
  border-radius: 4px;
  overflow: visible; /* Allow tweets to display without clipping */
}

/* ============================================================================
   Tweet Embeds
   ============================================================================ */

/* Tweet containers in canvas elements - used for post blocks */
.canvas-element .library-item-twitter {
  width: 100%;
  display: block;
}

.canvas-element .tweet-container {
  padding: 0;
  min-height: 100px;
  border-radius: 8px;
  overflow: visible;
  width: 100%;
}

.canvas-element .tweet-container .twitter-tweet {
  margin: 0 !important;
  transform-origin: top left;
}

.canvas-element .tweet-container .twitter-tweet iframe {
  border-radius: 8px !important;
  /* Fix white corners on dark theme tweets */
  color-scheme: light !important;
}

/* Overlay to prevent iframe from capturing mouse events (allows drag to work) */
.canvas-element .tweet-container,
.canvas-element .instagram-container,
.canvas-element .youtube-wrapper {
  position: relative;
}
.canvas-element .tweet-container::after,
.canvas-element .instagram-container::after,
.canvas-element .youtube-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

/* Embed post blocks: hide outline until dragging */
.canvas-element:has(.library-item-twitter),
.canvas-element:has(.library-item-instagram),
.canvas-element:has(.library-item-youtube),
.canvas-element:has(.library-item-si-content) {
  border-color: transparent !important;
}
.canvas-element:has(.library-item-twitter).dragging,
.canvas-element:has(.library-item-instagram).dragging,
.canvas-element:has(.library-item-youtube).dragging,
.canvas-element:has(.library-item-si-content).dragging {
  outline: 2px solid #00a8ff;
  outline-offset: -2px;
}

/* Hide resize handle for embed blocks (height is determined by embed) */
.canvas-element:has(.library-item-twitter) .block-resize-handle,
.canvas-element:has(.library-item-instagram) .block-resize-handle,
.canvas-element:has(.library-item-youtube) .block-resize-handle,
.canvas-element:has(.library-item-si-content) .block-resize-handle {
  display: none !important;
}

.canvas-element .tweet-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.5);
  gap: 12px;
  min-height: 200px; /* Placeholder height while loading */
}

.canvas-element .tweet-loading .loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: tweet-spin 0.8s linear infinite;
}

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

.canvas-element .tweet-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  height: 100%;
  gap: 8px;
}

.canvas-element .tweet-error svg {
  opacity: 0.5;
}

/* ============================================================================
   Toolbar Zoom
   ============================================================================ */

.canva-toolbar-zoom {
  display: flex;
  align-items: center;
  gap: 4px;
}

.canva-toolbar-zoom-level {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  min-width: 45px;
  text-align: center;
}

/* ============================================================================
   Popup
   ============================================================================ */

.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.popup-window {
  background: var(--color-bg-base-darker, #2a2a3e);
  border-radius: 12px;
  width: 600px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.popup-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.popup-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.popup-close:hover {
  color: #fff;
}

.popup-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.popup-post-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.popup-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  padding: 40px;
}

.popup-post-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.popup-post-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.popup-post-item img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 8px;
}

.popup-post-item .post-title {
  font-size: 12px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================================
   Layout Mode Toggle
   ============================================================================ */

.canva-toolbar-mode-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 2px;
}

.canva-toolbar-mode-toggle .canva-toolbar-btn {
  padding: 6px 8px;
  border-radius: 4px;
}

.canva-toolbar-mode-toggle .canva-toolbar-btn.active {
  background: rgba(0, 168, 255, 0.2);
  color: #00a8ff;
}

/* ============================================================================
   Block Mode Layout
   ============================================================================ */

/* Block mode: absolute positioning with snap grid */
.collection-unified-editor .canvas.block-mode {
  position: relative;
  min-height: 600px;
  padding: 24px;

  /* Show snap grid in editor (optional visual aid) */
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 24px 24px; /* Align with padding */
}

/* Elements use absolute positioning */
.canvas.block-mode .canvas-element {
  position: absolute;
  /* x, y, width set via inline styles */
  cursor: move;
}

/* Hide freeform resize handles in block mode */
.canvas.block-mode .canvas-element .resize-handles {
  display: none !important;
}

/* Block mode vertical resize handle */
.canvas.block-mode .block-resize-handle {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 8px;
  cursor: ns-resize !important;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 15;
  pointer-events: auto;
}

.canvas.block-mode .block-resize-handle::before {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: #00a8ff;
  border-radius: 2px;
  pointer-events: none;
}

/* Show resize handle on hover or when selected */
.canvas.block-mode .canvas-element:hover .block-resize-handle,
.canvas.block-mode .canvas-element.selected .block-resize-handle {
  opacity: 1;
}

/* Prevent text cursor from showing over resize handle */
.canvas.block-mode .block-resize-handle * {
  cursor: ns-resize !important;
}

/* Block element styling */
.canvas.block-mode .canvas-element {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.canvas.block-mode .canvas-element:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
}

.canvas.block-mode .canvas-element.selected {
  border-color: #00a8ff;
  background: rgba(0, 168, 255, 0.05);
  z-index: 10; /* Ensure slot picker is above other elements */
}

/* Transparent container - no card styling */
.canvas.block-mode .canvas-element.transparent-container {
  background: transparent;
  border-color: transparent;
}
.canvas.block-mode .canvas-element.transparent-container:hover {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.1);
}
.canvas.block-mode .canvas-element.transparent-container.selected {
  background: transparent;
  border-color: #00a8ff;
}

/* Out of bounds warning - block extends beyond grid */
.canvas.block-mode .canvas-element.out-of-bounds {
  border: 2px solid #ff4444 !important;
  background: rgba(255, 68, 68, 0.1) !important;
  box-shadow: 0 0 0 2px rgba(255, 68, 68, 0.2);
}

/* Block mode element content adjustments */
.canvas.block-mode .canvas-element .element-content {
  min-height: 40px;
  height: auto;
}

/* Adjust specific element types for block mode */
.canvas.block-mode .canvas-element[data-type="heading"] .element-content {
  padding: 12px 16px;
}

.canvas.block-mode .canvas-element[data-type="text_box"] .element-content {
  padding: 16px;
  min-height: 60px;
}

.canvas.block-mode .canvas-element[data-type="post"] .element-content {
  min-height: 100px;
  display: block; /* Allow natural flow for tweet scaling */
  overflow: visible;
}

/* Block mode element positioning */
.canvas.block-mode .canvas-element {
  position: relative;
}

/* Hide grid overlay in block mode */
.canvas.block-mode .canvas-grid-overlay {
  display: none;
}

/* Canvas wrapper auto-height in block mode */
.collection-unified-editor .canvas-wrapper:has(.canvas.block-mode) {
  height: auto !important;
  /* Override JS-set margin-bottom which is calculated for freeform zoom */
  margin-bottom: 0 !important;
}

/* ============================================================================
   Block Mode Layout - Based on timeline-editor.css pattern
   ============================================================================ */

/* Main container in block mode */
.collection-unified-editor:has(.canvas.block-mode) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Editor layout - flex row, grows with content */
.collection-unified-editor:has(.canvas.block-mode) .editor-main-layout {
  display: flex;
  flex-direction: row;
  gap: 0;
  position: relative;
}

/* Sidebar - sticky with viewport height (like timeline-post-sidebar) */
.collection-unified-editor:has(.canvas.block-mode) .canva-sidebar {
  position: sticky;
  top: 0;
  height: calc(100vh - 100px); /* viewport - navbar - toolbar */
  min-height: 0; /* Override base min-height: 100% */
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  overflow: visible; /* Allow panel to extend over canvas */
  z-index: 50;
}

/* Canvas area - grows with content, page-level scroll */
.collection-unified-editor:has(.canvas.block-mode) .canvas-main-area {
  flex: 1;
  min-width: 0;
}

/* Drag ghost visual feedback */
.canvas.block-mode .drag-ghost {
  animation: ghost-pulse 1s ease-in-out infinite;
}

@keyframes ghost-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.3; }
}

/* Canvas scroll container - match portfolio page .section-container layout */
.collection-unified-editor:has(.canvas.block-mode) .canvas-scroll-container {
  display: block;
  /* Match .section-container: max-width 1400px with 2rem (32px) horizontal padding */
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
}

/* Canvas wrapper - height set dynamically by JS in block mode */
.collection-unified-editor:has(.canvas.block-mode) .canvas-wrapper {
  display: block; /* Override any flex behavior */
  width: 100%;
  min-height: 0;
  margin: 0 0 60px 0;
  flex-shrink: unset; /* Remove flex-shrink: 0 from base */
  border: none; /* Remove dashed border in block mode */
}

/* Canvas - height set dynamically by JS based on block positions */
/* Fill available width - match how content renders on view pages */
.collection-unified-editor:has(.canvas.block-mode) .canvas {
  width: 100%;
  min-height: 400px;
  margin: 0;
}

/* Sidebar rail - full height, subtle border */
.collection-unified-editor:has(.canvas.block-mode) .canva-sidebar-rail {
  flex-shrink: 0;
  height: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.05); /* Subtler separator */
}

/* Sidebar panel - absolutely positioned so it doesn't push layout */
.collection-unified-editor:has(.canvas.block-mode) .canva-sidebar-panel {
  position: absolute;
  top: 0;
  left: 56px; /* Position after rail */
  bottom: 0;
  width: 0;
  overflow: hidden;
  transition: width 0.2s ease;
  background: transparent;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.collection-unified-editor:has(.canvas.block-mode) .canva-sidebar-panel.expanded {
  width: 380px;
}

/* Panel content area - this is what scrolls */
.collection-unified-editor:has(.canvas.block-mode) .canva-panel.active {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.collection-unified-editor:has(.canvas.block-mode) .canva-panel-content {
  flex: 1;
  min-height: 0; /* Allow flex child to shrink */
  overflow-y: auto; /* Scroll internally */
}

/* Block mode empty state */
.canvas.block-mode .canvas-empty-state {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  padding: 60px 20px;
}

/* Add Block Zone */
.block-add-zone {
  width: 100%;
  padding: 24px;
  border: 2px dashed rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  transition: all 0.15s ease;
  order: 9999; /* Always appear last in flexbox */
}

/* Hide the add zone when canvas has elements */
.canvas.has-elements .block-add-zone {
  display: none;
}

.block-add-zone:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.02);
}

.block-add-zone-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 13px;
}

.block-add-zone-content svg {
  opacity: 0.5;
}

/* ============================================================================
   Athlete Header Block
   ============================================================================ */

.canvas-element[data-type="athlete_header"] .element-content {
  padding: 0;
  background: transparent;
  height: 100%; /* Fill canvas element height */
}

.athlete-header-block {
  display: flex;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  overflow: hidden; /* Clip content and maintain border radius */
  min-height: 120px;
  height: 100%; /* Fill container height when resized */
}

.athlete-header-image-section {
  width: 140px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  padding: 12px;
  height: 100%; /* Fill parent height */
}

.athlete-header-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.athlete-header-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.athlete-header-image-placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.athlete-header-info-section {
  flex: 1;
  padding: 12px 16px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.athlete-header-name {
  margin-bottom: 4px;
}

.athlete-header-first-name {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.1;
}

.athlete-header-last-name {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.athlete-header-placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.athlete-header-team-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.athlete-header-bio-table {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 11px;
}

.athlete-header-bio-label {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
}

.athlete-header-bio-value {
  color: #fff;
  font-weight: 500;
}

.athlete-header-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.athlete-header-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
}

.athlete-header-status-dot.inactive {
  background: #ef4444;
}

.athlete-header-status-dot.retired {
  background: #6b7280;
}

.athlete-header-social {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.athlete-header-social-link {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s ease;
}

.athlete-header-social-link:hover {
  color: #00a8ff;
}

/* Block mode adjustments for specific element types */
.canvas.block-mode .canvas-element[data-type="athlete_header"] {
  min-height: auto;
}

.canvas.block-mode .canvas-element[data-type="athlete_header"] .element-content {
  padding: 0;
  width: 100%;
  height: 100%;
}

/* Athlete Bio Block */
.canvas.block-mode .canvas-element[data-type="athlete_bio"] {
  min-height: auto;
}

.canvas.block-mode .canvas-element[data-type="athlete_bio"] .element-content {
  padding: 0;
  width: 100%;
  height: 100%;
}

.canvas-element[data-type="athlete_bio"] .element-content {
  padding: 0;
  background: transparent;
  height: 100%; /* Fill canvas element height */
}

/* Athlete Bio Block Styling
   NOTE: These styles must match .ab-* classes in collection-blocks.css
   to ensure WYSIWYG consistency between editor and view pages */
.athlete-bio-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 16px 20px;
  min-height: 120px;
  height: 100%; /* Fill container height when resized */
  overflow: hidden; /* Handle overflow when content is larger than container */
}

.athlete-bio-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 10px;
}

.athlete-bio-text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #fff;
  white-space: pre-wrap;
}

.athlete-bio-placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
  font-size: 13px;
  font-style: italic;
}

.athlete-bio-awards {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 16px;
  margin-top: 8px;
}

.athlete-bio-awards-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.athlete-bio-award-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
}

.athlete-bio-award-year {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}

.athlete-bio-award-title {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}

.athlete-bio-awards-empty {
  color: rgba(255, 255, 255, 0.3);
  font-size: 13px;
  font-style: italic;
}

/* ============================================================================
   Article Header Block
   ============================================================================ */

.canvas-element[data-type="article_header"] .element-content {
  height: 100%;
}

/* ============================================================================
   General Blocks (heading, text_box, divider)
   ============================================================================ */

/* Heading block - no container styling (WYSIWYG) */
.canvas.block-mode .canvas-element[data-type="heading"] {
  min-height: auto;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.canvas.block-mode .canvas-element[data-type="heading"]:hover,
.canvas.block-mode .canvas-element[data-type="heading"].selected {
  background: transparent !important;
}

.canvas.block-mode .canvas-element[data-type="heading"].selected {
  outline: 2px solid #00a8ff;
  outline-offset: 2px;
}

.canvas.block-mode .canvas-element[data-type="heading"] .element-content {
  height: 100%;
}

.heading-block {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
}

.heading-text {
  margin: 0;
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
}

.heading-text.placeholder {
  color: rgba(255, 255, 255, 0.3);
}

h1.heading-text {
  font-size: 32px;
  letter-spacing: -0.02em;
}

h2.heading-text {
  font-size: 24px;
  letter-spacing: -0.01em;
}

h3.heading-text {
  font-size: 18px;
}

/* Heading editor */
.heading-block-editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.heading-level-selector {
  display: flex;
  gap: 8px;
}

.heading-level-btn {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.heading-level-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.heading-level-btn.active {
  background: rgba(59, 130, 246, 0.2);
  border-color: #3b82f6;
  color: #3b82f6;
}

.heading-text-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #fff;
  font-size: 16px;
  outline: none;
}

.heading-text-input:focus {
  border-color: rgba(255, 255, 255, 0.2);
}

.heading-text-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* Text box block - no container styling (WYSIWYG) */
.canvas.block-mode .canvas-element[data-type="text_box"] {
  min-height: auto;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.canvas.block-mode .canvas-element[data-type="text_box"]:hover,
.canvas.block-mode .canvas-element[data-type="text_box"].selected {
  background: transparent !important;
}

.canvas.block-mode .canvas-element[data-type="text_box"].selected {
  outline: 2px solid #00a8ff;
  outline-offset: 2px;
}

.canvas.block-mode .canvas-element[data-type="text_box"] .element-content {
  height: 100%;
}

.text-box-block {
  display: flex;
  align-items: flex-start;
  height: 100%;
  padding: 0;
}

.text-box-content {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.text-box-content.placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* Text box editor */
.text-box-block-editor {
  display: flex;
  flex-direction: column;
}

.text-box-textarea {
  width: 100%;
  min-height: 150px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #fff;
  font-size: 16px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  font-family: inherit;
}

.text-box-textarea:focus {
  border-color: rgba(255, 255, 255, 0.2);
}

.text-box-textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* Divider block - no container styling (WYSIWYG), fixed height */
.canvas.block-mode .canvas-element[data-type="divider"] {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.canvas.block-mode .canvas-element[data-type="divider"]:hover,
.canvas.block-mode .canvas-element[data-type="divider"].selected {
  background: transparent !important;
}

.canvas.block-mode .canvas-element[data-type="divider"].selected {
  outline: 2px solid #00a8ff;
  outline-offset: 2px;
}

.canvas.block-mode .canvas-element[data-type="divider"] .element-content {
  height: 100%;
  display: flex;
  align-items: center;
}

.divider-block {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0;
}

.divider-line {
  width: 100%;
  margin: 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Inline divider width controls */
.divider-inline-controls {
  position: absolute;
  top: 50%;
  right: -100px;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: rgba(30, 30, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  z-index: 10;
}

.canvas-element[data-type="divider"].selected .divider-inline-controls {
  display: flex;
}

.divider-inline-controls .divider-width-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.divider-inline-controls .divider-width-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.divider-inline-controls .divider-width-btn.active {
  background: rgba(0, 168, 255, 0.2);
  border-color: rgba(0, 168, 255, 0.5);
  color: #00a8ff;
}

/* Inline editing styles for heading and text_box */
.heading-text[contenteditable="true"],
.text-box-content[contenteditable="true"] {
  outline: none;
  cursor: text;
}

.heading-text[contenteditable="true"]:focus,
.text-box-content[contenteditable="true"]:focus {
  background: rgba(0, 168, 255, 0.05);
  border-radius: 4px;
}

.divider-preview {
  padding: 12px 0;
}

.divider-preview .divider-line {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Article header - standard container styling, min-height auto for content sizing */
.canvas.block-mode .canvas-element[data-type="article_header"] {
  min-height: auto;
}

.canvas.block-mode .canvas-element[data-type="article_header"] .element-content {
  width: 100%;
  height: 100%;
}

.article-header-block {
  padding: 24px 16px;
  text-align: center;
}

.article-header-title {
  margin: 0 0 12px 0;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.article-header-title.placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.article-header-subtitle {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.article-header-subtitle.placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
}

.article-header-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

.article-header-meta.placeholder {
  color: rgba(255, 255, 255, 0.25);
}

/* Article header inline editing */
.article-header-title[contenteditable="true"],
.article-header-subtitle[contenteditable="true"] {
  outline: none;
  cursor: text;
}

.article-header-title[contenteditable="true"]:focus,
.article-header-subtitle[contenteditable="true"]:focus {
  background: rgba(0, 168, 255, 0.05);
  border-radius: 4px;
}

.article-header-author,
.article-header-date {
  outline: none;
  cursor: text;
}

.article-header-author.placeholder,
.article-header-date.placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.article-header-author[contenteditable="true"]:focus,
.article-header-date[contenteditable="true"]:focus {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 168, 255, 0.1);
  border-radius: 2px;
  padding: 0 4px;
  margin: 0 -4px;
}

.article-header-divider {
  color: rgba(255, 255, 255, 0.3);
}

/* Inline article header width controls */
.article-header-inline-controls {
  position: absolute;
  top: 50%;
  right: -100px;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: rgba(30, 30, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  z-index: 10;
}

.canvas-element[data-type="article_header"].selected .article-header-inline-controls {
  display: flex;
}

.article-header-inline-controls .article-header-width-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.article-header-inline-controls .article-header-width-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.article-header-inline-controls .article-header-width-btn.active {
  background: rgba(0, 168, 255, 0.2);
  border-color: rgba(0, 168, 255, 0.5);
  color: #00a8ff;
}

/* Separator in inline controls */
.inline-controls-separator {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 2px;
}

/* Container style toggle button */
.article-header-style-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.article-header-style-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.article-header-style-btn.active {
  background: rgba(0, 168, 255, 0.2);
  border-color: rgba(0, 168, 255, 0.5);
  color: #00a8ff;
}

/* Transparent style variant for article header */
.article-header-block.transparent {
  background: transparent;
  border: none;
}

/* Transparent style variant for rich text */
.rich-text-block.transparent {
  background: transparent;
}
.rich-text-block.transparent .rich-text-content {
  background: transparent;
}

/* Style toggle active state in rich text toolbar */
.rich-text-style-toggle.active {
  background: rgba(0, 168, 255, 0.2) !important;
  color: #00a8ff !important;
}

/* Article header form textarea */
.article-header-form textarea {
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
}

.article-header-form textarea:focus {
  border-color: rgba(0, 168, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.1);
  outline: none;
}

.article-header-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* ============================================================================
   Pull Quote Block
   ============================================================================ */

.canvas-element[data-type="pull_quote"] .element-content {
  height: 100%;
}

.canvas.block-mode .canvas-element[data-type="pull_quote"] {
  min-height: auto;
}

.canvas.block-mode .canvas-element[data-type="pull_quote"] .element-content {
  width: 100%;
  height: 100%;
}

.pull-quote-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 24px;
  border-left: 4px solid currentColor;
  height: 100%;
  box-sizing: border-box;
}

.pull-quote-text {
  margin: 0 0 8px 0;
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  color: #fff;
  line-height: 1.4;
  outline: none;
  cursor: text;
}

.pull-quote-text.placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 400;
}

.pull-quote-attribution {
  margin: 0;
  font-size: 14px;
  font-style: normal;
  color: rgba(255, 255, 255, 0.5);
  outline: none;
  cursor: text;
}

.pull-quote-attribution.placeholder {
  color: rgba(255, 255, 255, 0.25);
}

/* Pull quote inline width controls */
.pull-quote-inline-controls {
  position: absolute;
  top: 50%;
  right: -100px;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: rgba(30, 30, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  z-index: 10;
}

.canvas-element[data-type="pull_quote"].selected .pull-quote-inline-controls {
  display: flex;
}

.pull-quote-inline-controls .pull-quote-width-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pull-quote-inline-controls .pull-quote-width-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.pull-quote-inline-controls .pull-quote-width-btn.active {
  background: rgba(0, 168, 255, 0.2);
  border-color: rgba(0, 168, 255, 0.5);
  color: #00a8ff;
}

/* ============================================================================
   Rich Text Editor Block
   ============================================================================ */

.canvas-element[data-type="rich_text"] .element-content {
  padding: 0;
  background: transparent;
  overflow: visible;
}

/* Rich text block - use absolute positioning to fill parent */
.canvas.block-mode .canvas-element[data-type="rich_text"] .element-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rich-text-block {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  overflow: hidden;
}

.rich-text-toolbar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  background: rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  width: 40px;
}

.rich-text-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.rich-text-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.rich-text-btn:active {
  background: rgba(255, 255, 255, 0.15);
}

.rich-text-separator {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 0;
  flex-shrink: 0;
}

/* Width selector for 1/2/3 column layouts */
.rich-text-width-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: auto;
}

.rich-text-width-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.rich-text-width-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.rich-text-width-btn.active {
  background: rgba(0, 168, 255, 0.2);
  border-color: rgba(0, 168, 255, 0.5);
  color: #00a8ff;
}

/* Color picker */
.rich-text-color-picker {
  position: relative;
  display: flex;
  align-items: center;
}

.rich-text-color-btn {
  position: relative;
  padding-bottom: 6px !important;
}

.rich-text-color-indicator {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 3px;
  background: #ffffff;
  border-radius: 1px;
}

.rich-text-color-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* Toolbar toggle button */
.rich-text-toolbar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.rich-text-toolbar-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.rich-text-toolbar-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}

.rich-text-toolbar-buttons::-webkit-scrollbar {
  display: none;
}

/* Collapsed toolbar state - narrow strip on the left */
.rich-text-block.toolbar-collapsed .rich-text-toolbar {
  width: 28px;
  padding: 6px 4px;
  background: transparent;
  border-right: none;
}

.rich-text-block.toolbar-collapsed .rich-text-toolbar-buttons {
  display: none;
}

.rich-text-block.toolbar-collapsed .rich-text-toolbar-toggle {
  color: rgba(255, 255, 255, 0.3);
}

.rich-text-block.toolbar-collapsed .rich-text-toolbar-toggle:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
}

/* Keep the block background and styling when collapsed */
.rich-text-block.toolbar-collapsed {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
}

.rich-text-block.toolbar-collapsed .rich-text-content {
  background: rgba(255, 255, 255, 0.02);
  cursor: move;
  user-select: none;
}

.rich-text-content {
  flex: 1;
  min-height: 0; /* Allow shrinking below content size */
  padding: 16px;
  color: #fff;
  font-size: 15px;
  line-height: 1.7;
  outline: none;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.02);
  cursor: text;
}

.rich-text-content:empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

.rich-text-content:focus {
  background: rgba(255, 255, 255, 0.02);
}

/* Rich text content styles */
.rich-text-content p {
  margin: 0 0 1em 0;
}

.rich-text-content p:last-child {
  margin-bottom: 0;
}

.rich-text-content h2 {
  font-size: 1.5em;
  font-weight: 600;
  margin: 0 0 0.75em 0;
  color: #fff;
}

.rich-text-content ul,
.rich-text-content ol {
  margin: 0 0 1em 0;
  padding-left: 1.5em;
}

.rich-text-content li {
  margin-bottom: 0.25em;
}

.rich-text-content blockquote {
  margin: 0 0 1em 0;
  padding: 0.5em 0 0.5em 1em;
  border-left: 3px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
}

.rich-text-content a {
  color: #00a8ff;
  text-decoration: underline;
}

.rich-text-content strong,
.rich-text-content b {
  font-weight: 600;
  color: #fff;
}

/* Panel section label */
.panel-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  padding: 8px 12px 4px;
  margin: 0;
}

/* ============================================================================
   Athlete Header Editor Modal
   ============================================================================ */

.athlete-editor-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.athlete-editor-modal {
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  margin: 20px;
  background: var(--color-bg-elevated, #141416);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.athlete-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.athlete-editor-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.athlete-editor-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 24px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.athlete-editor-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.athlete-editor-form {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.athlete-editor-section {
  margin-bottom: 24px;
}

.athlete-editor-section:last-child {
  margin-bottom: 0;
}

.athlete-editor-section h4 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
}

.athlete-editor-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.athlete-editor-row:last-child {
  margin-bottom: 0;
}

.athlete-editor-row-4 {
  grid-template-columns: repeat(4, 1fr);
}

.athlete-editor-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.athlete-editor-field label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

.athlete-editor-field input,
.athlete-editor-field select {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.athlete-editor-field input:focus,
.athlete-editor-field select:focus {
  border-color: rgba(0, 168, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.1);
}

.athlete-editor-field input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.athlete-editor-field input[type="color"] {
  padding: 4px;
  height: 42px;
  cursor: pointer;
}

.athlete-editor-field select {
  cursor: pointer;
}

.athlete-editor-field select option {
  background: #141416;
  color: #fff;
}

.athlete-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 24px;
}

.athlete-editor-cancel,
.athlete-editor-save {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.athlete-editor-cancel {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
}

.athlete-editor-cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.athlete-editor-save {
  background: rgba(0, 168, 255, 0.15);
  border: 1px solid rgba(0, 168, 255, 0.3);
  color: #00a8ff;
}

.athlete-editor-save:hover {
  background: rgba(0, 168, 255, 0.25);
  border-color: rgba(0, 168, 255, 0.5);
}

/* Athlete Bio Editor - Awards list */
.athlete-bio-form .awards-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.athlete-bio-form .award-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.athlete-bio-form .award-year-input {
  width: 80px;
  flex-shrink: 0;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
}

.athlete-bio-form .award-title-input {
  flex: 1;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
}

.athlete-bio-form .award-year-input:focus,
.athlete-bio-form .award-title-input:focus {
  border-color: rgba(0, 168, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.1);
  outline: none;
}

.athlete-bio-form .award-year-input::placeholder,
.athlete-bio-form .award-title-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.athlete-bio-form .award-remove-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: rgba(255, 100, 100, 0.1);
  border: 1px solid rgba(255, 100, 100, 0.2);
  border-radius: 6px;
  color: rgba(255, 100, 100, 0.7);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.athlete-bio-form .award-remove-btn:hover {
  background: rgba(255, 100, 100, 0.2);
  border-color: rgba(255, 100, 100, 0.4);
  color: #ff6464;
}

.athlete-bio-form .add-award-btn {
  align-self: flex-start;
  padding: 8px 16px;
  background: rgba(0, 168, 255, 0.1);
  border: 1px solid rgba(0, 168, 255, 0.2);
  border-radius: 6px;
  color: #00a8ff;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.athlete-bio-form .add-award-btn:hover {
  background: rgba(0, 168, 255, 0.2);
  border-color: rgba(0, 168, 255, 0.3);
}

.athlete-bio-form textarea {
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  min-height: 120px;
}

.athlete-bio-form textarea:focus {
  border-color: rgba(0, 168, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.1);
  outline: none;
}

.athlete-bio-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 768px) {
  .element-sidebar {
    width: 160px;
  }

  .canvas-scroll-container {
    padding: 20px;
  }
}

/* ============================================================================
   Login Popup
   ============================================================================ */

.login-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.login-popup {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 20px;
  padding: 32px;
  background: var(--color-bg-elevated, #141416);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.login-popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.login-popup-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.login-popup-header {
  text-align: center;
  margin-bottom: 24px;
}

.login-popup-header h2 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-primary, #fff);
}

.login-popup-header p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
}

.login-popup-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-popup-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-popup-field label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
}

.login-popup-field input {
  padding: 12px 14px;
  background: var(--color-bg-base, #1e1f24);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: var(--color-text-primary, #fff);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-popup-field input:focus {
  border-color: rgba(0, 168, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.1);
}

.login-popup-field input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.login-popup-error {
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #ef4444;
  font-size: 0.85rem;
  text-align: center;
  display: none;
}

.login-popup-error:not(:empty) {
  display: block;
}

.login-popup-submit {
  padding: 14px 20px;
  background: transparent;
  border: 2px solid rgba(0, 168, 255, 0.6);
  border-radius: 8px;
  color: #00a8ff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.login-popup-submit:hover:not(:disabled) {
  background: rgba(0, 168, 255, 0.1);
  border-color: rgba(0, 168, 255, 0.8);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 0 25px rgba(0, 168, 255, 0.4), inset 0 0 20px rgba(0, 168, 255, 0.1);
}

.login-popup-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.login-popup-footer {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.login-popup-footer p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
}

.login-popup-footer a {
  color: var(--color-accent-primary, #00a8ff);
  text-decoration: none;
  font-weight: 500;
}

.login-popup-footer a:hover {
  text-decoration: underline;
}

/* ============================================================================
   Image Block Styles
   ============================================================================ */

/* Image block */
.canvas.block-mode .canvas-element[data-type="image"] {
  min-height: auto;
}

.canvas.block-mode .canvas-element[data-type="image"] .element-content {
  padding: 0;
  background: transparent;
  width: 100%;
  height: 100%;
}

/* Image placeholder */
.image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.4);
  cursor: grab;
  transition: all 0.2s ease;
}

/* In block mode, image blocks use grab cursor for repositioning */
.canvas.block-mode .canvas-element[data-type="image"] .image-dropzone {
  cursor: grab;
}

.image-placeholder:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
}

.image-placeholder.drag-active {
  background: rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
  color: #3b82f6;
}

.image-placeholder svg {
  margin-bottom: 12px;
  opacity: 0.7;
}

.image-placeholder-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 500;
}

.image-placeholder-hint {
  margin: 0;
  font-size: 12px;
  opacity: 0.7;
}

/* Image content wrapper */
.image-content-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.canvas.block-mode .canvas-element[data-type="image"] .element-content img {
  width: 100%;
  max-width: none;
  max-height: none;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
}

.image-caption {
  margin: 8px 0 0;
  padding: 0 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  font-style: italic;
}

/* Image uploading state */
.image-uploading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.5);
  gap: 12px;
}

.upload-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #00a8ff;
  border-radius: 50%;
  animation: upload-spin 0.8s linear infinite;
}

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

/* Image source menu (upload vs URL) */
.image-source-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: #141416;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.image-source-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.image-source-option:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ============================================================================
   Image Editor Modal
   ============================================================================ */

.image-editor-modal {
  max-width: 920px;
  max-height: 95vh;
}

.image-editor-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.image-editor-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0 20px;
}

.image-editor-tab {
  padding: 12px 20px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: -1px;
}

.image-editor-tab:hover {
  color: rgba(255, 255, 255, 0.8);
}

.image-editor-tab.active {
  color: #00a8ff;
  border-bottom-color: #00a8ff;
}

.image-editor-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  min-height: 0;
}

.image-editor-panel {
  display: none;
}

.image-editor-panel.active {
  display: block;
}

/* Library tab: flex column, fill parent, no outer scroll */
.image-editor-panel[data-panel="library"].active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* When library tab is active, lock the modal to a definite height
   so flex children have a fixed constraint to fill (not grow into).
   max-height alone lets the modal grow with content — height does not. */
.image-editor-modal:has(.image-editor-panel[data-panel="library"].active) {
  height: 95vh;
}

.image-editor-modal:has(.image-editor-panel[data-panel="library"].active) .image-editor-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Upload Tab */
.image-upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: all 0.2s ease;
  color: rgba(255, 255, 255, 0.5);
  min-height: 250px;
}

.image-upload-dropzone:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
}

.image-upload-dropzone.drag-active {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.image-upload-dropzone svg {
  margin-bottom: 16px;
  opacity: 0.7;
}

.image-upload-dropzone .upload-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 500;
}

.image-upload-dropzone .upload-hint {
  margin: 0;
  font-size: 13px;
  opacity: 0.7;
}

.image-upload-dropzone .image-file-input {
  display: none;
}

.image-upload-dropzone .upload-preview-img {
  max-width: 100%;
  max-height: 180px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.image-upload-dropzone .upload-success {
  margin: 0 0 8px;
  font-size: 14px;
  color: #10b981;
}

.image-upload-dropzone .upload-change-btn {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.image-upload-dropzone .upload-change-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Library Tab - LibraryBrowserPopup container */
.image-library-browser-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.image-library-browser-container .library-browser-popup {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* URL Tab */
.image-url-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.image-url-form label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

.image-url-input {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
}

.image-url-input:focus {
  border-color: rgba(0, 168, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.1);
}

.image-url-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.image-url-preview {
  min-height: 150px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.image-url-preview img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
}

.image-url-preview .preview-placeholder,
.image-url-preview .preview-error {
  color: rgba(255, 255, 255, 0.3);
  font-size: 13px;
  padding: 20px;
}

.image-url-preview .preview-error {
  color: #ef4444;
}

/* Image Settings */
.image-settings {
  display: none;
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}

.image-settings.visible {
  display: block;
}

.image-settings-row {
  margin-bottom: 12px;
}

.image-settings-row:last-child {
  margin-bottom: 0;
}

.image-settings .athlete-editor-field input {
  width: 100%;
}

/* Image editor actions */
.image-editor-body .athlete-editor-actions {
  padding: 16px 20px;
  margin-top: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gallery editor title row (inside modal, above tabs) */
.gallery-editor-title-row {
  padding: 12px 20px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.gallery-editor-title-row label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  margin: 0;
}

.gallery-editor-title-input {
  flex: 1;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  margin: 0;
}

.gallery-editor-title-input:focus {
  outline: none;
  border-color: rgba(0, 168, 255, 0.4);
}

/* Gallery selected posts section inside modal */
.gallery-editor-selected-section {
  flex-shrink: 0;
  max-height: 200px;
  overflow-y: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.gallery-editor-selected-section .gallery-selected-posts {
  padding: 10px 20px;
}

.gallery-editor-selected-section .gallery-selected-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}

.gallery-editor-selected-section .gallery-posts-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 2px;
}

.gallery-editor-selected-section .gallery-post-thumb-cell {
  width: 36px;
  padding: 4px;
  cursor: pointer;
}

.gallery-editor-selected-section .gallery-post-thumb-cell img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
}

.gallery-editor-selected-section .gallery-post-info-cell {
  padding: 4px 8px;
}

.gallery-editor-selected-section .gallery-post-title {
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
}

.gallery-editor-selected-section .gallery-post-meta {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

.gallery-editor-selected-section .gallery-post-action-cell {
  width: 30px;
  text-align: center;
}

.gallery-editor-selected-section .gallery-remove-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  margin: 0;
}

.gallery-editor-selected-section .gallery-remove-btn:hover {
  color: #ff4444;
  background: rgba(255, 68, 68, 0.1);
}

.gallery-editor-selected-section .gallery-post-no-thumb {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.2);
}

/* ============================================================================
   Embed Block Styles
   ============================================================================ */

/* Embed block */
.canvas.block-mode .canvas-element[data-type="embed"] {
  min-height: auto;
}

.canvas.block-mode .canvas-element[data-type="embed"] .element-content {
  padding: 0;
  background: transparent;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Embed placeholder */
.embed-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: rgba(255, 255, 255, 0.02);
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer !important;
  transition: all 0.2s ease;
}

.embed-placeholder:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.6);
}

.embed-placeholder svg {
  margin-bottom: 12px;
  opacity: 0.7;
}

.embed-placeholder-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 500;
}

.embed-placeholder-hint {
  margin: 0;
  font-size: 12px;
  opacity: 0.7;
}

/* Embed block content */
.embed-block {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  overflow: hidden;
}

/* YouTube embed */
.embed-block.embed-youtube .youtube-embed {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.embed-block.embed-youtube .youtube-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

/* Twitter embed */
.embed-block.embed-twitter {
  padding: 8px;
}

.embed-block.embed-twitter .tweet-container {
  max-width: 100%;
}

/* Instagram embed */
.embed-block.embed-instagram .instagram-embed {
  width: 100%;
  padding: 12px;
}

.embed-block.embed-instagram .instagram-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.5);
}

/* TikTok embed */
.embed-block.embed-tiktok .tiktok-embed {
  width: 100%;
  padding: 12px;
}

.embed-block.embed-tiktok .tiktok-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.5);
}

/* Generic link embed */
.embed-block.embed-generic .embed-link-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

.embed-block.embed-generic .embed-url {
  color: #00a8ff;
  font-size: 13px;
  word-break: break-all;
  text-decoration: none;
}

.embed-block.embed-generic .embed-url:hover {
  text-decoration: underline;
}

/* ============================================================================
   Embed Editor Modal
   ============================================================================ */

.embed-editor-modal {
  max-width: 600px;
  max-height: 85vh;
}

.embed-editor-body {
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 20px;
}

.embed-editor-platforms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}

.embed-editor-platforms .platform-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
}

.embed-editor-platforms .platform-icon:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}

.embed-url-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.embed-url-input-wrapper label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

.embed-url-input {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
}

.embed-url-input:focus {
  border-color: rgba(0, 168, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.1);
}

.embed-url-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.embed-preview-area {
  min-height: 200px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.embed-preview-placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
}

.embed-preview-youtube {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
}

.embed-preview-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.embed-preview-twitter {
  width: 100%;
  padding: 12px;
}

.embed-preview-instagram,
.embed-preview-tiktok,
.embed-preview-generic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

.embed-preview-instagram .platform-badge,
.embed-preview-tiktok .platform-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

.embed-preview-url {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  word-break: break-all;
  max-width: 100%;
}

.embed-detected-platform {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 6px;
  font-size: 13px;
}

.embed-detected-platform.visible {
  display: flex;
}

.embed-detected-platform .detected-label {
  color: rgba(255, 255, 255, 0.5);
}

.embed-detected-platform .detected-platform {
  color: #10b981;
  font-weight: 500;
}

.embed-editor-body .athlete-editor-actions {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 0;
}

/* ============================================================
   Stats Header Block
   ============================================================ */

.canvas-element[data-type="stats_header"] .element-content {
  padding: 0;
  background: transparent;
  height: 100%;
}

.canvas.block-mode .canvas-element[data-type="stats_header"] {
  min-height: auto;
}

.canvas.block-mode .canvas-element[data-type="stats_header"] .element-content {
  padding: 0;
  width: 100%;
  height: 100%;
}

.stats-header-block {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  min-height: 120px;
  height: 100%;
  background: rgba(255, 255, 255, 0.04);
}

.stats-header-title {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  padding: 12px 16px 4px;
  line-height: 1.5;
}

.stats-header-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 12px 16px;
  gap: 12px;
  flex: 1;
  align-items: center;
  overflow: hidden;
}

.stats-header-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}

.stats-header-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.stats-header-value {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.stats-header-rank {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 2px;
}

.stats-header-empty {
  padding: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
  font-size: 13px;
}

/* Stats modal rows */
.stat-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.stat-row .stat-label-input { flex: 1; max-width: 100px; }
.stat-row .stat-value-input { flex: 1; max-width: 100px; }
.stat-row .stat-rank-input { flex: 1; max-width: 80px; }
.stat-row .stat-remove-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
}
.stat-row .stat-remove-btn:hover { color: #ef4444; }

/* ============================================================
   News Block
   ============================================================ */

.canvas-element[data-type="news"] .element-content {
  padding: 0;
  background: transparent;
  height: 100%;
}

.canvas.block-mode .canvas-element[data-type="news"] {
  min-height: auto;
}

.canvas.block-mode .canvas-element[data-type="news"] .element-content {
  padding: 0;
  width: 100%;
  height: 100%;
}

.news-block {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
}

.news-block > .ce-news-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0;
  padding: 14px 16px 0;
}

.news-article-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  align-items: center;
}

.news-article-item:last-child { border-bottom: none; }

.news-article-thumbnail {
  width: 80px;
  height: 60px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
}

.news-article-thumb-placeholder {
  background: rgba(255, 255, 255, 0.05);
}

.news-article-info {
  flex: 1;
  min-width: 0;
}

.news-article-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-article-author {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
}

.news-empty {
  padding: 32px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
  font-size: 13px;
}

/* News modal */
.news-url-input-row {
  display: flex;
  gap: 8px;
}

.news-url-field {
  flex: 1;
}

.news-url-status {
  font-size: 12px;
  margin-top: 4px;
  min-height: 18px;
}

.news-url-status.loading { color: #3b82f6; }
.news-url-status.warning { color: #f59e0b; }

.news-modal-article {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.news-modal-article-preview {
  display: flex;
  gap: 10px;
  flex: 1;
  align-items: center;
  min-width: 0;
}

.news-modal-thumb {
  width: 60px;
  height: 45px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
}

.news-modal-thumb-empty {
  background: rgba(255, 255, 255, 0.05);
}

.news-modal-article-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.news-modal-title-input,
.news-modal-author-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 4px 8px;
  color: #fff;
  font-size: 13px;
}

.news-modal-author-input {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.news-articles-empty {
  padding: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
  font-size: 13px;
}

.news-remove-btn {
  flex-shrink: 0;
}

/* ============================================================
   Post Block (Single Post Embed)
   ============================================================ */

/* Post block element content - transparent background, visible overflow for tweets */
.canvas-element[data-type="post"] .element-content {
  padding: 0;
  background: transparent;
  overflow: visible;
}

.canvas.block-mode .canvas-element[data-type="post"] {
  min-height: auto;
  overflow: visible;
}

.canvas.block-mode .canvas-element[data-type="post"] .element-content {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Post block wrapper - allow content to determine size */
.post-block {
  display: block;
  height: 100%;
  background: transparent;
  border-radius: 12px;
  overflow: visible;
}

/* Library-item wrapper for tweets in post blocks */
.post-block .library-item-twitter {
  width: 100%;
  display: block;
}

.post-block .library-item-twitter .tweet-container {
  width: 100%;
  overflow: visible;
}

.post-block-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 13px;
  height: 100%;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
}

/* Twitter posts need auto-height based on tweet content */
.post-block-twitter {
  /* No fixed height - let tweet scaling determine height */
}

/* Other embed types can use full height */
.post-block-youtube,
.post-block-tiktok,
.post-block-instagram {
  height: 100%;
}

/* Tweet containers need auto height - the JS will set the height based on tweet size */
.post-block .tweet-container {
  width: 100%;
  min-height: 100px;
}

.post-block .youtube-wrapper,
.post-block .tiktok-wrapper,
.post-block .instagram-container {
  height: 100%;
}

.post-block .instagram-container iframe {
  border: none !important;
}

.canvas-element:has(.library-item-si-content) {
  border: none !important;
  overflow: hidden;
  border-radius: 12px;
}
.canvas-element:has(.library-item-si-content) .element-content {
  width: 100%;
  height: 100%;
}
.canvas-element .library-item-si-content {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
}
/* Disable hover effects on featured-embed cards and instagram in editor */
.canvas-element .library-item-si-content .featured-embed:hover,
.canvas-element .library-item-si-content .featured-embed:hover .featured-embed-bg,
.canvas-element .library-item-instagram:hover {
  transform: none !important;
}
.canvas-element .library-item-si-content .featured-embed {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  background: #000;
}
.canvas-element .library-item-si-content .featured-embed-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #0c0c0e;
  mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.canvas-element .library-item-si-content .featured-embed-type {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  z-index: 5;
}
.canvas-element .library-item-si-content .featured-embed-type svg {
  width: 14px;
  height: 14px;
}
.canvas-element .library-item-si-content .featured-embed-bottom {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 5;
}
.canvas-element .library-item-si-content .featured-embed-title {
  font-size: 18px;
  font-weight: 600;
  color: white;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.canvas-element .library-item-si-content .featured-embed-attribution {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 5;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

.post-block .youtube-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.post-block .youtube-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.post-block .tiktok-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.post-block .tiktok-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.post-block-preview {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.post-block-thumbnail {
  width: 100%;
  flex: 1;
  min-height: 120px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.05);
}

.post-block-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
}

.post-block-info {
  padding: 12px 16px;
}

.post-block-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-block-author,
.post-block-provider {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}

/* ============================================================
   Post Gallery Block — iOS Folder Style
   ============================================================ */

.canvas-element[data-type="post_gallery"] .element-content {
  padding: 0;
  background: transparent;
  height: 100%;
}

.canvas.block-mode .canvas-element[data-type="post_gallery"] {
  min-height: auto;
}

.canvas.block-mode .canvas-element[data-type="post_gallery"] .element-content {
  width: 100%;
  height: 100%;
}

/* Empty state */
.post-gallery-block.post-gallery-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 13px;
  height: 100%;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
}

/* Collapsed folder card — fills full block width */
.post-gallery-folder {
  display: flex;
  flex-direction: column;
  height: 100%;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.post-gallery-folder:active {
  transform: scale(0.98);
}

/* Thumbnail grid — fills width with consistent padding */
.pg-folder-grid {
  display: grid;
  gap: 8px;
  flex: 1;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  padding: 12px;
}

/* 1 thumbnail: single full-width image */
.pg-folder-grid-1 {
  grid-template-columns: 1fr;
}

/* 2 thumbnails: side by side */
.pg-folder-grid-2 {
  grid-template-columns: 1fr 1fr;
}

/* 3 thumbnails: 2 top, 1 bottom-left */
.pg-folder-grid-3 {
  grid-template-columns: 1fr 1fr;
}

/* 4 thumbnails: 2x2 grid */
.pg-folder-grid-4 {
  grid-template-columns: 1fr 1fr;
}

.pg-folder-thumb {
  overflow: hidden;
  min-height: 0;
  border-radius: 8px;
}

.pg-folder-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* Title + count below thumbnails */
.pg-folder-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 4px;
  gap: 2px;
  flex-shrink: 0;
}

.pg-folder-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pg-folder-count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

/* ============================================================
   Gallery Overlay (Expanded View)
   ============================================================ */

.gallery-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  padding: 60px 40px 40px;
  animation: galleryFadeIn 0.2s ease;
}

.gallery-overlay-closing {
  animation: galleryFadeOut 0.2s ease forwards;
}

@keyframes galleryFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes galleryFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.gallery-overlay-header {
  text-align: center;
  margin-bottom: 28px;
  flex-shrink: 0;
}

.gallery-overlay-title {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.gallery-overlay-count {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
}

.gallery-overlay-close {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
  z-index: 10001;
  padding: 0;
}

.gallery-overlay-close:hover {
  opacity: 0.7;
}

.gallery-overlay-grid {
  position: relative;
  width: 100%;
  max-width: 1200px;
  min-height: 400px;
}

.gallery-overlay-grid .masonry-item {
  box-sizing: border-box;
}

.gallery-overlay-grid .tweet-container .twitter-tweet iframe {
  border-radius: 8px !important;
  color-scheme: light !important;
}

/* ============================================================
   Post Library Browser (WYSIWYG Editor)
   ============================================================ */

.post-editor-block {
  padding: 16px;
}

.post-editor-preview {
  margin-bottom: 16px;
}

.post-caption-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0 4px;
}
.post-caption-toggle label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-right: 4px;
}
.post-caption-toggle-btn {
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.post-caption-toggle-btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.post-caption-toggle-btn.active {
  background: rgba(0, 168, 255, 0.15);
  border-color: rgba(0, 168, 255, 0.4);
  color: #00a8ff;
}

.post-editor-actions {
  display: flex;
  gap: 12px;
}

.wysiwyg-remove-btn-text {
  background: transparent;
  border: none;
  color: rgba(255, 100, 100, 0.8);
  font-size: 13px;
  cursor: pointer;
  padding: 6px 12px;
  margin-top: 6px;
}

.wysiwyg-remove-btn-text:hover {
  color: #ff6b6b;
}

.post-preview-small {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.post-preview-thumb {
  width: 80px;
  height: 60px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
}

.post-preview-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-preview-info {
  flex: 1;
  min-width: 0;
}

.post-preview-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-preview-platform {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}

.post-library-header {
  margin-bottom: 16px;
}

.post-library-header h4 {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 12px 0;
}

/* Post Library Search */
.post-library-search {
  position: relative;
  display: flex;
  align-items: center;
}

.post-library-search svg {
  position: absolute;
  left: 12px;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

.post-library-search .post-search-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
}

.post-library-search .post-search-input:focus {
  outline: none;
  border-color: rgba(0, 168, 255, 0.5);
}

/* Type Filter Bar */
.post-library-type-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.post-type-btn {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.post-type-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.post-type-btn.active {
  background: rgba(0, 168, 255, 0.2);
  border-color: rgba(0, 168, 255, 0.5);
  color: #00a8ff;
}

/* Post Library Mosaic Grid - masonry layout for varying embed heights */
.post-library-mosaic {
  column-count: 2;
  column-gap: 12px;
  max-height: 500px;
  overflow-y: auto;
  padding: 4px;
}

.post-library-mosaic .masonry-item {
  break-inside: avoid;
  margin-bottom: 12px;
}

.post-library-mosaic[data-loading="true"] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.post-library-loading {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

.post-library-empty {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  text-align: center;
  padding: 32px;
  grid-column: 1 / -1;
}

/* Post Mosaic Card */
.post-mosaic-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.post-mosaic-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.2);
}

.post-mosaic-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

.post-mosaic-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-mosaic-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
}

.post-mosaic-placeholder svg {
  width: 32px;
  height: 32px;
  color: rgba(255, 255, 255, 0.2);
}

/* Type Badge */
.post-mosaic-type-badge {
  position: absolute;
  bottom: 40px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 5;
}

.post-mosaic-type-badge svg {
  width: 10px;
  height: 10px;
}

/* Platform-specific badge colors */
.post-mosaic-type-badge[data-platform="twitter"],
.post-mosaic-type-badge[data-platform="x"] {
  background: rgba(0, 0, 0, 0.7);
}

.post-mosaic-type-badge[data-platform="youtube"] {
  background: rgba(255, 0, 0, 0.6);
}

.post-mosaic-type-badge[data-platform="instagram"] {
  background: linear-gradient(45deg, rgba(253, 29, 29, 0.6), rgba(131, 58, 180, 0.6));
}

.post-mosaic-type-badge[data-platform="tiktok"] {
  background: rgba(0, 0, 0, 0.7);
}

/* Overlay */
.post-mosaic-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
}

.post-mosaic-title {
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Selected state */
.post-mosaic-card.selected {
  outline: 2px solid #00a8ff;
  outline-offset: 2px;
}

.post-mosaic-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: #00a8ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  z-index: 10;
}

.post-library-load-more {
  text-align: center;
  padding: 16px 0 8px;
}

/* Post Library Embed Items (actual embed rendering) */
.post-library-embed-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.post-library-embed-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.2);
}

.post-library-embed-item.selected {
  outline: 2px solid #00a8ff;
  outline-offset: 2px;
}

.post-embed-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: #00a8ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  z-index: 10;
}

/* Tweet embeds in library */
.post-library-embed-item .tweet-container {
  min-height: 150px;
}

.post-library-embed-item .tweet-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.post-library-embed-item .tweet-loading svg {
  width: 24px;
  height: 24px;
  opacity: 0.5;
}

/* YouTube embeds in library */
.post-library-embed-item .youtube-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}

.post-library-embed-item .youtube-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.post-library-embed-item .youtube-wrapper.youtube-loading .youtube-thumbnail-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-library-embed-item .youtube-wrapper.youtube-loading iframe {
  opacity: 0;
}

.post-library-embed-item .youtube-loading-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Media card fallback for other types */
.post-media-card {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

.post-media-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-media-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
}

.post-media-placeholder svg {
  color: rgba(255, 255, 255, 0.2);
}

.post-media-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
}

.post-media-overlay h3 {
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  margin: 0 0 4px 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-media-domain {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}

/* Loading spinner for library */
.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* TikTok fallback link */
.tiktok-embed-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border-radius: 12px;
}

.tiktok-embed-fallback a {
  color: #00f2ea;
  text-decoration: none;
  font-weight: 500;
  padding: 12px 24px;
  border: 1px solid #00f2ea;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}

.tiktok-embed-fallback a:hover {
  background: #00f2ea;
  color: #000;
}

/* ESPN Preview (from profile.css) */
.espn-preview {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.espn-preview img {
  width: 100%;
  height: auto;
  display: block;
  mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}

.espn-preview-overlay {
  position: absolute;
  inset: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.espn-preview-overlay h3 {
  margin: 0 0 12px 0;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.espn-preview-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.espn-preview-link:hover {
  color: #fff;
}

.espn-preview-no-image {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.espn-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

.espn-preview-placeholder svg {
  opacity: 0.5;
}

.espn-preview-placeholder h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
}

/* Substack Preview (from profile.css) */
.substack-preview {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.substack-preview img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 300px;
  object-fit: cover;
}

.substack-preview-overlay {
  position: absolute;
  inset: -2px;
  padding: 24px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9) 80%, rgba(0, 0, 0, 1));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.substack-preview-overlay h3 {
  margin: 0 0 4px 0;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}

.substack-preview-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #ff6719;
  text-decoration: none;
  transition: color 0.2s ease;
}

.substack-preview-link:hover {
  color: #ff8c4d;
}

.substack-preview-profile {
  background: linear-gradient(135deg, rgba(255, 103, 25, 0.15) 0%, rgba(255, 103, 25, 0.05) 100%);
  border: 1px solid rgba(255, 103, 25, 0.2);
  border-radius: 12px;
  padding: 32px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.substack-profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 400px;
}

.substack-profile-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 103, 25, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.substack-profile-icon svg {
  color: #ff6719;
}

.substack-profile-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}

/* Generic Link Preview (from profile.css) */
.generic-link-preview {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.generic-link-preview img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 300px;
  object-fit: cover;
  mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}

.generic-link-overlay {
  position: absolute;
  inset: 0;
  padding: 24px;
  padding-bottom: 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.generic-link-title {
  margin: 0 0 8px 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.generic-link-url {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.2s ease;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generic-link-url:hover {
  color: rgba(255, 255, 255, 0.8);
}

.generic-link-url svg {
  flex-shrink: 0;
}

.generic-link-no-image {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.05);
  text-align: center;
  padding: 32px;
}

.generic-link-placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.generic-link-no-image .generic-link-title {
  display: block;
  -webkit-line-clamp: unset;
}

/* Post Gallery Editor */
.post-gallery-editor-block {
  padding: 16px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.library-browse-active .post-gallery-editor-block {
  overflow: hidden;
}

.gallery-title-row {
  margin-bottom: 16px;
}

.gallery-title-row label {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 6px;
}

.gallery-title-input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
}

.gallery-title-input:focus {
  outline: none;
  border-color: rgba(0, 168, 255, 0.5);
}

.gallery-selected-posts {
  margin-bottom: 20px;
}

.gallery-selected-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
}

.gallery-posts-table-wrap {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: visible;
  padding: 4px 0;
}

.gallery-posts-table {
  width: 100%;
  border-collapse: collapse;
  background: none;
}

.gallery-post-row {
  background: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.gallery-post-thumb-cell,
.gallery-post-info-cell,
.gallery-post-action-cell {
  background: none;
}

.gallery-post-row:last-child {
  border-bottom: none;
}

.gallery-post-thumb-cell {
  width: 40px;
  padding: 8px 12px;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
}

.gallery-post-thumb-cell:hover::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 12px;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

.gallery-post-thumb-cell img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.gallery-thumb-uploading {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-post-no-thumb {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.2);
}

.gallery-post-info-cell {
  padding: 8px 8px;
  vertical-align: middle;
}

.gallery-post-title {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.gallery-post-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 2px;
}

.gallery-post-action-cell {
  width: 28px;
  padding: 8px 12px 8px 8px;
  vertical-align: middle;
  text-align: center;
}

.gallery-post-action-cell button {
  background: none;
  border: none;
  color: rgba(255, 100, 100, 0.6);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
}

.gallery-post-action-cell button:hover {
  color: rgba(255, 100, 100, 1);
  background: rgba(255, 100, 100, 0.1);
}

/* Browse Library button */
.gallery-browse-library-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.gallery-browse-library-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

/* Library browser container inside gallery editor */
.gallery-library-browser-container {
  margin-top: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.gallery-library-browser-container .library-browser-popup {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* --- LibraryBrowserPopup base styles (table + preview layout) --- */

/* ---- Filters container (mirrors portfolio .library-filters-container) ---- */
.library-browser-popup .lbp-filters-container {
  padding: 0 14px;
  flex-shrink: 0;
}

/* Row 0: Table header (search + count) — Pico resets */
.library-browser-popup .lbp-table-header {
  padding: 0 0 0.25rem;
}
.library-browser-popup .lbp-table-search-pill {
  margin: 0; /* Pico reset */
}
.library-browser-popup .lbp-table-search-input {
  margin: 0; /* Pico reset */
}

/* Row 2: Dropdowns row (type dropdown left) */
.library-browser-popup .lbp-dropdowns-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 6px;
}

/* Type dropdown (same as profile.css library-filter-dropdown) */
.library-browser-popup .lbp-type-dropdown {
  position: relative;
  z-index: 10;
}

.library-browser-popup .library-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm, 4px);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.library-browser-popup .library-dropdown-trigger:hover {
  background: rgba(0, 168, 255, 0.15);
  border-color: rgba(0, 168, 255, 0.3);
}

.library-browser-popup .library-filter-dropdown.open .library-dropdown-trigger {
  background: rgba(0, 168, 255, 0.2);
  border-color: rgba(0, 168, 255, 0.5);
  box-shadow: 0 0 8px rgba(0, 168, 255, 0.3);
}

.library-browser-popup .library-dropdown-label {
  color: rgba(255, 255, 255, 0.5);
}

.library-browser-popup .library-dropdown-value {
  color: white;
}

.library-browser-popup .library-dropdown-chevron {
  margin-left: 0.25rem;
  transition: transform 0.2s ease;
  opacity: 0.6;
}

.library-browser-popup .library-filter-dropdown.open .library-dropdown-chevron {
  transform: rotate(180deg);
}

.library-browser-popup .library-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 140px;
  background: var(--color-bg-base-mid, #0c0c0e);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 0.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  z-index: 100;
}

.library-browser-popup .library-filter-dropdown.open .library-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.library-browser-popup .library-dropdown-option {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.library-browser-popup .library-dropdown-option:hover {
  background: rgba(0, 168, 255, 0.15);
  color: white;
}

.library-browser-popup .library-dropdown-group {
  position: relative;
}

.library-browser-popup .library-dropdown-option.has-submenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.library-browser-popup .library-dropdown-option.has-submenu .submenu-chevron {
  margin-left: 0.5rem;
  opacity: 0.5;
  font-size: 0.85em;
}

.library-browser-popup .library-dropdown-submenu {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 160px;
  background: var(--color-bg-base-mid, #0c0c0e);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 0.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: all 0.15s ease;
  z-index: 101;
}

.library-browser-popup .library-dropdown-group:hover > .library-dropdown-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.library-browser-popup .library-dropdown-option .check-icon {
  display: inline-block;
  width: 14px;
  margin-right: 0.35rem;
  opacity: 0;
  font-size: 0.75rem;
  color: rgba(0, 168, 255, 0.9);
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}

.library-browser-popup .library-dropdown-option.selected .check-icon {
  opacity: 1;
}

.library-browser-popup .library-filter-dropdown.multi-select.open .library-dropdown-menu {
  opacity: 1;
  visibility: visible;
}

/* ---- Topic filter bar (mirrors profile.css .library-topic-filter-section exactly) ---- */

/* Override discovery-bar.css defaults inside popup */
.library-browser-popup .discovery-bar-section {
  padding: 0;
  margin-bottom: 0;
}

.library-browser-popup .lbp-topic-filter-section {
  padding: 0.25rem 0 0.5rem;
  margin: 0;
  min-height: 36px;
  position: relative;
  z-index: 5;
}

.library-browser-popup .lbp-topic-filter-section .discovery-bar-wrapper {
  display: flex;
  padding: 0;
}

.library-browser-popup .lbp-topic-filter-section .discovery-bar {
  display: flex;
  align-items: center;
  flex: 1;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md, 8px);
  padding: 0.5rem 0.75rem;
  min-height: 36px;
}

.library-browser-popup .lbp-topic-filter-section .discovery-links-wrapper {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  align-items: center;
}

.library-browser-popup .lbp-topic-filter-section .discovery-links {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0;
}

.library-browser-popup .lbp-topic-filter-section .discovery-links::-webkit-scrollbar {
  display: none;
}

.library-browser-popup .lbp-topic-filter-section .discovery-link {
  display: inline-flex;
  font-size: 0.75rem;
  margin: 0; /* Reset Pico.css button margin */
}

.library-browser-popup .lbp-topic-filter-section .discovery-search-input {
  margin: 0; /* Reset Pico.css input margin */
}

.library-browser-popup .lbp-topic-filter-section .active-filters-row {
  padding: 0.4rem 0 0;
  margin-top: 0;
}

/* Instagram loading spinner in skeleton */
.library-browser-popup .lbp-preview-content .instagram-spinner {
  border-top-color: #E4405F;
}

/* Body: table + preview side by side (50/50) */
.library-browser-popup .lbp-body {
  display: flex;
  flex: 1;
  min-height: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Table panel (left — 50%) */
.library-browser-popup .lbp-table-panel {
  flex: 0 0 50%;
  width: 50%;
  min-width: 0;
  max-width: 50%;
  display: flex;
  flex-direction: column;
}

.library-browser-popup .lbp-table-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.library-browser-popup .lbp-table-scroll::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.library-browser-popup .lbp-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 2px;
  font-size: 12px;
}

.library-browser-popup .lbp-table th {
  text-align: left;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  background: transparent;
}

.library-browser-popup .lbp-table th:first-child { padding-left: 14px; }

.library-browser-popup .lbp-col-check { width: 30px; }
.library-browser-popup .lbp-col-name { overflow: hidden; }
.library-browser-popup .lbp-col-type { width: 80px; white-space: nowrap; }

.library-browser-popup .lbp-table td {
  padding: 7px 8px;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.015);
  transition: background 0.15s ease;
}

.library-browser-popup .lbp-table td:first-child { padding-left: 14px; border-radius: 6px 0 0 6px; }
.library-browser-popup .lbp-table td:last-child { border-radius: 0 6px 6px 0; }

.library-browser-popup .lbp-table tbody tr {
  cursor: pointer;
}

.library-browser-popup .lbp-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.06);
}

.library-browser-popup .lbp-table tbody tr.hovered td {
  background: rgba(255, 255, 255, 0.04);
}

.library-browser-popup .lbp-table tbody tr.selected td {
  background: rgba(0, 168, 255, 0.12);
}

.library-browser-popup .lbp-table tbody tr.selected td:first-child {
  box-shadow: inset 3px 0 0 0 #00a8ff;
}

/* Row name */
.library-browser-popup .lbp-row-name {
  display: block;
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Row type badge */
.library-browser-popup .lbp-row-type {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

.library-browser-popup .lbp-row-type svg {
  width: 13px;
  height: 13px;
  min-width: 13px;
  flex-shrink: 0;
}

.library-browser-popup .lbp-row-type.twitter { color: #1da1f2; }
.library-browser-popup .lbp-row-type.youtube { color: #ff0000; }
.library-browser-popup .lbp-row-type.tiktok { color: #00f2ea; }
.library-browser-popup .lbp-row-type.instagram { color: #e4405f; }
.library-browser-popup .lbp-row-type.espn { color: #d00; }
.library-browser-popup .lbp-row-type.substack { color: #ff6719; }
.library-browser-popup .lbp-row-type.generic { color: #6b7280; }
.library-browser-popup .lbp-row-type.uploaded_media { color: rgba(255,255,255,0.7); }

/* Checkbox for multi-select */
.library-browser-popup .lbp-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: 11px;
  color: transparent;
  transition: all 0.15s ease;
}

.library-browser-popup .lbp-check.checked {
  background: #00a8ff;
  border-color: #00a8ff;
  color: #fff;
}

/* Preview panel (right — 50%) */
.library-browser-popup .lbp-preview-panel {
  flex: 0 0 50%;
  width: 50%;
  min-width: 0;
  max-width: 50%;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.library-browser-popup .lbp-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 200px;
  color: rgba(255, 255, 255, 0.3);
  gap: 10px;
  text-align: center;
  padding: 16px;
  font-size: 12px;
}

.library-browser-popup .lbp-preview-empty svg { opacity: 0.4; }

.library-browser-popup .lbp-preview-content {
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
}

/* Preview content: scale everything to fit the small panel */
.library-browser-popup .lbp-preview-content > * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Preview content styling — mirrors portfolio .library-preview-content */

.library-browser-popup .lbp-preview-content img,
.library-browser-popup .lbp-preview-content video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Twitter */
.library-browser-popup .lbp-preview-content .tweet-container {
  width: 100%;
  min-height: 150px;
  border-radius: 12px;
  overflow: hidden;
}

.library-browser-popup .lbp-preview-content .tweet-container .twitter-tweet,
.library-browser-popup .lbp-preview-content .tweet-container .twitter-tweet-rendered {
  margin: 0 !important;
  background: transparent !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.library-browser-popup .lbp-preview-content .tweet-container iframe {
  border: none !important;
  border-radius: 12px !important;
  color-scheme: light !important;
}

.library-browser-popup .lbp-preview-content .tweet-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  gap: 12px;
  min-height: 150px;
}

.library-browser-popup .lbp-preview-content .loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--color-primary, #1da1f2);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* YouTube */
.library-browser-popup .lbp-preview-content .youtube-wrapper,
.library-browser-popup .lbp-preview-content .youtube-responsive-wrapper {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
}

.library-browser-popup .lbp-preview-content .youtube-wrapper iframe,
.library-browser-popup .lbp-preview-content .youtube-responsive-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 150%;
  border: none;
  transform: scale(0.6667);
  transform-origin: top left;
}

.library-browser-popup .lbp-preview-content .youtube-wrapper .youtube-thumbnail-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.library-browser-popup .lbp-preview-content .youtube-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
}

/* TikTok */
.library-browser-popup .lbp-preview-content .tiktok-embed-container {
  position: relative;
  width: 100%;
  min-height: 780px;
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
}

.library-browser-popup .lbp-preview-content .tiktok-embed-container iframe {
  display: block;
  width: 100%;
  height: 780px;
  border: none;
  border-radius: 12px;
  clip-path: inset(0 10% round 12px);
}

.library-browser-popup .lbp-preview-content .tiktok-embed-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border-radius: 12px;
}

.library-browser-popup .lbp-preview-content .tiktok-embed-fallback a {
  color: #00f2ea;
  text-decoration: none;
  font-weight: 500;
  padding: 12px 24px;
  border: 1px solid #00f2ea;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}

.library-browser-popup .lbp-preview-content .tiktok-embed-fallback a:hover {
  background: #00f2ea;
  color: #000;
}

/* Instagram */
.library-browser-popup .lbp-preview-content .instagram-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.library-browser-popup .lbp-preview-content .instagram-skeleton {
  max-width: 328px;
  border-radius: 12px;
}

.library-browser-popup .lbp-preview-content .instagram-media {
  margin: 0 !important;
  max-width: 100% !important;
  border-radius: 12px !important;
}

.library-browser-popup .lbp-preview-content .instagram-container iframe {
  border-radius: 12px !important;
}

.library-browser-popup .lbp-preview-content .library-preview-description {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0.75rem 0 0;
  padding: 0 4px;
}

/* Media card (uploaded media, fallback) */
.library-browser-popup .lbp-preview-content .media-card {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.library-browser-popup .lbp-preview-content .media-card img,
.library-browser-popup .lbp-preview-content .media-card video {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
}

/* ESPN */
.library-browser-popup .lbp-preview-content .espn-preview {
  border-radius: 12px;
  overflow: hidden;
}

.library-browser-popup .lbp-preview-content .espn-preview img {
  max-height: 180px;
  object-fit: cover;
}

.library-browser-popup .lbp-preview-content .espn-preview-overlay h3 {
  font-size: 0.85rem;
}

/* Substack */
.library-browser-popup .lbp-preview-content .substack-preview {
  border-radius: 12px;
  overflow: hidden;
}

.library-browser-popup .lbp-preview-content .substack-preview img {
  max-height: 160px;
  object-fit: cover;
}

/* Generic link */
.library-browser-popup .lbp-preview-content .generic-link-preview {
  border-radius: 12px;
  overflow: hidden;
}

.library-browser-popup .lbp-preview-content .generic-link-preview img {
  max-height: 180px;
  object-fit: cover;
}

.library-browser-popup .lbp-preview-content .generic-link-no-image {
  min-height: 100px;
}

.library-browser-popup .lbp-preview-content .generic-link-title {
  font-size: 0.85rem;
}

/* Sports Index internal — mirrors core.css featured-embed */
.library-browser-popup .lbp-preview-content .featured-embed {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  min-height: 220px;
  background: #000;
  display: block;
  text-decoration: none;
  color: inherit;
}

.library-browser-popup .lbp-preview-content .featured-embed-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #0c0c0e;
  mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}

.library-browser-popup .lbp-preview-content .featured-embed-gradient {
  display: none;
}

.library-browser-popup .lbp-preview-content .featured-embed-bottom {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 80px;
  z-index: 5;
}

.library-browser-popup .lbp-preview-content .featured-embed-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.library-browser-popup .lbp-preview-content .featured-embed-type {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  z-index: 5;
}

.library-browser-popup .lbp-preview-content .featured-embed-type svg {
  width: 14px;
  height: 14px;
}

.library-browser-popup .lbp-preview-content .featured-embed-brand-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
  pointer-events: none;
}

.library-browser-popup .lbp-preview-content .featured-embed-brand-placeholder img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0, 168, 255, 0.3);
}

.library-browser-popup .lbp-preview-content .featured-embed-brand-placeholder span {
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
}

.library-browser-popup .lbp-preview-content .featured-embed-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.library-browser-popup .lbp-preview-content .featured-embed-author {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 5;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

.library-browser-popup .lbp-preview-content .featured-embed-author img {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  max-width: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  object-fit: cover;
}

.library-browser-popup .lbp-preview-content .featured-embed-author span {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fallback */
.library-browser-popup .lbp-preview-fallback {
  text-align: center;
}

.library-browser-popup .lbp-preview-fallback img {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 8px;
}

.library-browser-popup .lbp-preview-fallback-title {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

/* Loading / empty / load more */
.library-browser-popup .lbp-loading,
.library-browser-popup .lbp-empty {
  text-align: center;
  padding: 20px 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.library-browser-popup .lbp-load-more {
  text-align: center;
  padding: 8px 0;
}

.library-browser-popup .lbp-load-more-btn {
  padding: 5px 14px;
  font-size: 11px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
}

.library-browser-popup .lbp-load-more-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Multi-select footer */
.library-browser-popup .lbp-footer {
  padding: 8px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.library-browser-popup .lbp-add-selected-btn {
  width: 100%;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  background: #00a8ff;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.library-browser-popup .lbp-add-selected-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.library-browser-popup .lbp-add-selected-btn:not(:disabled):hover {
  opacity: 0.85;
}

/* Uploaded media preview (shared) */
.uploaded-media-preview {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}

.uploaded-media-preview img,
.uploaded-media-preview video {
  width: 100%;
  display: block;
  object-fit: cover;
}

.uploaded-media-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}

.uploaded-media-title {
  font-size: 12px;
  color: #fff;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uploaded-media-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%);
  opacity: 0.8;
}

/* ============================================================
   Pickleball Results Block
   ============================================================ */

.canvas-element[data-type="pickleball_results"] .element-content {
  padding: 0;
  background: transparent;
  height: 100%;
}

.canvas.block-mode .canvas-element[data-type="pickleball_results"] {
  min-height: auto;
}

.canvas.block-mode .canvas-element[data-type="pickleball_results"] .element-content {
  padding: 0;
  width: 100%;
  height: 100%;
}

.pb-results-block {
  display: flex;
  flex-direction: column;
  background: #0c0c0e;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
}

.pb-results-header {
  padding: 8px 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pb-results-team-row {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  gap: 12px;
}

.pb-results-team-row + .pb-results-team-row {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pb-results-seed {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  width: 24px;
  flex-shrink: 0;
}

.pb-results-players {
  flex: 1;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.pb-results-team-row.winner .pb-results-players {
  color: #c8d62c;
}

.pb-results-games-won {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  width: 24px;
  text-align: right;
  margin-right: 8px;
}

.pb-results-team-row.winner .pb-results-games-won {
  color: #c8d62c;
}

.pb-results-scores {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}

.pb-results-empty {
  padding: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
  font-size: 13px;
}

/* Pickleball modal */
.pb-match-type-toggle {
  display: flex;
  gap: 16px;
}

.pb-match-type-toggle label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.pb-scores-row {
  display: flex;
  gap: 8px;
}

.pb-game-input {
  width: 50px;
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 6px;
  color: #fff;
  font-size: 14px;
}

.pb-game-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pb-game-input { -moz-appearance: textfield; }

.pb-winner-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

/* ============================================================
   WYSIWYG Block Editor
   ============================================================ */

.wysiwyg-editor-container {
  width: 100%;
  margin: 10px;
  background: var(--color-bg-elevated, #141416);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 95vh;
}

/* When library browser is open, force full height so flex children fill the space */
.wysiwyg-editor-container.library-browse-active {
  height: 95vh;
}

.wysiwyg-editor-container.wysiwyg-span-1 { max-width: 520px; }
.wysiwyg-editor-container.wysiwyg-span-2 { max-width: 720px; }
.wysiwyg-editor-container.wysiwyg-span-3 { max-width: 920px; }

/* Toolbar */
.wysiwyg-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.wysiwyg-editor-type-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: capitalize;
}

.wysiwyg-editor-actions {
  display: flex;
  gap: 8px;
}

/* Block wrapper */
.wysiwyg-editor-block-wrapper {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* When library browser is active, block wrapper becomes a flex column so children fill height */
.library-browse-active .wysiwyg-editor-block-wrapper {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}

/* Contenteditable states */
.wysiwyg-editor-block-wrapper [contenteditable="true"] {
  outline: none;
  cursor: text;
  border-radius: 3px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  min-width: 20px;
}

.wysiwyg-editor-block-wrapper [contenteditable="true"]:hover {
  background: rgba(0, 168, 255, 0.06);
}

.wysiwyg-editor-block-wrapper [contenteditable="true"]:focus {
  background: rgba(0, 168, 255, 0.1);
  box-shadow: 0 0 0 2px rgba(0, 168, 255, 0.25);
}

/* Placeholder text for empty contenteditable */
.wysiwyg-editor-block-wrapper [contenteditable="true"]:empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

/* Dynamic item container */
.wysiwyg-dynamic-item {
  position: relative;
}

/* Add button */
.wysiwyg-add-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  margin-top: 8px;
  background: rgba(0, 168, 255, 0.08);
  border: 1px solid rgba(0, 168, 255, 0.2);
  border-radius: 6px;
  color: #00a8ff;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wysiwyg-add-btn:hover {
  background: rgba(0, 168, 255, 0.15);
  border-color: rgba(0, 168, 255, 0.3);
}

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

/* Remove button (hover-reveal) */
.wysiwyg-remove-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 80, 80, 0.15);
  border: 1px solid rgba(255, 80, 80, 0.25);
  border-radius: 4px;
  color: rgba(255, 80, 80, 0.7);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
  z-index: 5;
  padding: 0;
}

.wysiwyg-dynamic-item:hover .wysiwyg-remove-btn {
  opacity: 1;
}

.wysiwyg-remove-btn:hover {
  background: rgba(255, 80, 80, 0.3);
  color: #ff5050;
}

/* Color input on title bars */
.wysiwyg-color-input {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.wysiwyg-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.wysiwyg-color-input::-webkit-color-swatch { border: none; border-radius: 50%; }


/* Date input styling */
.wysiwyg-date-input {
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: inherit;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}

.wysiwyg-date-input:focus {
  border-color: rgba(0, 168, 255, 0.5);
  box-shadow: 0 0 0 2px rgba(0, 168, 255, 0.15);
}

/* Image upload overlay */
.wysiwyg-image-upload,
.wysiwyg-card-image-area {
  position: relative;
  cursor: pointer;
}

.wysiwyg-image-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: inherit;
}

.wysiwyg-image-upload:hover .wysiwyg-image-overlay,
.wysiwyg-card-image-area:hover .wysiwyg-image-overlay {
  opacity: 1;
}

/* Athlete header scaled up in popup */
.wysiwyg-editor-block-wrapper .athlete-header-image-section {
  width: 220px;
  padding: 20px;
}
.wysiwyg-editor-block-wrapper .athlete-header-image {
  width: 160px;
  height: 160px;
}
.wysiwyg-editor-block-wrapper .athlete-header-first-name { font-size: 18px; }
.wysiwyg-editor-block-wrapper .athlete-header-last-name { font-size: 30px; }
.wysiwyg-editor-block-wrapper .athlete-header-team-line { font-size: 14px; }
.wysiwyg-editor-block-wrapper .athlete-header-bio-label { font-size: 13px; }
.wysiwyg-editor-block-wrapper .athlete-header-info-section { padding: 20px 24px; }
.wysiwyg-editor-block-wrapper .athlete-header-social-link svg { width: 20px; height: 20px; }

/* Field rows in popup */
.wysiwyg-editor-block-wrapper .athlete-header-fields-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.wysiwyg-editor-block-wrapper .athlete-header-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.wysiwyg-editor-block-wrapper .athlete-header-field-row .athlete-header-bio-label {
  width: 80px;
  flex-shrink: 0;
}

.wysiwyg-editor-block-wrapper .athlete-header-field-row .athlete-header-bio-value {
  flex: 1;
}

.wysiwyg-editor-block-wrapper .athlete-header-field-row .athlete-header-team-line {
  flex: 1;
}

/* Field remove button — visible on row hover */
.wysiwyg-field-remove {
  width: 20px;
  height: 20px;
  border: none;
  background: rgba(255, 60, 60, 0.15);
  color: rgba(255, 60, 60, 0.6);
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}
.athlete-header-field-row:hover .wysiwyg-field-remove {
  opacity: 1;
}
.wysiwyg-field-remove:hover {
  background: rgba(255, 60, 60, 0.35);
  color: #ff4040;
}

/* Add field button & dropdown */
.wysiwyg-add-field-wrapper {
  position: relative;
}
.wysiwyg-add-field-btn {
  padding: 4px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s ease;
}
.wysiwyg-add-field-btn:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.8);
}

.wysiwyg-add-field-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  background: #141416;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px;
  min-width: 220px;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  margin-bottom: 4px;
}
.wysiwyg-field-category {
  font-size: 10px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  padding: 6px 8px 4px;
  letter-spacing: 0.5px;
}
.wysiwyg-field-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.wysiwyg-field-option:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.wysiwyg-team-line .wysiwyg-separator {
  color: rgba(255, 255, 255, 0.4);
}

.wysiwyg-status-toggle {
  cursor: pointer;
  user-select: none;
}

.wysiwyg-status-toggle:hover {
  opacity: 0.8;
}

/* URL trigger (social links in athlete header) */
.wysiwyg-url-trigger {
  cursor: pointer !important;
  transition: opacity 0.15s ease;
}

.wysiwyg-url-trigger:hover {
  opacity: 0.7;
}

/* Inline popover for URL fields */
.wysiwyg-inline-popover {
  background: var(--color-bg-elevated, #141416);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 280px;
}

.wysiwyg-inline-popover input {
  flex: 1;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  outline: none;
}

.wysiwyg-inline-popover input:focus {
  border-color: rgba(0, 168, 255, 0.5);
}

.wysiwyg-inline-popover button {
  padding: 8px 14px;
  background: rgba(0, 168, 255, 0.15);
  border: 1px solid rgba(0, 168, 255, 0.3);
  border-radius: 6px;
  color: #00a8ff;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.wysiwyg-inline-popover button:hover {
  background: rgba(0, 168, 255, 0.25);
}

/* News block WYSIWYG add section */
.wysiwyg-news-add-section {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.wysiwyg-news-add-section .wysiwyg-add-btn {
  margin-top: 0;
}

.wysiwyg-url-input {
  flex: 1;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  outline: none;
}

.wysiwyg-url-input:focus {
  border-color: rgba(0, 168, 255, 0.5);
  box-shadow: 0 0 0 2px rgba(0, 168, 255, 0.15);
}

/* Pickleball results WYSIWYG */
.wysiwyg-winner-btn {
  position: absolute;
  right: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.pb-results-team-row {
  position: relative;
}

.pb-results-team-row.winner .wysiwyg-winner-btn {
  color: #c8d62c;
  border-color: rgba(200, 214, 44, 0.4);
}

.wysiwyg-winner-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

.wysiwyg-type-toggle {
  margin-left: 12px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.wysiwyg-type-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
}

.pb-header-sep {
  color: rgba(255, 255, 255, 0.3);
}

.pb-player-sep {
  color: rgba(255, 255, 255, 0.4);
}

.pb-results-controls {
  padding: 8px 12px;
  display: flex;
  justify-content: flex-end;
}

/* Sponsors WYSIWYG */
.wysiwyg-add-card {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px dashed rgba(255, 255, 255, 0.15);
  background: transparent !important;
  transition: border-color 0.2s ease, background 0.2s ease;
  min-height: 80px;
}

.wysiwyg-add-card:hover {
  border-color: rgba(0, 168, 255, 0.4);
  background: rgba(0, 168, 255, 0.05) !important;
}

.wysiwyg-add-card-icon {
  font-size: 28px;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 300;
}

.wysiwyg-sponsor-name {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  padding: 4px 2px 0;
  min-height: 16px;
}

.wysiwyg-card-image-area {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.wysiwyg-card-image-area img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Bio awards WYSIWYG - inline remove */
.wysiwyg-editor-block-wrapper .athlete-bio-award-item {
  position: relative;
  padding-right: 28px;
}

.wysiwyg-editor-block-wrapper .athlete-bio-award-item .wysiwyg-remove-btn {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* News items WYSIWYG - inline remove */
.wysiwyg-editor-block-wrapper .news-article-item {
  position: relative;
  padding-right: 28px;
}

.wysiwyg-editor-block-wrapper .news-article-item .wysiwyg-remove-btn {
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}

/* ============================================================
   Season Stats Block (editor canvas + WYSIWYG popup)
   ============================================================ */
.canvas-element[data-type="season_stats"] .element-content {
  padding: 0;
  background: transparent;
  height: 100%;
}

.canvas.block-mode .canvas-element[data-type="season_stats"] {
  min-height: auto;
  overflow: hidden; /* Prevent table from expanding element width */
}

.canvas.block-mode .canvas-element[data-type="season_stats"] .element-content {
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.season-stats-block {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ss-description {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  padding: 12px 16px 4px;
  line-height: 1.5;
}
.ss-description:empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.25);
}

.ss-table-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.ss-table-wrapper::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.ss-table-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.ss-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
}

.ss-table {
  width: 100%;
  min-width: 100%;
  margin: 0 0 0.75rem;
  padding: 0 0.75rem;
  border-collapse: separate;
  border-spacing: 0 0.35rem;
  white-space: nowrap;
  font-size: 13px;
}

.ss-th {
  padding: 0.6rem 0.85rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.45);
  text-align: left;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 0;
}

.ss-td {
  padding: 0.5rem 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.02);
  border: none;
  transition: background 0.2s ease;
}

.ss-row:hover .ss-td {
  background: rgba(255, 255, 255, 0.06);
}

/* Rounded row edges */
.ss-row .ss-td:first-child {
  border-radius: 8px 0 0 8px;
}
.ss-row .ss-td:last-child {
  border-radius: 0 8px 8px 0;
}

/* Season column accent color — applied via inline style */
.ss-td.ss-season-cell {
  font-weight: 600;
}

.ss-empty {
  padding: 30px;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
}

/* WYSIWYG popup overrides */
.ss-sport-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.ss-sport-btn {
  padding: 6px 16px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ss-sport-btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.ss-sport-btn.active {
  background: rgba(0, 168, 255, 0.15);
  border-color: rgba(0, 168, 255, 0.4);
  color: #00a8ff;
}

/* Config row for sport + width selectors */
.ss-config-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

/* Width selector */
.ss-width-selector {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ss-width-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-right: 4px;
}
.ss-width-btn {
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ss-width-btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.ss-width-btn.active {
  background: rgba(0, 168, 255, 0.15);
  border-color: rgba(0, 168, 255, 0.4);
  color: #00a8ff;
}

/* Editable cells */
.ss-cell,
.ss-col-header {
  outline: none;
  min-width: 20px;
  display: inline-block;
}

/* Table action buttons */
.ss-table-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
}
.ss-add-row,
.ss-add-col {
  padding: 4px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s ease;
}
.ss-add-row:hover,
.ss-add-col:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.8);
}

/* Remove row / column buttons — hover reveal */
.ss-remove-col,
.ss-remove-row {
  width: 16px;
  height: 16px;
  border: none;
  background: rgba(255, 60, 60, 0.15);
  color: rgba(255, 60, 60, 0.6);
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
  margin-left: 4px;
  vertical-align: middle;
}
.ss-th:hover .ss-remove-col,
.ss-row:hover .ss-remove-row {
  opacity: 1;
}
.ss-remove-col:hover,
.ss-remove-row:hover {
  background: rgba(255, 60, 60, 0.35);
  color: #ff4040;
}

.ss-action-cell {
  width: 24px;
  padding: 0 4px !important;
}


/* ============================================================
   Bar Chart Block — Height chain
   ============================================================ */
.canvas-element[data-type="bar_chart"] .element-content {
  padding: 0;
  background: transparent;
  height: 100%;
}

.canvas.block-mode .canvas-element[data-type="bar_chart"] {
  min-height: auto;
}

.canvas.block-mode .canvas-element[data-type="bar_chart"] .element-content {
  padding: 0;
  width: 100%;
  height: 100%;
}

/* ============================================================
   Bar Chart Block — Canvas render styles
   ============================================================ */
.bar-chart-block {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.bc-header {
  margin-bottom: 12px;
  flex-shrink: 0;
}

.bc-title {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
}

.bc-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
}

.bc-chart-body {
  flex: 1;
  display: flex;
  align-items: stretch;
  min-height: 0;
  gap: 8px;
}

.bc-y-axis-label {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 2px;
}

.bc-chart-area {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-height: 0;
  padding-bottom: 40px;
  overflow: visible;
}

.bc-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  height: 100%;
  position: relative;
  overflow: visible;
}

.bc-bar-value {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4px;
  flex-shrink: 0;
}

.bc-bar {
  width: 100%;
  max-width: 48px;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
}

.bc-bar-label {
  position: absolute;
  top: calc(100% + 4px);
  right: 50%;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  transform: rotate(-45deg);
  transform-origin: top right;
}

.bc-x-axis-label {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 8px;
  flex-shrink: 0;
}

.bc-empty {
  padding: 30px;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* ============================================================
   Bar Chart Block — WYSIWYG popup styles
   ============================================================ */
.bar-chart-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bc-config-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bc-config-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  min-width: 100px;
  flex-shrink: 0;
}

.bc-config-select {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 6px 10px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s ease;
}

.bc-config-select:focus {
  border-color: rgba(0, 168, 255, 0.5);
}

.bc-config-select option {
  background: #0c0c0e;
  color: #fff;
}

.bc-config-field {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 6px 10px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  outline: none;
  min-height: 28px;
  transition: border-color 0.15s ease;
}

.bc-config-field:focus {
  border-color: rgba(0, 168, 255, 0.5);
}

.bc-config-field:empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.25);
}

.bc-preview {
  margin-top: 8px;
}

.bc-preview-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 8px;
}

.bc-preview-area {
  min-height: 200px;
  max-height: 300px;
}

/* Chart width selector (shared by all chart types) */
.bc-width-selector {
  display: flex;
  gap: 4px;
}

.bc-width-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 4px 10px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bc-width-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.bc-width-btn.active {
  background: rgba(0, 168, 255, 0.2);
  border-color: rgba(0, 168, 255, 0.5);
  color: #00a8ff;
}

/* Show values toggle */
.bc-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.bc-toggle {
  accent-color: #00a8ff;
}

/* Line chart multi-line UI */
.bc-config-row-top {
  align-items: flex-start;
}

.lc-y-lines-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lc-y-line-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lc-y-line-row .bc-config-select {
  flex: 1;
}

.lc-remove-line-btn {
  background: rgba(255, 70, 70, 0.15);
  border: 1px solid rgba(255, 70, 70, 0.3);
  border-radius: 4px;
  color: rgba(255, 70, 70, 0.7);
  width: 24px;
  height: 28px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.lc-remove-line-btn:hover {
  background: rgba(255, 70, 70, 0.25);
  color: #ff4646;
}

.lc-add-line-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 4px 10px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
  align-self: flex-start;
}

.lc-add-line-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

/* Line chart legend */
.lc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.lc-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

.lc-legend-swatch {
  width: 12px;
  height: 3px;
  border-radius: 1px;
  flex-shrink: 0;
}


/* ============================================================
   Line Chart Block — Height chain
   ============================================================ */
.canvas-element[data-type="line_chart"] .element-content {
  padding: 0;
  background: transparent;
  height: 100%;
}

.canvas.block-mode .canvas-element[data-type="line_chart"] {
  min-height: auto;
}

.canvas.block-mode .canvas-element[data-type="line_chart"] .element-content {
  padding: 0;
  width: 100%;
  height: 100%;
}

/* ============================================================
   Line Chart Block — Canvas render styles
   ============================================================ */
.line-chart-block {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.lc-chart-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lc-svg-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lc-svg {
  flex: 1;
  width: 100%;
  min-height: 0;
}

.lc-dot {
  opacity: 0.9;
}

.lc-labels {
  display: flex;
  justify-content: space-between;
  padding: 4px 10px 0;
  flex-shrink: 0;
  height: 40px;
  overflow: visible;
}

.lc-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  text-align: right;
  transform: rotate(-45deg);
  transform-origin: top right;
  overflow: visible;
}


/* ============================================================
   Pie Chart Block — Height chain
   ============================================================ */
.canvas-element[data-type="pie_chart"] .element-content {
  padding: 0;
  background: transparent;
  height: 100%;
}

.canvas.block-mode .canvas-element[data-type="pie_chart"] {
  min-height: auto;
}

.canvas.block-mode .canvas-element[data-type="pie_chart"] .element-content {
  padding: 0;
  width: 100%;
  height: 100%;
}

/* ============================================================
   Pie Chart Block — Canvas render styles
   ============================================================ */
.pie-chart-block {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.pc-chart-body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 0;
}

.pc-svg-container {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pc-svg {
  width: 160px;
  height: 160px;
}

.pc-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  overflow-y: auto;
  max-height: 100%;
}

.pc-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.pc-legend-color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.pc-legend-label {
  color: rgba(255, 255, 255, 0.7);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-legend-value {
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  flex-shrink: 0;
}


/* ============================================================
   Head-to-Head Block — Height chain
   ============================================================ */
.canvas-element[data-type="head_to_head"] .element-content {
  padding: 0;
  background: transparent;
  height: 100%;
}
.canvas.block-mode .canvas-element[data-type="head_to_head"] {
  min-height: auto;
}
.canvas.block-mode .canvas-element[data-type="head_to_head"] .element-content {
  padding: 0;
  width: 100%;
  height: 100%;
}

/* Head-to-Head canvas render */
.h2h-block {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.h2h-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  margin-bottom: 12px;
}
.h2h-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.h2h-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.h2h-player-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.h2h-player-placeholder {
  border: 1px dashed rgba(255, 255, 255, 0.15);
}
.h2h-player-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.h2h-vs {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 1px;
  flex-shrink: 0;
}
.h2h-rows {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.h2h-stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.h2h-stat-left,
.h2h-stat-right {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  min-width: 50px;
  text-align: center;
  flex-shrink: 0;
}
.h2h-stat-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.h2h-stat-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.h2h-bar-bg {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  display: flex;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.h2h-bar-half-left,
.h2h-bar-half-right {
  width: 50%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.h2h-bar-fill-left {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  border-radius: 2px 0 0 2px;
}
.h2h-bar-fill-right {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 0 2px 2px 0;
}

/* Head-to-Head WYSIWYG popup */
.h2h-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.h2h-players-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 8px;
}
.h2h-player-config {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.h2h-image-upload {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
}
.h2h-image-upload img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.h2h-image-placeholder {
  width: 100%;
  height: 100%;
  border: 2px dashed rgba(0, 168, 255, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: rgba(0, 168, 255, 0.6);
  box-sizing: border-box;
}
.h2h-image-upload:hover .h2h-image-placeholder {
  border-color: rgba(0, 168, 255, 0.8);
  color: rgba(0, 168, 255, 0.9);
}
.h2h-vs-divider {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  padding-top: 30px;
  flex-shrink: 0;
}
.h2h-editor-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.h2h-editor-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.h2h-editor-row .bc-config-field {
  flex: 1;
  min-width: 0;
}
.h2h-editor-row .bc-config-field[data-field="label"] {
  flex: 1.5;
}
.h2h-row-remove {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  flex-shrink: 0;
}
.h2h-row-remove:hover {
  color: #ff4444;
}
.h2h-add-row-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  padding: 8px;
  cursor: pointer;
  font-size: 12px;
  margin-top: 4px;
}
.h2h-add-row-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}


/* ============================================================
   Scatter Plot Block — Height chain
   ============================================================ */
.canvas-element[data-type="scatter_plot"] .element-content {
  padding: 0;
  background: transparent;
  height: 100%;
}
.canvas.block-mode .canvas-element[data-type="scatter_plot"] {
  min-height: auto;
}
.canvas.block-mode .canvas-element[data-type="scatter_plot"] .element-content {
  padding: 0;
  width: 100%;
  height: 100%;
}

/* Scatter Plot canvas render */
.scatter-plot-block {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 16px 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sp-chart-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sp-svg {
  flex: 1;
  width: 100%;
  min-height: 0;
}


/* ============================================================
   Heatmap Block — Height chain
   ============================================================ */
.canvas-element[data-type="heatmap"] .element-content {
  padding: 0;
  background: transparent;
  height: 100%;
}
.canvas.block-mode .canvas-element[data-type="heatmap"] {
  min-height: auto;
}
.canvas.block-mode .canvas-element[data-type="heatmap"] .element-content {
  padding: 0;
  width: 100%;
  height: 100%;
}

/* Heatmap canvas render */
.heatmap-block {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px 20px 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Heatmap grid */
.hm-grid {
  display: grid;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow: auto;
  align-content: start;
}
.hm-corner {
  /* empty top-left cell */
}
.hm-header-cell {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 4px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-row-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 8px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-cell {
  font-size: 11px;
  color: #fff;
  text-align: center;
  padding: 6px 4px;
  border-radius: 4px;
  min-width: 32px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   Spider Chart Block — Height chain
   ============================================================ */
.canvas-element[data-type="spider_chart"] .element-content {
  padding: 0;
  background: transparent;
  height: 100%;
}
.canvas.block-mode .canvas-element[data-type="spider_chart"] {
  min-height: auto;
}
.canvas.block-mode .canvas-element[data-type="spider_chart"] .element-content {
  padding: 0;
  width: 100%;
  height: 100%;
}

/* Spider Chart canvas render */
.spider-chart-block {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.spider-chart-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.spider-svg {
  width: 100%;
  height: 100%;
  max-width: 300px;
  max-height: 300px;
}

/* Spider chart – editable data table */
.spider-table-wrap {
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}
.spider-data-table {
  width: 100%;
  border-collapse: collapse;
}
.spider-data-table thead th {
  position: sticky;
  top: 0;
  background: rgba(30, 30, 40, 0.95);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1;
}
.spider-data-table thead th:last-child {
  width: 32px;
}
.spider-data-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.spider-data-table tbody tr:last-child {
  border-bottom: none;
}
.spider-cell {
  display: block;
  width: 100%;
  padding: 6px 10px;
  font-size: 13px;
  color: #fff;
  background: transparent;
  outline: none;
  min-height: 28px;
  cursor: text;
}
.spider-cell:focus {
  background: rgba(255, 255, 255, 0.05);
}
.spider-cell:empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.25);
}
.spider-cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.spider-row-actions {
  width: 32px;
  text-align: center;
  vertical-align: middle;
}
.spider-remove-row {
  font-size: 16px;
}
.spider-empty-row .spider-cell {
  color: rgba(255, 255, 255, 0.3);
}

/* ============================================================
   Grid Block — Height chain
   ============================================================ */
.canvas-element[data-type="grid"] .element-content {
  padding: 0;
  background: transparent;
  width: 100%;
  height: 100%;
}
.canvas.block-mode .canvas-element[data-type="grid"] {
  min-height: auto;
}
.canvas.block-mode .canvas-element[data-type="grid"] .element-content {
  padding: 0;
  width: 100%;
  height: 100%;
}

/* Grid canvas render */
.grid-block {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}
.grid-visual {
  display: grid;
  gap: 6px;
  flex: 1;
  width: 100%;
  min-height: 0;
}
.grid-cell {
  border-radius: 8px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  background: rgba(255, 255, 255, 0.06);
}
.grid-cell-primary {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.grid-cell-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Grid layout inputs */
.grid-rows-input,
.grid-cols-input {
  width: 64px !important;
  flex: 0 0 64px !important;
  text-align: center;
  -moz-appearance: textfield;
  -webkit-appearance: none;
  appearance: none;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px;
  padding: 8px 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

/* Grid editor */
.grid-editor-wrap {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.15);
}
.grid-editor {
  display: grid;
  gap: 6px;
}
.grid-editor-cell {
  position: relative;
  border-radius: 8px;
  padding: 10px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  background: rgba(255, 255, 255, 0.06);
  transition: background 0.15s;
}
.grid-cell-text {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  outline: none;
  width: 100%;
  min-height: 18px;
  line-height: 1.2;
}
.grid-cell-text:empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.2);
  font-weight: 400;
}
.grid-cell-subtitle {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  outline: none;
  width: 100%;
  min-height: 14px;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.grid-cell-subtitle:empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.15);
}
.grid-cell-color-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.grid-editor-cell:hover .grid-cell-color-btn {
  opacity: 1;
}
.grid-color-dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
}
.grid-color-picker {
  position: absolute;
  top: 4px;
  right: 24px;
  z-index: 10;
  background: rgba(30, 30, 40, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 140px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.grid-color-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.grid-color-opt {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s;
}
.grid-color-opt:hover {
  transform: scale(1.15);
  border-color: rgba(255, 255, 255, 0.4);
}
.grid-color-none {
  width: 100%;
  height: auto;
  padding: 3px 0;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  text-align: center;
  margin-top: 4px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

/* ============================================================
   Roster Block — Height chain
   ============================================================ */
.canvas-element[data-type="roster"] .element-content {
  padding: 0;
  background: transparent;
  height: 100%;
}

.canvas.block-mode .canvas-element[data-type="roster"] {
  min-height: auto;
  overflow: hidden; /* Prevent table from expanding element width */
}

.canvas.block-mode .canvas-element[data-type="roster"] .element-content {
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Roster block container */
.roster-block {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ro-description {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  padding: 12px 16px 4px;
  line-height: 1.5;
}
.ro-description:empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.25);
}

.ro-table-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.ro-table-wrapper::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.ro-table-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.ro-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
}

.ro-table {
  width: 100%;
  min-width: 100%;
  margin: 0 0 0.75rem;
  padding: 0 0.75rem;
  border-collapse: separate;
  border-spacing: 0 0.35rem;
  white-space: nowrap;
  font-size: 13px;
}

.ro-th {
  padding: 0.6rem 0.85rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.45);
  text-align: left;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 0;
}

.ro-photo-th {
  width: 48px;
  padding: 0.6rem 0.4rem;
}

.ro-td {
  padding: 0.5rem 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.02);
  border: none;
  transition: background 0.2s ease;
}

.ro-row:hover .ro-td {
  background: rgba(255, 255, 255, 0.06);
}

.ro-row .ro-td:first-child {
  border-radius: 8px 0 0 8px;
}
.ro-row .ro-td:last-child {
  border-radius: 0 8px 8px 0;
}

/* Photo area */
.ro-photo-cell {
  width: 48px;
  padding: 0.35rem 0.4rem !important;
}

.ro-photo-area {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.25);
  transition: background 0.15s ease;
}
.ro-photo-area:hover {
  background: rgba(255, 255, 255, 0.12);
}
.ro-photo-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ro-photo-placeholder-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.25);
}

.ro-empty {
  padding: 30px;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
}

/* Sport selector */
.ro-sport-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.ro-sport-btn {
  padding: 6px 16px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ro-sport-btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.ro-sport-btn.active {
  background: rgba(0, 168, 255, 0.15);
  border-color: rgba(0, 168, 255, 0.4);
  color: #00a8ff;
}

/* Config row for sport + width selectors */
.ro-config-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

/* Width selector */
.ro-width-selector {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ro-width-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-right: 4px;
}
.ro-width-btn {
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ro-width-btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.ro-width-btn.active {
  background: rgba(0, 168, 255, 0.15);
  border-color: rgba(0, 168, 255, 0.4);
  color: #00a8ff;
}

/* Editable cells */
.ro-cell,
.ro-col-header {
  outline: none;
  min-width: 20px;
  display: inline-block;
}

/* Table action buttons */
.ro-table-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
}
.ro-add-row,
.ro-add-col {
  padding: 4px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s ease;
}
.ro-add-row:hover,
.ro-add-col:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.8);
}

/* Remove row / column buttons */
.ro-remove-col,
.ro-remove-row {
  width: 16px;
  height: 16px;
  border: none;
  background: rgba(255, 60, 60, 0.15);
  color: rgba(255, 60, 60, 0.6);
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
  margin-left: 4px;
  vertical-align: middle;
}
.ro-th:hover .ro-remove-col,
.ro-row:hover .ro-remove-row {
  opacity: 1;
}
.ro-remove-col:hover,
.ro-remove-row:hover {
  background: rgba(255, 60, 60, 0.35);
  color: #ff4040;
}

.ro-action-cell {
  width: 24px;
  padding: 0 4px !important;
}

/* ============================================================
   Post URL Input Section
   ============================================================ */

.post-url-add-section {
  padding: 4px 0;
}

.post-url-add-section label {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 6px;
}

.post-url-add-section .wysiwyg-url-input {
  width: 100%;
  box-sizing: border-box;
}

.post-url-status {
  font-size: 0.78rem;
  color: #ef4444;
  margin-top: 6px;
}


/* ============================================================================
   Template Picker Overlay
   ============================================================================ */

.template-picker-overlay {
  z-index: 10000;
}

.template-picker-modal {
  background: #2a2a2e;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: 720px;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.template-picker-header {
  text-align: center;
  padding: 28px 28px 8px;
  flex-shrink: 0;
}

.template-picker-header h2 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 6px;
}

.template-picker-header p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.template-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 20px 28px 28px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.template-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  text-decoration: none;
  color: inherit;
  text-align: left;
  font: inherit;
  padding: 0;
}

.template-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.template-card:active {
  transform: translateY(0);
}

.template-card.forking {
  opacity: 0.5;
  pointer-events: none;
}

.template-card-thumbnail {
  aspect-ratio: 16 / 10;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.template-card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.template-card-thumbnail svg {
  color: rgba(255, 255, 255, 0.25);
}

.template-card-info {
  padding: 10px 12px 12px;
}

.template-card-info h3 {
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.template-card-info p {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.template-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.template-tag {
  font-size: 0.65rem;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.55);
}

/* Blank canvas card */
.template-card-blank .template-card-thumbnail {
  background: transparent;
  border: 2px dashed rgba(255, 255, 255, 0.15);
  margin: 8px 8px 0;
  border-radius: 8px;
  aspect-ratio: 16 / 10;
}

.template-card-blank:hover .template-card-thumbnail {
  border-color: #00a8ff;
}

.template-card-blank:hover .template-card-thumbnail svg {
  color: #00a8ff;
}

/* Loading */
.template-picker-loading {
  text-align: center;
  padding: 20px 0 28px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.82rem;
}

.template-loading-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-top-color: #00a8ff;
  border-radius: 50%;
  animation: template-spin 0.8s linear infinite;
  margin: 0 auto 8px;
}

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

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

/* ============================================================
   PB Box Score Block — Editor
   ============================================================ */

.canvas-element[data-type="pb_box_score"] .element-content {
  padding: 0;
  background: transparent;
  height: 100%;
}

.canvas.block-mode .canvas-element[data-type="pb_box_score"] {
  min-height: auto;
}

.canvas.block-mode .canvas-element[data-type="pb_box_score"] .element-content {
  padding: 0;
  width: 100%;
  height: 100%;
}

/* Preview in collapsed state */
.pb-box-score-block {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pb-bs-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}

.pb-bs-title .placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.pb-bs-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 12px;
}

.pb-bs-players {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pb-bs-player-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
}

.pb-bs-name {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.pb-bs-scores {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
}

/* Editor (wysiwyg popup) */
.pb-box-score-editor {
  padding: 20px;
}

.pb-bs-header-fields {
  margin-bottom: 16px;
}

.pb-bs-edit-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  outline: none;
  min-height: 1.4em;
}

.pb-bs-edit-title:focus {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
}

.pb-bs-edit-title:empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.25);
}

.pb-bs-edit-meta-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.pb-bs-edit-subtitle,
.pb-bs-edit-date {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  outline: none;
  flex: 1;
  min-height: 1.4em;
}

.pb-bs-edit-subtitle:focus,
.pb-bs-edit-date:focus {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
}

.pb-bs-edit-subtitle:empty::before,
.pb-bs-edit-date:empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.2);
}

.pb-bs-editor-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.pb-bs-editor-table th {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.pb-bs-editor-table th:first-child {
  text-align: left;
  width: 40%;
}

.pb-bs-cell {
  padding: 6px 8px;
  outline: none;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 13px;
  color: #fff;
  text-align: center;
  min-height: 1.4em;
}

.pb-bs-name-cell {
  text-align: left;
  font-weight: 500;
}

.pb-bs-cell:focus {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
}

.pb-bs-cell:empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.2);
}

.pb-bs-result-cell {
  font-weight: 600;
}

.pb-bs-editor-row td {
  padding: 4px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* ============================================================
   PPA Athlete Header Block — Editor
   ============================================================ */

.canvas-element[data-type="ppa_athlete_header"] .element-content {
  padding: 0;
  background: transparent;
  height: 100%;
}

.canvas.block-mode .canvas-element[data-type="ppa_athlete_header"] {
  min-height: auto;
}

.canvas.block-mode .canvas-element[data-type="ppa_athlete_header"] .element-content {
  padding: 0;
  width: 100%;
  height: 100%;
}

/* PPA Athlete Header — Rankings editor inputs */
.ppa-ah-edit-disciplines {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ppa-ah-section-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.ppa-ah-disc-input-group {
  margin-bottom: 10px;
}

.ppa-ah-disc-group-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  display: block;
  margin-bottom: 4px;
}

.ppa-ah-disc-inputs {
  display: flex;
  gap: 8px;
}

.ppa-ah-input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 8px 10px;
  color: #fff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.ppa-ah-input:focus {
  border-color: rgba(255, 255, 255, 0.25);
}

.ppa-ah-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.ppa-ah-disc-inputs .ppa-ah-input {
  flex: 1;
}