* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Nunito', sans-serif;
  overflow-x: hidden;
}

:root {
  --red: #FF4444;
  --orange: #FF8C00;
  --yellow: #FFD700;
  --green: #4CAF50;
  --blue: #2196F3;
  --purple: #9C27B0;
  --pink: #FF69B4;
  --bg: #f5f5f5;
  --text: #333;
  --card-bg: #fff;
  --toolbar-bg: #ffffffee;
  --border-light: #e0e0e0;
}

body.dark-mode {
  --bg: #1a1a2e;
  --text: #eee;
  --card-bg: #16213e;
  --toolbar-bg: #16213eee;
  --border-light: #2a2a4a;
}

/* Spinning flower */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.flower-spin {
  animation: spin-slow 8s linear infinite;
  display: inline-block;
}

.flower-petal {
  position: absolute;
  width: 18px;
  height: 26px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform-origin: 0% 100%;
}

/* Polka dot background */
.polka-bg {
  background-color: var(--bg);
  background-image: radial-gradient(circle, #ddd 1px, transparent 1px);
  background-size: 24px 24px;
}

body.dark-mode .polka-bg {
  background-image: radial-gradient(circle, #2a2a4a 1px, transparent 1px);
}

/* Grid transitions */
.grid-cell {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Empty cell pulse */
@keyframes gentle-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); }
}

.empty-pulse {
  animation: gentle-pulse 2.5s ease-in-out infinite;
}

/* Button bounce */
@keyframes bounce-click {
  0% { transform: scale(1); }
  50% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

.btn-bounce:active {
  animation: bounce-click 0.2s ease;
}

/* Video cell hover overlay */
.cell-overlay {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.video-cell:hover .cell-overlay {
  opacity: 1;
}

/* Modal backdrop */
.modal-backdrop {
  backdrop-filter: blur(6px);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--pink);
  border-radius: 3px;
}

/* Rainbow border for cells */
.rainbow-border-0 { border-color: var(--red); }
.rainbow-border-1 { border-color: var(--orange); }
.rainbow-border-2 { border-color: var(--yellow); }
.rainbow-border-3 { border-color: var(--green); }
.rainbow-border-4 { border-color: var(--blue); }
.rainbow-border-5 { border-color: var(--purple); }
.rainbow-border-6 { border-color: var(--pink); }

/* Neon theme */
.neon-border-0 { border-color: var(--red); box-shadow: 0 0 12px var(--red), inset 0 0 12px rgba(255,68,68,0.1); }
.neon-border-1 { border-color: var(--orange); box-shadow: 0 0 12px var(--orange), inset 0 0 12px rgba(255,140,0,0.1); }
.neon-border-2 { border-color: var(--yellow); box-shadow: 0 0 12px var(--yellow), inset 0 0 12px rgba(255,215,0,0.1); }
.neon-border-3 { border-color: var(--green); box-shadow: 0 0 12px var(--green), inset 0 0 12px rgba(76,175,80,0.1); }
.neon-border-4 { border-color: var(--blue); box-shadow: 0 0 12px var(--blue), inset 0 0 12px rgba(33,150,243,0.1); }
.neon-border-5 { border-color: var(--purple); box-shadow: 0 0 12px var(--purple), inset 0 0 12px rgba(156,39,176,0.1); }
.neon-border-6 { border-color: var(--pink); box-shadow: 0 0 12px var(--pink), inset 0 0 12px rgba(255,105,180,0.1); }

/* Cinema theme */
.cinema-border { border-color: #555; }

/* Tooltip animation */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.tooltip-animate {
  animation: fadeInUp 0.3s ease forwards;
}

/* Layout icon styles */
.layout-btn {
  transition: all 0.2s ease;
}
.layout-btn:hover {
  transform: scale(1.1);
}
.layout-btn.active {
  transform: scale(1.15);
  box-shadow: 0 0 0 3px var(--pink);
}

/* Drag over state */
.drag-over {
  border-color: var(--green) !important;
  background: rgba(76, 175, 80, 0.15) !important;
}

/* Header gradient */
.header-gradient {
  background: linear-gradient(135deg, #FF8C00 0%, #FF69B4 40%, #2196F3 80%, #9C27B0 100%);
}

/* Tab styles */
.tab-active {
  border-bottom: 3px solid var(--pink);
  color: var(--pink);
  font-weight: 800;
}

/* Responsive */
@media (max-width: 640px) {
  .toolbar-wrap {
    flex-wrap: wrap;
    gap: 6px;
  }
  .layout-selector {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}