/**
 * PadManiacs Rhythm Game
 * Copyright (C) RETORA 2026
 * Licensed under the Pixelite License (see LICENSE file for full terms)
 * 
 * Source: https://github.com/RetoraDev/PadManiacs
 * Version: v1.0.0
 * Built: 2/27/2026, 5:06:02 PM
 * Platform: Web
 * Debug: false
 * Minified: true
 */

/*
  General Styles
*/
body {
  --primary-color: #ff5722;
  --secondary-color: #2196f3;
  --bg-color: #2d2d2d;
  --ui-color: #3d3d3d;
  --ui-highlight: #4d4d4d;
  --text-color: #e0e0e0;
  --text-dim: #a0a0a0;
  --border-color: #1d1d1d;
  --shadow-color: rgba(0, 0, 0, 0.5);
  --svg-filter: none;
  --transparent-bg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 16 16"><rect width="8" height="8" x="0" y="0" fill="%23ccc"/><rect width="8" height="8" x="8" y="8" fill="%23ccc"/></svg>');
  --transform-transition: 0.3s;
}

/* Themes */
body.theme-light {
  --primary-color: #ff7036;
  --secondary-color: #2196f3;
  --bg-color: #e0e0e0;
  --ui-color: #f0f0f0;
  --ui-highlight: #ffffff;
  --text-color: #0e0e0e;
  --text-dim: #000000;
  --border-color: #d1d1d1;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --svg-filter: invert();
}

body.theme-dark {}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

input, select {
  outline: none;
}

a {
  color: var(--primary-color);
}

/*
  Error Screen
*/
.editor-loading,
.editor-error {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--text-color);
  background-color: var(--bg-color);
  z-index: 2000;
}

.editor-error {
  padding: 20px;
  text-align: center;
}

.editor-error button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/*
  Loading Screen
*/
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: TinyUnicode;
  color: white;
}

.loading-spinner {
  border: 8px solid rgba(255, 255, 255, 0.2);
  border-top: 8px solid white;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

.loading-text {
  font-size: 24px;
  font-weight: bold;
}

/*
  App Containers
*/
.app-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.pixel-art-editor {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.editor-canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  touch-action: none;
}

.editor-canvas {
  position: absolute;
  transform-origin: center center;
  background-color: #fff;
  background-image: var(--transparent-bg);
  background-size: 16px 16px;
  background-position: 0 0;
  box-shadow: 0 0 16px var(--shadow-color);
}

.canvas-wrapper {
  transition: transform var(--transform-transition);
}

#debug-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999999999999999999999;
}

.editor-overlay-layer {
  position: absolute;
  top: 5%;
  left: 0;
  width: 100%;
  height: 90%;
  overflow: hidden;
  touch-action: none;
  pointer-events: none;
  z-index: 1;
}

.editor-overlay-layer > * {
  pointer-events: auto;
}

.editor-ui {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  width: 100%;
  height: 100%;
}

.editor-ui > * {
  pointer-events: auto;
}

.ui-top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  background-color: var(--ui-color);
  box-shadow: 0 2px 5px var(--shadow-color);
  z-index: 30;
}

.ui-bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  background-color: var(--ui-color);
  box-shadow: 0 -2px 5px var(--shadow-color);
  z-index: 30;
}

