:root {
  --bg-deep: #0d0f1a;
  --bg-panel: #141729;
  --bg-surface: #1a1e35;
  --bg-elevated: #222744;
  --accent-purple: #7b2ff7;
  --accent-pink: #f72f8e;
  --accent-cyan: #00f5d4;
  --accent-yellow: #ffe156;
  --text-primary: #e8eaf6;
  --text-secondary: #8b90b5;
  --text-muted: #555a7e;
  --border: #2a2f4e;
}

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

body {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: 'Bricolage Grotesque', sans-serif;
  overflow: hidden;
  height: 100vh;
}

#root { height: 100vh; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-panel); }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-2deg) scale(1.02); }
  75% { transform: rotate(2deg) scale(1.02); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 15px rgba(123, 47, 247, 0.3), 0 0 30px rgba(247, 47, 142, 0.15); }
  50% { box-shadow: 0 0 25px rgba(123, 47, 247, 0.5), 0 0 50px rgba(247, 47, 142, 0.3); }
}

@keyframes frame-pop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes slide-in {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.logo-wiggle:hover { animation: wiggle 0.5s ease-in-out; }
.publish-btn { animation: pulse-glow 2.5s ease-in-out infinite; }
.frame-thumb { animation: frame-pop 0.2s ease-out; }

.tool-btn {
  transition: all 0.15s ease;
  position: relative;
}
.tool-btn:hover { background: var(--bg-elevated); }
.tool-btn.active {
  background: rgba(123, 47, 247, 0.25);
  border-left: 3px solid var(--accent-purple);
}
.tool-btn.active svg { color: var(--accent-cyan); }

.canvas-container {
  background-image:
    linear-gradient(45deg, #1e2240 25%, transparent 25%),
    linear-gradient(-45deg, #1e2240 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1e2240 75%),
    linear-gradient(-45deg, transparent 75%, #1e2240 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}

.timeline-frame {
  transition: all 0.15s ease;
  cursor: pointer;
}
.timeline-frame:hover { transform: scale(1.05); }
.timeline-frame.active {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

input[type="range"] {
  -webkit-appearance: none;
  background: var(--bg-elevated);
  border-radius: 4px;
  height: 4px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-cyan);
  cursor: pointer;
}

.color-swatch {
  transition: transform 0.15s ease;
  cursor: pointer;
}
.color-swatch:hover { transform: scale(1.15); }

.modal-overlay {
  background: rgba(13, 15, 26, 0.85);
  backdrop-filter: blur(8px);
}

.feed-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feed-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(123, 47, 247, 0.2);
}

.onion-toggle.active {
  background: rgba(0, 245, 212, 0.2);
  border-color: var(--accent-cyan);
}

@media (max-width: 768px) {
  .right-panel { display: none; }
  .left-toolbar { width: 48px !important; }
}