* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Inter', sans-serif;
  background-color: #0a0a0a;
  color: #e4e4e7;
  display: flex;
  height: 100vh;
  overflow: hidden;
  user-select: none;
}

/* Sidebar Docker principale */
.sidebar {
  width: 460px;
  background: #111111;
  border-right: 1px solid #222222;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  z-index: 10;
}

h1 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #84cc16;
}

.subtitle { font-size: 0.72rem; color: #71717a; margin-bottom: 4px; }

/* PANNELLI COLLASSABILI (Accordion UI) */
.panel {
  background: #161618;
  border: 1px solid #27272a;
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.panel.floating {
  position: absolute !important;
  z-index: 999;
  width: 380px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 0 1px #84cc16;
  border-color: #84cc16;
}

.panel-header {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: #06b6d4;
  padding: 10px 12px;
  background: #1c1c1f;
  cursor: grab;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.panel-header:active { cursor: grabbing; }
.panel-header:hover { background: #242428; color: #84cc16; }
.panel-header.mask-header { color: #f43f5e; }

.panel-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-btn {
  background: #27272a;
  border: 1px solid #3f3f46;
  color: #a1a1aa;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
}

.panel-btn:hover { background: #84cc16; color: #000; }

.arrow {
  font-size: 0.75rem;
  transition: transform 0.2s;
}

.panel.collapsed .arrow { transform: rotate(-90deg); }

.panel-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.panel.collapsed .panel-body { display: none !important; }

/* Grid 10 Tabs Layer */
.layer-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.tab-btn {
  background: #18181b;
  border: 1px solid #27272a;
  color: #71717a;
  padding: 6px 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}

.tab-btn.active {
  background: #84cc16;
  color: #000;
  border-color: #84cc16;
  font-weight: 600;
}

.control-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.control-group.full { grid-column: span 2; }

label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: #a1a1aa;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.slider-number-box {
  display: flex;
  align-items: center;
  gap: 6px;
}

.slider-number-box input[type="range"] { flex: 1; }

.slider-number-box input[type="number"] {
  width: 62px;
  text-align: right;
  padding: 4px;
  font-size: 0.7rem;
  background: #09090b;
  border: 1px solid #27272a;
  color: #84cc16;
  border-radius: 3px;
}

input[type="range"], select, input[type="color"], input[type="text"] {
  width: 100%;
  background: #18181b;
  border: 1px solid #27272a;
  color: #fff;
  padding: 6px;
  border-radius: 4px;
  outline: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
}

input[type="text"]:focus, input[type="number"]:focus { border-color: #84cc16; }
input[type="color"] { height: 30px; cursor: pointer; padding: 2px; }

.btn-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}

button.action-btn {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 8px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-project { background: #27272a; color: #06b6d4; border: 1px solid #06b6d4; }
.btn-project:hover { background: #06b6d4; color: #000; }

.btn-copy { background: #27272a; color: #a855f7; border: 1px solid #a855f7; }
.btn-copy:hover { background: #a855f7; color: #fff; }

.btn-reset { background: #27272a; color: #f43f5e; border: 1px solid #f43f5e; }
.btn-reset:hover { background: #f43f5e; color: #fff; }

.btn-random { background: #27272a; color: #fff; }
.btn-random:hover { background: #3f3f46; }

.btn-download { background: #84cc16; color: #000; }
.btn-download:hover { background: #10b981; color: #fff; }

.hidden { display: none !important; }

/* Gradient Stop Card Style */
.stop-card {
  background: #0d0d0e;
  border: 1px solid #27272a;
  border-radius: 4px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Canvas Preview Area */
.preview-area {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #050505;
  padding: 40px;
  overflow: auto;
  position: relative;
}

.svg-container {
  box-shadow: 0 0 60px rgba(0,0,0,0.9);
  border: 1px solid #27272a;
  background-image: linear-gradient(45deg, #18181b 25%, transparent 25%), linear-gradient(-45deg, #18181b 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #18181b 75%), linear-gradient(-45deg, transparent 75%, #18181b 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  position: relative;
}

svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible !important;
}

.draggable-layer {
  cursor: grab;
  pointer-events: all !important;
}
.draggable-layer:active { cursor: grabbing; }

.active-selection {
  stroke: #84cc16 !important;
  stroke-width: 1px !important;
  stroke-dasharray: 4 4 !important;
  fill: none !important;
  pointer-events: all !important;
}

.hit-area {
  fill: rgba(255, 255, 255, 0.001) !important;
  stroke: none !important;
  pointer-events: all !important;
}