.ui-button {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background-color: transparent;
  border: none;
  color: var(--text-color);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.ui-button:hover {
  background-color: var(--ui-highlight);
}

.ui-button.active {
  background-color: var(--primary-color);
}

.ui-button .icon {
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.undo-redo-buttons {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

/*
  Icons
*/
.icon {
  filter: var(--svg-filter);
}

/* General Icons */
.icon-menu {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>');
}
.icon-animation {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>');
}
.icon-layers {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27-7.38 5.74zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16z"/></svg>');
}
.icon-switch-tool {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z"/></svg>');
}
.icon-undo {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/></svg>');
}
.icon-redo {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/></svg>');
}
.icon-settings {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></svg>');
}
.icon-palette {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 8.5H15.51M10.5 7.5H10.51M7.5 11.5H7.51M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 13.6569 19.6569 15 18 15H17.4C17.0284 15 16.8426 15 16.6871 15.0246C15.8313 15.1602 15.1602 15.8313 15.0246 16.6871C15 16.8426 15 17.0284 15 17.4V18C15 19.6569 13.6569 21 12 21ZM16 8.5C16 8.77614 15.7761 9 15.5 9C15.2239 9 15 8.77614 15 8.5C15 8.22386 15.2239 8 15.5 8C15.7761 8 16 8.22386 16 8.5ZM11 7.5C11 7.77614 10.7761 8 10.5 8C10.2239 8 10 7.77614 10 7.5C10 7.22386 10.2239 7 10.5 7C10.7761 7 11 7.22386 11 7.5ZM8 11.5C8 11.7761 7.77614 12 7.5 12C7.22386 12 7 11.7761 7 11.5C7 11.2239 7.22386 11 7.5 11C7.77614 11 8 11.2239 8 11.5Z" stroke="%23ffffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.icon-add {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>');
}
.icon-remove {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 13H5v-2h14v2z"/></svg>');
}
.icon-copy {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>');
}
.icon-cut {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z"/></svg>');
}
.icon-paste {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"/></svg>');
}
.icon-transform {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M22 18v-2H8V4h2L7 1 4 4h2v2H2v2h4v8c0 1.1.9 2 2 2h8v2h-2l3 3 3-3h-2v-2h4zM10 8h6v6h2V8c0-1.1-.9-2-2-2h-6v2z"/></svg>');
}
.icon-clear {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
}
.icon-unselect {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 13H5v-2h14v2z"/></svg>');
}
.icon-close {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
}
.icon-check {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');
}
.icon-play {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>');
}
.icon-pause {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>');
}
.icon-prev {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>');
}
.icon-next {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>');
}

/* Tool Icons */
.tool-pencil {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>');
}
.tool-eraser {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M16.24 3.56l4.95 4.94c.78.79.78 2.05 0 2.84L12 20.53a4.008 4.008 0 0 1-5.66 0L2.81 17c-.78-.79-.78-2.05 0-2.84l10.6-10.6c.79-.78 2.05-.78 2.83 0zM4.22 15.58l3.54 3.53c.78.79 2.04.79 2.83 0l3.53-3.53-4.95-4.95-4.95 4.95z"/></svg>');
}
.tool-line {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 13H5v-2h14v2z"/></svg>');
}
.tool-rect {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M4 6v12h16V6H4z" stroke="white" stroke-width="2"/></svg>');
}
.tool-ellipse {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 4C7.58 4 4 7.58 4 12s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/></svg>');
}
.tool-bucket {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><g id="Layer_2" data-name="Layer 2"><g id="invisible_box" data-name="invisible box"><rect width="48" height="48" fill="none"/></g><g id="Layer_6" data-name="Layer 6"><g><path fill="white" d="M16.5,2.6A1.8,1.8,0,0,0,15.1,2a2,2,0,0,0-1.4.6,1.9,1.9,0,0,0,0,2.8L19.4,11,6.2,24.1a3.9,3.9,0,0,0,0,5.6L19.4,42.8A3.8,3.8,0,0,0,22.2,44,3.9,3.9,0,0,0,25,42.8L41,26.9ZM9.1,26.9l13.1-13,13,13Z"/><path fill="white" d="M41,32s-4,5.8-4,8a4,4,0,0,0,8,0C45,37.8,41,32,41,32Z"/></g></g></g></svg>');
}
.tool-pipette {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20.71 5.63l-2.34-2.34a.996.996 0 0 0-1.41 0l-3.12 3.12-1.93-1.91-1.41 1.41 1.42 1.42L3 16.25V21h4.75l8.92-8.92 1.42 1.42 1.41-1.41-1.92-1.92 3.12-3.12c.4-.4.4-1.03.01-1.42zM6.92 19L5 17.08l8.06-8.06 1.92 1.92L6.92 19z"/></svg>');
}

/* File Browser Icons */
.icon.folder {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%235a6268" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>');
}
.icon.image-file {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%235a6268" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm-4.86 8.86l-3 3.87-1.14-1.33-3.58 4.6h12l-3.86-5.14z"/></svg>');
}
.icon.text-file {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%235a6268" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-8 18V4h7v5h5v11H6z"/></svg>');
}
.icon.project-file {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%235a6268" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-8 18V4h7l5 5v8.58l-1.84-1.84c1.28-1.94 1.07-4.57-.64-6.28a4.22 4.22 0 00-3-1.46c-1.28 0-2.55.49-3.53 1.46-1.95 1.95-1.95 5.11 0 7.05a4.22 4.22 0 003 1.46c.96 0 1.92-.28 2.75-.83L17.6 20H6z"/></svg>');
}

/* Settings Icons */
.icon-general {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/></svg>');
}
.icon-editor {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>');
}
.icon-canvas {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 9h10V7H7v2zm0 4h10v-2H7v2zm0 4h6v-2H7v2z"/></svg>');
}
.icon-performance {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/></svg>');
}
.icon-accessibility {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"/></svg>');
}
.icon-collab {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-1 .05 1.16.84 2 1.87 2 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
}
.icon-user {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88a9.947 9.947 0 0 1 12.28 0C16.43 19.18 14.03 20 12 20z"/></svg>');
}

/*
  Brush Size Indicator
*/
.brush-size-indicator {
  position: absolute;
  top: 50px;
  right: 10px;
  background-color: var(--ui-color);
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 10px var(--shadow-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  text-align: center;
  gap: 5px;
  z-index: 25;
}

.brush-size-text {
  font-size: 12px;
  color: var(--text-color);
}

.brush-size-indicator progress {
  width: 100%;
  height: 8px;
  border-radius: 3px;
  background-color: var(--bg-color);
}

.brush-size-indicator progress::-webkit-progress-bar {
  background-color: var(--bg-color);
  border-radius: 3px;
}

.brush-size-indicator progress::-webkit-progress-value {
  background-color: var(--primary-color);
  border-radius: 3px;
}

.brush-size-indicator progress::-moz-progress-bar {
  background-color: var(--primary-color);
  border-radius: 3px;
}

/* Color Indicator */
.color-indicator {
  display: flex;
  height: 30px;
  width: 60px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  box-shadow: 0 0 0 2px var(--border-color);
}

.color-primary,
.color-secondary {
  flex: 1;
}

.color-primary {
  background-color: var(--primary-color);
}

.color-secondary {
  background-color: var(--secondary-color);
}

.color-selector {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  border: 2px solid white;
  box-sizing: border-box;
  transition: left 0.2s;
  pointer-events: none;
}

.color-selector.secondary {
  left: 50%;
}

/*
  Menu Panel
*/
.menu-panel {
  position: absolute;
  top: 40px;
  left: 0;
  width: 250px;
  height: calc(100% - 90px);
  background-color: var(--ui-color);
  box-shadow: 2px 0 5px var(--shadow-color);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 25;
  display: flex;
  flex-direction: column;
  padding: 10px;
  overflow-y: auto;
}

.menu-panel.visible {
  transform: translateX(0);
}

.menu-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 10px;
  overflow-x: scroll;
}

.menu-tab {
  padding: 8px 15px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.menu-tab.active {
  border-bottom-color: var(--primary-color);
}

.menu-content {
  flex: 1;
  overflow-y: auto;
}

.menu-section {
  margin-bottom: 15px;
}

.menu-section h3 {
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text-dim);
}

.menu-item {
  padding: 8px 5px;
  cursor: pointer;
  border-radius: 4px;
}

.menu-item:hover {
  background-color: var(--ui-highlight);
}

/*
  Layers Panel
*/
.layers-panel {
  position: absolute;
  top: 40px;
  right: 0;
  width: 250px;
  height: calc(100% - 90px);
  background-color: var(--ui-color);
  box-shadow: -2px 0 5px var(--shadow-color);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 15;
  display: flex;
  flex-direction: column;
  padding: 10px;
  overflow-y: auto;
}

.layers-panel.visible {
  transform: translateX(0);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-color);
}

.panel-title {
  font-weight: bold;
}

.panel-close {
  cursor: pointer;
}

.layers-container {
  flex: 1;
  overflow-y: auto;
}

.layer-item {
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 5px;
  background-color: var(--bg-color);
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  position: relative;
}

.layer-item.active {
  border-left: 3px solid var(--primary-color);
  background-color: var(--ui-highlight);
}

.layer-item.dragging {
  opacity: 0.5;
  background-color: var(--primary-color);
}

.layer-thumb-container {
  margin-right: 10px;
  flex-shrink: 0;
}

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

.layer-info span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer-actions {
  display: flex;
  flex-direction: row;
  gap: 4px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.layer-item:hover .layer-actions {
  opacity: 1;
}

.layer-action {
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: var(--text-color);
  cursor: pointer;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.layer-action:hover {
  background-color: var(--ui-highlight);
}

/*
  Generic Add Button
*/
.add-button {
  justify-content: center;
  text-align: center;
  flex-direction: column;
  background-color: var(--ui-highlight);
  border: 2px dashed var(--border-color);
}

.add-button:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.add-button-icon {
  margin-bottom: 5px;
}

.add-button-icon svg {
  color: var(--text-dim);
}

.add-button:hover .add-button-icon svg {
  color: white;
}

/*
  Undo Toast
*/
.undo-toast {
  position: fixed;
  background-color: var(--ui-color);
  color: var(--text-color);
  padding: 12px 16px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1000;
  animation: slideUp 0.3s ease;
}

.undo-button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.undo-button:hover {
  background-color: var(--primary-color);
}

/* Notification */
.notification {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--ui-color);
  padding: 10px 15px;
  border-radius: 4px;
  box-shadow: 0 2px 10px var(--shadow-color);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.notification.visible {
  opacity: 1;
}

/*
  Popup
*/
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99999999999999999999999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.popup-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.popup-content {
  background-color: var(--ui-color);
  border-radius: 4px;
  padding: 15px;
  max-width: 90%;
  max-height: 90%;
  overflow: auto;
}

.popup-title {
  margin-bottom: 15px;
  font-size: 18px;
}

.popup-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}

.popup-content input {
  width: 100%;
  padding: 5px;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: 3px;
  text-align: center;
}

.popup-buttons button {
  margin-left: 10px;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
}

.popup-buttons .cancel {
  background-color: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.popup-buttons .confirm {
  background-color: var(--primary-color);
  border: none;
  color: white;
}

/* 
  Animation panel 
*/
.animation-timeline {
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  height: 180px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  background-color: var(--ui-color);
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  z-index: 15;
}

.animation-timeline.visible {
  transform: translateY(0);
}

.timeline-header {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  background-color: var(--ui-highlight);
  border-bottom: 1px solid var(--border-color);
  gap: 10px;
}

.timeline-header .ui-button {
  width: 32px;
  height: 32px;
}

.fps-control {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

.fps-control input {
  width: 50px;
  padding: 4px;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: 3px;
}

.timeline-content {
  display: flex;
  gap: 8px;
  padding: 10px;
  overflow-x: auto;
  flex: 1;
}

.timeline-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
  background-color: var(--bg-color);
  border-radius: 6px;
  cursor: pointer;
  min-width: 70px;
  transition: transform 0.2s ease, opacity 0.2s ease;
  position: relative;
}

.timeline-frame.active {
  background-color: var(--primary-color);
  transform: scale(1.05);
}

.timeline-frame.dragging {
  opacity: 0.6;
}

.frame-thumb {
  margin-bottom: 5px;
}

.frame-thumb canvas {
  border: 1px solid var(--border-color);
  border-radius: 3px;
}

.frame-time {
  font-size: 10px;
  color: var(--text-dim);
  padding: 2px 4px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  margin-bottom: 3px;
  cursor: pointer;
}

.frame-time:active, .frame-time:hover {
  background-color: rgba(255, 255, 255, 0.3);
  color: var(--text-color);
}

.frame-number {
  font-size: 11px;
  font-weight: bold;
}

.animation-preview {
  position: absolute;
  right: 0px;
  width: 120px;
  height: auto;
  transform: translateY(-100%);
  border: 2px solid var(--border-color);
  background-color: #fff;
  background-image: var(--transparent-bg);
  display: none;
}

.animation-preview.visible {
  display: block;
}

/* Scrollbar styling for timeline */
.timeline-content::-webkit-scrollbar {
  height: 6px;
}

.timeline-content::-webkit-scrollbar-track {
  background: var(--bg-color);
}

.timeline-content::-webkit-scrollbar-thumb {
  background: var(--text-dim);
  border-radius: 3px;
}

.timeline-content::-webkit-scrollbar-thumb:hover {
  background: var(--text-color);
}

/*
  Bottom Menus
*/
.tool-selection-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-button-container {
  position: relative;
}

.tool-dropdown {
  position: absolute;
  bottom: 100%;
  right: 0;
  background-color: var(--ui-color);
  border-radius: 4px;
  box-shadow: 0 2px 10px var(--shadow-color);
  padding: 5px;
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 30;
  margin-bottom: 8px;
}

.tool-dropdown.visible {
  display: flex;
}

.tool-dropdown .ui-button {
  margin: 2px;
  width: 36px;
  height: 36px;
}

/* Tool Settings */
.tool-settings-popup {
  position: fixed;
  background-color: var(--ui-color);
  left: 0;
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 2px 10px var(--shadow-color);
  z-index: 100;
  min-width: 200px;
  margin-bottom: 10px;
}

.tool-settings-popup h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: var(--text-color);
}

.tool-setting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.tool-setting label {
  color: var(--text-color);
  margin-right: 10px;
}

.tool-setting input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.tool-setting input[type="number"] {
  width: 60px;
  padding: 4px;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: 3px;
}

/* Current tool button */
#current-tool {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--primary-color);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#current-tool .icon {
  width: 28px;
  height: 28px;
}

/* Tool switch button */
#switch-tool,
#tool-settings {
  background-color: var(--ui-highlight);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#switch-tool .icon,
#tool-settings .icon {
  width: 24px;
  height: 24px;
}

/* Reference Image Controls */
.reference-controls {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: var(--ui-color);
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 10px var(--shadow-color);
  z-index: 5;
}

.opacity-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.opacity-label {
  font-size: 12px;
  color: var(--text-color);
  white-space: nowrap;
}

.opacity-slider {
  width: 80px;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-color);
  outline: none;
  -webkit-appearance: none;
}

.opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
}

