/* --- GLOBAL DESIGN --- */
body { margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; background-color: #2c3e50; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* TOOLBAR */
#toolbar {
  flex: 0 0 auto; height: 60px; background: #34495e; color: white; 
  display: flex; align-items: center; gap: 10px; padding: 0 10px; 
  border-bottom: 3px solid #111; z-index: 10; overflow-x: auto;
}

.group { 
    display: flex; align-items: center; gap: 5px; 
    border-right: 1px solid #5d6d7e; padding-right: 10px; margin-right: 5px; 
    height: 100%;
}
.group:last-child { border: none; }

/* INPUTS */
input[type="color"] { width:35px; height:35px; border:none; cursor:pointer; background:none; padding:0; }

/* BUTTONS */
button { 
    padding: 0 12px; border-radius: 4px; border: none; font-weight: bold; cursor: pointer; font-size: 14px; 
    display: inline-flex; align-items: center; justify-content: center; color: white; background: #3498db;
    height: 35px; white-space: nowrap; transition: 0.2s;
}
button:hover { transform: translateY(-2px); opacity: 0.9; }
button:disabled { background: #555 !important; color: #888; cursor: not-allowed; transform: none; }

.active { background: #f1c40f !important; color: black !important; box-shadow: 0 0 8px #f1c40f; }

/* COLORS */
.btn-pink { background: #e91e63; }
.btn-green { background: #27ae60; }
.btn-red { background: #e74c3c; }
.btn-purple { background: #9b59b6; }
.btn-teal { background: #1abc9c; }
.btn-blue { background: #2980b9; }

/* CANVAS AREA */
#container { flex: 1 1 auto; width: 100%; background-color: #95a5a6; position: relative; overflow: hidden; }