.opacity-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
  border: none;
}

.opacity-value {
  font-size: 11px;
  color: var(--text-dim);
  min-width: 30px;
  text-align: center;
}

/*
  File Browser Styles 
*/
.file-browser-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
}

.file-browser-dialog {
  background-color: #3d3d3d;
  border-radius: 8px;
  padding: 20px;
  width: 100%;
  max-width: 500px;
  max-height: calc(100vh - 40px); /* Account for padding */
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  overflow: hidden; /* Prevent content from overflowing rounded corners */
}

.file-browser-title {
  font-size: 18px;
  margin-bottom: 15px;
  color: #ffffff;
  font-weight: bold;
  flex-shrink: 0;
}

.file-browser-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Allows content to shrink properly */
  overflow: hidden; /* Contain the list */
}

.file-browser-list {
  border: 1px solid #1d1d1d;
  background-color: #2d2d2d;
  border-radius: 4px;
  overflow-y: auto;
  flex: 1;
  min-height: 100px; /* Minimum height */
  max-height: 300px; /* Maximum height before scrolling */
}

.file-item {
  padding: 10px;
  cursor: pointer;
  color: #e0e0e0;
  border-bottom: 1px solid #1d1d1d;
  transition: background-color 0.2s;
  word-break: break-all;
}

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

.file-item:hover {
  background-color: #4d4d4d;
}

.file-item.directory {
  color: #4fc3f7;
}

.file-item .icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 8px;
}

.cordova-path {
  color: #a0a0a0;
  font-size: 12px;
  margin-bottom: 10px;
  word-break: break-all;
  padding: 5px;
  background-color: #2d2d2d;
  border-radius: 3px;
  flex-shrink: 0;
}

.file-browser-filename {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #2d2d2d;
  border: 1px solid #1d1d1d;
  color: #e0e0e0;
  border-radius: 4px;
  font-size: 14px;
  flex-shrink: 0;
}

.file-browser-type {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  background-color: #2d2d2d;
  border: 1px solid #1d1d1d;
  color: #e0e0e0;
  border-radius: 4px;
  font-size: 14px;
  flex-shrink: 0;
}

.file-browser-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  padding-top: 5px;
  margin-top: 15px;
}

.file-browser-cancel {
  padding: 8px 15px;
  background-color: #424242;
  border: none;
  color: #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.file-browser-confirm {
  padding: 8px 15px;
  background-color: #ff5722;
  border: none;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.file-browser-browse {
  width: 100%;
  padding: 12px;
  background-color: #ff5722;
  border: none;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  flex-shrink: 0;
}

.loading,
.empty,
.error {
  padding: 20px;
  text-align: center;
  color: #a0a0a0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error {
  color: #f44336;
}

/* Scrollbar styling */
.file-browser-list::-webkit-scrollbar {
  width: 8px;
}

.file-browser-list::-webkit-scrollbar-track {
  background: #2d2d2d;
  border-radius: 0 4px 4px 0;
}

.file-browser-list::-webkit-scrollbar-thumb {
  background: #4d4d4d;
  border-radius: 4px;
}

.file-browser-list::-webkit-scrollbar-thumb:hover {
  background: #5d5d5d;
}

/*
  Color Picker Styles
*/
.color-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  transition: background-color 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.color-picker-overlay.drag-over {
  background-color: transparent;
}

.color-picker {
  background-color: var(--ui-color);
  border-radius: 8px;
  width: 300px;
  max-width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px var(--shadow-color);
}

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

.color-picker-title {
  font-weight: bold;
}

.color-picker-close {
  font-size: 24px;
  cursor: pointer;
  padding: 0 5px;
}

.color-picker-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
}

.color-picker-tab {
  flex: 1;
  text-align: center;
  padding: 10px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.color-picker-tab.active {
  border-bottom-color: var(--primary-color);
}

.color-picker-content {
  padding: 15px;
  overflow-y: auto;
}

.color-picker-tab-content {
  display: none;
}

.color-slider-container {
  margin-bottom: 15px;
}

.color-slider-container label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.slider-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.slider-btn {
  width: 24px;
  height: 24px;
  border: none;
  background-color: var(--ui-highlight);
  color: var(--text-color);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.color-slider {
  flex: 1;
}

.color-value {
  width: 50px;
  padding: 4px;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: 3px;
  text-align: center;
}

.suffix {
  width: 20px;
  text-align: center;
}

.palette-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.palette-actions button {
  flex: 1;
  padding: 8px;
  background-color: var(--ui-highlight);
  border: none;
  border-radius: 4px;
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.palette-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 5px;
}

.palette-color {
  aspect-ratio: 1;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
}

.palette-color.dragging {
  opacity: 0.1;
}

.palette-color:hover {
  transform: scale(1.1);
  border: 1px solid #fff;
}

.palette-color.floating {
  position: fixed;
  top: 0px;
  left: 0px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.palette-color.dragging.floating {
  opacity: 0.5;
}

.no-palette {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px;
  color: var(--text-dim);
}

.recent-colors {
  padding: 0 15px 15px;
}

.recent-colors-title {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--text-dim);
}

.recent-colors-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
}

.recent-color {
  aspect-ratio: 1;
  border-radius: 3px;
  cursor: pointer;
  transition: transform 0.2s;
}

.recent-color:hover {
  transform: scale(1.1);
}

.color-picker-footer {
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-top: 1px solid var(--border-color);
}

.current-color-preview {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

#confirm-color {
  flex: 1;
  padding: 10px;
  background-color: var(--primary-color);
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
}

/* Palette Delete Zone */
.palette-delete-zone {
  position: fixed;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  display: flex;
  background-color: var(--shadow-color);
  border: 2px dashed var(--border-color);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  cursor: default;
  z-index: 1001;
  box-shadow: 0 4px 20px var(--shadow-color);
  transition: all 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.palette-delete-zone.visible {
  opacity: 1;
  pointer-events: auto;
  bottom: 80px;
}

.palette-delete-zone.drag-over {
  background-color: rgba(255, 0, 0, 0.3);
  border-color: #ff4444;
  transform: translateX(-50%) scale(1.1);
  animation: pulse-delete-zone 0.5s ease-in-out infinite;
}

.palette-delete-zone svg {
  width: 24px;
  height: 24px;
  color: var(--text-color);
  transition: all 0.3s ease;
}

.palette-delete-zone.drag-over svg {
  color: #ff4444;
  transform: scale(1.2);
}

@keyframes pulse-delete-zone {
  0% {
    box-shadow: 0 4px 20px rgba(255, 68, 68, 0.4);
  }
  50% {
    box-shadow: 0 6px 25px rgba(255, 68, 68, 0.6);
  }
  100% {
    box-shadow: 0 4px 20px rgba(255, 68, 68, 0.4);
  }
}

/* Palette Add Button */
.palette-add-button {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  background-color: var(--ui-highlight);
  border: 2px dashed var(--border-color);
  border-radius: 4px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.palette-add-button:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  transform: scale(1.1);
}

/* Update palette grid layout */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 6px;
  padding: 10px;
  background-color: var(--bg-color);
  border-radius: 6px;
  min-height: 100px;
}

/* Ensure colors and add button are same size */
.palette-color, .palette-add-button {
  width: 30px;
  height: 30px;
  border-radius: 4px;
}

/* Drag and drop improvements */
.palette-color.dragging {
  opacity: 0.5;
  transform: scale(1.1);
  z-index: 10;
}

/* No palette message */
.no-palette {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px;
  color: var(--text-dim);
  font-style: italic;
}

@media (max-width: 400px) {
  .palette-grid {
    grid-template-columns: repeat(8, 1fr);
  }
  .recent-colors-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

/*
  Color Pick Line Styles 
*/
.color-pick-line {
  position: fixed;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #fff 50%, transparent 100%);
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  transform-origin: 0 0;
}

.color-pick-line::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 8px;
  background: transparent;
  pointer-events: none;
}

.color-pick-line {
  animation: colorPickPulse 0.3s ease-in-out infinite;
}

/* Add visual feedback when dragging from color indicator */
.color-indicator.dragging {
  transform: scale(1.1);
  box-shadow: 0 0 10px #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 
  Timelapse Export Progress
*/
.timelapse-progress progress {
  width: 100%;
  height: 20px;
  border-radius: 3px;
  background-color: var(--bg-color);
}

.timelapse-progress progress::-webkit-progress-bar {
  background-color: var(--bg-color);
  border-radius: 3px;
}

.timelapse-progress progress::-webkit-progress-value {
  background-color: var(--primary-color);
  border-radius: 3px;
}

.timelapse-progress progress::-moz-progress-bar {
  background-color: var(--primary-color);
  border-radius: 3px;
}

.progress-text {
  font-size: 12px;
  color: var(--text-dim);
}

/*
  Grids Panel
*/
.grid-panel {
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  height: 360px; /* Double the animation panel height */
  transform: translateY(110%);
  transition: transform 0.3s ease;
  background-color: var(--ui-color);
  border-top: 2px solid var(--border-color);
  display: flex;
  flex-direction: column;
  z-index: 20;
  box-shadow: 0 -4px 10px var(--shadow-color);
}

.grid-panel.visible {
  transform: translateY(0);
}

/* Panel Header */
.grid-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background-color: var(--ui-highlight);
  border-bottom: 1px solid var(--border-color);
  height: 40px;
}

.grid-panel-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-color);
}

.grid-panel-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-color);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.grid-panel-close:hover,
.grid-panel-close:active {
  background-color: var(--bg-color);
}

/* Toolbar */
.grid-toolbar {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--ui-color);
}

.grid-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.grid-btn.primary {
  background-color: var(--primary-color);
  color: white;
}

.grid-btn.primary:hover,
.grid-btn.primary:active {
  filter: brightness(1.1);
}

.grid-btn .icon {
  width: 16px;
  height: 16px;
  filter: brightness(1);
}

/* Grid List */
.grid-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Grid Item */
.grid-item {
  position: relative;
  background-color: var(--bg-color);
  border-radius: 6px;
  padding: 16px;
  position: relative;
  border: 1px solid var(--border-color);
  display: flex;
  gap: 16px;
}

/* Grid Preview */
.grid-preview {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  border: 2px solid var(--border-color);
  flex-shrink: 0;
}

/* Grid Info */
.grid-info {
  flex: 1;
  min-width: 0;
}

.grid-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.grid-name-input {
  flex: 1;
  padding: 6px 8px;
  background-color: var(--ui-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-color);
  font-size: 14px;
}

.grid-name-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* Toggle Switch */
.grid-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.grid-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.grid-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-color);
  border: 2px solid var(--border-color);
  transition: .2s;
  border-radius: 24px;
}

.grid-toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: var(--text-dim);
  transition: .2s;
  border-radius: 50%;
}

input:checked + .grid-toggle-slider {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

input:checked + .grid-toggle-slider:before {
  transform: translateX(20px);
  background-color: white;
}

/* Grid Controls */
.grid-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 8px;
}

.grid-control {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 8px;
}

.grid-control-label {
  min-width: 60px;
  color: var(--text-dim);
}

.grid-control input[type="range"] {
  flex: 1;
  height: 4px;
  background: var(--ui-color);
  border-radius: 2px;
  -webkit-appearance: none;
}

.grid-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--primary-color);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid white;
}

.grid-control input[type="color"] {
  width: 40px;
  height: 30px;
  padding: 2px;
  background: var(--ui-color);
  border: 2px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
}

.grid-control-value {
  min-width: 45px;
  text-align: right;
  color: var(--text-color);
  font-weight: bold;
}

/* Number input styles */
.grid-number-input {
  width: 70px;
  padding: 6px 8px;
  background-color: var(--ui-color);
  border: 2px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-color);
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  -moz-appearance: textfield;
}

.grid-number-input::-webkit-outer-spin-button,
.grid-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.grid-number-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.grid-number-input:hover {
  border-color: var(--ui-highlight);
}

.grid-unit {
  min-width: 25px;
  color: var(--text-dim);
  font-size: 12px;
}

/* Color input */
.grid-color-input {
  width: 50px;
  height: 34px;
  padding: 2px;
  background: var(--ui-color);
  border: 2px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
}

.grid-color-input:hover {
  border-color: var(--primary-color);
}

/* Remove Button */
.grid-remove-btn {
  position: absolute;
  top: -16px; /* Move up to overflow */
  right: -8px; /* Move right to overflow */
  width: 28px;
  height: 28px;
  border: none;
  background-color: var(--primary-color); /* Make it stand out */
  color: white;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%; /* Make it circular */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* Add shadow for depth */
  z-index: 15; /* Ensure it's above the grid item */
  transition: all 0.2s ease;
  padding: 0;
  line-height: 1;
}

.grid-remove-btn:hover,
.grid-remove-btn:active {
  background-color: #ff4444; /* Red on hover for warning */
  transform: scale(1.1); /* Slight grow on hover */
  box-shadow: 0 4px 10px rgba(255, 68, 68, 0.4);
}

/* Empty State */
.grid-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-dim);
  font-style: italic;
}

/* Grid Overlay */
.grid-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.grid-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
}

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

.grid-list::-webkit-scrollbar-track {
  background: var(--bg-color);
}

.grid-list::-webkit-scrollbar-thumb {
  background: var(--ui-highlight);
  border-radius: 4px;
}

.grid-list::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .grid-control {
    flex-wrap: wrap;
  }
  
  .grid-control-label {
    min-width: 50px;
  }
  
  .grid-number-input {
    width: 60px;
  }
}

/* Settings */
.settings-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-color);
  z-index: 10000;
  display: flex;
  animation: fadeIn 0.2s ease;
}

/* Settings Container */
.settings-container {
  width: 100%;
  height: 100%;
  background-color: var(--bg-color);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
.settings-header {
  height: 40px;
  background-color: var(--ui-color);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-shadow: 0 2px 5px var(--shadow-color);
  z-index: 30;
}

.settings-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-color);
}

.settings-close {
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  color: var(--text-color);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.settings-close:hover,
.settings-close:active {
  background-color: var(--ui-highlight);
}

/* Main content area */
.settings-main {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* Sidebar - Like app bottom bar but vertical */
.settings-sidebar {
  width: 80px;
  background-color: var(--ui-color);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  overflow-y: auto;
}

.settings-category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  cursor: pointer;
  transition: background-color 0.2s;
  color: var(--text-dim);
  gap: 4px;
}

.settings-category-item .icon {
  width: 24px;
  height: 24px;
  filter: brightness(0.8);
}

.settings-category-item span:last-child {
  font-size: 11px;
  text-align: center;
}

.settings-category-item:hover,
.settings-category-item:active {
  background-color: var(--ui-highlight);
  color: var(--text-color);
}

.settings-category-item.active {
  background-color: var(--primary-color);
  color: white;
}

.settings-category-item.active .icon {
  filter: brightness(1);
}

/* Content area */
.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background-color: var(--bg-color);
}

.settings-category-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--primary-color);
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-color);
}

/* Setting Items */
.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  margin-bottom: 8px;
  background-color: var(--ui-color);
  border-radius: 4px;
  transition: background-color 0.2s;
  box-shadow: 0 2px 5px var(--shadow-color);
}

.setting-item:hover {
  background-color: var(--ui-highlight);
}

.setting-item.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.setting-info {
  flex: 1;
  margin-right: 16px;
}

.setting-label {
  font-weight: bold;
  color: var(--text-color);
  margin-bottom: 4px;
}

.setting-description {
  font-size: 12px;
  color: var(--text-dim);
}

.setting-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Toggle Switch - App style */
.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-color);
  border-radius: 14px;
  border: 2px solid var(--border-color);
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: var(--text-dim);
  transition: .2s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

input:checked + .slider:before {
  transform: translateX(24px);
  background-color: white;
}

/* Range Input */
.range-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
}

.range-wrapper input[type="range"] {
  flex: 1;
  height: 4px;
  background: var(--bg-color);
  border-radius: 2px;
  -webkit-appearance: none;
}

.range-wrapper input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: var(--primary-color);
  border-radius: 50%;
  cursor: pointer;
}

.range-value {
  min-width: 40px;
  text-align: center;
  font-weight: bold;
  color: var(--text-color);
  background-color: var(--bg-color);
  border: 2px solid var(--border-color);
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.range-value:hover {
  color: var(--text-color);
  background-color: var(--ui-highlight);
}

/* Select Input */
.setting-control select {
  padding: 8px 32px 8px 12px;
  background-color: var(--bg-color);
  border: 2px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-color);
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  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='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  min-width: 150px;
}

.setting-control select:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* Text Input */
.setting-control input[type="text"] {
  padding: 8px 12px;
  background-color: var(--bg-color);
  border: 2px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-color);
  font-size: 14px;
  min-width: 150px;
}

.setting-control input[type="text"]:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* Color Input */
.color-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-wrapper input[type="color"] {
  width: 40px;
  height: 40px;
  padding: 2px;
  background: var(--bg-color);
  border: 2px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
}

.color-wrapper input[type="text"] {
  min-width: 100px;
}

/* Footer - Like app top bar */
.settings-footer {
  height: 50px;
  background-color: var(--ui-color);
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 10px;
  box-shadow: 0 -2px 5px var(--shadow-color);
  z-index: 30;
}

.settings-btn {
  height: 36px;
  padding: 0 20px;
  border-radius: 4px;
  border: none;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.settings-btn.primary {
  background-color: var(--primary-color);
  color: white;
}

.settings-btn.primary:hover,
.settings-btn.primary:active {
  filter: brightness(1.1);
}

.settings-btn.secondary {
  background-color: transparent;
  border: 2px solid var(--border-color);
  color: var(--text-color);
}

.settings-btn.secondary:hover,
.settings-btn.secondary:active {
  background-color: var(--ui-highlight);
}

.settings-btn.small {
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
}

/* Restart Warning - App style */
.settings-restart-warning {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--ui-color);
  color: var(--text-color);
  padding: 12px 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 12px var(--shadow-color);
  animation: slideUp 0.3s ease;
  z-index: 10001;
}

@keyframes slideUp {
  from {
    transform: translate(-50%, 100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

/* Scrollbar styling */
.settings-content::-webkit-scrollbar,
.settings-sidebar::-webkit-scrollbar {
  width: 8px;
}

.settings-content::-webkit-scrollbar-track,
.settings-sidebar::-webkit-scrollbar-track {
  background: var(--bg-color);
}

.settings-content::-webkit-scrollbar-thumb,
.settings-sidebar::-webkit-scrollbar-thumb {
  background: var(--ui-highlight);
  border-radius: 4px;
}

.settings-content::-webkit-scrollbar-thumb:hover,
.settings-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

/* Mobile responsiveness */
@media (max-width: 600px) {
  .settings-sidebar {
    width: 60px;
  }
  
  .settings-category-item span:last-child {
    font-size: 10px;
  }
  
  .setting-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .setting-control {
    width: 100%;
    justify-content: flex-end;
  }
  
  .range-wrapper {
    min-width: 100%;
  }
}


/*
  Collab Styles
*/
.collab-session-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-color);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.2s ease;
}

.collab-session-header {
  height: 50px;
  background-color: var(--ui-color);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.collab-session-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.collab-session-title h2 {
  font-size: 18px;
  color: var(--text-color);
}

.collab-close-btn {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--text-color);
  font-size: 24px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.collab-close-btn:hover {
  background-color: var(--ui-highlight);
}

.collab-session-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.collab-info-card {
  background-color: var(--ui-color);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.collab-info-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}

.collab-info-label {
  color: var(--text-dim);
  min-width: 70px;
}

.collab-info-value {
  color: var(--text-color);
  font-weight: bold;
  word-break: break-all;
}

.collab-info-value.token {
  font-family: monospace;
  background-color: var(--bg-color);
  padding: 4px 8px;
  border-radius: 4px;
}

.collab-copy-btn {
  background-color: var(--ui-highlight);
  border: none;
  border-radius: 4px;
  color: var(--text-color);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.collab-copy-btn:hover {
  background-color: var(--primary-color);
}

.collab-members-section {
  background-color: var(--ui-color);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.collab-members-section h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: var(--text-color);
}

.collab-members-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.collab-member-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background-color: var(--bg-color);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  touch-action: pan-y;
}

.collab-member-item:hover {
  background-color: var(--ui-highlight);
}

.collab-member-item.current-user {
  background-color: var(--primary-color);
  color: white;
}

.collab-member-name {
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}

.collab-host-badge {
  background-color: gold;
  color: black;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 4px;
  border-radius: 3px;
  margin-left: 6px;
}

.collab-actions {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.collab-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.collab-btn.danger {
  background-color: #ff4444;
  color: white;
}

.collab-btn.danger:hover {
  background-color: #ff6666;
}

/* Connect Dialog */
.collab-connect-dialog {
  min-width: 300px;
}

.collab-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.collab-tab {
  padding: 8px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.collab-tab.active {
  border-bottom-color: var(--primary-color);
  color: var(--primary-color);
}

.collab-form {
  display: none;
}

.collab-form.active {
  display: block;
}

.collab-form-group {
  margin-bottom: 16px;
}

.collab-form-group label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-dim);
  font-size: 12px;
}

.collab-form-group input,
.collab-form-group select {
  width: 100%;
  padding: 10px;
  background-color: var(--bg-color);
  border: 2px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-color);
  font-size: 14px;
}

.collab-form-group input:focus,
.collab-form-group select:focus {
  outline: none;
  border-color: var(--primary-color);
}

.collab-public-list {
  display: none;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.collab-public-list.active {
  display: flex;
}

.collab-public-item {
  padding: 12px;
  background-color: var(--bg-color);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.collab-public-item:hover {
  background-color: var(--ui-highlight);
}

.collab-public-name {
  font-weight: bold;
}

.collab-public-meta {
  display: flex;
  gap: 8px;
  color: var(--text-dim);
  font-size: 12px;
}

.collab-lock {
  color: gold;
}

.collab-loading,
.collab-empty,
.collab-error {
  padding: 40px;
  text-align: center;
  color: var(--text-dim);
}

.collab-error {
  color: #ff4444;
}

/* Chat */
.collab-chat-button {
  position: absolute;
  left: 10px;
  transform: translateY(-120%);
  background: var(--ui-highlight);
  border: 2px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-color);
  padding: 4px 8px;
  cursor: pointer;
  display: none;
}

.collab-chat-button.new-message {
  animation: newMessage 0.3s linear infinite;
}

@keyframes newMessage {
  from {
    background-color: var(--ui-highlight);
    border-color: var(--border-color);
  }
  to {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
  }
}

.collab-chat-container {
  position: absolute;
  left: 10px;
  width: 250px;
  height: auto;
  max-height: 300px;
  background-color: rgba(45, 45, 45, 0.9);
  backdrop-filter: blur(5px);
  border-radius: 8px;
  display: none;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
  transform: translateY(-105%);
  border: 1px solid var(--border-color);
}

.collab-chat-messages {
  flex: 1;
  overflow-y: auto;
  height: auto;
  max-height: 200px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.collab-chat-message {
  font-size: 12px;
  word-break: break-word;
}

.collab-chat-name {
  font-weight: bold;
  margin-right: 4px;
}

.collab-chat-text {
  color: var(--text-color);
}

.collab-chat-input-container {
  display: flex;
  padding: 8px;
  gap: 4px;
  background-color: var(--bg-color);
  border-top: 1px solid var(--border-color);
}

.collab-chat-input {
  flex: 1;
  padding: 6px;
  background-color: var(--ui-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-color);
  font-size: 12px;
  pointer-events: auto;
}

.collab-chat-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.collab-chat-send {
  width: 32px;
  height: 32px;
  background-color: var(--primary-color);
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.collab-chat-send:hover {
  filter: brightness(1.1);
}

.collab-chat-close {
  position: absolute;
  top: 4px;
  right: 8px;
  display: block;
  font-size: 16px;
  aspect-ratio: 1 / 1;
  padding: 4px;
  pointer-events: auto;
}

/* Ping Indicator */
.collab-ping-indicator {
  position: absolute;
  top: 45px;
  right: 10px;
  background-color: rgba(45, 45, 45, 0.9);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  display: none;
  align-items: center;
  gap: 4px;
  z-index: 25;
  backdrop-filter: blur(5px);
}

.ping-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ping-value {
  color: var(--text-color);
}

/* Cursors */
.collab-cursor-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 15;
}

.collab-cursor {
  position: absolute;
  transform: translate(-5px, -5px);
  pointer-events: none;
  z-index: 15;
}

.collab-cursor-arrow {
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid currentColor;
  border-radius: 2px;
  transform: rotate(45deg);
}

.collab-cursor-name {
  position: absolute;
  top: -20px;
  left: 0;
  background-color: currentColor;
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 3px;
  white-space: nowrap;
}

/* User name popup */
.collab-user-name {
  position: absolute;
  font-size: 10px;
  padding: 2px 4px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 3px;
  pointer-events: none;
  z-index: 20;
  transition: opacity 0.5s ease;
  opacity: 1;
}

/* Connecting overlay */
.collab-connecting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.collab-connecting-spinner {
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

.collab-connecting-text {
  color: white;
  font-size: 16px;
}

/* Admin popup */
.collab-admin-popup {
  min-width: 250px;
}

.collab-admin-member {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.collab-permissions {
  margin-top: 16px;
}

.collab-permissions h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--text-dim);
}

.collab-permission-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.collab-permission-item span {
  font-size: 13px;
}

.collab-permission-item select {
  padding: 4px 8px;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-color);
  font-size: 12px;
}

.collab-permission-item select:disabled {
  opacity: 0.5;
}

/* Reconnect progress */
.reconnect-progress {
  text-align: center;
  padding: 20px;
}

.reconnect-progress progress {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  margin-top: 10px;
}

.reconnect-progress progress::-webkit-progress-bar {
  background-color: var(--bg-color);
  border-radius: 4px;
}

.reconnect-progress progress::-webkit-progress-value {
  background-color: var(--primary-color);
  border-radius: 4px;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
  .collab-chat-container {
    width: 200px;
    height: 250px;
  }
  
  .collab-info-item {
    flex-wrap: wrap;
  }
  
  .collab-info-value.token {
    font-size: 12px;
  }
}

/*
  Animations
*/
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes slideUp {
  from {
    transform: translate(-50%, 100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}
@keyframes colorPickPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}